Slide 1

Slide 1 text

ビルトインモジュールの使い方 a-blog cms zoom up 2022/03 有限会社アップルップル 森田かすみ

Slide 2

Slide 2 text

有限会社アップルップル @KasumiMorita 森田かすみ

Slide 3

Slide 3 text

& 基本的な仕組みについ & 応用した使い & 意外と知らない人が多い知識の共有など まず初めに 今日話すこと

Slide 4

Slide 4 text

ビルトインモジュールとは ナビゲーションモジュール エントリーリスト エントリーサマリー メディアバナー エントリー本文 トピックパス ビルトインモジュールとは

Slide 5

Slide 5 text

基本的な仕組み

Slide 6

Slide 6 text

スニペット {url} {title}
@include("/admin/module/setting.html")
基本的な仕組み

Slide 7

Slide 7 text

モジュールIDを適用する
@include("/admin/module/setting.html")
id=”entry_list” モジュールIDとは モジュールに個別の設定を与える機能のこと。 きちんと設定することで表示するデータを制御することができます。 基本的な仕組み

Slide 8

Slide 8 text

管理画面>モジュールIDで新規モジュールIDを作成 A 表示するデータの制# A 件数設% A ページャーの表2 A メインイメージの表2 A 日付の表示 モジュールIDで設定できること など 基本的な仕組み

Slide 9

Slide 9 text

スニペットに
 変数を追加しよう

Slide 10

Slide 10 text

変数表を確認しよう 便利なクイックサーチを使おう 9 ⌘KまたはCtrl+Kで起1 9 「:」の後にモジュール名で検索 スニペットに変数を追加しよう

Slide 11

Slide 11 text

変数表の読み方 loopブロック スニペットに変数を追加しよう

Slide 12

Slide 12 text

変数表の読み方 変数 変数が出力する値 スニペットに変数を追加しよう

Slide 13

Slide 13 text

変数表の読み方 〇〇ブロック スニペットに変数を追加しよう

Slide 14

Slide 14 text

変数表の読み方 veilブロック スニペットに変数を追加しよう

Slide 15

Slide 15 text

変数を適用する
@include("/admin/module/setting.html")
{oddOrEven} スニペットに変数を追加しよう

Slide 16

Slide 16 text

@include("/admin/module/setting.html")

Slide 17

Slide 17 text

IFブロックとブロックを合わせて使う
@include("/admin/module/setting.html")
1/eq/1] -->この文字はループブロックが動く時しか表示 スニペットに変数を追加しよう

Slide 18

Slide 18 text

モジュールIDの引数 意外としっかり知らない人が多い?

Slide 19

Slide 19 text

引数について モジュールIDの[条件設定]タブにある引数を設定することで、そのモジュー ルで表示する情報を制御することができます。 モジュールIDの引数

Slide 20

Slide 20 text

URLコンテキストと固定値 URLコンテキストを優先する 固定値を指定する 閲覧しているページのURLコンテキストがモ ジュールの表示内容に反映されます。 そのモジュールがどのページに設置されていても 同じ内容を表示します。 モジュールIDの引数

Slide 21

Slide 21 text

URLコンテキストと固定値 同時に指定する URLコンテキストを優先する チェックボックスと固定値を両方 指定すると、閲覧ページのURLコ ンテキストが優先して反映されま す。 モジュールIDの引数

Slide 22

Slide 22 text

併用する際の優先順位 1 URLコンテキストが優先になっていて、かつ現在表示しているページでURLコンテキストが 指定されている状態 2 引数が固定値で指定されている状態 モジュールIDの引数 ※優先順位を理解して固定値とURLコンテキストを優先にする設定を使い分けられると、より簡単にモ ジュールを設定できるパターンもあります。ぜひマスターして使ってみてください。

Slide 23

Slide 23 text

グローバル変数を使う 固定値にはグローバル変数が使用できます。 例)イベントスケジュール 3月8日に表示した様子。本日以降に開催され るイベントが表示されている。 モジュールIDの引数

Slide 24

Slide 24 text

ページャーを有効にしたい G9 [表示設定]タブの「ページャー」にチェックすD 9 [条件設定]タブの「ページ」のURLコンテキストをチェック 表示設定 条件設定 モジュールIDの引数

Slide 25

Slide 25 text

カスタムフィールドで絞り込みたい 例)ピックアップ表示 例)カスタムフィールド検索 チェックすることで、カスタムフィールド検索結果のURLコンテキスト通りに記事の表示を絞り込 みます。 モジュールIDの引数

Slide 26

