Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

Avatar for sugar sugar
November 21, 2025

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選 + α
- さいごに

Avatar for sugar

sugar

November 21, 2025
Tweet

More Decks by sugar

Other Decks in Programming

Transcript

  1. 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
  2. 本日の目次   Twigとは?V2モジュールとは? Twig / V2モジュール、もう触りましたか? 3 Twig導入時の2つの強い味方 4

    Twig対応時に気をつけたいこと 3選 5 プチストレスフリーになったこと 3選 + α 5 さいごに 09
  3. 「ハイフン」にご用心!ブロック名と変数名について  従来記法(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名の制約
  4. 「ハイフン」にご用心!ブロック名と変数名について  Twig記法 NG例:引き算として解釈される 〒 form.fields. .value {# postal から

    code を引いた結果になる #} {{ }} postal-code  従来記法 siteテーマでの記述例 〒{ } postal-code ② ハイフン付き変数の参照方法 18  変数名にハイフンを使用している場合 ・2重かっこ内では「 」と解釈されてしまう ・ブラケット記法か attribute 関数で対応 引き算
  5. 「ハイフン」にご用心!ブロック名と変数名について  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
  6. その他、押さえておきたいチェックリスト  Twig記法と従来記法の併用ルール  変数表はテンプレート内で set しないと出てこないので注意  動的インクルードは ignore_missing

    を活用  デバッグモードはON(スニペット検索に必須)  校正オプション(フィルター)は次の田村さんセッションにて!! 20  詳細はdeveloperサイト参照 https://developer.a-blogcms.jp/document/twig/
  7. 標準的な挙動で安心。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
  8. 標準的な挙動で安心。IF文のロジック Twigは一般的なプログラミング言語と同じ優先順位でロジックを処理。さらに括弧()で明示的に制御が可能。  Twigでの条件分岐例 {% %} ( ) ( )

    if 8 8 9 9 7 7 2 3 == or == and == and == Twigの場合:真(こちらが表示される) {% %} else Twigの場合:偽 {% %} endif カッコを使って優先順位を明示 + 標準的なAND/OR優先順位 =  プチストレスフリー 23
  9. ブロックの「壁」が消えた!自由な変数活用 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
  10. 迷子にならない、具体的なエラーメッセージ 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
  11. コードがスッキリ! 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