a-blog cmsも、その概念が把握でき、
ようやく使い慣れてきました。
そして、かなり専門性が高いと判断したため、
このブログでも、「a-blog cms」というカテゴリを追加しました。

これといった情報もなく、どこをどう、いじればよいのか、
よくわからなかったのですが、
公式のリファレンス等をよく読んだり、
サンプルを分析していく事で、どの記述がどの役割を果たすのかなど、
少しずつ理解し、実験をしていく事により、
なんとかこのシステムを扱えるようにまでなりました。

個人的な学習法としましては、
まず必要最小限の要素を見つけ出す事です。

とくにa-blog cmsインストール直後では、
サンプルとして様々なモジュールが、あらかじめ用意されていますが、
最初から、こんなにいっぱい使おうと思うと、混乱の元になります。
なので、全部消しちゃいましょう。

まずは「モジュールID」。
これら全部を消してしまいますが、
残念ながら、この画面でチェックしたものを一括で消すという機能はございません。
「条件設定」のボタンをクリックし、「削除」ボタンをクリックすれば、
モジュールIDを消す事はできますが、それにはページ遷移する事になるため、
マウスホイール押下で新規タブを立ち上げ、
一気に作業したほうがラクです。

上記スクリーンショットで削除を行ったのは、
「モジュールID」というもので、
完全無料の「Lite」版では使えないのですが、
要は、１種類のモジュールをID分けして、複数個使おうという仕組みです。

そして、作成したモジュールIDに対応したモジュールを出力するコードは、
こうなります。

<!-- BEGIN_MODULE Entry_List id="blog_no_03" -->
	<!-- BEGIN entry:loop -->
		<tr>
			<th>{date#Y}-{date#m}-{date#d}</th>
			<td><a href="{url}">{title}</a></td>
		</tr>
	<!-- END entry:loop -->
<!-- END_MODULE Entry_List -->

これはエントリーリスト、つまりブログ記事のタイトル一覧を
何行か表示するためのモジュールです。

<!−− BEGIN_MODULE Entry_List id=”blog_no_03″ −−>

<!−− END_MODULE Entry_List −−>

で囲まれた範囲が、エントリーリストの部分である事を示し、
「BEGIN_MODULE Entry_List」の「Entry_List」で、
出力するモジュールの種類を判別します。

さらに無料版以外のバージョンに限り、IDを使用する事ができ、
「id=”blog_no_03″」の部分で、HTML同様の形式でIDを指定する事により、
先ほど管理画面で設定した「モジュールID」で
設定したモジュールが出力される仕組みです。
このとき、モジュールの種類とIDは、管理画面でも設定した
モジュールの種類とIDとも一致している必要があります。

ちなみに、

<!−− BEGIN entry:loop −−>

<!−− END entry:loop −−>

内側にあるこの部分は、
管理画面の「モジュールID」の「表示設定」において設定した
「表示件数」などの数値の数だけ、ループして出力するという意味です。

出力可能なモジュールは、エントリーリスト以外にも、
ブログ記事である「エントリー本文」など、
色々ありすぎちゃって吟味しきれないぐらいあります。

ですが、左メニューから「コンフィグ」を選択し、
その中盤あたりにある「モジュール」の各項目から
「スニペット」の文字をクリックする事で、入れるべきコードが出力されます。

このスニペットにIDを追加したりすれば、出力コードとして利用できます。
慣れてくれば、出力されたコードをCSSでデザインしたり、
このスニペットの中にも、よく見ると通常のHTMLタグもあるので、
タグの種類を変更して出力するという事も可能です。

また、「{url}」「{title}」などの部分には、見てのとおり
URLやタイトルが出力される箇所ですが、
この中カッコ内の記述も、「スニペット」の左にある「変数表」をクリックする事で、
モジュール内で、何が出力可能かも確認できます。

これも最初見たとき、なんなのかサッパリだったのですが、
バージョンアップにより、右側に簡単な日本語の説明も付与されたのもあってか、
わりと解りやすくなっているとは思います。

この「モジュール」機能以外にも、「a-blog cms」で注目したいのは、
別途HTMLファイルを呼び出して、部品にできるという点です。

「<!−−#include file=”（呼び出すHTMLファイルのパス）”−−>」

この１行で、その部分に別のHTMLファイル内に記述されたコードを
呼び出す事が可能で、さらにその呼び出し対象のHTMLファイルにも、
モジュール呼び出しなどといった記述も可能です。

ただ、その呼び出される対象の画像などの相対パスは、
出力元から参照するのではなく、
呼び出されるファイルが置かれた、そのままの位置で参照する必要があります。

このようにパーツとして呼び出されるHTMLファイルは、
ページアクセスにより、実際に出力されたHTMLコードと
合体したような形となりますが、
a-blog cmsのシステム内で、相対パスの補完が行われているようです。

ただ、CSSファイル内までは補完されていないようで、
CSSで背景画像などのパスを記載する場合は、
そのCSSファイルのある場所から相対パスで参照すれば可能です。

ここまで来るのに、サンプルページから
コードを削ってはプレビューを繰り返してのコードの吟味で、
必要なコードを探し出したり、
Google Chromeの「要素を検証」などの機能で、
どのように出力されているのかを把握したりなど、
試行錯誤の繰り返しでした。
ただ単純に、スニペットをコピーすれば終わりで
済むものではありませんでした。

しかし、どの記述により、どの要素が出力されるのかを把握できれば、
普通なら様々なプラグインを導入する事で実現していた事も、
a-blog cmsの標準の機能で実現できる可能性もあるはずです。

Tweet