Slide 26 text

初期スコープ https://developer.a-blogcms.jp/document/moduleid/entry-2730.html モジュールIDの引数

Slide 27

Slide 27 text

子階層のブログ・カテゴリー 子階層のデータもモジュールの条件に含める

Slide 28

Slide 28 text

子階層のブログ・カテゴリーの設定 子階層のブログ・カテゴリー

Slide 29

Slide 29 text

ctx(外部コンテキスト) テンプレートからURLコンテキストを指定する

Slide 30

Slide 30 text

ctxとは (...省略...) ctx="bid/1/cid/2" ctx(外部コンテキスト)は、モジュールの条件設定にある引数の値をテン プレート側から指定できる機能です。 ビルトインモジュール、フィールドモジュールで使うことができます。 ctx(外部コンテキスト)

Slide 31

Slide 31 text

モジュールIDとctxの優先順位 1 モジュールIDの設定でURLコンテキストが優先になっていて、かつ現在表示しているページ でURLコンテキストが指定されている状態 2 モジュールIDの設定で引数が固定値で指定されている状態 3 テンプレートで外部コンテキスト(ctx)を設定した状態 モジュールIDと併用できるよう、優先順位が設定されています。 モ ジ ュ ー ル ID が 優 先 ctx(外部コンテキスト)

Slide 32

Slide 32 text

ctxの特徴:モジュールIDと違って変数を使用できる (...省略...) \ \ ctx="bid/%{BID}/cid/{fieldCategoryId}

Slide 33

Slide 33 text

モジュールID名に「ctx」が含まれていると
 ctx指定が読み込めなくなる https://developer.a-blogcms.jp/blog/news/entry-3305.html ctx(外部コンテキスト)

Slide 34

Slide 34 text

モジュールIDのキャッシュ パフォーマンスアップ!

Slide 35

Slide 35 text

設定する モジュールID>[条件設定]タブの 「キャッシュ」項目で指定できま す。分単位で指定可能です。 キャッシュを設定すると、モジュー ルの実行回数を減らすことができ、 ページ表示速度が改善されます。 モジュールIDのキャッシュ

Slide 36

Slide 36 text

キャッシュをおすすめするモジュール 頻繁にデータが変わらないモジュールで有効にすることをお勧めします。 フッターやヘッダーで使用しているモジュールなど。 Entry_Summaryなどのよく更新があるモジュールはおすすめしません。 f ナビゲーションモジュー’ f リンクモジュール モジュールIDのキャッシュ

Slide 37

Slide 37 text

キャッシュの削除タイミング G 該当のモジュールIDのキャッシュ時間の設定を経過したタ イミン G 該当のモジュールIDが更新されたタイミング つまり、例えばナビゲーションモジュールのデータを更新した際は、同時 にキャッシュを消してくれます。 モジュールIDのキャッシュ

Slide 38

Slide 38 text

よくある質問

Slide 39

Slide 39 text

親ブログの情報を
 子ブログに表示したいのですが どうしたらいいでしょうか。 よくある質問 親ブログの情報を子ブログに表示したいのですがどうしたらいいでしょうか。

Slide 40

Slide 40 text

&$ 上階層のブログでモジュールIDを作 É$ グローバルにチェック 自然とルートにモジュールIDが多くなるので命名規則に注意が必要です 上階層のブログでモジュールIDを作成する よくある質問 親ブログの情報を子ブログに表示したいのですがどうしたらいいでしょうか。

Slide 41

Slide 41 text

モジュールIDの命名規則 9 「_(アンダーバー)」繋2 9 モジュール名_使用場所名(コンテンツの種類) のように命 名する 命名規則の例) → summary_top、summary_index、summary_recruit よくある質問 親ブログの情報を子ブログに表示したいのですがどうしたらいいでしょうか。

Slide 42

Slide 42 text

Entry_Photo、Entry_List、 Entry_Summary... どれを使えばいい? よくある質問 Entry_Photo、Entry_List、Entry_Summary...どれを使えばいい?

Slide 43

Slide 43 text

リリース当初は機能が別れていたのですが、バージョンアップを重ねるた び、Entry_Summaryでほとんどの機能が利用できるようになりました。 Entry_List、Entry_Headline、Entry_Photo、Entry_Summaryの4つの中 で選択に迷ったらEntry_SummaryでOKです。 基本的にはEntry_SummaryでOK よくある質問 Entry_Photo、Entry_List、Entry_Summary...どれを使えばいい?

Slide 44

Slide 44 text

@KasumiMorita ありがとうございました!