基本からしっかり学ぶa-blog cms

目次

はじめに

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


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

2016年2月末現在、日本全国470社ほどのWeb制作会社で採用頂き、2100以上の商用サイトで利用頂いております。

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

a-blog cmsのテストサーバーとして無料で利用頂ける環境も用意しております。本、入門ドキュメントを試す環境としてご利用ください。

コンフィグ

a-blog cms の設定をコンフィグと呼びます。このコンフィグはブログ毎に管理されており個別の設定ができるようになっています。また、下記のyamlファイルがコンフィグの初期値を設定しているファイルになり、ブログ新規作成時のコンフィグになります。

/private/config.system.default.yaml

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

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

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


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

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


ブログ設定

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

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

define('DEBUG_MODE', 1);

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

エントリー設定

エントリーの設定をしっかりすることで、日々の記事を更新する人にとって使いやすいCMSになるか、そうでないかが違ってくる大切な設定画面になります。

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

ユニット追加ボタン

以下のボタンは管理ページ側ではなく、一般ページのエントリーの下のほうに表示されますが、そのボタンの設定をするのがユニット追加ボタンの設定です。


スクリーンショット:編集ページ内ユニット追加ボタン

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

<!--#include file="/admin/entry/edit.html"-->
<!--#include file="/admin/entry/add.html"-->

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

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


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

  • モード 拡張(入力欄:3image)
  • ラベル 写真3枚追加

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

ユニット設定

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


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

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


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

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


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

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


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

このようにユニット設定で、事前に利用するようなセットのボタンを作ってみたり、画像のサイズを事前に適切なサイズにしておきましょう。

過去作ったサイトがある場合は、そのサイトのこのユニット設定を再度確認してみて下さい。画像のサイズが「そのまま」になっている場合は、どれかサイズを指定しておきましょう。きっと、クライアントは毎回サイズを手で設定しているハズです。

テキストタグセレクト

また、管理ページ>コンフィグの順にエントリーの編集設定のページに戻って、テキストタグセレクトの説明になります。

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

<!--#include file="/include/unit.html"-->

この unit.html は、a-blog cms のユニットそのものであり、ユニットで表示されるタグについては、このファイルでコントロールされています。このファイルを理解することがユニットのカスタマイズを攻略する近道かもしれません。


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

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


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


テキストユニットのプルダウンに管理画面の設定と同じ内容が表示されている

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


このテキストタグセレクトのタグエリアには、通常のHTMLタグだけでなくCSSのクラスを指定することが可能です。

p.price

のように指定する事で<p class="price">〜</p>のようにすることもできます。あとはラベル側を"商品価格" のようにクライアントが理解しやすいラベルを指定し、商品の値段を表示させたいときはこの"商品価格" を利用することが可能になります。

ユニットグループ

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


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

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


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

大体の場合ではメインコンテンツのサイズによってユニットグループのサイズをいくつに設定するか決まるので、設定する前にメインコンテンツのサイズを決めることがオススメです。


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

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


サイズセレクト

ユニットグループと同様に、画像や地図、動画のサイズを事前に設定しておき、クライアントにはサイズを手動で入れさせず、選んで頂くだけという操作方法が a-blog cms のエントリー上に貼られるコンテンツの作りかたになります。


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

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


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

例:メインコンテンツ680px、余白20px(左右10pxずつなので合計20px)

  • 大 680px
  • 中 330px
  • 小 214px

なお、このとき、小画像のときに小数点が出てきます。小数点がある場合は余分は余白が発生しないように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 という個々の名前をつけて運用する事が多くなり、こちらの設定はあまり利用しないことが多いです。

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


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

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

モジュール

a-blog cms では、テンプレートであるHTMLにモジュールというパーツを記述して動作します。どのようなモジュールがあるのかを知ることが、a-blog cms のカスタマイズスキル上達への近道です。



モジュールには大きく分けると、ビルトインモジュール・フィールドモジュール・タッチモジュールの3種類のモジュールがあります。

テンプレートにモジュールをいくつでも貼り付けることは可能です。たくさんのモジュールが一度に動作をすると、それだけ実行する時間がかかる事も頭の片隅に入れておいて下さい。例えば0.1秒で動くモジュールが100個テンプレートに貼ってあると表示に10秒かかることになります。

モジュールの貼り過ぎには注意しましょう! でも、標準搭載のキャッシュ機能で表示に10秒かかるページも、2回目以降はキャッシュを利用して瞬時に表示できますので、ご安心下さい。

ビルトインモジュール

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

<!-- 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

※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 -->で囲みます。ログインしていない時には、囲まれている部分は表示されないようになります。


各種モジュールの設定


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


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

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


