a-blog cmsのきほん2 〜そして上級者へ〜

『a-blog cmsのきほん』の続編です。
モジュールと変数について解説しています。

a-blog cmsのきほん
https://speakerdeck.com/kwbmnb/a-blog-cmsfalsekihon

Transcript

1. 勉強会 in 富山 2018
2. 勉強会 in 富山 2018
3. 勉強会 in 富山 2018
4. 勉強会 in 富山 2018
5. 勉強会 in 富山 2018 など
6. 勉強会 in 富山 2018 など ※テーマ名は任意に設定
7. 勉強会 in 富山 2018 ※テーマ名は任意に設定 テーマを使用するには、 管理ページ > コンフィグ > テーマ設定 から 複製して任意の名前をつけたフォルダを選択します。
8. 勉強会 in 富山 2018 カスタマイズの流れ
9. 勉強会 in 富山 2018 
   
   ςΩετςΩετςΩετςΩετςΩετ 
   
   ςΩετςΩετςΩετςΩετςΩετ 
   
   ςΩετςΩετςΩετςΩετςΩετ ςΩετ ςΩετ デフォルトの状態 カスタマイズ中の画面
10. 勉強会 in 富山 2018 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ ςΩετ ςΩετ デフォルトの状態 カスタマイズ中の画面
11. 勉強会 in 富山 2018
12. 勉強会 in 富山 2018 ςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ ςΩετ
13. 勉強会 in 富山 2018 ςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ ςΩετ 普通の HTMLコーディング モジュールを導入した HTMLコーディング
14. 勉強会 in 富山 2018 ςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ ςΩετ 普通の HTMLコーディング モジュールを導入した HTMLコーディング もちろん、こちらも モジュールを導入した HTMLコーディングに しても良い
15. 勉強会 in 富山 2018 ςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ 
    
    ςΩετςΩετςΩετςΩετςΩετ ςΩετ 普通の HTMLコーディング モジュールを導入した HTMLコーディング もちろん、こちらも モジュールを導入した HTMLコーディングに しても良い 用途に応じたマークアップ
