ホーム > サポート・マニュアル > 基本からしっかり学ぶ a-blog cms > 基礎編

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

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

4周年を迎え、商用利用可能な無料版 a-blog cms lite をリリースし、より多くの方に使って頂けるようなライセンスを提供を開始しております。 モジュールID、ルール と一部のモジュールが動作しませんが、それ以外ほとんど制限なく利用頂けるようにしております。

日本全国280社ほどのWeb制作会社で採用頂き、1200サイト以上の商用サイトで利用頂いております。

これまで、各地での勉強会やオンラインセミナーの2-3時間コースで紹介してきた事を文章にまとめてみたのが、この「基本からしっかり学ぶ a-blog cms のカスタマイズ 2013」です。a-blog cms に興味を持った人に、まず読んで頂く入門書になったらと思い書いています。


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

※1.5.0 から Entry_Body , Entry_Summary の entry:loop 内でも、カスタムフィールドが利用できるようになりました。モジュールの設定画面でカスタムフィールドを編集するかどうかをチェックボックスで指示する事ができるようになりました。使わない時には、動作させない方が、処理を軽くさせる事ができます。

タッチモジュール

a-blog cms には IF文 のような条件分岐が用意されていません。ですのでプログラミングが苦手とか、分からない方でも、a-blog cms のカスタマイズが簡単と思って頂ける1つの理由ではないかと思います。

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

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

1.6.0 から、モジュールの実行順が変更になり、このタッチモジュールが先行評価される事になりました。これによりモジュールの実行数を減らす事ができ多くのモジュールが利用されるようなテンプレートでは高速化がはかられる事になりました。詳しくはテンプレートの章で紹介します。

各種モジュールの設定

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

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

オリジナルモジュールを作る

a-blog cms ではモジュールが暗号化されていて修正する事もできませんが、オリジナルのモジュールを作れないわけではありません。

<!-- BEGIN_MODULE Sample --> 

(この部分に各種HTMLを記述する)

<!-- END_MODULE Sample -->

のようなモジュールの記述がある際には、以下のようなプログラムを動作させる事になります。

/php/ACMS/User/GET/Sample.php

a-blog cms をダウンロードした際の omake/php フォルダ内にサンプルのファイルがありますので、参考にしてみて下さい。オリジナルのモジュールの作り方につきましては、今回は割愛し、別の機会に紹介する事とします。


a-blog cms の設定をコンフィグと呼びます。このコンフィグはブログ毎にあり、子ブログでは個別の設定が必要になります。また、下記のyamlファイルがコンフィグの初期値を設定しているファイルになり、子ブログを追加した際には、このファイルに設定してあるブログが追加される事になります。

/private/config.system.yaml

このコンフィグ画面では、主に以下の3つのグループに分かれた設定がブラウザ上でできるようになっています。

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

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

ブログ設定

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

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

define('DEBUG_MODE', 1);

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

エントリー設定

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

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

ユニット追加ボタン

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

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

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

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

こちらで並び順を変更するとボタン側も変更する事ができます。また、こちらで設定を追加する事でボタンを追加する事も可能です。

  • モード products
  • ラベル 商品紹介

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

ユニット設定

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

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

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

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

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

テキストタグセレクト

また、エントリーの編集設定に戻ってきます。

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

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

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

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

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

p.price

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

ユニットグループ

ユニットグループの設定では、指定したユニットを設定されたクラスのDIVで囲むというだけの処理になります。一般的には、DIVにフロートの設定をし、幅を指定する事で段組レイアウトを実現します。

これらの設定は、カスタマイズするテーマのCSSに記述するものであり、a-blog cmsの標準のCSS内には記述が無い事になりますので、サイトのサイズに合わせて各自で設定をする必要があります。

メインのコンテンツのサイズは、このユニットグループのサイズをいくつに設定するかで数値を決定する事も検討した方がいいかもしれません。

サイズセレクト

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

オススメの設定としては、メインコンテンツの幅で大画像、2つの画像のマージンをメインのコンテンツ全体から引いて、2で割ったサイズを中画像、3つの画像を並べる際のマージンx2を引いて3で割ったサイズを小画像と設定します。

例:

  • 大 640px
  • 中 310px
  • 小 200px

モジュール設定

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

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


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コンテキストとモジュールの関係

場所的なコンテキスト

ブログコード、カテゴリーコード、エントリーコードのような情報から、どの情報を表示するかを指示する事で、表示させたい情報をモジュール内に編集します。

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

タッチモジュールの紹介を前にしましたが、モジュール内の部分的な表示の制御について紹介します。IF 〜 ELSE 〜 のようなプログラムのような表記での条件分岐は用意されておりません。

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

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

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

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

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

のようなタグがそのまま表示されてしまう事になります。これを消すために、: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 無かった際に表示させるブロック

1.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ブロック内では動作しませんのでご注意下さい。

インクルード機能

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

<!--#include file='/include/sample.html'-->
<!--#include file='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'-->

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

校正オプション

{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]

お問い合わせフォーム等で閲覧権限でユーザーがフォームにデータを入力できる場合、このようにエスケープする校正オプションの併用をするようにして下さい。