モジュールの設定で、例えばエントリーフォトの設定を見ると、ここで表示順の設定や、表示件数、画像のサイズ設定等を行うことができるようになっており、テンプレート上では管理ページ内で設定する項目を設定することはありません。


Entry_Photoモジュールのコンフィグ例

Entry_Photoモジュールのコンフィグ例

URLコンテキスト

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

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

詳しくはテンプレートの章で紹介しますが 、a-blog cms の基本ページとして、トップページ・一覧ページ・詳細ページがあります。

トップページ

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

http://www.example.com/

一覧ページ

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

http://www.example.com/news/

詳細ページ

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

http://www.example.com/news/entry-1.html

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

場所的なコンテキスト

ブログコード、カテゴリーコード、エントリーコードのような、Webサイトの場所を表すURLコンテキストが影響し、ページ内のモジュールはその場所に沿った情報を表示します。

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

http://www.example.com/appleple/news/

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

http://www.example.com/appleple/news/entry-1.html

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

http://www.example.com/news/campaign/

状況的なコンテキスト

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

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

http://www.example.com/news/campaign/page/2/

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

http://www.example.com/news/campaign/2009/06/

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

テンプレート

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 ではテンプレートファイルはテキストファイルであれば、どのようなファイルでもテンプレートにすることが可能です。

非表示部分の制御 :veil と :empty

タッチモジュールの紹介を前にしましたが、モジュール内の部分的な表示の制御について紹介します。

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

例えば、画像を表示させる際には、

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

のような記述をする事になります。この場合画像が無い場合には、

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

のようなタグがそのままHTMLに表示されてしまいます。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 -->

とすれば、カテゴリーIDが1のときしか、画像が表示されません。(%{CID}という新しい記述が出てきましたが、こちらはグローバル変数というものになります。グローバル変数については、後述しております。) さらに、その他にも条件を指定するときには、以下のように記述します。

<!-- 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")

上記の表記については、SSI と同様の記述になりますが、a-blog cms がSSIを使ってインクルードをしているという事ではありません。Adobe Dreamweaver のデザインビューでインクルード後の画面が表示されるように同じ表記としています。

インクルードの記述をする際には、相対パスで記述することも可能ですが、絶対パスで設定することをおすすめいたします。絶対パスのルートについてはテーマのディレクトリがルートになり、SSIとは違います。

グローバル変数

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

例:

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

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

<!--#include file='/admin/entry/category%{CID}.html'-->

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

校正オプション

例えば{data}という変数に{data}[option]といった表記でデータ出力する間に、プログラムでフィルタリング処理をする事ができる機能を校正オプションと呼びます。いろいろな校正オプションがありますが、いくつかの例を紹介します。

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

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

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

{number}[number_format]

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

{date}[wareki]

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

{date}[age]

また複数の校正オプションを設定する事もできます。| を利用し [ ] 内に複数書く事ができます。

[escape|nl2br]

セキュリティ対策として、お問い合わせフォームなどユーザーが入力したデータを表示する場合には、このようなエスケープする校正オプションの併用をするようにして下さい。

テーマ

この記事では、site2018テーマを元に記述しています

テンプレートファイルやイメージファイル、CSSファイル、JavaScriptのファイル等を1つのフォルダにまとめたものをテーマと呼びます。a-blog cmsのカスタマイズをする際に作るものがテーマであり、そのテーマを利用した設定(コンフィグ)をすることでサイトが出来上がります。

テーマの設定

オリジナルのテーマを作る際に、一番最初に設定を変更する部分になります。コンフィグ >テーマ設定 にアクセスして下さい。


テーマ設定画面

テーマ設定画面


上記のような画面が表示されます。

テーマ ディレクトリ名

themes ディレクトリ内にあるテーマディレクトリを指定します。

テンプレートファイル

テンプレートのコントロールについては、テンプレートの章で紹介します。トップページ・一覧ページ・詳細ページ・エラーページ・管理ページ・エントリー編集ページ・ユニット追加ページ・ログインページの8種類のテンプレートを指定します。

一般的には、詳細ページとエントリー編集ページ・ユニット追加ページのテンプレートは同じに設定しておくようにした方がいいでしょう。

テーマとテンプレート

このテーマを複数用意する事によってコンテンツのデザインを切り換えて表示させる事が可能です。しかし、ブログ単位に設定するか、この後に紹介するルール機能を利用して設定する事になります。

a-blog cms では、もっと簡単にカテゴリー毎にテンプレートを設定する事が可能です。テーマディレクトリ内にカテゴリーコードのフォルダと、その中に必要なテンプレートファイルを用意します。 また、エントリーコードのファイル名を用意する事で特定のエントリー専用のテンプレートも設定できます。

news カテゴリーの時

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


カテゴリーのテンプレート

カテゴリーのテンプレート


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

カテゴリーを作ったとき

