a-blog cmsの一時的なテンプレート差し替えについて考える


地味なTIPSなのですが。
a-blog cmsのインクルードは、themesからのパスで記述すると、他のテーマのファイルを参照することができます。

冒頭の図のように、theme_a から theme_b にある file_b.html を参照する場合は以下のとおりです。

@include("/themes/theme_b/file_b.html")

これを利用すると、テーマの関係を無視することができます。

と書いた時点で、CMSの構築に慣れている人は悪い予感しかないと思います。実際、これの多用はおすすめできません。なんのために「テーマ」という概念があるのかわからなくなります。

ですが、これを活用できる状況もあります。

  • 期間限定で、特定のページを大幅に差し替えたい
  • サイト公開後の一定期間だけ、ティザーサイトを公開したい

などで、一時的に退避する本来のページも、別URLで閲覧できるようにしたい場合 です。

実際の手順とともに解説します。

※本来のページを移動する必要がない、かつ、一部のユーザーだけ見られれば良い場合は後述します

テーマ間インクルードの使用例

まず、ティザーサイト用の子テーマを作成し、本来のページと同じファイル名で差し替え後のページを作成します。
ここではわかりやすくするために親テーマ名を公式の site2019 、トップページを _top.html にします。
本来のページは top_02.html に退避させます。

teaser@site2019
  ├ _top.html
  └ top_02.html

一般的な親子テーマの継承を考えると、この構成にした時点で、親テーマの _top.html はティザーサイト用のテーマに上書きされ、参照できなくなります。
このため、退避した top_02.html には親テーマと同じコードを書かなければなりません。

もしもティザーサイトを公開中に top_02.html だけを編集して、それを忘れたままテーマをもとに戻すと、トップページに巻き戻りが発生してしまいます。

ここで、テーマを超えたインクルードを使います。

top_02.html のファイルを空にして、冒頭の、他のテーマを参照するインクルードを書きます。

@include("/themes/site2018/_top.html")

これで、ティザーサイト用のテーマ側で、親テーマのトップページを編集することはなくなるので、期間が終了したらテーマをもとに戻すだけで済み、安全な撤収ができます。

一時的な差し替えへの様々な対処

ウェブ制作に最適化されたa-blog cmsは、一時的なページ差し替えには、テーマ間インクルードの他に様々な対処法が用意されています。

参照テンプレートを変更するURLコンテキストを使う

退避前のページが非公開で良い場合、改修後のページをチェックしてほしい場合に使えます。URLの末尾に /tpl/(テンプレートファイル名) を追加すると、指定したテンプレートに同じデータを反映したページを見ることができます。

条件分岐を使う

ログインしているときだけ退避前のページを表示したいときに使えます。ただし、更新担当者は常時ログインしているので、この方法だと難色を示されるかもしれません。

ルールを使う

cookieや端末で動的にテーマを差し替えたい場合に使えます。期間も設定できるので自動終了できますが、管理画面から設定するので、a-blog cmsの構築に慣れていないとルールが適用されていることに気づきにくいです。しっかり情報共有をしなければなりません。

以上、いろいろな手段が考えられるのですが、ファイル1点くらいの入れ替えであれば、テーマ間インクルードが一番共有もしやすいように思います。ファイルを見たら、一行しか書いていないので、親テーマをそのまま読み込んでいることがすぐわかります。

いつもの手法や、開発元が推薦している手法にこだわらず、現在のプロジェクトの状況でもっとも良い方法を選定したいものです。


投稿者名 うぇびん 投稿日時 2019年07月20日 | Permalink

a-blog cmsでシステムで処理できない曜日表記に対応する

2019-07-06追記
文中で「a-blog cmsのIFブロックは、エントリーの基本情報の日付は条件分岐で判定できますが、カスタムフィールドの値を校正オプションで変換したあとの日付はできないようなのです。」と書いていましたが、できます。死にたい。訂正してお詫び申し上げます。
いずれにしても、SetRenderedで変数化しておいた方が、サイト内の複数箇所で利用しやすいことは代わりありません。


