ここを教えてほしかった！！初めてのa-blog cms

公開日:

目次

今回は、ここを教えてほしかった！！初めての a-blog cms というテーマでブログを書きたいと思います。4月から有限会社アップルップルにてフロントエンドエンジニアとして働かせていただいております。そんな私ですが、実は1月からインターンとしていつくかの課題にとり組んでいました。その課題の1つとして、とあるサイトのa-blog cms実装を任されました。その中で詰まったポイントを今回は3つ紹介したいと思います。また、逆に言えばこのポイントは a-blog cms 初心者の人にとってつまづきやすいポイントだということでもあります。業務で a-blog cms を使っていて、新しく入社した方に教える際にも役に立つのではないでしょうか？

ちなみに、私のこのときの a-blog cms の知識は公式チュートリアルを一通りやった程度の知識でした。そこからなんとか１サイトa-blog cmsを使用して実装することができたため、その時もっとこういうふうに教えてくれていれば早く理解できたかもというポイントをお伝えできればと思います。

a-blog cms 初心者つまずきポイント

今回は以下の3つのポイントに絞って説明します。

  • スニペット？変数表？モジュールについて
  • ユニットの HTML はどこから？
  • Entry_Summary と Entry_Bodyってどっち使えばいいの？

スニペット？変数表？モジュールについて

まず、そもそもモジュールってなんでしょうか？ a-blog cms において、最も使用される機能であるモジュールですが、最初に見たときはこれが何をするのかよく理解できませんでした。

簡単に言うとモジュールとは「a-blog cms 内のデータを表示させる*"パーツ"*」です。

なぜ理解が難しいのか？

a-blog cms でもっとも使用される機能の1つなのに、なぜ難しく感じてしまうのでしょうか？もしかしたら核となる機能であるが所以かもしれませんが自分なりには下記の２点が原因なのではないかと感じました。

  • 複雑なスニペット
  • 数多の変数

それぞれ、解説していきます。

複雑なスニペット

a-blog cms には、スニペットが存在します。たとえば、Entry_Summary では下記のようなコードです。

<!-- BEGIN_MODULE Entry_Summary -->
<div class="acms-margin-bottom-medium">
@include("/admin/module/setting.html")
<!-- BEGIN notFound -->
<p>ただいまページを準備しております。もうしばらくお待ちください。</p>
<!-- END notFound -->

<div class="acms-grid">
	<!-- BEGIN unit:loop -->
	<!-- BEGIN entry:loop -->
	<div class="acms-col-md-4 js-autoheight-r"><!-- BEGIN image:veil -->
		<img src="%{ROOT_DIR}{path}" alt="{alt}" class="acms-img-responsive"><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" class="acms-img-responsive"><!-- END noimage -->
		<h3>{title}</h3>
		<p>{summary}</p>
		<p><a href="{url}" class="acms-btn">詳細をみる</a></p>
		<!-- BEGIN relatedEntry -->
			<!-- BEGIN relatedEntry.default -->
			<ul>
				<!-- BEGIN relatedEntry.default:loop -->
				<li><a href="{url}">{categoryName}: {title}</a></li>
				<!-- END relatedEntry.default:loop -->
			</ul>
			<!-- END relatedEntry.default -->
		<!-- END relatedEntry -->
	</div>
	<!-- END entry:loop -->
	<!-- END unit:loop -->
</div>

<!-- BEGIN pager:veil -->
<div class="acms-text-center">
	<ul class="acms-pager">
		<!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink -->
		<!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop -->
		<!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil -->
		<!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink -->
	</ul>
</div>
<!-- END pager:veil -->
</div>
<!-- END_MODULE Entry_Summary -->

a-blog cmsを実装したことがある人は見慣れているかもしれませんが、初めて触る人にとっては情報量が多く、ウッッとなってしまうのではないでしょうか？<!-- BEGIN unit:loop --> や <!-- BEGIN entry:loop --> など、見たことない記述がたくさん出てきます。実際、僕は最初、難しいなと思いました。

数多の変数

a-blog cms のモジュールには、製作者が制作しやすいように変数表というものが存在します。変数表としてはこちらになります。