以下のように /themes/site2018/products/index.html(一覧)と /themes/site2018/products/entry.html(詳細)のテンプレートがあり、さらにサブカテゴリーでいくつかのディレクトリが用意されています。


子カテゴリーのテンプレート

子カテゴリーのテンプレート


例えば、クライアント側でproducts内にサブカテゴリーを追加したとします。 テーマ内にそのカテゴリーコードのディレクトリは存在しませんので、 /themes/site2015/products/entry.html(詳細)を利用し、あらかじめ用意している他のサブカテゴリーのページとは違った表示になります。

表示テンプレートの確認

デバッグモード(config.server.php の DEBUG_MODE)が 1 の時のみ上記のように、現在表示しているテンプレートがどのファイルなのかを表示させています。この部分で表示させるファイルの確認を行って下さい。


テンプレートのパス確認

テンプレートのパス確認


もしくは、調べたいテンプレートの場所で、(Win: Ctrl, Mac: ⌘) + K を押して、グローバル変数を調べることでも確認できます。

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


クイックサーチを使ったテンプレートパスの確認

クイックサーチを使ったテンプレートパスの確認


テーマの構成


テーマディレクトリ構造

テーマディレクトリ構造


テーマディレクトリ(themes)には、テーマ設定で指定するテーマディレクトリ以外に、system という a-blog cms のシステムで利用しているテーマが入っています。さらに system の中に admin というディレクトリがあり、ここに全ての管理ページのテンプレートファイルが格納されています。ですから a-blog cms の管理ページをカスタマイズする際は、admin の中のファイルを修正すればいい事になります。

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

また、テーマ作成の作法として、system のファイルを直接修正するのではなく、テーマ設定で設定しているテーマにコピーして修正するようにして下さい。

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

システムのアップデートの際に system ディレクトリはアップデートされる事になり、カスタマイズ部分が消えてしまう恐れがありますので、ご注意ください。

テーマの継承

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

blog@site2018

例えば、/blog@site2018/include/ に header.html が無い場合には、/site2018/include/header.html を利用する事になります。また president@blog@site2018 のように複数の @ を使ったテーマも作る事ができます。

すぐに利用する事は無いかもしれませんが、複数のブログを1つのシステム内に設定してカスタマイズするようなサイトになったときに利用する事で、メンテナンス性の高いテーマを作る事ができます。

ルール

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


ルール作成画面

ルール作成画面


グローバルルールという機能を利用しますと、ルールを設定した子ブログに同様のルールを適用することができるます。多くの子ブログが存在するサイトの設定が一元化することができます。 こちらでは、具体的なルール機能の活用例を3つご紹介いたします。

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

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


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

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


このルールの設定を行った後に、一覧の「コンフィグ」ボタンをクリックして、スマートフォンのときのコンフィグについて設定を行います。ルール機能の主な用途としては、テーマの設定を変更することが挙げられます。

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

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

ユーザーエージェントだけではなく、特定のカテゴリーのときのみ、ユニットの細かい設定を変更するということができます。例えば、「商品紹介」と「お知らせ」では、ユニット設定の内容や、ユニット追加ボタン自体の設定や、テキストタグセレクトの内容を適切に変更し、カスタマイズをすることで、使わない場所では必要のない設定を表示させないことができます。

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

こちらはVer.2.5.0より追加された機能になります。

先ほどまでは、コンフィグの設定を変更する方法について述べていましたが、Ver.2.5.0よりモジュールIDの設定も変更できるようになりました。 たとえば、パソコンのときは一覧ページで50件表示していて、スマートフォンでは10件のみ表示させたい場合、管理画面からルールを設定すれば表示件数を変更できるようになります。 利用方法は、管理ページ > ルール のページに移動し、変更したいルール名の「モジュールID」ボタンをクリックしてください。モジュールID一覧と同じようなページに移動します。


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

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


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


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

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

モジュールID

「モジュール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として利用することができます。


モジュールIDの表示設定

モジュールIDの表示設定


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


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

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


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

モジュールIDの引数

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


モジュールIDの引数設定

モジュールIDの引数設定

フォーム

サイトを公開している理由の中には、お客様からの注文や問い合わせを受けるためという目的も多いと思います。a-blog cms では標準でフォーム機能も搭載しております。機能としては、以下のようなものが上げられます。

  • サイトのどこにでも設置が可能
  • メールの送信には2種類(一般メール・管理者宛)のメールを送れる
  • 入力項目のチェック機能
  • 入力項目のコンバート機能
  • 複数ステップのフォームを作る事ができる
  • 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 -->

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

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

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

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

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

フォームの基本

ここではテキストの入力欄についての表記は、以下のようになります。他のフォーム項目についても機能としては用意されておりますが、この章では割愛させて頂きます。

表示用のフォームタグ

