タッチモジュールの使用方法


Twigを拡張し、タッチモジュールを呼び出すa-blog cms独自の関数を追加しています。関数で呼び出すことで真偽値が返却されるので、if記法と併用して出し分けます

{% if touch('Touch_Login') %}
  <p>
    ログイン中です
  </p>
{% endif %}

touch関数は、module関数と違い既存のすべてのタッチモジュールを呼び出せます


表示・非表示を制御しているのは、単なる「ifタグ」なので、条件式をtouch関数だけではなく組み合わせて利用することもできます。

{% if touch('Touch_Login') and IS_ADMIN %}
  <p>ログイン中 かつ 管理ページの場合<p>
{% endif %}

モジュールの使用方法


Twigを拡張し、モジュールのデータを取得するa-blog cms独自の関数を追加しています。関数で呼び出したモジュールのデータを変数に格納して使用します。

例:V2_Entry_Summary モジュールを呼び出して使用する

{% set entrySummary = module('V2_Entry_Summary', 'モジュールID名', { bid: BID, cid: CID }) %}
<div>
  <div class="acms-cssgrid acms-g-cols-1 acms-g-cols-md-3">
    {% for entry in entrySummary.items %}
    <div>
      <h3>{{ entry.title }}</h3>
      <p>{{ entry.summary }}</p>
      <p><a href="{{ entry.url }}" class="acms-btn">詳細をみる</a></p>
    </div>
    {% endfor %}
  </div>
</div>

module() 関数の引数について

引数

内容

第1引数