変数表

この変数表も結構複雑な印象を受けますよね。また、スニペットについては早い段階で存在することを知っていたのですが、変数表に至っては、存在することを知らなかったです。ただ、変数表を見つけて、よく見てみるとモジュール内で様々な変数を使用できることがわかります。例えば、Entry_Summary 内で、エントリーid や カテゴリーid を表示することができたりします。この事に気づけたおかげで解決した問題もありました。

解決策

スニペットが複雑だという点に関しては、結論として、<!-- BEGIN unit:loop --> や <!-- BEGIN entry:loop --> など、主要のものに対しては何をあらわしているのかをまとめた資料などがあるとよいのではないかと思いました。 また、変数表に関しては、存在を伝えておくということが大切だと思いました。

スニペットの用語？については下記にわかりやすくまとめたため、参考にしていただけると嬉しいです。

モジュールタグ早見表

ユニットのHTMLはどこから？

次にお話するのはユニットが出力されているHTMLファイルについてです。a-blog cms では、エントリーを登録・変更する時にユニットという単位でコンテンツを追加していきます。ではこのユニットのHTMLはどのファイルから出力されているのでしょうか？ themes / system / _layouts / unit.html というところから出力されています。 僕の場合、このことに気づくまでにとても時間がかかりました。 例として、下記コードが

&lt;!-- BEGIN unit#text --&gt;
@section(text-unit)
&lt;!-- テキスト --&gt;
&lt;!-- BEGIN p --&gt;
&lt;p{class}&gt;{text}[raw|nl2br]&lt;/p&gt;&lt;!-- END p --&gt;&lt;!-- BEGIN h2 --&gt;
&lt;h2{class} &lt;!-- BEGIN_IF [{extend_tag}/nem] --&gt;id="{extend_tag}"&lt;!-- END_IF --&gt;&gt;{text}[raw|nl2br]&lt;/h2&gt;&lt;!-- END h2 --&gt;&lt;!-- BEGIN h3 --&gt;
&lt;h3{class} &lt;!-- BEGIN_IF [{extend_tag}/nem] --&gt;id="{extend_tag}"&lt;!-- END_IF --&gt;&gt;{text}[raw|nl2br]&lt;/h3&gt;&lt;!-- END h3 --&gt;&lt;!-- BEGIN h4 --&gt;
&lt;h4{class} &lt;!-- BEGIN_IF [{extend_tag}/nem] --&gt;id="{extend_tag}"&lt;!-- END_IF --&gt;&gt;{text}[raw|nl2br]&lt;/h4&gt;&lt;!-- END h4 --&gt;&lt;!-- BEGIN h5 --&gt;
&lt;h5{class} &lt;!-- BEGIN_IF [{extend_tag}/nem] --&gt;id="{extend_tag}"&lt;!-- END_IF --&gt;&gt;{text}[raw|nl2br]&lt;/h5&gt;&lt;!-- END h5 --&gt;&lt;!-- BEGIN ul --&gt;
&lt;ul{class}&gt;{text}[raw|list]&lt;/ul&gt;&lt;!-- END ul --&gt;&lt;!-- BEGIN ol --&gt;
&lt;ol{class}&gt;{text}[raw|list]&lt;/ol&gt;&lt;!-- END ol --&gt;&lt;!-- BEGIN dl --&gt;
&lt;dl{class}&gt;{text}[raw|definition_list]&lt;/dl&gt;&lt;!-- END dl --&gt;&lt;!-- BEGIN blockquote --&gt;
&lt;div class="entry-container"&gt;&lt;blockquote{class}&gt;{text}[raw|nl2br]&lt;/blockquote&gt;&lt;/div&gt;&lt;!-- END blockquote --&gt;&lt;!-- BEGIN table --&gt;
&lt;div class="entry-container"&gt;&lt;table{class}&gt;{text}[raw|table]&lt;/table&gt;&lt;/div&gt;&lt;!-- END table --&gt;&lt;!-- BEGIN pre --&gt;
&lt;div class="entry-container"&gt;&lt;pre{class}&gt;{text}&lt;/pre&gt;&lt;/div&gt;&lt;!-- END pre --&gt;&lt;!-- BEGIN none --&gt;
{text}[raw]&lt;!-- END none --&gt;&lt;!-- BEGIN markdown --&gt;
{text}[raw|markdown]&lt;!-- END markdown --&gt;&lt;!-- BEGIN wysiwyg --&gt;
{text}[raw]&lt;!-- END wysiwyg --&gt;

