「来月って空いていますか？」「＊月の混み具合教えて欲しい」という問い合わせをいただくことがありますが、毎回お答えするのも大変なんでサイト上で公開できたらいいなと思い、CraftCMS上で構築しました。構築と謳っていますがCraftCMSの便利な機能を利用するだけで簡単に構築できます。

向こう３ヶ月のお仕事状況をお知らせしたい

発端は、HAMWORKSさんがTwitter上で定期的に投稿している、現在のお仕事状況ツイートでした。これをWebサイト上でできないかなと思い、実装してみました。

CraftCMSのマトリクスで表現する！

ツイートの画像を見ていただけるとわかる通り、何月がどの状態かパッと見てわかりやすくなっています。これを実現するためにまずお仕事状況用のセクションを作成します。セクションに紐づけるフィールドですが、マトリクス（日本語では『行列』と表示されます）を利用します。このフィールド型では、行にどのような列があるか設定することで、名前の通りマトリクス状のデータを扱うことができます。今回のお仕事状況のフィールドは

このように、『月』の列と『状況』の列を作成しました。列に指定するフィールドは普段のフィールドと同様に設定を行うことができます。『月』には年月をテキストで保存、『状況』はラジオボタンで○・△・×を選択できるようにし、テンプレート側で選択した状況に応じて内容を表示するようにしています。

マトリクス型は『最小ブロック数』『最大ブロック数』を設定できるようになっています。ここで両方に『3』を入れることで3ヶ月分のお仕事状況を表示することができます。HAMWORKSさんの表とはレイアウトは異なりますが、無事実現できました！

テンプレート側は以下のように

<table class="table table-bordered">
  {% set status = craft.entries()
  .section('status')
  .one() %}
  {% for row in status.statusMatrix.all() %}
    {% if row.month_status == "1" %}
       <tr class="table-light">
       <th class="w-25">{{ row.month }}</th>
       <td>受付お待ちしております。</td>
       </tr>
    {% elseif row.month_status == "2" %}
      <tr class="table-warning">
      <th class="w-25">{{ row.month }}</th>
      <td>やや混雑しています。</td>
      </tr>
    {% elseif row.month_status == "3" %}
      <tr class="table-danger">
      <th class="w-25">{{ row.month }}</th>
      <td>受付終了いたしました。ありがとうございます。</td>
      </tr>
    {% endif %}
  {% endfor %}
</table>

このようにマトリクスのフィールドをループで回して取得し列に指定した状況のフィールドの値でそれぞれ表示を切り替えています。

まとめ

このようにマトリクスというちょっと扱いづらいデータもCraftCMSでは簡単に扱うことができます。例えば商品のスペック表記だったりなどで活躍するのではないかなと思いますので、ぜひ試してもらえたらと思います。