ビルトインモジュールの使い方 / how-to-use-builtin-module

a-blog cms zoom up 2022/03で話した発表内容です。

a-blog cms のビルトインモジュールについて体系的にご紹介しています。

当日行ったセッション内容は、a-blog cms の公式YouTubeチャンネルに上がっております。以下のURLからご覧ください。
https://youtu.be/lUavg8EdL0g?t=1311

Transcript

1. ビルトインモジュールの使い方 a-blog cms zoom up 2022/03 有限会社アップルップル 森田かすみ
2. 有限会社アップルップル @KasumiMorita 森田かすみ
3. & 基本的な仕組みについ & 応用した使い & 意外と知らない人が多い知識の共有など まず初めに 今日話すこと
4. ビルトインモジュールとは ナビゲーションモジュール エントリーリスト エントリーサマリー メディアバナー エントリー本文 トピックパス ビルトインモジュールとは
5. 基本的な仕組み
6. スニペット <!-- BEGIN_MODULE Entry_List --> <!-- BEGIN entry:loop --> {url} {title} <!-- END entry:loop --> <!-- END_MODULE Entry_List --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <ul class="acms-list-group"> <li><a href=" " class="acms-list-group-item"> </a></li> </ul> </div> 基本的な仕組み
7. モジュールIDを適用する <!-- BEGIN_MODULE Entry_List --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <ul class="acms-list-group"> <!-- BEGIN entry:loop --> <li><a href="{url}" class="acms-list-group-item">{title}</a></li> <!-- END entry:loop --> </ul> </div> id=”entry_list” モジュールIDとは モジュールに個別の設定を与える機能のこと。 きちんと設定することで表示するデータを制御することができます。 基本的な仕組み
8. 管理画面＞モジュールIDで新規モジュールIDを作成 A 表示するデータの制# A 件数設% A ページャーの表2 A メインイメージの表2 A 日付の表示 モジュールIDで設定できること など 基本的な仕組み
9. スニペットに
 変数を追加しよう
10. 変数表を確認しよう 便利なクイックサーチを使おう 9 ⌘KまたはCtrl+Kで起1 9 「:」の後にモジュール名で検索 スニペットに変数を追加しよう
11. 変数表の読み方 loopブロック スニペットに変数を追加しよう
12. 変数表の読み方 変数 変数が出力する値 スニペットに変数を追加しよう
13. 変数表の読み方 〇〇ブロック スニペットに変数を追加しよう
14. 変数表の読み方 veilブロック スニペットに変数を追加しよう
15. 変数を適用する <!-- BEGIN_MODULE Entry_List id=”entry_list” --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <ul class="acms-list-group"> <!-- BEGIN entry:loop --> <li><a href="{url}" class="acms-list-group-item ">{title}</a></li> <!-- END entry:loop --> </ul> </div> <!-- END_MODULE Entry_List --> {oddOrEven} スニペットに変数を追加しよう
16. <!-- BEGIN_MODULE Entry_List id=”entry_list” --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <ul class="acms-list-group"> <!-- BEGIN entry:loop --> <li><a href="{url}" class="acms-list-group-item <!-- END entry:loop --> </ul> </div> <!-- END_MODULE Entry_List --> <!-- BEGIN_IF [{oddOrEven}/eq/odd] --> {oddOrEven}<!-- END_IF - IFブロックと変数を合わせて使う スニペットに変数を追加しよう
17. IFブロックとブロックを合わせて使う <!-- BEGIN_MODULE Entry_List id=”entry_list” --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <ul class="acms-list-group"> <!-- BEGIN entry:loop --> <li><a href="{url}" class="acms-list-group-item">{title}</a></li> <!-- END entry:loop --> </ul> </div> <!-- END_MODULE Entry_List --> <!-- BEGIN_IF [<!-- BEGIN entry:loop -->1<!-- END entry:loop -->/eq/1] -->この文字はループブロックが動く時しか表示 スニペットに変数を追加しよう
18. モジュールIDの引数 意外としっかり知らない人が多い？
19. 引数について モジュールIDの[条件設定]タブにある引数を設定することで、そのモジュー ルで表示する情報を制御することができます。 モジュールIDの引数
20. URLコンテキストと固定値 URLコンテキストを優先する 固定値を指定する 閲覧しているページのURLコンテキストがモ ジュールの表示内容に反映されます。 そのモジュールがどのページに設置されていても 同じ内容を表示します。 モジュールIDの引数
21. URLコンテキストと固定値 同時に指定する URLコンテキストを優先する チェックボックスと固定値を両方 指定すると、閲覧ページのURLコ ンテキストが優先して反映されま す。 モジュールIDの引数
22. 併用する際の優先順位 1 URLコンテキストが優先になっていて、かつ現在表示しているページでURLコンテキストが 指定されている状態 2 引数が固定値で指定されている状態 モジュールIDの引数 ※優先順位を理解して固定値とURLコンテキストを優先にする設定を使い分けられると、より簡単にモ ジュールを設定できるパターンもあります。ぜひマスターして使ってみてください。
23. グローバル変数を使う 固定値にはグローバル変数が使用できます。 例）イベントスケジュール 3月8日に表示した様子。本日以降に開催され るイベントが表示されている。 モジュールIDの引数
24. ページャーを有効にしたい G9 [表示設定]タブの「ページャー」にチェックすD 9 [条件設定]タブの「ページ」のURLコンテキストをチェック 表示設定 条件設定 モジュールIDの引数
25. カスタムフィールドで絞り込みたい 例）ピックアップ表示 例）カスタムフィールド検索 チェックすることで、カスタムフィールド検索結果のURLコンテキスト通りに記事の表示を絞り込 みます。 モジュールIDの引数
26. 初期スコープ https://developer.a-blogcms.jp/document/moduleid/entry-2730.html モジュールIDの引数
27. 子階層のブログ・カテゴリー 子階層のデータもモジュールの条件に含める
28. 子階層のブログ・カテゴリーの設定 子階層のブログ・カテゴリー
29. ctx（外部コンテキスト） テンプレートからURLコンテキストを指定する
30. ctxとは <!-- BEGIN_MODULE Entry_List --> （...省略...） <!-- END_MODULE Entry_List --> ctx="bid/1/cid/2" ctx（外部コンテキスト）は、モジュールの条件設定にある引数の値をテン プレート側から指定できる機能です。 ビルトインモジュール、フィールドモジュールで使うことができます。 ctx（外部コンテキスト）
31. モジュールIDとctxの優先順位 1 モジュールIDの設定でURLコンテキストが優先になっていて、かつ現在表示しているページ でURLコンテキストが指定されている状態 2 モジュールIDの設定で引数が固定値で指定されている状態 3 テンプレートで外部コンテキスト（ctx）を設定した状態 モジュールIDと併用できるよう、優先順位が設定されています。 モ ジ ュ ー ル ID が 優 先 ctx（外部コンテキスト）
32. ctxの特徴：モジュールIDと違って変数を使用できる <!-- BEGIN_MODULE Entry_Body --> （...省略...） <!-- BEGIN_MODULE Entry_List （...省略...） <!-- END_MODULE Entry_List --> <!-- END_MODULE Entry_Body --> \ \ ctx="bid/%{BID}/cid/<!-- BEGIN categoryField -->{fieldCategoryId}<!-- END catego モジュールIDの設定画面では固定値・グローバル変数・URLコンテキスト の優先を指定できますが、エスケープ機能と合わせて使用すると他のモ ジュールの変数を使用できるのが特徴です。 ctx（外部コンテキスト）
33. モジュールID名に「ctx」が含まれていると
 ctx指定が読み込めなくなる https://developer.a-blogcms.jp/blog/news/entry-3305.html ctx（外部コンテキスト）