曜日が丸囲み漢字になっている


画像のようなカンプを受け取りました。曜日が「丸囲み漢字」になっています。

丸囲み漢字はユニコードで表示できないことはありませんが、CMSで扱うのは困難です。かといって、画像を書き出してimg要素にしたり、CSSの:after疑似要素で丸を重ねたりすると工数が増えます。
カッコ囲みに変更させてもらおうかと思ったのですが、全体のデザインとのバランスを考えるとデザイナーさんの希望を叶えたいところでした。

実装した経緯を記事にしておきます。
お急ぎの方は「解決方法」からどうぞ。
WordPressでの解決方法もあります。こちらへどうぞ。

※文章の都合上「日付型カスタムフィールド」と書いていますが、普通の文字列です。a-blog cmsは、Y-m-d形式であれば日付フォーマットを適用できる仕様です。

マークアップ

望ましいと考えられるマークアップは以下です。
この記号は「日本語表記の略語」ですから、abbr要素でマークアップして、title属性に国際表記を付与します。lang属性も入れようかと思いましたが、文書自体が日本語だと宣言しているのでやめました。

<p>
<abbr title="Monday">&#12938;</abbr><br>
<abbr title="Tuesday">&#12939;</abbr><br>
<abbr title="Wednesday">&#12940;</abbr><br>
<abbr title="Thursday">&#12941;</abbr><br>
<abbr title="Friday">&#12942;</abbr><br>
<abbr title="Saturday">&#12943;</abbr><br>
<abbr title="Sunday">&#12944;</abbr>
</p>

上記のコードを表示すると以下のようになります。







a-blog cmsの「共通設定」を試してみる

