Craft CMSのMatrix(行列)を使ってみた

Posted on:December 20, 2017 at 12:08 AM

これは Craft CMS Advent Calendar 2017 20日目の記事です。

今更ではありますが、真面目にCraft CMSのMatrixを使ってみようと思います。(Twigの使い方ばかりググっていました。)
Matrix(行列)は、a-blog CMSのユニットやMovable Typeの藤本さんのプラグイン「FreeLayoutCustomField」のような機能になります。

以前、案件でがっつり「FreeLayoutCustomField」を触ってみたことはあります。
Craft CMSのMatrixも似たような機能になっており、フィールドを追加したり自由に入れ替えたりすることができます。

個人的にCraft CMSの良いところは、フィールドの柔軟性ではないかと思っております。
実際に使ってみて、記事単位でカスタムフィールドを自由にできるのは実装側としてはうれしいですね。

今回は、初めて?ではないですがMatrixの登録から埋め込みするソースコードを紹介したいと思います。

Matrix(行列)の作成(管理画面編)

管理画面01 管理画面02 管理画面03 管理画面04

アップロードについて

MTでは作成したブログ配下にアップロードのディレクトリ作成していますが、
Craft CMSの場合は、メディア(ファイル)として単体で自由にアップロード先を作ることができます。
アップロードのフィールドを作る時は、まずアップロードする先のボリュームを作る必要があります。

Matrixや単純なアップロードのフィールドを作る前に行っておくとよいでしょう。
※無い場合は、無効なボリュームと警告が出るため

管理画面05 管理画面06 管理画面07

Twigの書き方(テンプレート)

Twigの書き方は以下のような形になります。
記事詳細のテンプレートのblock content内に埋め込みます。

if文でも同様な処理で行うことができますが、個人的な理由とみやすさを考慮した結果switch文にしました。

{% block content %} {% set matrixBlocks = entry.fieldType %} {% for block in
matrixBlocks %} {% set blockType = block.type.handle %} {% switch blockType %}
{% case 'heading' %} {% set heading = block.heading %}
<h2>{{ heading }}</h2>
{% case 'table' %} {% for row in block.table %}
<dl>
  <dt>{{ row.heading }}</dt>
  <dd>{{ row.text }}</dd>
</dl>
{% endfor %} {% case 'image' %} {% set images = block.image %} {% for image in
images %}
<img src="{{ image.getUrl() }}" alt="{{ image.title }}" />
{% endfor %} {% endswitch %} {% endfor %} {% endblock %}

行列(Matrix)を使うことで柔軟にフィールドを定義しておくことができるので、
コンテンツの装飾はリッチテキストにしなくても運用していくことができます。
デフォルトでここまでの機能がついているのはありがたいですね。もう少し慣れていきたいと思いました。