この記事は「a-blog cms Advent Calendar 2018」への参加記事です。多くの方がa-blog cmsに関する記事を12月1日から25日まで順番に公開しています。ご興味おありの方はぜひご覧ください。
さて、私たちが運営しているコワーキングスペース「JUSO Coworking」のウェブサイトは名古屋のアップルップル社が開発する国産CMS「a-blog cms」で構築されています。今回の記事ではおもにWordPressを扱ってきたウェブ制作者の視点から、a-blog cmsの特徴をご紹介します。
なお、a-blog cmsの入門者で、かつある程度、WordPressをはじめとするCMSテーマ開発の知識がある方向けの記事となっています。
私とa-blog cmsの関わり
私が受注する案件でおもに扱っているCMSはWordPressです（このブログもWordPressで構築されています）。当然テーマ開発の回数で言えばWordPressがダントツに多いです。しかしコワーキングスペースの運営者という仕事柄、他のCMSコミュニティとの関わりもあり、扱うCMSはできる範囲で限定しない方針でやっています。これまでにconcrete5での制作実績もありますし、a-blog cmsについても尊敬している複数の制作者さんが勧めていることもあり、興味は持っていました。
せっかくの自分の事業サイトですので、思い切って慣れたWordPressを離れて、a-blog cmsにトライしてみようかと思ったのが3年ほど前のことです。2016年にJUSO Coworkingのサイトはa-blog cmsに移行されましたが、実はこれはアップルップルさんが運営するコワーキングスペース「ベースキャンプ名古屋」のためにカスタマイズされたデフォルトテーマをそのまま利用したものでした。
初めてのa-blog cmsテーマ開発
とはいえやはり自分でテーマ開発しなくては身にならない…と思いながら2017年まで時は経ち、デザインまではしたのですが、そこからまた開発が止まって実際にコーディング・a-blog cmsの実装まで進んだのは2018年6月のこと。ずいぶん長い時間がかかりましたが、2018年8月にようやくオリジナルのa-blog cmsテーマでリニューアルを果たすことができました。
このリニューアルについてはこのブログの過去記事「JUSO Coworkingのウェブサイトを2年ぶりにリニューアルしました」にて軽くご紹介していますが、この記事では実際にテーマを開発してわかったa-blog cmsのCMSとしての特徴に着目してお話します。
HTMLとCSSがとても自由になるCMS
a-blog cmsはウェブ制作者がHTMLとCSSを自由に組んで静的なウェブページのデータを構築してから、これをCMSのテンプレート化することに特に長けていると私は感じています。
WordPressのテンプレートタグによるHTMLの生成について
もちろんWordPressでも同様の手法でテーマを制作することは可能ですが、制作者自身が書いたHTMLやCSSをそのまま利用することができないシーンも数多く存在しています。たとえばWordPressのテンプレートタグは原則として予め決まった形のHTMLを生成します。またHTMLタグについているclassについても任意のものを指定することができないケースが数多くあります。プラグインが生成するHTMLについても同様で、WordPressのコアで定義されているテンプレートタグよりも出力内容をカスタマイズしにくいこともしばしば。
つまり、予め制作者が書いてスタイリングしたHTML・CSSがそのまま利用できないケースがよくあるのです。手慣れた制作者であればよく使うテンプレートタグ・プラグインが吐き出すHTMLやclassを予め調べておき、これに合う形でCSSを作っておくこともできますが、なかなか学習コストのかかることだと思います。
まして、classに命名規則を設けて、設計が首尾一貫した管理しやすいCSSを実現したいという場合には、CMSが勝手に生成するclassは邪魔にすらなることがあります（CMS由来のclassは別ファイルのCSSやSassにまとめるという手もありますが、根本的な解決にはなりません）。
a-blog cmsの「モジュール」という仕組み
こういった観点で、テーマ開発においてa-blog cmsを特徴的なものにせしめているのは、テンプレートファイルにおけるデータ出力のあり方です。a-blog cmsでは、モジュール※と呼ばれる仕組みが、テンプレートファイル内のデータ出力を司っています。
※a-blog cmsのモジュールにはビルトインモジュール・フィールドモジュール・タッチモジュール等の様々な種類のモジュールが存在していますが、この記事ではデータ出力のためのモジュール（ビルトインモジュール・フィールドモジュール等）を便宜的に「モジュール」と表現します。
a-blog cmsには出力したい内容に応じて数多くの種類のモジュールが用意されています。とはいえWordPressのテンプレートタグに比べれば数は少なく、モジュール自体の種類を覚えるのはそう難しくないでしょう。
まずはこのモジュールというものを実際に見てみましょう。
モジュールのコードはa-blog cmsの開発者向けサイトである「a-blog cms Developers」のリファレンス内にサンプルが公開されています。使う都度サイトを参照してもいいですし、慣れた制作者であれば、日頃利用するエディタにスニペットとして登録しておいてもいいでしょう。
以下はサイト（ブログ）に登録したカテゴリの一覧を出力する「Category_Listモジュール」のコードです。WordPressにおいてはテンプレートタグ「wp_list_categories」とほぼ同様の働きをします。
<!-- BEGIN_MODULE Category_List -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<ul class="acms-list-group">
<!-- BEGIN category:loop --><!-- BEGIN ul#front -->
<!-- END ul#front --><!-- BEGIN li#front -->
<li><!-- END li#front --><!-- BEGIN category:veil -->
<a href="{url}" class="acms-list-group-item">{name}<!-- BEGIN amount:veil --><span class="acms-badge acms-float-right">{amount}</span><!-- END amount:veil --></a><!-- END category:veil --><!-- BEGIN li#rear -->
</li><!-- END li#rear --><!-- BEGIN ul#rear -->
<!-- END ul#rear --><!-- END category:loop -->
</ul>
</div>
<!-- END_MODULE Category_List -->
モジュールは<!– –>で囲まれている、一定の機能をもったブロックでセクショニングされ、その中には{}で囲まれた変数が配置されています。この「変数」が直接のデータの出力場所となっています。
一見すると、
<?php wp_list_categories() ?>
と書くのに比べるとずいぶんと長く、面倒に感じることと思いますが、このモジュール、中のHTML部をどのように変えたとしてもブロックと変数の構造さえ変えなければ問題なく動き、データを出力します。もちろんHTMLタグにclassをどのようにつけても構いません。対してWordPressの「wp_list_categories」はこれに指定する引数でもって、ある程度出力するHTMLを制御できますが、classを含め完全に自由にすることはできません。
また、WordPressのループでは書かざるをえないPHPも一切書く必要がありません。これはPHPをある程度でも知っている人にとっては一長一短ではありましょうが、非プログラマにとっては魅力的な点でしょう。
a-blog cmsのすべてのモジュールに以上の説明が当てはまります。このモジュールという仕組みから、a-blog cmsはHTML、ひいてはそのclassに影響されるCSSの自由度がかなり高い水準で確保されているCMSとなっています。
CSS設計だけでなく、HTMLのアクセシビリティやセマンティクスにこだわりたい制作者にも親和性が高いと言えるでしょう。
引数は管理画面から制御できる
WordPressに慣れた方であれば「あれ？ 引数はどこに書くの？」と気になるところでしょう。WordPressのテンプレートタグであれば、これはPHPの関数ですので、
<?php wp_list_categories([引数]) ?>
上記の位置に所定の引数を書き込むことでテンプレートタグの動きを制御できます。
対してa-blog cmsではテンプレートファイルに引数は書き込みません。管理画面でこれを制御します。もうちょっと詳しく言うと、
- テンプレートファイルにて、モジュールに任意のID（モジュールID）をつける
- 管理画面にてそのIDを登録する
- つづけて管理画面でそのIDの引数などを設定し、モジュールの挙動の詳細を決定する
という流れになります。詳しい手順は下記の公式ドキュメントをご覧ください。
この構造はモジュールの挙動がテンプレート制作者だけでなく、コンテンツ管理者にも開かれていることを意味します。記事の一覧モジュール（Entry_Summaryモジュール）における表示件数であったりページャーの有無、特定のカテゴリへの絞り込み条件などの指定が、管理画面まわりの知識さえあれば非エンジニアの管理者にもできる、というわけです。
これはときにモジュールの表示内容を壊してしまう事故にもつながるので手放しで優れているとは言えませんが、より踏み込んだ管理をしたいコンテンツ管理者にとっては助かる設計だと思います。
今回ご紹介したモジュールという仕組みがもたらすa-blog cmsの特徴をまとめると
- かなりHTMLとCSSが自由になる
- ゆえにCSSの設計にこだわりたい制作者とは相性がよさそう
- アクセシビリティやセマンティクスに配慮したサイトも、知識さえあれば十分作成可能
- コンテンツ管理者でもテンプレートの挙動に、パーツごとにアクセス可能
- 比較的コンテンツ管理者の領分が広い
といった感じになるのかなと思います。これらの点がもっとも私の印象に残ったa-blog cmsの特徴です。
他にも特徴はいろいろある
他にも紹介したいa-blog cmsの特徴はいろいろあります。すべて挙げるとキリがないのでふたつだけ。
2.8系になってより使いやすくなったブロック型エディタ
様々な機能をもったブロックを縦に並べていくタイプのエディタです。ブロックをグループにしてdivでくるむことができるため、これを利用して複数カラムのレイアウトが実現できたりもします。また少々やり方にクセはありますが、任意のHTML構造のブロックやブロック・グループを自作してコンテンツ管理者に提供することも可能です。見ているページをそのまま編集することもできます。
疎にも密にもつなげられるブログネットワーク
a-blog cmsでは1サイトの中に複数の親子関係をもつブログ群を設ける事が可能です。それぞれのブログの関係は設定次第で疎にも密にもでき、WordPressにおけるカスタム投稿タイプ的な使い方にもマルチサイト的な使い方にも対応しています。
おわりに
「コードを書けば動く」速さ、関わる人数の多さゆえの利便性やダイバーシティ・豊富なプラグインによるクイックな機能追加などWordPressならではの魅力も一方で感じつつ、これまで説明したとおりa-blog cmsは制作者にとってもコンテンツ管理者にとってもかなり魅力的な選択肢です。
今後もJUSO Coworkingウェブサイトの管理を楽しみつつ、a-blog cmsテーマ開発のお仕事もできるようになれるよう、ひきつづき頑張っていこうと思います。
ご興味持たれた方、ぜひ「a-blog cms Advent Calendar 2018」の他の記事もお楽しみください！
このブログ主の夫のほう。大阪を中心に活動するウェブデザイナー。水交デザインオフィス代表。JUSO Coworking運営。趣味でハウス・ディスコDJ / デレマスP。共著書『世界一わかりやすいWordPress 導入とサイト制作の教科書』発売中です。