V2モジュール名(例:V2_Entry_Summary

第2引数

モジュールID(管理画面で設定されたIDを指定)

第3引数

URLコンテキスト(従来の ctx に該当。例:{ bid: BID, eid: EID } など)

「モジュールID」と「URLコンテキスト」は、従来モジュール同様に省略可能です。

{% set hoge = module('V2_Entry_Summary') %}

Twig記法では従来のモジュールは呼び出せないのでご注意ください。Twigで呼び出せるモジュールはモジュール名の最初が「V2」から始まるモジュールのみになります。

V2モジュール例

  • V2_Entry_Summary

  • V2_Entry_Body

  • V2_Entry_TagRelational

  • V2_Category_Tree

  • V2_Media_Banner

  • V2_Blog_Field

  • V2_Module_Field

  • V2_Links

名前が似ていても従来のモジュールとは出力される変数や構造は違いますのでご注意ください。


V2モジュールの変数の見方

V2モジュールでは、従来のような「変数表」は用意されていません。
その代わりに、Twigテンプレートでモジュールを読み込んだ状態で、クイックサーチ機能から利用可能な変数を確認できる仕組みになっています。

クイックサーチの起動方法

管理者としてログイン中に、以下のショートカットキーを押すことでクイックサーチが開きます。

  • Windows / LinuxCtrl + K

  • Mac⌘(Command)+ K

デバッグモードでの変数確認

クイックサーチを開いた状態で、デバッグモードが有効になっているときに #(シャープ)を入力すると、現在のページで読み込まれているV2モジュールの変数一覧(変数表)が表示されます。

クイックサーチから変数表を表示
クイックサーチから変数表を表示
実際の値が入った変数表が確認できる
実際の値が入った変数表が確認できる

変数名をクリックすると、その変数のパスがクリップボードにコピーされます。
これにより、Twigテンプレートへ変数を貼り付ける際に、手入力せず正確な変数名を利用できます。

Twigの基本記法


ここでは、Twigの基本的な構文を紹介します。すでにTwigの利用経験がある方は読み飛ばして構いません

変数の書き方

変数は {{ }} で囲んで出力します。

{{ title }}
{{ entry.id }}

グローバル変数の書き方

Twigでは、グローバル変数と変数の記法に区別はありません{{ }} で囲むことで出力できます。Twig標準の仕様に従います。

<h1>{{ BLOG_NAME }}</h1>

従来の記法では、グローバル変数に校正オプションを適応できませんでしたが、Twigでは変数と同じ記法になるので、グローバル変数に校正オプションも同様に適応できるようになります。

{{ NOW_DATE|date('Y年m月d日') }}

変数を定義する

Twig内では、テンプレート内で新しく変数を定義することができます。
変数定義には set タグ を使用します。計算結果や文字列の組み立て、繰り返し処理での一時的な値の保持などに便利です。

従来記法の SetTemplateSetRendered に近い概念ですが、Twigでは定義した値を変数として直接利用できる点が異なります。従来テンプレートには同等の機能はありません(Twig標準の仕様に準拠)。

{% set greeting = "こんにちは" %}
{% set name = "山田" %}

<p>{{ greeting }}, {{ name }}さん!</p>

文字列の連結

Twigでは、~(チルダ) 演算子を使って文字列を結合できます。
これは、PHPの . 演算子やJavaScriptの + 演算子に相当し、文字列と変数を簡単に組み合わせることができます。

{% set title = "今日の天気" %}
{% set weather = "晴れ" %}

<p>{{ title }} は {{ weather }}です。</p>
<p>{{ title ~ "は" ~ weather ~ "です。" }}</p> <!-- 連結して出力 -->

if文の書き方

Twigでは「ifタグ」を使用して記述します。(Twig標準の仕様に従います)

{% if SESSION_USER_AUTH %}
  <p>
    ログイン中です
  </p>
{% endif %}

条件式の記述例

比較演算子

  • ==(等しい)

  • !=(等しくない)

  • >(大きい)

  • <(小さい)

  • >=(以上)

  • <=(以下)

{% set age = 18 %}

{% if age >= 18 %}
  <p>成人です。</p>
{% else %}
  <p>未成年です</p>
{% endif %}

論理演算子

  • and(かつ)

  • or(または)

  • not(否定)

{% set isLogin = true %}
{% set isAdmin = true %}

{% if isLogin and isAdmin %}
    <p>ログイン済みの管理者です。</p>
{% endif %}

{% if not isLogin %}
    <p>ログインしてください。</p>
{% endif %}

is 演算子

  • empty: 空かどうか

  • defined: 定義されているかどうか

  • null: nullであるかどうか

  • even/odd: 偶数か奇数か

  • divisible by: 指定した数で割り切れるか

{% set name = '山田' %}
{% set list = [] %}
{% set number = 6 %}

{% if name is defined %}
    <p>名前: {{ name }}</p>
{% endif %}

{% if list is empty %}
    <p>リストは空です。</p>
{% endif %}

{% if number is even %}
<p>
  {{ number }}は偶数です。
</p>
{% endif %}

{% if number is divisible by(2) %}
  <p>{{ number }}は2で割り切れます。</p>
{% elseif number is divisible by(3) %}
  <p>{{ number }}は3で割り切れます。</p>
{% else %}
  <p>{{ number }}は2でも3でも割り切れません。</p>
{% endif %}

in 演算子

{% set colors = ["red", "blue", "green"] %}

{% if "blue" in colors %}
    <p>青色が含まれています。</p>
{% endif %}

他のプログラミング言語と同様に、括弧を使って条件式の優先度を制御できます。


ループ処理

Twigでのループの書き方はとてもシンプルです。「forタグ」を使って、配列やリストを簡単にループ処理できます。基本的な構文は以下の通りです。(Twig標準の仕様に従います)

{% set fruits = ['Apple', 'Banana', 'Cherry'] %}

<ul>
    {% for fruit in fruits %}
        <li>{{ fruit }}</li>
    {% endfor %}
</ul>

モジュールで取得したデータをループする例

{% set entrySummary = module('V2_Entry_Summary') %}

<ul>
  {% for entry in entrySummary.entries %}
    <li>{{ entry.title }}</li>
  {% endfor %}
</ul>

インデックスの取得

「loop」という特殊な変数を使用して、ループのインデックスやその他の情報を取得できます。loop.index で1から始まるインデックスを取得したり、loop.index0 で0から始まるインデックスを取得できます。

<ul>
  {% for entry in entrySummary.entries %}
    <li>{{ loop.index }}: {{ entry.title }}</li>
  {% endfor %}
</ul>

その他のloopオプション

  • loop.first:ループの最初の要素の場合にtrueを返す

  • loop.last:ループの最後の要素の場合にtrueを返す

  • loop.revindex:残りの要素数(1からカウント)

  • loop.revindex0:残りの要素数(0からカウント)


「loop.first」や「loop.last」を使用することで、従来の <!-- BEGIN glue --> の代替ができます。

{% for entry in entrySummary.entries %}
  {{ entry.title }}
  {% if not loop.last %} | {% endif %}
{% endfor %}

校正オプション(フィルター)


Twigの記法では、変数の中にパイプ(|)で区切りフィルターを指定します {{ 変数|フィルター1|フィルター2 }}Twig標準の仕様に従います)

