これは、a-blog cms Advent Calendar 2018の12日目の記事です。
a-blog cms Advent Calendar 2018 - Adventar

今回は、かなり制作者向けの記事です。a-blog cmsを利用していても、運用やディレクションが中心の方には、少し難しい内容であることを前置きしておきます。ですが、テーマの制作をしている方は、ぜひ読んでいただけるとうれしいです。

• はじめに
• includeの変数渡し
  • 概要
  • 構造図
  • includeの特徴
• extendによるコードの継承
  • 概要
  • 構造図
  • extendの特徴
• いえズームでの活用
  • includeの変数渡し
  • extendによるコードの継承
• まとめ、使ってみての雑感

はじめに

北海道住宅新聞社さんの情報サイト「いえズーム」の管理をはじめてから、一年半くらい経ちます。

【iezoom】（いえズーム）北海道の住宅会社選び | いえズーム（iezoom）

いえズームの制作をはじめた頃は、「includeの変数渡し」「extendによるコードの継承」はリリースされていませんでした（バージョン2.8.0から）。 旧来のインクルードを使用したまま改修を重ねていたら、テーマがカオス化してきたこともあり、新しい機能を使用してコード整理をしています。

新しい機能のそれぞれの特徴と、いえズームでの実際の利用場面を紹介します。

includeの変数渡し

概要

旧来のインクルードは、SSI風の書式で、読み込むファイル名を指示するのみのシンプルなものでした。

<!--#include file="/path/to/filename"-->

しかし、2.8以降では、JSON風の書式で、読み込み先で使用できる独自変数を渡せるようになっています。

@include("/path/to/filename", {"key": "value", "key2": "value2"})

詳細な仕様解説は公式ドキュメントを参照ください。
インクルード | テンプレート | ドキュメント | a-blog cms developer

構造図

図で解説すると以下の通りです。 「sample_01.html」と「sample_02.html」は同じパーツ、module.htmlを読み込んでいますが、変数「button」の値が異なるため、実際に表示されるコードが一部変わります。 「sample_01.html」では、新着記事一覧の下に「詳しくはこちら」ボタンが表示されるはずです。

includeの特徴

includeの変数はグローバル変数ではないので、読み込み先以外に干渉することはありません。いくつでも渡すことができ、変数の初期値も定義できますが、長いコードを渡すことはできません（できたとしても可読性が著しく落ちます）。

extendによるコードの継承

概要

いっぽうextendですが、WordPressやa-blog cmsに実装されている「親・子テーマ」の「コードの使い回し」を、テンプレート間で実行することができます。

テンプレート冒頭で「@extend」を書くと、指定したファイルを丸ごと読み込むことができます。ここまではincludeと変わりませんが…

@extend(/path/to/filename)

指定した読み込み元のファイルに「@section(任意の英数字名) 」〜「@endsection 」で囲んだ領域があると、読み込み先のファイルでコードを上書きすることができます。

@section(sample)
  <h2>内容を書き換えちゃうよ！</h2>
@endsection

つまり、読み込み先では、差分コードだけ記述すれば良いのです。

詳細な仕様解説は公式ドキュメントを参照ください。
テンプレートの継承 | テンプレート | ドキュメント | a-blog cms developer

構造図

図で解説すると以下の通りです。
レイアウト用に作成した非公開テンプレート「_layout.html」のコードを３つの公開テンプレートで使い回していますが、それぞれ実際の表示結果が変わります。特にsample_03.htmlの「継承しつつ追記」はいろいろ便利です。

extendの特徴

extendは、前もってレイアウト用のテンプレートを作り、どの箇所を継承可能にするか定義することになります。

長いコードをテンプレート間で渡すことができるので、似ているけれど微妙に違うレイアウトが多いサイトでは、書くべきテンプレートの行数を大幅に節約できます。反面、includeとは異なり、条件分岐などに使える変数を渡すことはできません。

いえズームでの活用

includeの変数渡し

いえズームは一見シンプルなサイトですが、訪問者の導線を意識しているため、コンテンツごとに記事の表示件数や体裁、ページ内での表示位置などが細かく違っています。改修を重ねているうちに、モジュール部分のテンプレート数が肥大してしまっていました。

例えば「summary_sub_story_future」モジュールと「summary_sub_story_recent」モジュールは、IDが違うだけでコードがまったく同じなのに別ファイルになっています。

<!-- BEGIN_MODULE Entry_Summary id="summary_sub_story_future" -->
・・・
<!-- END_MODULE Entry_Summary -->

<!-- BEGIN_MODULE Entry_Summary id="summary_sub_story_recent" -->
・・・
<!-- END_MODULE Entry_Summary -->

これを、includeの変数渡しに書き換えることで、ひとつのファイルでidだけ違うコードを出力することができました。

さらに、なんと、読み込み先のincludeのファイル名に変数を引き継ぐことができることに気付いてしまいました。エントリーの繰り返し部分の体裁だけが違うテンプレートも共通化できそうです。

@include("/include/module/summary_sub.html", {"mid": "summary_sub_story_recent", "loop": "story_media.html"})

<!-- BEGIN_MODULE Entry_Summary id="{{mid}}" -->
・・・
@include("/include/module_loop/{{loop}}")
・・・
<!-- END_MODULE Entry_Summary -->

extendによるコードの継承

いえズームは、すべてのページのフッタ上部に、「いえズームとは？」というサイトの概要が記載されています。