16. 勉強会 in 富山 2018
17. 勉強会 in 富山 2018
18. 勉強会 in 富山 2018 簡単に修正・編集できる
19. 勉強会 in 富山 2018
20. 勉強会 in 富山 2018 モジュールの使い方を理解するのにけっこう時間が掛かりました
21. 勉強会 in 富山 2018
22. 勉強会 in 富山 2018
23. 勉強会 in 富山 2018 エントリーサマリー →エントリーの一覧を表示
24. 勉強会 in 富山 2018 エントリーヘッドライン →エントリーの一覧（主にタイトルなど）を表示
25. 勉強会 in 富山 2018 バナー →表示させたい画像を登録＆表示
26. 勉強会 in 富山 2018 スケジュール →スケジュール（内容は管理ページで編集）を表示
27. 勉強会 in 富山 2018 画像の表示関連は ほぼバナーモジュールでいけます バナー →表示させたい画像を登録＆表示
28. 勉強会 in 富山 2018 リンク →表示させたいリンクを登録＆表示
29. 勉強会 in 富山 2018
30. 勉強会 in 富山 2018 例題
31. 勉強会 in 富山 2018 例題 エントリーヘッドライン
32. 勉強会 in 富山 2018 ではこれは？
33. 勉強会 in 富山 2018 ではこれは？
34. 勉強会 in 富山 2018
35. 勉強会 in 富山 2018
36. 勉強会 in 富山 2018
37. 勉強会 in 富山 2018
38. 勉強会 in 富山 2018
39. 勉強会 in 富山 2018
40. 勉強会 in 富山 2018
41. 勉強会 in 富山 2018
42. 勉強会 in 富山 2018
43. 勉強会 in 富山 2018 勉強会 in 富山 2018
44. 勉強会 in 富山 2018
45. 勉強会 in 富山 2018
46. 勉強会 in 富山 2018 勉強会 in 富山 2018
47. 勉強会 in 富山 2018 勉強会 in 富山 2018
48. 勉強会 in 富山 2018 勉強会 in 富山 2018
49. 勉強会 in 富山 2018 エントリーを作成して 公開したクマ
50. 勉強会 in 富山 2018 勉強会 in 富山 2018 ↑クマが公開したエントリー
51. 勉強会 in 富山 2018 勉強会 in 富山 2018
52. 勉強会 in 富山 2018 勉強会 in 富山 2018 システム
53. 勉強会 in 富山 2018 勉強会 in 富山 2018
54. 勉強会 in 富山 2018 勉強会 in 富山 2018
55. 勉強会 in 富山 2018 勉強会 in 富山 2018 ↑いろんなデータを付けていくシステムさん ※上級者の方へ 一応、エントリーIDなどを付与しているイメージです。
56. 勉強会 in 富山 2018 勉強会 in 富山 2018
57. 勉強会 in 富山 2018 勉強会 in 富山 2018
58. 勉強会 in 富山 2018
59. 勉強会 in 富山 2018
60. 勉強会 in 富山 2018
61. 勉強会 in 富山 2018 勉強会 in 富山 2018
62. 勉強会 in 富山 2018 勉強会 in 富山 2018
63. 勉強会 in 富山 2018
64. 勉強会 in 富山 2018
65. 勉強会 in 富山 2018
66. 勉強会 in 富山 2018
67. 勉強会 in 富山 2018
68. 勉強会 in 富山 2018
69. 勉強会 in 富山 2018
70. 勉強会 in 富山 2018
71. 勉強会 in 富山 2018 勉強会 in 富山 2018 たくさんいた
72. 勉強会 in 富山 2018
73. 勉強会 in 富山 2018
74. 勉強会 in 富山 2018
75. 勉強会 in 富山 2018
76. 勉強会 in 富山 2018
77. 勉強会 in 富山 2018 マストです。
78. 勉強会 in 富山 2018
79. 勉強会 in 富山 2018
80. 勉強会 in 富山 2018 リンクモジュールのスニペット （にidを追加したもの） ID
81. 勉強会 in 富山 2018
82. 勉強会 in 富山 2018 勉強会 in 富山 2018
83. 勉強会 in 富山 2018 勉強会 in 富山 2018
84. 勉強会 in 富山 2018
85. 勉強会 in 富山 2018
86. 勉強会 in 富山 2018
87. 勉強会 in 富山 2018
88. 勉強会 in 富山 2018
89. 勉強会 in 富山 2018 ϦϯΫ (PPHMF "NB[PO
90. 勉強会 in 富山 2018 リンク先URL： https://www.google.co.jp/ ϦϯΫ (PPHMF "NB[PO 表示される文字
91. 勉強会 in 富山 2018 \VSM^ IUUQTXXXHPPHMFDPKQ IUUQTXXXBNB[PODPKQ IUUQTEFWFMPQFSBCMPHDNTKQ IUUQTXXXHPPHMFDPKQ IUUQTXXXBNB[PODPKQ
92. 勉強会 in 富山 2018 勉強会 in 富山 2018
93. 勉強会 in 富山 2018
94. 勉強会 in 富山 2018
95. 勉強会 in 富山 2018
96. 勉強会 in 富山 2018 勉強会 in 富山 2018
97. 勉強会 in 富山 2018 変数表 管理ページ > コンフィグ（モジュールのところ） OR a-blog cmsデベロッパーサイトのビルトインモジュールのページ
98. 勉強会 in 富山 2018 変数表 管理ページ > コンフィグ（モジュールのところ） OR a-blog cmsデベロッパーサイトのビルトインモジュールのページ
99. 勉強会 in 富山 2018 変数表 エントリーサマリー エントリーリスト
100. 勉強会 in 富山 2018 変数表 エントリーサマリー エントリーリスト
101. 勉強会 in 富山 2018 変数表 リンク
102. 勉強会 in 富山 2018 変数表 リンク 変数が少ないモジュールもある
103. 勉強会 in 富山 2018 変数表 エントリーサマリー エントリーリスト date(日付)関連
104. 勉強会 in 富山 2018 変数表 エントリーサマリー エントリーリスト date(日付)関連
105. 勉強会 in 富山 2018
106. date(日付)関連 勉強会 in 富山 2018
107. 勉強会 in 富山 2018 じん
108. 勉強会 in 富山 2018 変数表 エントリーリスト date(日付)関連 エントリーサマリー エントリーの公開日をサイトに 表示して欲しいんですが… たとえば
109. 勉強会 in 富山 2018 変数表 エントリーリスト date(日付)関連 エントリーサマリー 『公開日』の変数をもっている モジュールを探そう！
110. 勉強会 in 富山 2018 変数表 エントリーリスト date(日付)関連 エントリーサマリー 公開日の変数がある！ 公開日の変数がない！
111. 勉強会 in 富山 2018 変数表 エントリーリスト date(日付)関連 エントリーサマリー 公開日の変数がある！ 公開日の変数がない！ 『エントリーサマリー』モジュールを作成して 変数{sdate}を記述すればエントリー公開日が表示される！
112. 勉強会 in 富山 2018 変数表 date(日付)関連 『エントリーサマリー』モジュールを作成して 変数{sdate}を記述すればエントリー公開日が表示される！ ެ։೔ ೥݄೔ʢ౔ʣ
113. 勉強会 in 富山 2018 変数表 date(日付)関連 『エントリーサマリー』モジュールを作成して 変数{sdate}を記述すればエントリー公開日が表示される！ こんな感じで表示できる ೥݄೔ʢ౔ʣ ެ։೔
114. 勉強会 in 富山 2018 変数表 date(日付)関連 『エントリーサマリー』モジュールを作成して 変数{sdate}を記述すればエントリー公開日が表示される！ こんな感じ
115. 勉強会 in 富山 2018 勉強会 in 富山 2018
116. 勉強会 in 富山 2018
117. 勉強会 in 富山 2018 変数は２種類あります
118. 勉強会 in 富山 2018
119. 勉強会 in 富山 2018
120. 勉強会 in 富山 2018 そのまま記述しても そのまま記述したら
121. 勉強会 in 富山 2018
122. 勉強会 in 富山 2018 どういうこと？
123. 勉強会 in 富山 2018 変数 グローバル変数 【例】↓リンクモジュール
124. 勉強会 in 富山 2018 変数 グローバル変数
125. 勉強会 in 富山 2018 変数 グローバル変数
126. 勉強会 in 富山 2018 変数 グローバル変数
127. 勉強会 in 富山 2018 変数 グローバル変数
128. 勉強会 in 富山 2018 変数 グローバル変数 これも無いと 変数はデータ展開されない
129. 勉強会 in 富山 2018 変数 グローバル変数 グローバル変数はそのまま記述しても大丈夫！
130. 勉強会 in 富山 2018 グローバル変数 ためしにブラウザで 開いてみると、
131. 勉強会 in 富山 2018 グローバル変数 
     ϗʔϜ ためしにブラウザで 開いてみると、 と表示されます。 ※リンク先が『（ルートブログの）トップページ』になっている。
132. 勉強会 in 富山 2018 変数 一方、変数をそのまま記述してみると‥ 【例】↓リンクモジュールから<!-- BEGIN〜〜>を省いたもの
133. 勉強会 in 富山 2018 変数 【例】↓リンクモジュールから<!-- BEGIN〜〜>を省いたもの \OBNF^
134. 勉強会 in 富山 2018 変数 【例】↓リンクモジュールから<!-- BEGIN〜〜>を省いたもの 意図した通りに表示されない！ \OBNF^ !? (PPHMF
     "NB[PO ↓こんな感じになって欲しいのに
135. 勉強会 in 富山 2018 変数 囲む
136. 勉強会 in 富山 2018 変数 (PPHMF
     "NB[PO
137. 勉強会 in 富山 2018 変数 変数は <!-- BEGIN〜〜 > などで囲めば表示される (PPHMF
     "NB[PO
138. 勉強会 in 富山 2018 【変数を何で囲むか？】 については変数表に書いてあります。
139. 勉強会 in 富山 2018 <!-- BEGIN_MODULE Entry_Summary id="XXX" --> <!-- BEGIN unit:loop --> <!-- BEGIN entry:loop --> {title} <!-- END entry:loop --> <!-- END unit:loop --> <!-- END_MODULE Entry_Summary --> 例えば、 『エントリーサマリー』モジュールで　 エントリータイトル{title}を 表示させるには エントリーサマリー ↑ と、書かないと {title}は展開しません。
140. 勉強会 in 富山 2018 モジュール以外の変数を出力
141. 勉強会 in 富山 2018 ブログフィールド
142. 勉強会 in 富山 2018 ブログフィールド 管理ページ > ブログ > カスタム設定
143. 勉強会 in 富山 2018 ブログフィールド 管理ページ > ブログ > カスタム設定 このように設定・編集できる箇所があります。
144. 勉強会 in 富山 2018 ブログフィールド これらの情報をサイト上に表示するには モジュールと同じように 変数をHTMLファイルに記述します
145. 勉強会 in 富山 2018 ブログフィールド
146. 勉強会 in 富山 2018 ブログフィールド
147. 勉強会 in 富山 2018 ブログフィールド
148. 勉強会 in 富山 2018 ブログフィールド ↓この辺の<BEGIN〜〜>も変数を囲むハタです。
149. 勉強会 in 富山 2018 ブログフィールド ↓この辺の<BEGIN〜〜>も変数を囲むハタです。 ここまで見てきた普通のモジュール*以外に、 この『フィールド』系モジュールの変数出力もよく使います。便利です。 ※正式名称はビルトインモジュールと言います。
150. 勉強会 in 富山 2018 ブログフィールド
151. 勉強会 in 富山 2018 ブログフィールド ちなみにサイト上ではこのように表示されています。 管理ページ > ブログ > カスタム設定 の情報を書き換えると、こちらも同期して書き換わります。
152. 勉強会 in 富山 2018 ブログフィールド \DPNQBOZ@OBNF^ \[JQ^ \BEESFTT^ \UFM^ \TJUF@GPPUFS^ HTMLファイルに記述した{company_name}などの変数が展開されて 表示されています。
153. 勉強会 in 富山 2018 ブログフィールド
154. 勉強会 in 富山 2018 ブログフィールド ↑ちなみに、:veil は 『変数{XXX}に 何も入っていなかったら表示しない』 という意味です。
155. 勉強会 in 富山 2018 ブログフィールド つまり こんな風にデータが空なら何も出力されないと いうことです。
156. 勉強会 in 富山 2018 ブログフィールド 管理ページ > ブログ > カスタム設定
157. 勉強会 in 富山 2018 ブログフィールド 管理ページ > ブログ > カスタム設定 '"9൪߸
158. 勉強会 in 富山 2018 ブログフィールド 管理ページ > ブログ > カスタム設定 ちなみにカスタマイズできます。 '"9൪߸ カスタムフィールド ݕࡧ
159. 勉強会 in 富山 2018 勉強会 in 富山 2018
160. 勉強会 in 富山 2018
161. 勉強会 in 富山 2018
162. 勉強会 in 富山 2018 スニペットには すべての変数が 用意されているわけでは ありません。 注
163. 勉強会 in 富山 2018 エントリーサマリー
164. 勉強会 in 富山 2018 エントリーサマリー スニペットは 『ひとまず、一通り揃えましたセット』なので、 表示させたい内容に合わせて 変数を追加・記述します。 逆に、必要のない内容（変数）は スニペットから削除して使用します。 【ポイント】
165. 勉強会 in 富山 2018
166. 勉強会 in 富山 2018 ↑スライドの はじめの方で出した問題です。
167. 勉強会 in 富山 2018 エントリーの日付 カテゴリー名 エントリーのタイトル 新着表示
168. 勉強会 in 富山 2018 エントリーの日付 カテゴリー名 エントリーのタイトル 新着表示 の変数を持っているモジュールから選べばどれでもOK
169. 勉強会 in 富山 2018 ↑これは『エントリーサマリー』を使いました。
170. 勉強会 in 富山 2018 勉強会 in 富山 2018 重要
171. 勉強会 in 富山 2018 勉強会 in 富山 2018 ありがちな誤解 （特にビギナーさんには） 重要
172. 勉強会 in 富山 2018 データの出し入れと CSS/JSは別
173. 勉強会 in 富山 2018 ՆقٳՋͷ͓஌Βͤ １.モジュールの作成〜設置 2.データのアウトプット ՆقٳՋͷ͓஌Βͤ 3.CSSでスタイルを設定する
174. 勉強会 in 富山 2018 １.モジュールの作成〜設置 2.データのアウトプット 3.CSSやJSで スタイルや動きを設定する
175. 勉強会 in 富山 2018 １.モジュールの作成〜設置 2.データのアウトプット 3.CSSやJSで スタイルや動きを設定する 例えば、画像をスライドにしたい場合は、 モジュールとスライド用JavaScript等を 組み合わせる必要があります。
176. 勉強会 in 富山 2018 勉強会 in 富山 2018 つまり
177. 勉強会 in 富山 2018 モジュールの設定画面（↑これはリンクモジュール）
178. 勉強会 in 富山 2018 \OBNF^ (PPHMF ↑HTMLファイルに記述した変数 モジュールの設定画面（↑これはリンクモジュール） ↑出力されたテキスト
179. 勉強会 in 富山 2018 \OBNF^ (PPHMF ↑HTMLファイルに記述した変数 モジュールの設定画面（↑これはリンクモジュール） ↑出力されたテキスト ↓クリックするとこのURLに飛ぶ
180. 勉強会 in 富山 2018 \OBNF^ (PPHMF 出力されるのは生のデータ
181. 勉強会 in 富山 2018 \OBNF^ (PPHMF なので、実際には↓のように記述して B
     ISFG\VSM^
     DMBTTMJOLT@@UJUMF\OBNF^B
182. 勉強会 in 富山 2018 \OBNF^ (PPHMF B
     ISFG\VSM^
     DMBTTMJOLT@@UJUMF\OBNF^B なので、実際には↓のように記述して MJOLT@@UJUMF\
     
     
     
     
     GPOUTJ[FQY
     
     
     
     
     DPMPSSFE
     ^ CSSでスタイルを設定して
183. 勉強会 in 富山 2018 (PPHMF
184. 勉強会 in 富山 2018 (PPHMF 表示！ （スタイルつきで）
185. 勉強会 in 富山 2018 実際には前述のとおり <!-- BEGIN〜〜　-->や ループ文などが必要なので ↓のような記述となります。
186. 勉強会 in 富山 2018 モジュール開始宣言文 ループ開始宣言文* 変数 モジュール終了宣言文 ループ終了宣言文 実際には前述のとおり <!-- BEGIN〜〜　-->や ループ文などが必要なので ↓のような記述となります。
187. 勉強会 in 富山 2018 モジュール開始宣言文 ループ開始宣言文* 変数 モジュール終了宣言文 ループ終了宣言文 ループとは？ データの出力をループさせている箇所です。 ループのおかげで、ブラウザ上での入力を複数表示できています。 実際には前述のとおり <!-- BEGIN〜〜　-->や ループ文などが必要なので ↓のような記述となります。
188. 勉強会 in 富山 2018 実際には前述のとおり <!-- BEGIN〜〜　-->などが必要なので ↓のような記述となります。 ↑<li>〜〜</li>は１行しかないのに (PPHMF
     "NB[PO ループ文のおかげで、設定したリンクが二つ（またはそれ以上）表示される！
189. 勉強会 in 富山 2018
190. 勉強会 in 富山 2018