@include("/include/unit/tag-select.html")
@endsection
&lt;!-- END unit#text --&gt;

テキストユニットになって出力されます。

unit.htmlに苦しめられた話

最初にunit.htmlが必要になったのは拡張ユニットを使用して、画像のようなQ&Aのためのユニットを作っているときです。

Q&Aユニットのイメージ

拡張ユニットを作ったはいいのですが、下記画像のようにFlexboxのスタイルを当ててもうまくFlexboxが当たらないという問題に当たりました。

この現象、何が原因だったのかというと、unit.htmlによって出力される下記タグが邪魔をしていました。

<!-- BEGIN clear --><hr class="clearHidden"><!-- END clear -->

この原因を調査している時にユニットはunit.htmlから出力されているということがわかりました。逆に言えばこういった不具合がないと辿り着くことはなかったということです。 ここを理解してから a-blog cms と仲良くなれた気がするので a-blog cms 初心者にたいして優先的に伝えるべきポイントとして"ユニット元はどのファイルなのか"ということは優先度高めだと思います。

Entry_Summary と Entry_Bodyってどっち使えばいいの？

最後に、初心者が迷いがちであるEntry_Summary と Entry_Bodyの使い分けについてやっていきたいと思います。どちらも同じくエントリーの一覧を表示させるためのモジュールです。ただ１サイト実装してみて個人的にはEntry_Bodyで一覧表示をするのは難しいと感じました。そのため、結論としてはエントリーの一覧表示をさせたい場合は基本的に Entry_Summary を使用することをおすすめいたします。

Entry_Summary と Entry_Bodyの違い

Entry_Bodyより、Entry_Summary をすすめる理由を説明する前に Entry_Summary と Entry_Bodyの違いについて説明します。 Entry_Bodyは、エントリーの一覧表示、単一表示、エントリーの投稿など、エントリーの情報をほぼ全て呼び出すことができます。その一方で、Entry_Summary は、エントリーの一覧(URLとタイトルと日時とカテゴリーとメイン画像と概要テキストを呼び出すことができます。 つまり、ざっくりいうと、Entry_Bodyでは本文を表示させることができますが、Entry_Summary では概要までしか表示させることができません。

一覧表示で Entry_Summary を使うべき理由

ここまでだと、Entry_Body を使用すればいいではないかと思うかもしれません。しかし、Entry_Body は変数がとても多かったり、他のモジュールとは変数名が異なることもあります。そのため、意図したとおりに表示させることが難しかったりします。また、詳細ページと一覧ページでユニットを出力するHTMLを変えたいといった場面では、Entry_Bodyは詳細ページの本文をそのまま出力するため、少し不便です。 こんなとき、Entry_Summary であれば、カスタムフィールドに出したい情報を入力できるように作成して、表示させるほうが意図したとおりにデータを表示させることができると思いました。

まとめ

a-blog cmsは制作者に優しく、カスタマイズ性の高いCMSです。しかし、それが故に難しいポイントもでてきてしまいます。そんなポイントを今回は３点にまとめて紹介しました。 最後に復習としてお伝えした３点を再度まとめたいと思います。

  • ビルトインモジュールのスニペットの記述の説明と、変数表をみせること
  • エントリーのユニットによって出力されるコードはunit.htmlで定義されていると伝える
  • エントリーの一覧表示はEntry_Summary を使用する。Entry_Summary で表示できないデータを表示させたい場合には、エントリーのカスタムフィールドて追加すると伝える

こういった、a-blog cms を使用する上での壁を乗り越え、快適な a-blog cms ライフを送るための手助けになっていたら幸いです。