メールアドレスの入力欄自体になります。スタイルを適応したい場合はこのinputタグにclass属性を記述してください。

<input type="text" name="mailaddress" value="" />

システムに mailaddress という項目の存在を伝える記述

システムに伝えるための記述なので、type属性はhidden(非表示)にします。

<input type="hidden" name="field[]" value="mailaddress" />

必須入力を指示するための指定

こちらもシステムに伝えるための記述なので、type属性はhidden(非表示)にします。

<input type="hidden" name="mailaddress:validator#required" />

フォームの管理ページ

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


フォーム設定画面

フォーム設定画面

カスタムフィールド

カスタムフィールドとは、エントリーの記事を書いていくようなユニットとは違い、固定の入力方法で更新できるような入力欄のことです。値段の表記方法も人によって様々なので、たとえば、商品Aでは「¥8,000」、商品Bでは「8,000円」と記述されてしまっているという問題を防ぐことができます。

a-blog cms のカスタムフィールドについては、テンプレートを手で書く必要がありますが、その分、自由度が高い入力欄を作成できます。

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

カスタムフィールドには以下の5種類のものを設定できます。

  • ブログ
  • カテゴリー
  • エントリー
  • ユーザー
  • モジュール

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

以下のようにカスタムフィールドを作る事ができます。どこかでご覧になった事があるかと思います。フォームのHTMLと同様に書く事で a-blog cms のカスタムフィールドを作る事ができると理解してください。

表示用のフォームタグ

メールアドレスの入力欄自体になります。スタイルを適応したい場合はこのinputタグにclass属性を記述してください。

<input type="text" name="mailaddress" value="{mailaddress}" />

システムに mailaddress という項目の存在を伝える記述

システムに伝えるための記述なので、type属性はhidden(非表示)にします。

<input type="hidden" name="field[]" value="mailaddress" />

必須入力を指示するための指定

こちらもシステムに伝えるための記述なので、type属性はhidden(非表示)にします。

<input type="hidden" name="mailaddress:validator#required" />

ブログのカスタムフィールド

まず、どこのファイルを修正すればいいかを知る方法からご紹介します。まず、管理ページ>ブログの順に移動し、カスタム情報のタブをクリックして、フォームを開きます。


ブログのカスタムフィールド設定画面

ブログのカスタムフィールド設定画面


以下はローカルPC上にインストールした場合のアドレスになります。レンタルサーバにインストールした際には localhost の部分がオリジナルのドメインになります。

http://localhost/demo/bid/1/admin/blog_edit/#acms_custom

このテンプレートファイルは以下のファイルになります。

/themes/system/admin/blog/edit.html

これを site2015 テーマ内で修正するのであれば、以下の場所にコピーして修正する事になります。

/themes/site2018/admin/blog/edit.html

これが基本ではありますが、この edit.html が次のバージョンアップでメンテナンスが入ってしまい、アップデートしたバージョンの管理画面とテンプレートに差が出ることもあるかもしれません。もちろん、このファイルを修正し、しっかりカスタマイズすることも方法の1つです。

今回、より簡単にカスタムフィールドをカスタマイして頂けるように、edit.html の中に書かれているインクルードの記述をご紹介します。以下のインクルードの記述の場所には何もファイルが存在しておりません。ですので、カスタマイズ前の段階では何も表示されません。

@include("/admin/blog/field.html")

この場所に field.html を置く事で、あたかも edit.html を修正したかのような効果がある事になります。

/themes/site2018/admin/blog/field.html

テキストの入力欄を1つ、プルダウンメニューを1つ追加する際のサンプルは以下のようになります。

<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" />

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

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

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

エントリーのカスタムフィールド

エントリーのカスタムフィールドについては、いろいろなコントロールが可能です。例えば、このカテゴリーのときとか、このブログのとき、このエントリーのときのみ、というように、同じエントリーのフォームで違うフォームを表示する事ができれば、必要なところで必要なカスタムフィールドのみを表示させる事が可能になります。

ブログのカスタムフィールドと同様にエントリーのカスタムフィールド用の field.html を用意します。

/themes/site2018/admin/entry/field.html

内容としては、以下のように記述します。

<!--#include file="/admin/entry/blog%{BID}.html" -->
<!--#include file="/admin/entry/category%{CID}.html" -->
<!--#include file="/admin/entry/entry%{EID}.html" -->

グローバル変数とインクルードを利用して、特定のブログや、カテゴリー、エントリーのときにのみ、読み込むファイルを用意します。例えば、カテゴリーIDが 1 のときは以下のようなファイルを用意します。

/themes/site2018/admin/entry/category1.html

エントリーのカスタムフィールドについては、エントリーについては修正時点でないとIDが確定していません。カテゴリーのプルダウンで変更してもカスタムフィールドは変化しませんので、注意する必要があります。