a-sap（a-blog cms札幌勉強会）第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。

1. 口田 聖子 :: WebbingStudio
2016.10.22（Sat）@ サッポロカフェ2Fスペース
10
モジュールIDを理解する

2. 口田 聖子（うぇびん）
Webエンジニア
CMSアドバイザー
a-blog cmsエバンジェリスト

3. 今年も合宿行ってきます

4. 合宿のハンズオン資料は公開されてます
https://developer.a-blogcms.jp/blog/acmscamp/

5. 今回のお題

6. モジュールについて勉強しよう
• モジュール・モジュールIDとは（15分）
• ablogcms.ioでのハンズオン
•モジュールを使ってブログの情報を出してみる
•モジュールごとの違いを比較してみる
•モジュールIDによる表示条件の変更 etc…
• 質疑応答（15分）

7. モジュールとは

8. Entry_Body Category_List Topicpath
a-blog cmsに登録した情報を
呼び出す部品
エントリーの
詳細な情報を
呼び出します
カテゴリーの
一覧を
呼び出します
現在のページの
パンくずを
呼び出します

9. 公式ドキュメントはこちら
https://developer.a-blogcms.jp/reference/latest/built_in.html

10. 補足
正確には「ビルトインモジュール」といいます
「モジュール」は他にも何種類かあるのですが
ビルトインモジュールのことを指す場合は
単に「モジュール」というのが一般的です
なので今回は
ビルトインモジュールのみの説明だと思ってください
「タッチモジュール」や「フィールドモジュール」はタグ名で呼ぶことが多いです
（Touch_Topで…とか）

11. テーマ内にコードを貼り付けて利用する
サマリー
リスト
バナー
ナビゲーション

12. <!-- BEGIN_MODULE Entry_Body —>
～
<!-- END_MODULE Entry_Body —>
モジュールタグの書式
モジュール名
＝このモジュールの役割
HTMLのコメントと同じ書き方です

13. MTやWordPressだと
<mt:Entries> ～ </mt:Entries>
<?php if(have_posts()):
while(have_posts()): the_post(); ?>
～
<?php endwhile; endif;?>
これな

14. <!-- BEGIN_MODULE Entry_Body —>
・・・
<h2> {title} </h2>
・・・
<!-- END_MODULE Entry_Body —>
モジュール内の変数
変数は波カッコで囲まれています

15. MT・WordPressとの違い

16. 表示条件はモジュールに書かない
テーマ内のモジュール 管理ページ
どのモジュールを使うか
マークアップをどうするか
何の情報を表示するか
どのような条件で絞り込むか
何件表示するか
サムネイルの大きさ

17. Entry_Body Entry_Summary Entry_Headline
「エントリーの呼び出し」に関する
モジュールが複数ある
ユニットを含めた
エントリーの
情報すべて
エントリーの
概要と
サムネイル
エントリーの
タイトルと
日付のみ

18. Entry_Body Entry_Summary Entry_Headline
モジュールによって
呼び出せる情報の範囲が異なる
ほぼすべて
呼び出せます
本文は
呼び出せません
タイトルと日付
以外は
呼び出せません

19. Entry_Body
Bodyだけ使えばいいのでは…
ほぼすべて
呼び出せます
ガビーン

20. Entry_Bodyの変数はとても多い
https://developer.a-blogcms.jp/reference/latest/acms-code/vars/Entry_Body.html
他のモジュールとは変数名が異なることも…

21. Entry_Body
使い分けのすすめ
細やかな
情報が必要な
詳細ページで！
重要な情報だけでよい
トップページや
一覧ページで！
Body以外

22. モジュールIDとは

23. 外観を指定
文字を白、背景をオレンジ
影を付ける
ページ内の役割を指定
a要素
他のページへ移動する
HTMLとCSSを思い出そう
HTML
ボタン
CSS