34. モジュールIDのキャッシュ パフォーマンスアップ！
35. 設定する モジュールID＞[条件設定]タブの 「キャッシュ」項目で指定できま す。分単位で指定可能です。 キャッシュを設定すると、モジュー ルの実行回数を減らすことができ、 ページ表示速度が改善されます。 モジュールIDのキャッシュ
36. キャッシュをおすすめするモジュール 頻繁にデータが変わらないモジュールで有効にすることをお勧めします。 フッターやヘッダーで使用しているモジュールなど。 Entry_Summaryなどのよく更新があるモジュールはおすすめしません。 f ナビゲーションモジュー’ f リンクモジュール モジュールIDのキャッシュ
37. キャッシュの削除タイミング G 該当のモジュールIDのキャッシュ時間の設定を経過したタ イミン G 該当のモジュールIDが更新されたタイミング つまり、例えばナビゲーションモジュールのデータを更新した際は、同時 にキャッシュを消してくれます。 モジュールIDのキャッシュ
38. よくある質問
39. 親ブログの情報を
 子ブログに表示したいのですが どうしたらいいでしょうか。 よくある質問 親ブログの情報を子ブログに表示したいのですがどうしたらいいでしょうか。
40. &$ 上階層のブログでモジュールIDを作 É$ グローバルにチェック 自然とルートにモジュールIDが多くなるので命名規則に注意が必要です 上階層のブログでモジュールIDを作成する よくある質問 親ブログの情報を子ブログに表示したいのですがどうしたらいいでしょうか。
41. モジュールIDの命名規則 9 「_（アンダーバー）」繋2 9 モジュール名_使用場所名（コンテンツの種類） のように命 名する 命名規則の例） → summary_top、summary_index、summary_recruit よくある質問 親ブログの情報を子ブログに表示したいのですがどうしたらいいでしょうか。
42. Entry_Photo、Entry_List、 Entry_Summary... どれを使えばいい？ よくある質問 Entry_Photo、Entry_List、Entry_Summary...どれを使えばいい？
43. リリース当初は機能が別れていたのですが、バージョンアップを重ねるた び、Entry_Summaryでほとんどの機能が利用できるようになりました。 Entry_List、Entry_Headline、Entry_Photo、Entry_Summaryの4つの中 で選択に迷ったらEntry_SummaryでOKです。 基本的にはEntry_SummaryでOK よくある質問 Entry_Photo、Entry_List、Entry_Summary...どれを使えばいい？
44. @KasumiMorita ありがとうございました！