a-blog cms は2009年6月にリリースされました。当初は「Web制作者が、より便利で簡単にカスタマイズできる」というコンセプトで開発されましたが、進化を重ね、クライアント側にも使いやすいインターフェースも提供できるシステムとなりました。

Ver.2.0以降はプロフェッショナルライセンスやエンタープライズライセンスなどの承認機能が利用できるライセンス体系が増え、より多くの方々に利用していただけるようになっています。

2024年2月現在、北は北海道から南は九州まで、日本全国700社ほどのWeb制作会社で採用いただいており、利用実績は5,000サイト以上となりました。公開事例として、680サイト以上を公式サイト上で紹介しています。

これまで、各地での勉強会やオンラインセミナーでお話した内容を文章にまとめたのが、この「基礎からしっかり学ぶ a-blog cms」です。a-blog cms に興味を持った方は、まず読む入門書としてご活用ください。

a-blog cmsのテストサーバーとして無料でご利用いただける「ablogcms.io」も用意しております。本や入門ドキュメントで基本を学んでいただきながら、実際の使用感や動作はこちらの環境でお試しください。

a-blog cms では、テンプレートである HTML にモジュールというパーツを記述して動作します。

テンプレートにはいくつでもモジュールを貼り付けることができますが、それらが一度に動作すると処理時間も長くなります。例えば0.1秒で動くモジュールが100個テンプレートに貼ってある場合は、表示に10秒かかることになります。しかし標準搭載のキャッシュ機能で、表示に10秒かかるページも2回目以降は瞬時に表示されますのでご安心ください。

どのようなモジュールがあるのかを知ることが、a-blog cms のカスタマイズスキル上達への近道です。モジュールには大きく分けると、「ビルトインモジュール」「フィールドモジュール」「タッチモジュール」の3種類があります。

ビルトインモジュール

基本的にモジュールと言えば、この ビルトインモジュール のことを指します。エントリー系の情報はもちろん、カテゴリー、ナビゲーション、バナー、トピックパス等いろいろなパーツを表示する際にも利用するものです。

<!-- BEGIN_MODULE Entry_List -->
<ul>
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

モジュールは、<!-- BEGIN_MODULE モジュール名 --> から <!-- END_MODULE モジュール名 --> までが1つのシステムとして動作し、モジュールの中にモジュールを書くこともできます。この際のモジュールの実行順は内側が先になり、その後に外側のモジュールへと続きます。

これらのモジュールの記述例はスニペットとして提供していますので、まずは利用するスニペットをテンプレートファイルに貼り付けてみてください。

フィールドモジュール

登録したカスタムフィールドのデータを表示させるためには、基本的に以下のようなフィールドモジュール を利用する必要があります。

• Blog_Field
• Category_Field
• Entry_Field
• User_Field
• Module_Field

しかしカスタムフィールドによっては、フィールドモジュールを使わずにビルトインモジュール内で利用するものもあります。

Entry_Body , Entry_Summary の entry:loop 内でフィールドモジュールを利用する際は、モジュールの設定画面からカスタムフィールドを有効にするよう設定しなければいけません。使わない時は、動作させないほうが処理が軽くなります。

タッチモジュール

表示、非表示を制御するモジュールです。制御したい部分を各 タッチモジュール で囲みます。

<!-- BEGIN_MODULE Touch_Login -->
    <!-- BEGIN_MODULE Admin_ActionMenu -->
    <p>ユーザー名：{name}</p>
    <!-- END_MODULE Admin_ActionMenu -->
<!-- END_MODULE Touch_Login -->

例えば、Touch_Login モジュールを利用する際には、ログインしている時のみ表示させたい部分を<!-- BEGIN_MODULE Touch_Login -->から<!-- END_MODULE Touch_Login -->で囲みます。ログインしていない時には、囲まれている部分は表示されないようになります。

各種モジュールの設定

モジュールの細かな設定については、テンプレート上ではなく管理ページ上で設定します。例えば、一覧の表示件数や表示順、画像を表示する際のサイズの指定等の各種設定が可能です。詳しくは次のコンフィグで説明します。

a-blog cms ではエントリーの編集画面で、WYSIWYG の入力画面ではなく「ユニット」と呼ばれるブロックを積んでコンテンツを作ります。HTMLに不慣れな人でも正しい文章構造を保ったままテキストを登録したり、画像や地図などをレイアウトしていくことができます。

ユニットの種類

• テキストユニット
• 画像ユニット
• テーブルユニット
• ファイルユニット
• 地図ユニット（ Open Street Map / Google Maps ）
• ビデオユニット ( YouTube / Vimeo )
• 引用ユニット ( OGP )
• メディアユニット ( 画像 / PDF )
• モジュールユニット

このように、意図に応じて様々なユニットが用意されています。これらのユニットで実現が難しいものについては、自由に項目を設定しレイアウトできるカスタムユニットを使って新規に作成することができます。

ユニットグループ

複数のユニットをひとまとめにする機能として、ユニットグループという機能が用意されています。デフォルトでは段組をするための設定となっています。