ですが、一箇所だけ例外があります。地域別企業一覧のページでは、ヘッダの地域紹介の直下にあるのです。

札幌圏の住宅会社（ハウスメーカー・工務店）一覧 | いえズーム（iezoom）

地域ページは、冒頭に地域情報のパーツがあったり、地域名を変数に入れていたりと、かなりレイアウトが異なっています。以前は地域ページだけまったく違うテンプレートを用意していたのですが、extendを使うことで、他のテンプレートが利用している「/_layout_col2.html」との共通化ができるようになりました。

@extends("/_layout_col2.html")

@section(head_before)
（地域名を変数に取得）
@endsection

@section(pagehead)
（地域情報とサイト紹介パーツ）
@endsection

以下略

まとめ、使ってみての雑感

このように、わかりやすいところから少しずつコードの整理をしています。

使ってみての感想は、やはりテーマ職人としては、extendが手応えがある分面白いなあと感じています。大幅にテンプレートの数を減らせそうです。ただし、テーマ全体の構成を把握していないと実装できませんから、コーダーとテーマ制作者が違う案件では苦戦するかもしれません。

includeの変数渡しは便利な反面、インクルード先のテンプレートで、その変数がどこから定義されたものなのかわかりにくいという欠点があります（変数名でテンプレートを検索すればいいのですが）。 同じような変数名を使いすぎてカオス化しないよう、ルール決めが必要です。

いえズームは現在も、数週間に一度のペースでコンテンツの改修や追加が続いています。 このため、私も手早く対応できるようにしなければなりません。テンプレートを整理することで余裕が出て、より良い制作や提案ができればと期待しています。

Drupal8がすっかり標準になりましたが、私はなかなか実践レベルになりません。ちゃんとサイトを作らなければ身につかないと、Drupalで趣味の素材配布サイトを立ち上げてみることにしました。

私のCMSの構築は、2005年頃にブームだった素材サイトからはじまりました。素材は、AI・PNG・壁紙などの属性が異なるファイルを、複数のタクソノミーで検索させる必要があり、自動化しようとすると奥が深いコンテンツです。

echo_zeroのフレームワークは今回も役に立ちました

投稿タイプ・フィールド・タクソノミー・Views・サブテーマまで勉強して、見た目はともかくきちんと機能する素材サイトがだいぶできてきました。

ここまでの段階で、MTやWordPressなどのブログベースのCMSで制作をしている人が、Drupal8を学習する前に知っておかないと苦労すること・損をすることがいくつかあると感じたのでメモしておきます。

a-blog cmsの新バージョン、2.7.0がリリースされました。

バージョン2.7.0の変更点一覧

PHP7対応、現在地から近い順にエントリーを表示するモジュールの追加、インポート機能の強化などが大きな変更点です。

これに伴い、ウェビングスタジオが公開中のテーマ「echo_zero」について、バージョン2.7で以下の不具合が発生しております。

1）メンテナンスモードからインポートすると500エラー

【追記】この具合はバージョン2.7.2で修正されました。

私が確認した環境では、500エラーが出るのみでインポート自体には成功しているようすですが、echo_zeroの業務利用を検討されている方はバージョンアップの保留をお勧めいたします。
公式以外のすべてのテーマで発生する可能性がありますが、開発元からの続報を待ちたいところです。

2）トップページのMETAタグがおかしくなる

【追記】その後再現していません。バージョンアップ直後にキャッシュのクリアをお試しください。

titleとdescriptionにIFブロックのコードがそのまま入ってしまうことがあります。キャッシュファイルの仕様変更によるものと思われます。
ブログ設定の「SEOの設定」を一旦更新すると直ります。もしもそれでも直らないようでしたら、テーマ修正を検討しますのでお知らせください。

echo_zeroをご利用中の方はたいへんお手数をおかけいたしますが、何卒宜しくお願いいたします。

a-blog cms用テーマ「echo_zero」の、バージョン1.1.3をリリースしました。

https://github.com/webbingstudio/acms_theme_echo_zero

以下の大きめの不具合を発見し、修正しております。申し訳ありません。

・「ブログ設定」のGoogle Analyticsの内容が、公開ページに反映されない ・ユニットグループの段組解除を行なうと、以降の画像ユニットを左右配置したときに余白がなくなる

すでにご利用中の方は、お手数ですがGitHubで差分をご確認の上、更新をお願いいたします。

また、今回のバージョンから本文中の「見出し中（h3要素）」が中央寄せから左寄せに変更となっています。
（私がカスタマイズガイドを書いていて、本文見出しが中央寄せだと激しく不便だということに気付いたためです） すでにカスタマイズを行なっている方はご注意ください。

今後とも、echoプロジェクトを宜しくお願いいたします。

a-blog cms用テーマ「echo_zero」を正式にリリースいたしました。
非商用・検証目的であれば自由にご利用いただけます。商用の際はライセンスをご購入いただけると嬉しいです。

• webbingstudio/acms_theme_echo_zero: a-blog cms用テーマ「echo_zero」

echoのポータルサイトもリニューアルして、ようやく他のechoシリーズにも着手できそうです。

• echo - プロの制作者のためのフレームワークテーマ

さて、a-blog cms版のechoを作る！と言ってからリリースまで一年もかかりました。なぜそんなにかかったのかという話を、主要CMSの日本製テーマの事情なども交えて振り返りたいと思います。