初めて案件でa-blog cmsを利用した話

公開

以前からa-blog cmsに興味を持っていて、勉強会でお話を伺うなどしていたのですが、先日ついにa-blog cmsを使う案件が入り、僕が構築を担当しました。普段はMTを使っていて、案件でa-blog cmsを使うのは初めてだったので色々戸惑いもありましたが、ある程度知識がストックできていたので無事ローンチが迎えられそうです。

作業中に2点バグを見つけましたので、報告させて頂きました。1点目はバージョン2.5.0.1で解決されました。

画像を伴った見出しの実現

一つ迷ったのは、見出しの頭にデザインが入った数字が入るパターンをどうするか、というものでした。例えば次の画像のように頭に丸数字の画像が入り、後ろに見出しのテキストが続くようなものです。
画像を伴った見出しの例

最初はWYSIWYGで入れるしか無いかなと思ったのですが、ふと思いついたのが校正オプションの拡張でした。これならば、一定の書式に従って入力しさえすれば、割と簡単に実現できます。

(追記)思いつきで作ったのでドキュメントを読んでいなかったのですが、編集モードを拡張にしてtext_h3withNumberとし、テンプレートはinclude/unit/tag-select.htmlに書くと良いようですね。

1. テキストタグセレクトの設定

まずテキストタグセレクトの設定をします。タグh3withNumber.hdg-with-num-01を新たに作成しました。クラス名を付けたのは、標準のh3要素のスタイルを上書きするためです。

2. ユニットのテンプレートの編集

include/unit.htmlのテキストユニットに関するテンプレート部分に次のコードを追加しました。校正オプションnumberImageを追加指定します。

<!-- BEGIN h3withNumber -->
<h3 <!-- BEGIN_IF [/nem] -->id=""<!-- END_IF -->>[numberImage|nl2br]</h3><!-- END h3withNumber -->

3. 校正オプションの拡張

次のようにnumberImage校正オプションを作成しました。正規表現を用いた置換を利用して、[03]シェラトンホテルズ<img src="/themes/[theme_name]/images/txt_number_03.png" alt="3">シェラトンホテルズのような出力に書き換えます。

class ACMS_User_Corrector
{
    public static function numberImage($txt)
    {
        $imageDir = '/' . THEMES_DIR . '[theme_name]/images/';
        preg_match('/\[(\d+)\](.*)/', $txt, $matches);
        $image = '<img src="' . $imageDir . 'txt_number_' . $matches[1] . '.png"' .
                    'alt="' . preg_replace('/^0/', '', $matches[1]) . '">';

        return $image . $matches[2];
    }
}

色々な種類のカスタムユニットを作りたい

1種類のカスタムユニットですみましたが、案件によってはエントリー毎・カテゴリー毎に異なるカスタムユニットを作りたくなるのでは?と考えました。ドキュメントによれば、admin/entry/unit/custom.htmlに入力フォームを作成するとあるので、IFブロックで条件分岐するしかないのかなと考えました。試したところ、意図通り動作しました。ただ、ユニット追加ボタンのラベル付けに困りますね。

<!-- BEGIN custom_unit:veil -->
<!-- BEGIN_IF [%/eq/23] -->
エントリーID23の場合のカスタムユニット
<!-- ELSE -->
未設定
<!-- END_IF -->
<!-- BEGIN custom_unit:veil -->

スケジュールで複数行のテキストを入力したい

これは、admin/schedule/edit-data.htmlのitemの入力フィールドをtextarea要素に変更するだけで実現できました。入力フィールドを柔軟に変更できるのがいいなと感じました。