Craft CMSの勉強をしたいなと思い、無料で視聴できる英語のチュートリアルプログラムを通しでやりました。合計242分＝4時間！

この記事ではその中から、特に知りたかったことを凝縮してまとめます。CMS経験者のディレクター向け。ちょっとはコードが分かる人向け。

コース概要

Craft CMSのことを動画で学べるサイト craftquest の中で、無料で受講できる Up and Running with Craft 3 という一連のコンテンツをやりました。

カフェのWebサイトを作ってみるというテーマで、インストールからテンプレート実装まで丁寧に積み上げていきます。時間はかかりますが、練習用のコーディングも用意されていて、スムーズにやれます。

↓このお兄さんが手取り足取り教えてくれます。

↓サンプルサイトの静的HTMLが提供されていて、これをベースにテンプレートタグに置き換えていくというプロセスです。

情報構造

Craftの情報構造は
「セクション」（≒投稿タイプ、コンテンツタイプ）
「フィールド」（入力欄）
「カテゴリー／タグ」（タクソノミー）
の３階層を押さえればほぼOK。これはほとんどのCMSで共通の考え方です。

1. 「セクション」を作る
2. 「フィールド」を作る
3. セクションの「入力タイプ」画面にフィールドを配置していく
4. エントリーを作成する

WordPressの「投稿」「固定ページ」というデフォルトの塊がないので、さらから考えられて、シンプルかもしれません。逆に、入出力に関する要素は全部用意しないといけない点に留意。

フィールドでは「マトリックスフィールド」という、フィールドを入れ子にして繰り返すことができる種類があり、これを使うと汎用的なページが柔軟に作れます。（いわゆる「複数画像セット」「リンクリスト」もこれでいけそう）

テンプレートの書き方

CraftのテンプレートはTwigというPHPのテンプレートエンジンを使っており、いわゆる「テンプレートタグ」の記法がとてもシンプル。for/switch/ifなどの関数で繰り返し・分岐を書き、その中にフィールドを配置していくというシンプルな流れです。/templates ディレクトリに _entry.twig みたいなファイル名で配置します。/web がドキュメントルート。

一覧ページでエントリーを並べる「forループ」

<ul>
{% for entry in craft.entries.section('drinks').limit(5).all() %}
	<li>{{ entry.title }}</li>
{% endfor %}
</ul>

ピリオドで親子をつなげる感じで記述します。{{ entry.title }} にはエントリーのタイトルを差し込みます。title, url, dateなどの標準要素以外は、フィールドのスラッグを参照しています。

マトリックスフィールドの分岐を記述する「switch」

{% switch block.type %}
    {% case "recipeContent" %}
        {{ block.bodyContent }}
    {% case "recipeSteps" %}
        同様に
{% endswitch %}

「ブロックタイプ」単位で、各フィールドの出力を定義していきます。

コースでは「アセット」（画像などのファイル置き場）の初期設定、カテゴリーの設定と参照などが網羅されています。

＊＊＊

なかなか時間がかかるコースでしたが、４時間ハンズオンでコード触りながら遊んだことで、相当「把握した感」を得ることができました。他のCMSも同じようなリソースがないか探してみます。

↓日本語の解説記事はbitpartの方のサイトに詳しいです。
https://bunlog.dreamseeker.dev/tag:Craft%20CMS

1年半前にうちの会社で少し流行ったときの記事
http://atoms.loftwork.jp/20170828_cmsfes_osaka2017_craftcms/