a-blog cmsの「コンフィグ>共通」設定には、曜日をどのように表示するかという設定があります。通常は「日〜土」の普通の漢字表記ですが、任意の文字列に変更可能です。
この文字列は、エントリー関連モジュールの {date#week} 変数で表示できます。



じゃあ下のように書けばいいよね、と思ったのですが…

<p>
<abbr title="{date#l}">{date#week}</abbr>
</p>

ここで問題が発生しました。
今回は、日付型カスタムフィールドで日程を表示している箇所があったのです。

{entry_sample_date}[date('l')] → Sundayなどの英語表記

{entry_sample_date}[date('week')] → PHPのdate関数にはないので何も表示されない

a-blog cmsの日付型カスタムフィールドの場合、使えるフォーマットは「PHPのdate関数と同じ種類」となっています。このため、先程のa-blog cms独自のフォーマット変換は適用されません。

改めて、プログラムでの処理を考えることになりました。

出し分け方を考える

プログラムでの処理の流れを考えるとこのようになります。

  • エントリーの曜日を取得
  • PHPのDateフォーマットの「N」に変換し、1〜7の数値を取得
  • 数字を条件にabbrでマークアップした記号を出力

WordPressの例

WordPressであれば、get_post_time関数を利用することになるでしょうか。ifを使おうかと思いましたが、配列をそのまま呼び出した方がスマートですね。

<?php
    $week_mark = array(
        '<abbr title="Monday">&#12938;</abbr>',
        '<abbr title="Tuesday">&#12939;</abbr>',
        '<abbr title="Wednesday">&#12940;</abbr>',
        '<abbr title="Thursday">&#12941;</abbr>',
        '<abbr title="Friday">&#12942;</abbr>',
        '<abbr title="Saturday">&#12943;</abbr>',
        '<abbr title="Sunday">&#12944;</abbr>'
    );
    $week_number = get_post_time( 'N' ) + 1;

    // 番号に該当する曜日記号を出力
    echo $week_mark[$week_number];

?>

同様の処理をa-blog cmsのIFブロックで行おうとしたのですが…また、カスタムフィールドならではの問題が発生してしまいました。

<!-- BEGIN_IF [{date#N}/eq/1] -->
<abbr title="Monday">&#12938;</abbr>
<!-- ELSE_IF [{date#N}/eq/2] -->
<abbr title="Tuesday">&#12939;</abbr>
・・・

a-blog cmsのIFブロックは、エントリーの基本情報の日付は条件分岐で判定できますが、カスタムフィールドの値を校正オプションで変換したあとの日付はできないようなのです。

できます。失礼いたしました。

<!-- BEGIN_IF [{entry_sample_date}[date('N')]/eq/1] -->
<abbr title="Monday">&#12938;</abbr>
<!-- ELSE_IF [{entry_sample_date}[date('N')]/eq/2] -->
<abbr title="Tuesday">&#12939;</abbr>
・・・

さすがにちょっと悩みましたが、先月の合宿のハンズオンでやった、SetRenderedの利用が参考になりました。

カスタムユニットを動的化してみよう | 2019春合宿 | ハンズオン | a-blog cms developer
https://developer.a-blogcms.jp/hands-on/camp2019spring/entry-3132.html

解決方法

最終的に、以下のように構築して解決しました。これであれば日付でもカスタムフィールドでも対応できます。

1. 曜日用のテンプレートを作成する

vars_week.html」というテンプレートをテーマ内に作成し、以下の通り記述します。それぞれの変数名は「label_week_(数字)」で、数字は月曜日から日曜日まで、1〜7とします。

<!-- BEGIN_SetRendered id="label_week_1" --><abbr title="Monday">&#12938;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_2" --><abbr title="Tuesday">&#12939;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_3" --><abbr title="Wednesday">&#12940;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_4" --><abbr title="Thursday">&#12941;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_5" --><abbr title="Friday">&#12942;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_6" --><abbr title="Saturday">&#12943;</abbr><!-- END_SetRendered -->
<!-- BEGIN_SetRendered id="label_week_7" --><abbr title="Sunday">&#12944;</abbr><!-- END_SetRendered -->

2. テンプレートを読み込む

曜日を使用する可能性があるテンプレートの冒頭で、この変数群テンプレートを読み込みます。

@include("/vars_week.html")

3. 変数を呼び出す

通常のエントリーの日付であれば以下のように記述します。

<!-- GET_Rendered id="label_week_{date#N}" trim="1" -->

Y-m-d形式のカスタムフィールドで、フィールド名が「entry_sample_date」であれば以下のように記述します。

<!-- GET_Rendered id="label_week_{entry_sample_date}[date('N')]" trim="1" -->

補足:校正オプションの自作

今回はやりませんでしたが、a-blog cmsは校正オプションを自作できますから
「Y-m-d形式の文字列を渡すと、先述のWordPressの場合の処理を通して、丸囲み漢字を返す」
という校正オプションを作ってしまう手もあります。

ただし、拡張を自作する場合は将来のバージョンアップやサーバー移転の際に漏れが出ないよう注意が必要です。

まとめ

こうして、丸囲み曜日を文書的にもシステム的にも問題なく表示できるようになりました。今回はたまたま丸囲み曜日でしたが、「弥生」とか「神無月」のような日本の古い月表記、a-blog cmsがサポートしていない言語の曜日表記にも使えますね。

なお、今回の場合、解決までに30分程度だったので問題なかったですが、時間がかかりすぎるようならカッコ囲みにさせてもらうなどの相談をしたほうが良いと思います。どのくらいかかりそうか、詰まったときに解決のヒントになりそうな引き出しがどのくらいで出てくるかで、そのあたりのバランスを考えています。

a-blog cms Traning Campのハンズオンは、毎回参考になることが多いので助かってます。アーカイブがあるのでぜひ見てみてくださいね。

https://developer.a-blogcms.jp/hands-on/


投稿者名 うぇびん 投稿日時 2019年06月30日 | Permalink

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