a-blog cms Ver. 3.2 のV2モジュールとTwig記法を導入してみて

a-blog cms Ver. 3.2 より導入された「Twig記法」および「V2モジュール」。 本スライドは、従来のa-blog cms標準記法で制作された既存テーマを、実際にTwig化・V2モジュール化した際に、ここは気をつけた方がいいと感んじたポイントなどをピックアップしたセッション資料です。

これからTwig導入を検討されている方や、a-blog cms の新しい開発スタイルに興味がある方の参考になれば幸いです。

## 主なトピック
- Twigとは？V2モジュールとは？
- Twig / V2モジュール、もう触りましたか？
- Twig移行って急ぐべき？（開発チームへのQ&A）
- Twig導入時の2つの強い味方
- Twig対応時に気をつけたいこと 3選
- プチストレスフリーになったこと 3選 + α
- さいごに

Transcript

1. a-blog cms Ver. 3.2 の
 V2モジュールと Twig記法を
 導入してみて a-blog cms Training Camp 2025 2025-11-21　菅原 彩 01
2. 自己紹介  名前：菅原 彩（しゅがー）  所属：有限会社アップルップル  職種：フロントエンドエンジニア 受託でのWebサイト制作で、a-blog cmsを日々活用。 今日は一人のCMSユーザーとしての気づきを共有。 業務 02
3. Ver. 3.2 の『Twig』と『V2モジュール』  Twig記法 テンプレートエンジンでの開発を楽にする 新しく導入された記法 V2モジュール Twig記法に最適化された新しいモジュール群  03
4. Twigとは？ a-blog cms Ver. 3.2 からサポート開始  詳細はdeveloperサイト参照 https://developer.a-blogcms.jp/document/twig/ 04  Twig記法例 {% %} {% %} {% %} {% %} block {{ include('/include/head/meta.twig') }} endblock block {{ include('/include/head/js.twig') }} endblock head_meta head_js
5. V2モジュールとは？ 05
6. もう触りましたか？ みなさんは、Twigや、V2モジュールを導入または試したことはありますか？ 試したことがある方は手を挙げてください！  06
7. Twig移行って急ぐべき？ 気になるポイント ️ Twig移行を急ぐべきか？ ️ 従来記法はなくなるのか？ 07
8. Twig移行って急ぐべき？  今後Twigを推進していく予定ですか？  していく  従来記法は今後も残る予定ですか？ Twig移行をそこまで急ぐ必要はない。 ただし、従来よりも格段に扱いやすいので、早めに移行がおすすめ！  結論  現状、廃止する予定はない 08
9. 本日の目次   Twigとは？V2モジュールとは？ Twig / V2モジュール、もう触りましたか？ 3 Twig導入時の2つの強い味方 4 Twig対応時に気をつけたいこと 3選 5 プチストレスフリーになったこと 3選 + α 5 さいごに 09
10. Twig導入時の2つの強い味方 10 a-blog cms Training Camp 2025
11. Twig導入時の2つの強い味方 ①：公式ドキュメント ️ Twigテンプレートの注意点 ️ a-blog cms特有のルール ️ リファレンス案内　etc.  詳細はdeveloperサイト参照 https://developer.a-blogcms.jp/document/twig/ 11
12. Twig導入時の2つの強い味方 ②：Developテーマ ️ 実装例の宝庫 ️ 実用的な教科書として活用 12
13. Twig対応時に気をつけたいこと3選 13 a-blog cms Training Camp 2025
14. 知っておきたい「Twig化できない」ファイル /admin.html /admin/entry/unit/custom.html /admin/entry/unit/extend.html /admin.html /admin.html /admin.html 14 Twig記法と従来記法の併用について
15. 知っておきたい「Twig化できない」ファイル 15 system/admin ディレクトリにおける Twig 対応状況 ️ Twig対応済みのテンプレートもある ️ カスタマイズ時は、親ファイルがTwig対応しているかを事前確認
16. 「あれ、設定がない？」V2モジュールの変化 従来 Entry_Summary 従来記法 V2_Entry_Summary V2モジュール 16
17. 「ハイフン」にご用心！ブロック名と変数名について  従来記法（siteテーマ例） @section @endsection @section @endsection ( ) @include("/include/head/meta.html") ( ) @include("/include/head/js.html") "head-meta" "head-js" <!-- ケバブケース（ハイフン区切り）のセクション名 -->  Twig記法（変換例） {% %} {% %} {% %} {% %} block {{ include('/include/head/meta.twig') }} endblock block {{ include('/include/head/js.twig') }} endblock head_meta head_js {# スネークケース（アンダースコア区切り）に変更 #}  Twigのblock名にハイフン使用不可 17 ① block名の制約
18. 「ハイフン」にご用心！ブロック名と変数名について  Twig記法 NG例：引き算として解釈される 〒 form.fields. .value {# postal から code を引いた結果になる #} {{ }} postal-code  従来記法 siteテーマでの記述例 〒{ } postal-code ② ハイフン付き変数の参照方法 18  変数名にハイフンを使用している場合 ・2重かっこ内では「 」と解釈されてしまう ・ブラケット記法か attribute 関数で対応 引き算
19. 「ハイフン」にご用心！ブロック名と変数名について  Twig記法 OK例：ブラケット記法 {{ }} form.fields .value ['postal-code']  Twig記法 OK例：attribute関数 {{ }} (form.fields, 'postal-code').value attribute 変数はスネークケースにしておくのが無難... ② ハイフン付き変数の参照方法 19  Twig記法 NG例：引き算として解釈される 〒 form.fields. .value {# postal から code を引いた結果になる #} {{ }} postal-code
20. その他、押さえておきたいチェックリスト  Twig記法と従来記法の併用ルール  変数表はテンプレート内で set しないと出てこないので注意  動的インクルードは ignore_missing を活用  デバッグモードはON（スニペット検索に必須）  校正オプション（フィルター）は次の田村さんセッションにて！！ 20  詳細はdeveloperサイト参照 https://developer.a-blogcms.jp/document/twig/
21. プチストレスフリーになったこと3選 + α 21 a-blog cms Training Camp 2025
22. 標準的な挙動で安心。IF文のロジック 従来IFは演算子の優先順位が一般言語と異なり、括弧も使えない。  一見、真になるはずの条件式 <!-- BEGIN_IF [8/eq/8/ /9/eq/9/_and_/7/eq/7/_and_/2/eq/3] --> IFブロック：真 <!-- ELSE --> <!-- END_IF --> <!-- こうではない？ 8==8 or (9==9 and 7==7 and 2==3) --> _or_ IFブロック：偽（こちらが表示される）  一般的なプログラム言語では and が or より優先されるが、
 a-blog cmsのIFブロックでは独特の判定順序を持ち、カッコも使えないため制御しにくい。 プチストレスポイント 22
23. 標準的な挙動で安心。IF文のロジック Twigは一般的なプログラミング言語と同じ優先順位でロジックを処理。さらに括弧（）で明示的に制御が可能。  Twigでの条件分岐例 {% %} ( ) ( ) if 8 8 9 9 7 7 2 3 == or == and == and == Twigの場合：真（こちらが表示される） {% %} else Twigの場合：偽 {% %} endif カッコを使って優先順位を明示 + 標準的なAND/OR優先順位 =  プチストレスフリー 23
24. ブロックの「壁」が消えた！自由な変数活用 従来記法の「ブロックの壁」  変数は特定のブロック内でしか使えない  例：ナビゲーションモジュールでは、
 リンクURLは「link#front」ブロック内でしか取得できない  Navigation モジュール例 <!-- BEGIN link#front --> <!-- END link#front -->
 <a href=" "> <!-- BEGIN label:veil -->{label}<!-- END label:veil --> <!-- BEGIN link#rear --> </a> <!-- END link#rear --> {url} 24
25. ブロックの「壁」が消えた！自由な変数活用 Twigではブロック範囲の制約を意識せずに条件分岐が可能です。  例：URL有無によるタグ切り替え /* URLが空の場合はボタン、そうでない場合はリンクを表示 */ {% if is empty %} item.url <button > type="button" {{ item.label }} </button> {% else %} <a > href="{{ item.url }}" {{ item.label }} </a> {% endif %}  Twigでは変数をどこでも自由に使えるため、シンプルな条件分岐が可能に 25
26. ブロックの「壁」が消えた！自由な変数活用 さらに便利なポイント V2モジュールの「変数表」はクリックするだけで変数のパスをコピーでき、 深い階層の変数指定も簡単です！ V2_Entry_Summary V2モジュール クリックしてコピー！  変数表はクイックサーチを開いて「#」 Windows / Linux：Ctrl + K Mac：⌘（Command）+ K 26
27. 迷子にならない、具体的なエラーメッセージ 従来記法 エラーが出ないためタイポや閉じ忘れに気づきづらい  nl2br の綴りミス {sample}[ ] nl2bn  IFブロックのブラケット前に半角スペース入れ忘れ <!-- BEGIN_ 1/eq/5] --> <!-- END_IF --> IF[ 27
28. 迷子にならない、具体的なエラーメッセージ Twigの場合 エラーの原因と場所を具体的に教えてくれる  フィルターのタイポ例 Unknown "nl2bn" filter. Did you mean "nl2br" in "/path/to/file.twig" at line 123? {{ sample| }} nl2bn  ifの閉じ忘れ例 Unexpected "endmacro" tag (expecting closing tag for the "if" tag defined near line 3) in "/include/entry/bcd/construction.twig" at line 4. {% macro renderSample() %} {% if 1 == 5 %} {% endmacro %} 28
29. コードがスッキリ！ set の活用（+α）  都道府県セレクトボックス例 <select > <option > </option> = = 都道府県 name 'address_level1' value '' {% set %} = { : [ ], : [ , , , , , ], : [ , , , , , , ] } regions '北海道' '北海道' '東北地方' '青森県' '岩手県' '宮城県' '秋田県' '山形県' '福島県' '関東地方' '茨城県' '栃木県' '群馬県' '埼玉県' '千葉県' '東京都' '神奈川県' {% for in %} {% for in %} {% endfor %} {% endfor %} , {# 地域ごとの区切り #} = ( ) {{ }} region prefectures regions <hr> prefecture prefectures <option prefecture address_level1.value prefecture > prefecture </option> </select> value "{{ }}" {{ }} |selected 29
30. 語り尽くせない！その他の「嬉しい変化」  実行順序の悩みから解放  macroが便利！  インクルードパスにグローバル以外の変数も使える  ループ処理がスマートに（例: loop.lastで直感的に判定）  AIとの相性が抜群（ChatGPTなど）  校正オプション（フィルター）は次の田村さんセッションにて！！ などなど... 30
31. さいごに  Twigの導入には注意点こそありますが、
 従来記法のような独特な制約から され、気をつけるべきポイントは 解放 大幅に減る。  コーディングの「パズル」に費やす時間が減れば、機能追加・リッチな動き・デザイン改善など、 に時間を使えるように。 より価値のある提案  複雑なコードを単純化することは、作る側の だけでなく、 にも直結。 ストレス軽減 保守性向上 31
32. ご清聴ありがとうございました まだa-blog cmsでTwigを導入したことがない方も、 次の案件や、タイミングが合う時に、
 ぜひこの新しい開発体験を味わってみてください。 32