オリジナルのファイルを修正せずに、以下の場所にオリジナルの Corrector.php を作る事もできます。 /omake/php の中にサンプルファイルが入っていますので、こちらもチェックしてみて下さい。

/php/ACMS/User/Corrector.php

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

テーマの設定

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

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

テーマ ディレクトリ名

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

テンプレートファイル

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

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

テーマとテンプレート

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

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

news カテゴリーの時

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

もし、詳細ページのテンプレートが他のページと共用の設定にするのであれば、site/news/entry.html(詳細)のファイルを削除します。すると、テーマディレクトリの直下にあるファイルを参照するようになり site/entry.html(詳細)を利用するようになります。

products カテゴリーを作った時

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

この場合に、クライアント側でサブカテゴリーを追加した際には、テーマ内にそのカテゴリーコードのディレクトリが存在しない事になる事から site/entry.html(詳細)を利用してしまう事になり、希望するテンプレートでなくなる可能性があります。ご注意下さい。

表示テンプレートの確認

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

テーマの構成

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

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

また、テーマ作成の作法として、system のファイルを直接修正するのではなく、テーマ設定で設定されているテーマにコピーして修正するようにして下さい。システムのアップデートの際に system ディレクトリはアップデートされる事になり、カスタマイズ部分が消えてしまう事になります。

テーマの継承

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

blog@site

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

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


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

1.6 からグローバルルールという機能が追加になっています。これを利用するとルールを設定した子ブログに同様のルールを適用する事ができるようになります。多くの子ブログが存在するサイトの設定が楽になりました。

具体的な例を2つ紹介しておきます。

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

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

このルールの設定を行った後に、一覧のコンフィグのリンクから、スマートフォンの時のコンフィグについて設定を行います。最低限、テーマの設定を変更する事になります。

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

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

細かな設定を進めていく際に、特定のカテゴリーの時のみユニットの細かい設定を変更するといった事ができます。例えば、「商品紹介」と「お知らせ」では、ユニット設定の内容が違ったり、ユニット追加ボタン自体が違う、テキストタグセレクトの内容が違うという事までカスタマイズする事で、使わない場所では使わない設定を表示させない事を実現する事ができるようになります。


「モジュールID」は基本的には「モジュール」と表示内容が同じですが、モジュールにIDを付けることで、特定のモジュールを指定することができます。それにより、ルールや状況によって変化する内容を固定することができます。

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の引数

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


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

  • サイトのどこにでも設置が可能
  • メールの送信には2種類のメールを送れます
  • 入力項目のチェック機能
  • 入力項目のコンバート機能
  • 複数ステップのフォームを作る事ができる
  • DBに蓄積&CSVのダウンロード

フォームモジュール

フォームについても、モジュールとして提供しております。フォームの基本ステップとしては、新規・修正・確認・完了の4つのステップに分かれており、このステップを増やす事で複数ステップのフォームを用意できる事になります。

    <!-- BEGIN_MODULE Form -->

    <!-- BEGIN step-->
    <!-- 新規 -->
    <!--#include file="/include/form/insert.html"-->
    <!-- END step -->

    <!-- BEGIN step#reapply -->
    <!-- 修正 -->
    <!--#include file="/include/form/update.html"-->
    <!-- END step#reapply -->

    <!-- BEGIN step#confirm -->
    <!-- 確認 -->
    <!--#include file="/include/form/confirm.html"-->
    <!-- END step#confirm -->

    <!-- BEGIN step#result -->
    <!-- 完了 -->
    <!--#include file="/include/form/result.html"-->
    <!-- END step#result -->

    <!-- END_MODULE Form -->

フォームの基本

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

表示されるフォームタグ(メールアドレスの入力欄)

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

システムに mailaddress という項目がある事を伝える指定

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

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

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

フォームの管理ページ

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


a-blog cms のカスタムフィールドについては、テンプレートを手で書く必要がありますが、その分、自由度が高いフォームを作る事ができます。テーマの章で少し書いたように、a-blog cms では管理ページのテンプレートファイルを、カスタマイズしているテーマのディレクトリにコピーする事でオリジナルの管理ページを作る事ができます。

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

  • ブログ
  • カテゴリー
  • エントリー
  • ユーザー

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

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

表示されるフォームタグ(メールアドレスの入力欄)

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

システムに mailaddress という項目がある事を伝える指定

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

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

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

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

まず、どこのファイルを修正すればいいかを知る方法からご紹介します。まず、ブログの管理ページのフォームを開いてみます。

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

http://localhost/bid/1/admin/blog_edit/?edit=update&step=reapply

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

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

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

/themes/site/admin/blog/edit.html

これが基本ではありますが、この edit.html が次のバージョンアップでメンテナンスが入ってしまう事があるかもしれません。もちろん、このファイルを修正し、しっかりカスタマイズする事も方法としてはあります。

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

<!--#include file="/admin/blog/field.html" -->

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

/themes/site/admin/blog/filed.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/site/admin/entry/filed.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/site/admin/entry/category1.html

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



携帯アクセス解析