a-blog cmsの、include・extendの実案件での活用について

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

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

はじめに

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

【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」のコードを3つの公開テンプレートで使い回していますが、それぞれ実際の表示結果が変わります。特に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の変数渡しは便利な反面、インクルード先のテンプレートで、その変数がどこから定義されたものなのかわかりにくいという欠点があります(変数名でテンプレートを検索すればいいのですが)。 同じような変数名を使いすぎてカオス化しないよう、ルール決めが必要です。

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


投稿者名 うぇびん(管) 投稿日時 2018年12月11日 | Permalink

a-blog cmsユーザーのカスタマイズ情報サイト「ablogcms.org」がオープンしました


CMS「a-blog cms」のユーザーによる、情報の共有を目的としたサイト「ablogcms.org」を開設しました。
開発元の承認のもと、「a-blog cms エバンジェリスト」を中心とした有志によって運営・更新されています。

a-blog cms カスタマイズ情報 FAQ | ablogcms.org

a-blog cmsに関する、よくある質問への回答(FAQ)や、目的からの逆引きガイド、用語説明などを掲載していきますので、公式の「開発者向けドキュメント」とあわせてご利用ください。


投稿者名 うぇびん 投稿日時 2016年06月22日 | Permalink

a-blog cmsで「インデックスとして扱っているエントリー」を他のエントリーと区別する方法


CMSを導入したウェブサイトの制作では、上の図のような要件がよくあります。

  • 特定コンテンツのトップページの一部を自由に編集できるようにしたい
  • レイアウトは個別ページとは全く異なるものにしたい
  • その際には個別ページと同じインターフェースが使いたい

この対応にはいくつかの手法があり、「非公開にした特定エントリーの本文のみをインデックステンプレート内にに呼び出す」という対応が定番ですが、a-blog cmsでは「特定のファイル名を指定したエントリーでインデックステンプレートを上書きする」という方法もあります。


投稿者名 うぇびん(管) 投稿日時 2016年04月17日 | Permalink

成果物のマニュアルをMovable Typeで作っている話

これは、「Movable Type Advent Calendar 2015」の7日目の記事です(ただし7日目はあと30分)。
制作中のプロ用テーマ「echo」の話ではありません。でも少し関係があります。

他にもやっている人がいるかもしれませんが、ここ二、三案件くらい、Movable Typeで成果物のマニュアルを作っています。HTMLとCSSで成形し、ブラウザで表示してPDF化します。



投稿者名 うぇびん 投稿日時 2015年12月07日 | Permalink

WordPressの構築を見直す2015

留守中の姉の部屋で食べる「きのとや」のチーズタルトおいしいです ŧ‹"ŧ‹"(•ㅂ•)ŧ‹"ŧ‹"


シルバーウィークの間、札幌の実家に帰省中です。といってもほぼ毎日、仕事をしているわけですが…

久しぶりに、WordPressの案件が入りました。最近は新着情報など小さな組み込みが続いたので、まとまった案件はほぼ一年ぶりです。
いずれにしてもいちから作り直しになるので、テーマやプラグインを見直すことにしました。


投稿者名 うぇびん 投稿日時 2015年09月20日 | Permalink