{% set content = '今日の天気は\n晴れです' %}

<p>{{ content|nl2br|safe_html }}</p>

使用できる校正オプションの種類

  • 従来の標準校正オプション

  • Hook.php で拡張した校正オプション

  • Twig標準のフィルター

従来の標準校正オプションは利用できますが、Twig標準のフィルターと名前がかぶるものもあります。この場合Twigのフィルターが優先されるので、従来の標準校正オプションを指定したい場合は、プレフィックス acms_ を付与して指定ください。

名前が校正オプション・フィルター例

date escape nl2br trim number_format split など

従来の校正オプションを使用する

{{ entry.datetime|acms_date('Y年m月d日') }}

従来のa-blog cmsの校正オプションに加え、Twig標準のフィルターも全く同じ記法で指定することができます。

{% set sizes = [34, 36, 38, 40, 42] %}

{{ sizes|filter(v => v > 38)|join(', ') }}
{# output 40, 42 #}

引数に変数を指定

従来の校正オプションでは、一部校正オプションのみ引数に変数を利用できましたが、Twig記法だと全てのフィルターに変数が利用できます

{% set content = '文書を途中で切ります' %}
{% set length = 4 %}
{% set ellipsis = '...' %}

<p>
  {{ content|mb_trim(length, ellipsis) }}
</p>

フィルターを使用したデフォルト値

変数の値がなかった場合に、デフォルト値を出力することができます。

<p>{{ nickname | default("ゲスト") }}</p>

twigでの「raw」校正オプション(フィルター)の仕様が変更になります。

既存テンプレート
{hoge}[raw]
危険なタグはエスケープされ、安全なHTMLは出力されます

{hoge}[raw|allow_dangerous_tag]
scriptを含めエスケープを無効にして、値をそのまま出力します。使用箇所には注意が必要です。

Twigテンプレート
{{ hoge|safe_html }}
危険なタグはエスケープされ、安全なHTMLは出力されます。

{{ hoge|raw }}
scriptを含めエスケープを無効にして、値をそのまま出力します。使用箇所には注意が必要です。

インクルードの書き方


Twigでのインクルードの書き方について解説します。(Twig標準の仕様に従います)

基本的なインクルード

include関数を使ってテンプレートをインクルードします。

{{ include('/path/to/parts.twig') }}

変数を渡す

インクルードするテンプレートに変数を渡したい場合は、第2引数として変数を渡します

{{ include('/path/to/parts.twig', { title: 'タイトルです' }) }}

このように書くことで、/path/to/parts.twig 内で title 変数が使えるようになります。

ファイルが存在しない場合のエラー回避

従来のインクルード文だと、インクルードするファイルがない場合でもエラーは発生しませんでしたが、Twigのインクルードはファイルが存在しない場合エラーが出力されます。

インクルードするファイルが存在しない場合にエラーを回避するには、第3引数にtrueを渡してignore_missingオプションを有効にします。

{{ include(/path/to/parts.twig', {}, true) }}
or
{{ include('/path/to/parts.twig', {}, ignore_missing = true) }}

インクルード文の中にはグローバル変数以外にも全ての変数が利用できます。

従来のインクルードだと、インクルードパス内に利用できる変数はグローバル変数かつ特定のものに制限されていましたが、Twigのインクルードはすべての変数をインクルードパスに含めることが可能です。

{% set filename = 'hoge' %}

{{ include('/include/' ~ filename ~ '.twig', ignore_missing = true) }}