ユニットグループはユニットを DIV タグで囲み、指定の Class を設定する方法で機能しているので、使い方によってはさまざまな利用方法が可能です。

カスタムフィールドとは、エントリーの記事を自由に書いていくユニットとは異なり、コンテンツに最適な入力欄をあらかじめ定義し、決められたレイアウトで表示させることができるものです。

標準テーマの Site や Beginner のテーマでインストールした場合には「物件情報」がエントリーカスタムフィールドのサンプルになります。

一般の閲覧者の画面

編集用のフォーム画面

カスタムフィールドの種類

カスタムフィールドは「ブログ」「カテゴリー」「エントリー」「ユーザー」「モジュール」の5種類があり、以下のようにファイルの場所を区別してデータを管理しています。

カスタムフィールドのタグの基本

他のCMSではブラウザ上の管理ページからカスタムフィールドを設定していくことができるものが多いですが、a-blog cms ではそれぞれの field.html にHTMLのフォームを記述することで作成していきます。

<h3>カスタムフィールド サンプル</h3>

<input type="text" name="sample1" value="{sample1}" />
<input type="hidden" name="field[]" value="sample1" />

<select name="sample2">
    <option value="aaa"{sample2:selected#aaa}>aaa</option>
    <option value="bbb"{sample2:selected#bbb}>bbb</option>
    <option value="ccc"{sample2:selected#ccc}>ccc</option>
</select>
<input type="hidden" name="field[]" value="description" />

このようにして多くのカスタムフィールドを設定することで、柔軟にフォームを作成でき、クライアントに分かりやすいインターフェースを提供できるようになります。

さらにHTMLファイルを使うことで JavaScrtipt も併用できるため、入力した郵便番号から住所を出力するといったような実装をすることも可能です。

また表示用のページでは　Blog_Field というカスタムフィールドのデータを表示するモジュールを利用し、以下のようにテンプレートに記述します。

<!-- BEGIN_MODULE Blog_Field -->
  <p> sample1 : {sample1}</p>
  <p> sample2 : {sample2}</p>
<!-- END_MODULE Blog_Field -->

カスタムフィールドメーカー

複雑なフォームタグの作成を補助するためのツールとして「カスタムフィールドメーカー」を用意しています。

• デベロッパーサイト https://developer.a-blogcms.jp/tools/
• インストール済みのサイト内の管理ページのコンフィグ内

カスタムフィールドグループ

複数のカスタムフィールドをまとめて管理し、追加や削除、順番の入れ替えなどが行える機能をカスタムフィールドグループといいます。こちらもカスタムフィールドメーカーでの生成が可能で、最大件数などの条件も設定することができます。

カスタムユニット

カスタムユニットは、複数の入力欄を1つのユニットとしてまとめ、決められたレイアウトで表示させる機能です。

カスタムユニットはカスタムフィールドと違い、項目単位での検索対象になりません。しかし、全文での検索対象にはなりますので、扱いとしてはテキストユニットと同様になります。

a-blog cms の設定をコンフィグと呼びます。このコンフィグはブログ毎に管理されており、個別の設定ができるようになっています。

一部のコンフィグの設定は、管理ページ内のコンフィグ管理のページで変更できます。主に以下の3つのグループに分かれた設定がブラウザ上でできるようになっています。

• ブログの設定
• エントリーやユニットの設定
• モジュールの設定

後半で紹介するルールやモジュールIDでもコンフィグの設定は出てきますが、ここで紹介するコンフィグについては、ブログ（システム）の基本設定という位置づけになります。

a-blog cmsのコンフィグ管理のページ

ブログ設定

機能設定のページに、キャッシュの設定があります。a-blog cms では、アクセスがあった時に、アクセスがあったページのデータを作ります。作ったページのデータをサーバ上に保存しておき、同じページへのアクセスがあった際には、このデータをそのまま使うようにします。それがキャッシュ機能です。

このキャッシュ機能はサイト制作中は変更した部分をすぐに確認できないことから、通常オフになっています。 キャッシュ機能を利用する際には、デバッグモードをオフの状態にしなければなりません。config.server.php 内の以下のような記述で、 1 と設定されている部分を 0 に変更しましょう。

また「キャッシュの有効時間」や、子ブログが更新された時にキャッシュをリフレッシュするのか指定する「キャッシュの感度設定」、「クライアントのキャッシュの時間」を設定すると、その時間内はクライアント側のキャッシュが使用されます。そのため、ページが更新された場合に反映されないことがあり、管理ページにログインした時にブラウザの再読込ボタンを押したり、キャッシュを消したりしないとページが切り替わらないことがあります。

エントリー設定

エントリーの設定は、日々の記事を更新する人にとってCMSの使いやすさを左右する大切なものです。

デフォルトの設定ではメインカラムの幅が680pxの時に最適な設定になっていますので、幅が違う際には各種サイズを見直しする必要があります。

ユニット追加ボタン

一般ページのエントリーの下の部分には、以下のようなボタンが表示されています。

このボタンの設定をするのが、管理ページ＞コンフィグの順にエントリーの編集設定のページにあるユニット追加ボタンの設定です。

ユニット追加ボタンの設定では、エントリーを編集・追加等を行うボタンを設定することができます。またこのボタンについては、Entry_Bodyモジュール内に以下のように記述されています。

@include("/admin/entry/edit.html")
@include("/admin/entry/add.html")

管理画面内ユニット追加ボタンの項目

編集ページのユニット追加ボタンの項目にて、ボタンの並び順などを変更できます。また編集ページにボタンを追加することも可能です。

• モード 例：拡張（入力欄：3image）
• ラベル 例：写真3枚追加

のような設定を追加し、保存します。

ユニット設定

上記の続きになります。ユニット追加ボタンで設定を追加後は、編集設定の横にあるユニット設定を行います。

管理画面内コンフィグのエントリーのメニュー

そして、管理ページ＞コンフィグの順に移動したユニット設定のページに、さきほどのボタンの画像と同様の並び順で設定されていることが確認できます。

このユニット設定のページでは、新規エントリーの追加ボタンや、テキスト、画像といったユニットの追加ボタンを押した際の初期状態の設定を行うことができます。そして、上記で「写真を3枚追加」というボタンを追加したので、以下のようなエリアが用意されます。

ユニット設定に追加された写真を3枚追加のユニット

画像の追加ボタンを3回押し、それぞれの画像ユニットに画像の配置を左に設定し、小さめの画像のサイズを設定すると、ボタンを押した際に3つの画像ユニットを表示させるボタンを作ることができます。

またユニット設定では、セットのボタンを作るだけでなく、画像を適切なサイズに指定してサイトのパフォーマンスを向上することもできます。

テキストタグセレクト

管理ページ＞コンフィグの順にエントリーの編集設定のページで、テキストユニットのタグを指定するための設定ができます。

ここでは基本的なHTMLのタグに加えて、none, markdown, wysiwyg という特別なタグが設定できます。この中にないものを追加する際には /include/unit.html をカスタマイズすることで表示が可能になります。

@include("/include/unit.html")

この unit.html は、a-blog cms のユニットそのものであり、ユニットで表示されるタグについては、このファイルでコントロールされています。

管理画面内テキストタグセレクトの設定

そして、管理ページのテキストタグセレクトを編集し、以下のようなテキストユニットのプルダウンをカスタマイズすることができます。

編集ページのテキストユニット

このテキストタグセレクトのタグエリアには、通常のHTMLタグだけでなくCSSのクラスを指定することが可能です。例えばクラスを price とする場合は、以下のように記述します。

クラスを指定することによって、例えば商品の値段を表示させたい時には、表示側で "商品価格" のようにクライアントが理解しやすいラベルを付けることもできます。

ユニットグループ

ユニットグループの設定では、指定したユニットを囲んでいるDIVのクラス名を変更することができます。一般的には、ユニットグループの設定で指定したDIVのクラス名で、あらかじめスタイルシートにフロートと幅を指定し、段組レイアウトを実現します。

編集設定のユニットグループ

これらのスタイルはa-blog cmsに同梱しているacms.cssというCSSのグリッドシステムが使えるようになっています。acms.cssにないスタイルを適応する場合は、オリジナルのテーマ内のCSSに記述してください。

多くのケースでは、メインコンテンツのサイズによってユニットグループのサイズをいくつに設定するかが決まります。設定する前にメインコンテンツのサイズを決めておくと良いでしょう。

3カラムで並んだエントリー内コンテンツ

サイズセレクト

サイズセレクトでは、ユニットグループと同様に、画像や地図、動画のサイズを事前に設定することができます。

編集設定のサイズセレクト

おすすめの「サイズ」の設定としては、大画像はメインコンテンツの幅、中画像は2つの画像を並べるサイズとして（メインコンテンツ+余白）÷2-余白、小画像は3つの画像を並べるサイズとして（メインコンテンツ+余白）÷3-余白と設定します。

例：メインコンテンツ680px、余白20px（左右10px×2=20px）

• 大 680px
• 中 330px　（680+20）÷2-20　
• 小 214px 　（680+20）÷3-20

なおこの時、小画像の場合には小数点が出てきます。小数点がある場合は余分な余白が発生しないように1px大きめに設定します。

「表示サイズ」の設定では、クラス名か%を指定します。表示サイズを設定しなかった場合、さきほどの「サイズ」で指定した数値がpxとして表示されますので、レスポンシブウェブデザイン対応にする場合は「表示サイズ」の設定もしてください。クラス名を記述する際は、acms.cssのグリッドシステムのクラスを適応し、使うこともできます。

オススメの「表示サイズ」の設定としては、大画像を全幅、中画像を1/2幅、小画像を1/3幅で設定します。

例

• 大 acms-col-md-12 または 100
• 中 acms-col-md-6 または 50
• 小 acms-col-md-4 または 33.333

モジュール設定

モジュールの個々の初期設定が可能です。初期設定をブラウザから変更する際にはこちらを修正するのですが、実際にサイトを構築していく時には、利用するモジュールに モジュールID という個々の名前をつけて運用するケースが多くなります。そのためこちらの設定はあまり利用しないことが多いです。

また、モジュールの設定画面の右上には「ショートカットに追加」というリンクがあります。この設定を使い、クライアントに設定しやすくするためのリンクをダッシュボード上に用意することができます。ショートカットを設定することで、更新できる場所をクライアントにも分かりやすく提示できます。

モジュールのコンフィグ画面

コンフィグの初期値設定

一度もコンフィグを編集していない時には、テキストファイルで設定されている初期値のデータが読み込まれます。のちに追加する子ブログの設定を統一したり、他のサイトでの設定を利用する場合は、config.system.yaml を編集することでコンフィグの設定を継承することが可能です。

なお、ファイル名が似ている config.system.default.yaml は、システムのアップデート時に上書きの対象になりますので直接修正しないようにしてください。

a-blog cmsでは、表示しているページがWebサイトのどこなのか、どのような状態であるかをURL上のパスとして表現しています。これを URLコンテキスト（URLによって表現されるページの文脈情報）と呼びます。個々のモジュールはURLコンテキストの情報を元に、表示するコンテンツを決定しています。

URLコンテキストと3つの基本ページ

a-blog cms の基本ページとして、トップページ・一覧ページ・詳細ページがあります。

トップページ

一般的な運用として Webサーバのドキュメントルートに a-blog cms が設置された場合には、この状態でトップページが表示されます。また、個別のディレクトリ内に設置することも可能で、その際には、設置先のディレクトリまで指定した状態がシステムとしてのトップページという扱いになります。

一覧ページ

URLの末尾にスラッシュがくる状態のとき、基本的には a-blog cms では一覧ページが表示されます。

詳細ページ

URLの末尾が.htmlで終わるような時には、エントリーの詳細ページが表示されます。

URLコンテキストとモジュールの関係

場所的なコンテキスト

例えば、www.example.com というサーバの appleple というブログで、 news というカテゴリーの一覧を表示する場合は以下のようなURLになります。

www.example.com というサーバの appleple というブログで、 news というカテゴリー内にある entry-1.html という一記事を表示する場合には以下のようなURLになります。

www.example.com というサーバのルートブログで、 news というカテゴリー内にある campaign という子カテゴリーの一覧を表示する場合は以下のようなURLになります。

これらのURLの中で使われている英数字が、それぞれのブログコード、カテゴリーコード、エントリーコードになります。

ページ内のモジュールは、ブログコード、カテゴリーコード、エントリーコードなどを含むURLコンテキストによってWebサイトの場所を判断し、そこで設定されている条件に従って情報を表示します。

状況的なコンテキスト

キーワードやタグによる検索、日付、ページ等の情報が含まれていた場合も、モジュールが表示する情報が影響し、情報を絞り込んで表示することができます。

2ページ目を表示する場合は以下のようなURLになります。

「2009年6月」を表示する場合は以下のようなURLになります。

ここでは、簡単なURLコンテキストのみを紹介しました。カスタムフィールドの検索を含むURLコンテキストについては、カスタムフィールドの章で紹介します。

a-blog cmsの階層は、カテゴリーがエントリーをまとめ、ブログがそれらのコンテンツ全体を管理する関係になっています。また、このブログはカテゴリーと同様に階層化することができ、それぞれのブログについてコンフィグが用意されていますので、それぞれのブログで設定を変更したり、それぞれのブログにユーザーを作ったりすることができます。

URL で表現すると以下のようになります。 子ブログの下に孫ブログのように深く階層を作ることができ、階層の制限はありません。

多店舗を管理するブログ

複数の店舗のブログを作り、そのブログにユーザーを作ることで店舗ごとに更新担当者を設定することができます。また、グローバルカテゴリーを作ることで下層のブログとカテゴリーを共有したり、ポータルサイトを簡単に作ることができます。

会員制ブログ

ブログのステータスを「シークレット」と設定すると、そのディレクトリ以下を会員制コンテンツとすることができます。その際には、その子ブログに「読者」権限のユーザーを作ります。コンフィグの機能設定に、閲覧者が読者権限を申請する機能の設定も用意されています。

テンプレートファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsのカスタマイズをする際に作るものがテーマであり、そのテーマを指定することでサイトのデザインや機能を変更することができます。

テーマセット管理

オリジナルのテーマを作る際に、一番最初に設定を変更する部分になります。管理ページ > テーマ にアクセスして「テーマセットの作成」ボタンをクリックしてください。（Ver. 3.1.0 以上では「このブログの初期テーマ」は非推奨になりました。）

上記のような画面が表示されます。分かりやすい名前（テーマフォルダ名と同名など）や説明（必要であれば）を入力します。このテーマセットを下の階層のブログでも選択したい場合にはグローバルにチェックを入れます。これらの内容は後から編集することもできます。「作成」ボタンをクリックしたら「一覧」ボタンをクリックしていったん「テーマセット管理」画面に戻り、作成したテーマセット名の右側の「テーマ設定」をクリックします。

テーマ ディレクトリ名

themes ディレクトリ内にあるテーマディレクトリを指定します。ここでは beginner テーマを選択しています。

テンプレート設定

「テンプレート設定」はどのページにどのテンプレートファイルを使用するかを設定する部分です。テーマフォルダの中に template.yaml ファイルがあり、「テンプレート選択ファイル（template.yaml）の値を優先する」にチェックが入った状態であれば template.yaml での設定が優先されます。beginner テーマを含む公式テーマに同梱された template.yaml の設定は標準的なものなので、ここではその設定を使用します。

テーマとテンプレート

テーマセットはブログにもカテゴリーにも使用することができます。ここでは、ブログにテーマセットを使用する例を説明します。管理ページ > ブログ をクリックしてテーマセットを選択し、保存します。

カテゴリー毎にテンプレートを設定する場合は、テーマディレクトリ内にカテゴリーコードのフォルダと、その中に必要なテンプレートファイルを用意します。 また、エントリーコードのファイル名を用意することで特定のエントリー専用のテンプレートも設定できます。

お知らせ（news）カテゴリーの時

news というカテゴリーには、/themes/beginner/news/index.html（一覧）と /themes/beginner/news/_entry.html（詳細）のテンプレートが用意されています。この場合であれば、news のカテゴリーの際は、これらのテンプレートファイルを利用することになります。

newsカテゴリーに一覧と詳細のテンプレートがある場合

もし、詳細ページのテンプレートを他のページと共用の設定にするのであれば、/themes/beginner/news/_entry.html（詳細）のファイルを削除します。すると、newsより上の階層にあるファイルを参照するようになり、この場合 /themes/beginner/_entry.html（詳細）を利用するようになります。

newsカテゴリーに詳細テンプレートがない場合

また、お知らせ（news）の子カテゴリーとして、リリースノート（releasenote） を用意しテンプレートファイルの仕様を変更する際には、以下のように /themes/beginner/news/releasenote/index.html（一覧）と /themes/beginner/news/releasenote/_entry.html（詳細）を用意します。

newsの子カテゴリーreleasenoteに別のテンプレートを用意する場合

表示テンプレートの確認

表示テンプレートの確認は管理ボックスで行います。デバッグモードのとき、下図のようにテンプレートのファイル名が表示されます。

もしくは、調べたいテンプレートの場所で（Win: Ctrl, Mac: ⌘） + K を押してクイックサーチを起動し、%tpl と入力することでも確認できます。

(Win: Ctrl, Mac: ⌘) + K -> %tpl と入力

テーマの構成

テーマディレクトリ（themes）には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここにすべての管理ページのテンプレートファイルが格納されています。

テーマ設定のページで設定されているテーマ（beginner）と、system のテーマは継承関係にあります。テーマ設定のページで設定されているテーマに呼び出すファイルが存在しない時は、system のファイルをチェックし、存在していればそのファイルを表示します。例えば、login.html や 404.html は beginner のテーマの中には存在していませんが、system のテーマに存在しているため、表示される仕組みになっています。

管理ページをカスタマイズする際は、テーマ作成の作法として、system のファイルを直接修正するのではなく、設定しているテーマにコピーして修正するようにしてください。

例として、/themes/system/404.html をコピーし /themes/beginner/404.html に設置して修正をします。

system のファイルを直接修正してしまうと、システムのアップデートの際に system ディレクトリも同時にアップデートされ、カスタマイズ部分が消えてしまう恐れがあります。ご注意ください。

テーマの継承

beginner テーマにないファイルは、system のファイルを利用するようになっていますが、同様に子ブログ用のテーマを作る際に以下のようなテーマディレクトリを作成することで、system と同じようにテーマを継承できます。

テーマを継承することで、例えば、/blog@beginner/include/ に header.html がない場合には、/beginner/include/header.html が表示されるようになります。また president@blog@beginner のように複数の @ を使ったテーマも作成できます。

複数のブログを1つのシステム内に設定してカスタマイズするようなサイトになった時は、このようにテーマの継承をすることで、メンテナンス性の高いテーマを作ることができます。

a-blog cms で更新できるページを作るためのHTMLファイルをテンプレートファイルといいます。このテンプレートファイルにモジュールを貼り付けていくことで、データベースに保存されている情報をHTMLに配置していきます。

エントリーの一覧の例：

<!-- BEGIN_MODULE Entry_List -->
<ul>
   <!-- BEGIN entry:loop -->
   <li><a href="{url}">{title}</a></li>
   <!-- END entry:loop -->
</ul>
<!-- END_MODULE Entry_List -->

この例では、<!-- BEGIN entry:loop -->から<!-- END entry:loop -->の間を繰り返し表示しています。また、モジュールのコメントタグについては実行後には削除され、通常のHTMLソース側には表示されません。

また、a-blog cms はテキストファイルであれば、HTML形式に限らずテンプレートにすることが可能です。

非表示部分の制御をする :veil と :empty ブロック

ここからはタッチモジュール内で使用する、部分的な表示の制御について見ていきましょう。

:veil 表示させないブロック

例えば、画像を表示させる際には、下のような記述をすることになります。

<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">

しかし、ここで表示する画像を指定していない場合、下のようなタグがそのままHTMLに表示されてしまいます。

<img src="" width="" height="">

この不適切な img タグ自体を消すために、:veil という機能が用意されています。

<!-- BEGIN photo:veil -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END photo:veil -->

削除したい部分を <!-- BEGIN photo:veil --> から <!-- END photo:veil -->で囲むことで、その間にある変数 {photo1@path}, {photo1@x}, {photo1@y} のいずれも指定されなかった時に、囲まれていた部分全体を非表示にします。

:veil については、変数名:veil と決まっているものではなく、中の複数の変数が1つも書かれなかった時に動作することになります。

:empty 無かった際に表示させるブロック

Ver1.6.1で追加された特定の変数が空の時に表示させる機能です。:veil の時の例に画像がなかった場合、 noimage.png を表示させるには以下のように記述します。

<!-- BEGIN photo:veil -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END photo:veil -->
<!-- BEGIN photo1@path:empty -->
<img src="noimage.png" width="100" height="100">
<!-- END photo1@path:empty -->

1点注意するべきところとしては、:veil の前の文字列は任意ですが、:empty はモジュールやカスタムフィールドで利用する変数 {photo1@path} を指定し photo1@path:empty ように記述しなければならない点です。:emptyブロックは:veilブロック内では動作しませんのでご注意ください。

指定した条件で表示/非表示を制御できる IFブロック

IFブロックはVer.2.0から追加された機能です。 さきほど紹介した、:veil や :empty は、ブロック内のすべての変数がなかった時のみ表示または非表示の動作をしますが、IFブロックは指定した条件だった時に表示または非表示の動作をするブロックになります。

<!-- BEGIN_IF [%{CID}/eq/1] -->
<img src="{photo1@path}" width="{photo1@x}" height="{photo1@y}">
<!-- END_IF -->

例えば、IFブロックをカテゴリーIDを指す%{CID}を使って上のように記述すれば、カテゴリーIDが1の時しか、画像が表示されないようにすることができます。（%{CID}などのグローバル変数については後述します。）

さらに、その他にも条件を指定する時には、ELSE_IF を使って以下のように記述します。

<!-- BEGIN_IF [%{CID}/eq/1] -->
  <!-- カテゴリーIDが1の時に表示します -->
  <p>サンプルの本文です。</p>
<!-- ELSE_IF [%{CID}/eq/2] -->
   <!-- カテゴリーIDが1ではなくて、2だった時に表示します -->
  <p>サンプルの本文です。</p>
<!-- ELSE -->
  <!-- さらに上の条件が一致しなかった時に表示します -->
  <p>サンプルの本文です。</p>
<!-- END_IF -->

インクルード機能

いくつかのテンプレートファイルができてくると、共通の記述を1つにまとめて管理したいというニーズが出てくるかと思います。このような時は共通部分を別のテンプレートファイルに記述し、以下のような記述でインクルード（外部ファイルを読み込む）を設定することができます。

@include("/include/sample.html")
@include("http://www.example.com/include/sample.txt")

インクルードは絶対パスでも相対パスでも記述できますが、絶対パスを使うとテーマのディレクトリがルートになるためおすすめです。

グローバル変数

{title}のような変数はモジュールの中に記述されている必要がありますが、% を使って%{BLOG_NAME}などと表すグローバル変数はテンプレートのどこに記述しても出力されます。実行順序としては、グローバル変数、インクルード、モジュールの順となります。

例：

• %{BLOG_NAME} 表示ページが属するブログの名前
• %{CATEGORY_NAME} 表示ページが属するカテゴリーの名前
• %{KEYWORD} URLコンテキスト上で、指定されたキーワード
• %{CID} カテゴリーID
• %{EID} エントリーID

また、グローバル変数を利用したインクルード機能を使うと、表示ページのカテゴリー毎に違うテンプレートファイルを読み込むことも可能になります。

@include("/admin/entry/category%{CID}.html")

このような組み合わせでテンプレートのカスタマイズをするケースは多々あります。特定のカテゴリー内でのみ利用したいカスタムフィールドを書く際には、大事なテクニックになります。

校正オプション

データ出力する間にプログラムでフィルタリング処理をする機能を校正オプションと呼びます。表記については、{data}[option]のように変数に続いて [ ] 内にオプションを定義します。ここでは、その中でもいくつかの例をご紹介します。

文字数を指定した数で足切りします。（半角の幅は1、全角の幅は2となります。）

{text}[trim(13, '...')]

数字を千位毎にカンマ区切りにします。

{number}[number_format]

日付から和暦の年を算出して表示します。（1985/08/26[wareki] -> 昭和60年）

{date}[wareki]

日付を誕生日としたときの現在の年齢を表示します。（1985/08/26[age] -> 23）

{date}[age]

また [ ] 内で | を利用することで、複数の校正オプションを設定することもできます。

{var}[escape|nl2br]

校正オプションがない変数はすべてエスケープしてデータが編集されますが、校正オプションを何か一つ設定すると エスケープが自動で指定されません。 エスケープが必要な場合は必ずescapeをパイプでつなげてください。

またセキュリティ対策として、お問い合わせフォーム内の TEXTAREA では、一般的に改行を <br> に置き換える処理をしなければなりません。この際には上記のように escape を必ず設定してください。

テンプレートの継承機能

Ver. 2.8 からテンプレートを継承できる機能が追加されました。Beginnerテーマでは利用しておりませんが、extend@beginner では同様の構造で継承機能を使ったテンプレートの記述ソースが確認できます。※Beginnerテーマ以外のテーマではテンプレートの継承機能を使った記述になっています。

「モジュールID」は、基本的には「モジュール」と表示内容は同じですが、モジュールにIDを付けることで、特定のモジュールを指定することができます。普段HTMLを書いている方であれば、HTMLのclass属性のように設定できるものとして想像していただければと思います。これにより、指定した条件やモジュールが設置された状況によって設定内容を区別することができます。

基本的にモジュールは、URLコンテキストの情報を元に表示する内容を決めていますが、今回紹介するモジュールIDを利用することで、URLコンテキストを利用せず、管理ページのモジュールIDで指定した条件を元にモジュールを動作させることができるようになります。

モジュールIDの設定

テンプレートの書き方

    <!-- BEGIN_MODULE Entry_List id="topEntryList" -->
    <ul>
    	<!-- BEGIN entry:loop -->
    	<li><a href="{url}">{title}</a></li>
    	<!-- END entry:loop -->
    </ul>
    <!-- END_MODULE Entry_List -->

テンプレート上のモジュールの BEGIN_MODULE モジュール名の後に id="モジュールID" のように指定をします。

管理ページの設定

モジュールIDの作成画面

モジュールIDを作成した時には、まず最初に「条件設定」を設定することになります。 管理ページ側の指定については、「モジュール」の項目でモジュールの種類をプルダウンメニューから指定し、「id」の項目にテンプレート上に記述したモジュールIDを指定します。

次にモジュールID設定ページ下部にある「階層」の項目から、ブログやカテゴリーなどの細かい階層の条件を指定します。

• 下層のブログやカテゴリー含めない
• 下層のブログやカテゴリーも含める
• 下層のブログやカテゴリーのみを対象とする

また、子ブログでも利用するようなモジュールについては、「グローバル」項目のチェックボックスにチェックをすることで、下階層のブログでも使用できるグローバルモジュールIDとして利用することができます。

モジュールIDで指定したモジュールについては、以下のように個別に「表示設定」の設定ができます。

モジュールIDの表示設定

なおVer.2.5.0より、モジュールIDにもカスタムフィールドの機能が増えました。例えば、新着記事一覧の見出しなどを運営者側でも変更したい場合に設定すると便利に利用いただけます。

モジュールのカスタムフィールド設定

モジュールIDの引数

Entry_Body と Entry_Headline については、URLコンテキストの値を自動で取得するような仕様になっていますが、他のモジュールについてはモジュールIDの設定画面で取得したい値を指定する必要があります。例えばモジュールIDを設定しなければ、URLコンテキスト上のpageが反映されず、2ページ目に移動しても1ページと同じようなコンテンツが表示されてしまいます。

モジュールIDの引数設定

a-blog cms では標準で搭載されているフォーム機能によって、サイト閲覧者からの注文や問い合わせを受けることができます。機能としては、以下のようなものが挙げられます。

• サイトのどこにでも設置が可能
• メールの送信には2種類（一般メール・管理者宛）のメールを送れる
• プレーンテキストのメールと、HTMLメールどちらも送信可能
• 入力項目のチェック機能
• 入力項目のコンバート機能
• 複数ステップのフォームを作ることができる
• DBに蓄積&CSVのダウンロード
• 運営者がカスタマイズできるフォームを作ることが可能（動的フォーム）

フォームモジュール

フォームについても、モジュールとして提供しています。フォームの基本ステップとしては、新規・修正・確認・完了の4つです。また、このステップを増やすことで複数ステップのフォームの実装も可能です。

<!-- BEGIN_MODULE Form -->

  <!-- BEGIN step-->
  <!-- 初期画面 -->
  @include("/include/form/insert.html")
  <!-- END step -->

  <!-- BEGIN step#reapply -->
  <!-- 修正 -->
  @include("/include/form/update.html")
  <!-- END step#reapply -->

  <!-- BEGIN step#confirm -->
  <!-- 確認 -->
  @include("/include/form/confirm.html")
  <!-- END step#confirm -->

  <!-- BEGIN step#result -->
  <!-- 完了 -->
  @include("/include/form/result.html")
  <!-- END step#result -->

<!-- END_MODULE Form -->

上記の例では、insert.html と update.html はフォームのHTML となり、confirm.html と result.html は内容を表示するためのHTMLです。

このフォームの HTML については、カスタムフィールドの HTML と同様の記述を行うため、カスタムフィールドメーカーで実装が可能となります。お問い合わせフォームなどで必要な必須入力などの入力チェックや、全角半角変換などの対応についても、カスタムフィールドメーカーで設定することができます。

その他にも以下のようなブロックがあります。セキュリティ対策のために使われるブロックで、必須ということではありませんが、記述したほうが安心ですので紹介いたします。

• 不正なアクセスを禁止するブロック

<!-- BEGIN step#forbidden -->
  <h2>不正なアクセスです。</h2>
  <p>お手数ですが、はじめからやり直して下さい。</p>
<!-- END step#forbidden -->

• 連続投稿を禁止するブロック

<!-- BEGIN step#repeated -->
  <h2>連続投稿は禁止されています。</h2>
  <p>お手数ですが、はじめからやり直して下さい。</p>
<!-- END step#repeated -->

フォームのボタンの実装

フォームの HTML については、カスタムフィールドの HTML と同様の記述で実装することができます。そのため、カスタムフィールドメーカーで実装が可能となります。お問い合わせフォームなどで必要となる、必須入力などの入力チェックや、全角半角変換などの対応についても、カスタムフィールドメーカーで設定することができます。

それ以外の部分としては、フォームのボタンの HTML についてを解説しておきます。

<form action="" method="post" class="h-adr acms-form" enctype="multipart/form-data">

　<!-- フォーム の HTML -->
　@include("/contact/form/input.html")

　<div class="form-btn-box clearfix">
　　<input type="hidden" name="step" value="confirm">
　　<input type="hidden" name="error" value="reapply">
　　<input type="hidden" name="id" value="contactForm">
　　<input type="submit" name="ACMS_POST_Form_Confirm" value="送信内容の確認へ">
　</div>
</form>

フォームの管理ページ

管理ページ > フォーム の順に移動すると、フォームを管理するページが表示されます。このページでフォームIDを作成し、作成したフォームIDをテンプレート上に設定することで、データベース上にフォームの入力情報を保存し、CSV形式でダウンロードすることができます。また、メールのテンプレートの設定や、From, To等の設定も管理ページから行うことができます。

フォーム設定画面

ルールという機能を利用すると、条件を指定してコンフィグまたモジュールIDを設定できるようになります。例えば、特定のデバイスやブラウザという条件で設定したり、特定のカテゴリーのみという条件で設定したい時に、このルール機能が役立ちます。

ルール作成画面

グローバルルールという機能を利用すると、ルールを設定した子ブログに同様のルールを適用し、多くの子ブログが存在するサイトの設定を一元化することができます。

ここでは、具体的なルール機能の活用例を3つ見ていきましょう。

スマートフォンに対応する

a-blog cms では、スマートフォン専用のプラグインや専用のプログラムがあるというわけではなく、ルール機能によってブラウザの名前（USER-AGENT）をチェックし、設定を切り換えて表示します。

スマートフォンの時のルール設定

このルールの設定を行った後に、一覧の「コンフィグ」ボタンをクリックすると、スマートフォンで表示する時のコンフィグについて個別で設定することができます。

ルール機能の主な用途としては、テーマの設定を変更することが挙げられます。この場合、PCとスマートフォンでは同じURLで違ったテーマを表示することができるようになります。a-blog cms で標準搭載のキャッシュ機能もルールによって別で処理されますので、キャッシュを気にする必要もありません。

特定のカテゴリーの時にユニット設定を変更する

ブラウザの名前（USER-AGENT）だけでなく、特定のカテゴリー内のみでユニットの細かな設定を変更することもできます。例えば「商品紹介」と「お知らせ」では、ユニット設定の内容や、ユニット追加ボタン自体の設定、テキストタグセレクトの内容を適切に変更しカスタマイズすることで、表示する設定を区別することができます。

スマートフォンの時、モジュールIDの設定を変更する

コンフィグによる大きな変更ではなく、限定的にモジュールIDの設定だけを変更することもできます。例えば、パソコンの時に表示するバナーと、スマートフォンの時に表示するバナーについて違うサイズやデザインのものを設定することができます。

利用するには、管理ページ > ルール のページに移動し、変更したいルール名の「モジュールID」ボタンをクリックしてください。モジュールID一覧と同じようなページに移動します。

スマートフォンの時のモジュール設定を変更する

変更したいルール名の設定を確認したい場合は、左上のプルダウン、もしくはトピックパスから確認できます。

ルール毎のコンフィグ設定のルール確認

特定の期間のみ異なるテーマを設定する

このルール機能の中には「期間」の設定ができるものがあります。これを利用してコンフィグを変更することで、例えば年末年始のみ特定のテーマを適用することも可能になります。