24. こう書くのは良くないですよね？
<a style=“
display: inline-block;
color: white;
background-color: orange;
text-decoration: none;
・・・
”>ボタン</a> 指定が多いとわかりにくい
コードを使いまわせない
修正が面倒

25. こう書きますよね？
CSSHTML
<a class=“btn”>
ボタン</a>
a.btn {
display: inline-block;
color: white;
background-color: orange;
text-decoration: none;
・・・
}

26. a-blog cmsのモジュールも
この考え方で作られています

27. モジュールIDの使い方

28. モジュールにIDを付ける
<!-- BEGIN_MODULE Entry_Summary ↩︎
id=“summary_news_recent” —>
・・・
<!--END_MODULE Entry_Summary —>
テーマ内での役割がわかる任意の名前
（この例ではニュースブログの新着）

29. 管理ページでモジュールIDを作る
同じモジュールを選択
同じ名前を入力

30. 関連付けられました
テーマ内のモジュール 管理ページ
summary_news_recent

31. 以降は管理ページで制御できる
私は「ニュース」カテゴリーの
エントリーだけを
表示します

32. 公開画面からでも制御できる

33. モジュールIDの利点
• 機能の可視化
•どのような役割を持っているか、ひと目でわかる
• 再利用性の向上
•コード内に表示条件を書いていないので
二回目以降の制作でコピー・ペーストで使い回せる
•メンテナンス性の向上
• Webの知識がない担当者でも変更できる
• FTPクライアントがなくても変更できる

34. モジュールIDの利点
• 機能の可視化
•どのような役割を持っているか、ひと目でわかる
• 再利用性の向上
•コード内に表示条件を書いていないので
二回目以降の制作でコピー・ペーストで使い回せる
•メンテナンス性の向上
• Webの知識がない担当者でも変更できる
• FTPクライアントがなくても変更できる
公開後も簡単に
サイトの表示状態を調整できる
＝コンテンツマーケティングに強い

35. ablogcms.ioでの
ハンズオン

36. テスト環境の準備

37. acms_inport_test_500
https://github.com/webbingstudio/acms_inport_test_500
緑のボタンを押してダウンロードしてください

38. CSVインポートをする
• 管理ページ：メニュー「インポート」を選択
（下の方にあります。スクロールしてください）
「CSV」の行の右端にあるボタンを押す
• ダウンロードした圧縮ファイルに入っていた
「acms_inport_500_utf8.csv」をインポート
（カテゴリーの指定はしない）
• メニュー「エントリー」を選択
テストエントリーが増えていることを確認

39. カテゴリーを作る
• メニュー「カテゴリー」を選択
カテゴリーを新規作成
表示名：テスト コードネーム：test
• メニュー「エントリー」を選択
エントリーを10件くらい、作成したカテゴリーに入れる
• 以下のURLへ移動
公開ページのURL/test/
• テストエントリーの一覧が表示されているのを確認

40. モジュールを試す

41. モジュールを使って
ブログの情報を出してみる
• 公式ドキュメントのサンプルコードをコピー
• テーマに貼り付けてみる
• 変数表にあるいろいろな変数を追加してみる

42. モジュールごとの違いを
比較してみる
• Entry_Summaryのコードを…
•Entry_Headlineに変えたらどうなる？
•Entry_Listにしたら？
• クリックしたときの設定項目の違いを比較
• Entry_ArchiveListは何も表示されない
（モジュールIDを指定しないと設定できないモジュールもある）

43. モジュールIDによる
表示条件の変更
• まったく同じEntry_Summaryのコードを
テーマ内に二回貼り付ける
• 表示結果が同じことを確認
• それぞれ違うモジュールIDをつけて
設定を変えてみると…？

44. 多彩な設定項目を試す
• カテゴリー絞り込み
• フィールド絞り込み
例1：field_test01/1
例2：field_test02/かきくけこ
• 期間絞り込み
• 表示順
• 件数
• オフセット
• インデキシング
• ループ内クラス
• ページャー表示
etc…

45. おつかれさまでした
http://webbingstudio.com/