Home

グループユニットを使って、レイアウト・スタイルをつける

グループユニットは、複数のユニット（テキスト、画像、見出しなど）を div や section で囲んでグループ化することができるユニットです。ラベル（選択時の名前）やクラス（HTML の class 属性）を柔軟に設定できるため、直感的で自由度の高いレイアウト作成が可能です。

使用するための設定

管理画面 > 編集画面 > 編集設定 の「ユニットメニュー」にグループユニットを追加します。

モードに「group」を設定
ラベルは任意のラベル

上記が設定できると、エントリー編集画面の「ユニットを追加」ボタンから、グループユニットを追加できます。

class属性の設定

グループユニットのclass属性は 管理画面 > 編集画面 > 編集設定 の「グループユニット class属性」から設定できます。

ラベル：メニュー表示で表示されるテキスト
クラス：追加したブロック要素に付与されるクラス

HTML要素の設定

グループユニットのHTML要素は 管理画面 > 編集画面 > 編集設定 の「グループユニット HTML要素」から設定できます。

以下の要素のみ使用することができます。

div
section
article
header
footer
main
aside
nav

設定したHTML要素はグループユニットの3点リーダーから（︙）の「タグ」から設定することができます。

グループユニットでは、タグの設定に加えて「id 属性」を設定できます。これにより、ページ内リンク（アンカーリンク）を利用したセクション設定が可能になります。

グループユニットの適応方法

グループユニットを適用するには、まずユニット追加メニューからグループユニットを追加します。

追加したグループユニットに、適応したいラベル（例：横並び）を設定します。

最後に、適用したいユニットを新規追加するか、既存のユニットをドラッグ＆ドロップでグループユニット内に移動させることで、グループ化が完了します。

グループユニットを適用した結果、ページ上に2つの画像が横並びで配置された状態で表示されます。

多階層のグループユニットの設定

グループユニットは入れ子構造に対応しており、複数のグループユニットを階層的に組み合わせることができます。これにより、複雑なページ構成や柔軟なレイアウトデザインが可能になります。

新しいグループユニットを追加し、その中に先ほど作成したグループユニットをドラック&ドロップで入れ込みます。または、既存のグループユニットの3点リーダーから（︙）から「グループ化」をクリックすると、一階層上のグループユニットで囲むことができます。

追加されたグループユニットに、適応したいラベル（例：背景色：グレイ）を設定します。

グループユニットを2階層に設定した結果、横並びで配置された2つの画像にグレイの背景色が付いた状態で表示されます。

グループを解除する方法

グループ化を解除するには、グループユニットの3点リーダー（︙）メニューから「グループ解除」をクリックすると、グループ化が解除されます。

Twigとは

Twigは、PHPで広く利用されているテンプレートエンジンの1つです。
HTMLとPHPのコードを分離し、読みやすく保守しやすいテンプレートを作成できるのが特徴です。SymfonyやDrupalなど多くの有名フレームワークやCMSでも採用されています。

テンプレート内では、変数の出力、条件分岐、ループ処理、フィルターや関数の利用などを簡潔な構文で記述できます。また、変数を自動的にエスケープする仕組みが備わっており、クロスサイトスクリプティング（XSS）などのセキュリティリスクを軽減します。

可読性の高い構文 … PHPコードを直接埋め込む必要がなく、デザイナーやフロントエンドエンジニアも理解しやすい。
セキュリティ … 自動エスケープにより、安全なHTML出力が可能。
拡張性 … 独自のフィルターや関数を追加できるため、柔軟なカスタマイズが可能。
高速動作 … コンパイルされたPHPコードとしてキャッシュされるため、パフォーマンスに優れる。

Ver. 3.2 で追加されたTwigテンプレートを利用することで、テンプレートの保守性・再利用性が向上し、チーム開発や長期運用の負担を軽減できます。

テンプレートの継承

Twigでも従来テンプレートと同じようにテンプレートの継承機能が利用できます。Twig標準の仕様に従います。

継承元テンプレート

継承元テンプレートでは、シンプルなHTMLレイアウトを定義します。

<!DOCTYPE html>
<html>
  <head>
    {% block headMeta %}
      {{ include('/include/head/meta.twig') }}
    {% endblock %}
    {% block headLink %}
      {{ include('/include/head/link.twig') }}
    {% endblock %}
    {% block headJs %}
      {{ include('/include/head/js.twig') }}
    {% endblock %}
  </head>
  <body>
    <header>
      <h1>ヘッダー</h1>
    </header>
    <main>
      {% block main %}
        <p>継承してメインコンテンツを設定してください</p>
      {% endblock %}
    </main>
    <footer>
      {% block footer %}
        <p>Site Footer</p>
      {% endblock %}
    </footer>
  </body>
</html>

この例では block タグを使用して、継承（子）テンプレートが継承する5箇所のブロックを定義しています。

このblockタグが行うことは、子テンプレートがテンプレートのその部分を上書きする可能性があることをテンプレートエンジンに伝えることだけです。

継承（子）テンプレート

継承（子）テンプレートは次のようになります。

{% extends 'parent_template.twig' %}

{% block headLink %}
  {{ parent() }}
  <link rel="stylesheet" href="/include/edit/custom.css" />
{% endblock %}

{% block main %}
  <p>
    メインコンテンツを上書き
  </p>
{% endblock %}

extendsタグは、テンプレートエンジンにこのテンプレートが別のテンプレートを「拡張」していることを伝えます。このテンプレートを評価する際、まず親テンプレートを探します。extendsタグはテンプレートの最初のタグである必要があります。

ここでは headLink ブロックと main ブロックを上書きしてます。子テンプレートは、 headMeta headJs footer ブロックを定義していないため、代わりに親テンプレートの値が使用されることに注意してください。

親ブロック

親ブロックの内容をレンダリングするには、 parent 関数を使用します。これにより、親ブロックの結果が返されます。

{% block headLink %}
  {{ parent() }}
  <link rel="stylesheet" href="/include/edit/custom.css" />
{% endblock %}

名前付きブロック

Twig では、読みやすさを向上させるために、終了タグの後にブロック名を置くことができます。

{% block main %}
  <p>
    メインコンテンツ...
  </p>
{% endblock main %}

Twigのブロック名にはいくつかの命名規則があります

英字（アルファベット）と数字、アンダースコア（_）のみが使用可能
英字から始めなければならない

有効なブロック名の例

headJs
head_js
headJs123

無効なブロック名の例

head-js
123headJs

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

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>
      {% if entry.mainImage.path %}
      <img
        src="{{ entry.mainImage.path|resizeImg(360) }}"
        alt="{{ entry.mainImage.alt }}"
        class="acms-img-responsive"
        width="{{ entry.mainImage.width }}"
        height="{{ entry.mainImage.height}}"
        loading="lazy"
        decoding="async"
      >
      {% endif %}
      <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 entrySummary = 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 / Linux：Ctrl + K
Mac：⌘（Command）+ K

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

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

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