【初心者向け】a-blog cmsのタッチモジュールを使いこなそう

数日前に東京でWebデザイントレンドについて話してきたのですが、その数日後にa-blog cmsについて記事を書いているという頭のスイッチがおかしくなりそうな、あるいはおかしくなっている年末ですが、皆さまいかがお過ごしでしょうか?

今年はポストインクルード機能(Ajaxを利用してコンテンツを取得するa-blog cmsの機能)について書こうとしていたのですが、2日目のうぇびんさんの『a-blog cmsで指定条件のエントリーを表示する、「ポストインクルード」の使い方まとめ』という記事にほとんど書かれてしまったので、僕はタッチモジュールについて書こうと思います。

そう言えば、a-blog cmsの公式ドキュメントにもポストインクルードに関する記事が追加されてだいぶわかりやすくなったと思いますが、「ポストインクルードとは?」という一番基本となる機能解説のページが公式ドキュメントにあってもいいような気がします。

あ、この記事は「a-blog cms Advent Calendar 2017」の21日目の記事です。それでは本編に。

a-blog cmsのタッチモジュールとは?

a-blog cmsで、条件を設定して、表示を分けるにはいろいろな方法があります。例えばカテゴリーを絞り込んで記事一覧を出すのであれば、エントリーリストというビルトインモジュールを使います。

何も付けずにモジュールという場合には、だいたいこのビルトインモジュールのことを指しますので、他のものと混同しないように気をつけましょう。

さて、このビルトインモジュールはa-blog cmsの機能を使って、コンテンツを表示させるための独自タグのセットです。記事の本文を出したり、カテゴリーの一覧を出したりという場合には、表示内容に合ったビルトインモジュールを選び。具体的な表示内容は管理画面で設定し、スニペットをテンプレートに記述することで動作するようになります。

それとは異なり、タッチモジュールは最初から機能として設定されている条件にあてはまる場合にのみ内容を表示させるためのものです。「何を表示するか」と言うよりも、「テンプレートに記述したものを表示するかしないか」という判断をするために使います。条件に当てはまらなければ何も出力しません。

他のCMSを使っている方ですと、「IF文で出来るんじゃないの?」と思われると思いますが、a-blog cmsではバージョン2.0(2013年12月リリース)までIFの機能がなく(a-blog cmsではIFブロックと呼ばれます)、テンプレート内にPHPを書けないことから、タッチモジュールが主に使われていました。

今ではタッチモジュールでできることは、ほとんどIFブロックでできるようになりましたが、表記の簡単さや実行順序・速度などを考えた場合に、タッチモジュールでできることはタッチモジュールで行う方がいろいろ有利だったりします。

ですが、今回の記事は初心者向けなので、細かいことはすっ飛ばしますね。

タッチモジュールの基本的な書式

タッチモジュールは基本的に

<!-- BEGIN_MODULE Touch_○○○○ -->
表示させたい内容。テキストでも変数でもモジュールでも何でもオッケー。
<!-- END_MODULE Touch_○○○○ -->

という感じになります。

Touch_ というのが必ず入ってきますので、これを見かけたら100%タッチモジュールです。BEGIN_MODULEからEND_MODULEまでが1セットなので、思い通りに動かない場合には、きちんと両方あるか確認してください。

これだけ覚えておいて次に進みましょう。

タッチモジュールで判断できること

タッチモジュールを使って判断できるのは主に以下のものとなります

• 表示中のテンプレートは何か
• 特定の情報を持っているか
• ルートブログか子ブログか
• 管理権限がどうなっているか
• ログインしているかどうか

他にも「記事編集中かどうか」とか「SSL通信かどうか」などいろいろとありますが、私はあんまり使ったことがないので、とりあえずパスして、この5つを簡単に説明していきます。

表示中のテンプレートは何か

a-blog cmsでは「トップページ」「記事一覧ページ」「エントリー」の最低3種類のテンプレートを使うことが多いです。一般的なサイトの構造通りですね。

例えばフッターは全ページ共通のテンプレートを作って読み込ませたいんだけど、その中のバナーだけはトップページのみ表示させたいというような場合にはタッチモジュールが便利です。

<!-- BEGIN_MODULE Touch_Top -->
<a href="リンク先のURL"><img src="バナー画像へのパス" alt="いい子はきちんとaltを書こう"></a>
<!-- END_MODULE Touch_Top -->

と記述しておけば、トップページの時だけ、このバナー画像は表示されます。

逆にトップページ以外の場合だけ表示したいという場合には、Touch_NotTopというタッチモジュールがあります。

<!-- BEGIN_MODULE Touch_NotTop -->
<a href="リンク先のURL"><img src="バナー画像へのパス" alt="いい子はきちんとaltを書こう"></a>
<!-- END_MODULE Touch_NotTop -->

このように書いてやれば、トップページ以外のときに表示されます。

組み合わせてやれば、トップページのロゴはh1要素で、それ以外のページではp要素でマークアップしたいというようなことが実現できます。

<!-- BEGIN_MODULE Touch_Top -->
<h1><img src="ロゴ画像へのパス" alt="会社名"><h1>
<!-- END_MODULE Touch_Top -->
<!-- BEGIN_MODULE Touch_NotTop -->
<p><a href="%{ROOT_BLOG_URL}"><img src="ロゴ画像へのパス" alt="会社名"></a><p>
<!-- END_MODULE Touch_NotTop -->

トップページへのリンクの設定も同時に書いてみました。

他にもTouch_Index、Touch_NotIndex、Touch_Entry、Touch_NotEntryなどがありますので、1つのテンプレートをかなり細かく分けて書くこともできます。

今見ているページが特定の情報を持っているか

a-blog cmsではURLのパスによって、さまざまな絞り込みを行います。例えばこんな感じ。

今見ているページがURLで判断するためのタッチモジュールにはTouch_Category、Touch_Keyword、Touch_Tagなんかがあります。

これらのタッチモジュールは値の中身を判断するのではなく、値を持っているかどうかを判断しています。

• //www.color-fortuna.com/news/ (newsというカテゴリーの表示)
• //www.color-fortuna.com/news/keyword/ブログ/　(「news」というカテゴリー内の「ブログ」というキーワードを持っている記事の一覧)
• //www.color-fortuna.com/tag/配色/ (配色というタグを持つ記事の一覧)

<h2>ページタイトル <!-- BEGIN_MODULE Touch_Category --><span>%{CATEGORY_NAME}</span><!-- END_MODULE Touch_Category --> </h2>

という風に書けば、カテゴリーに所属している記事の場合には、そのカテゴリー名が表示されます。 タグの間もタッチモジュールを書くことができます。

こういう風に書き換えてもだいたい同じ挙動になります。

<!-- BEGIN_MODULE Touch_Category -->
<h2>ページタイトル<span> %{CATEGORY_NAME}</span></h2>
<!-- END_MODULE Touch_Category -->
<!-- BEGIN_MODULE Touch_NotCategory -->
<h2>ページタイトル</h2>
<!-- END_MODULE Touch_NotCategory -->

見通しが急に悪くなった感じ・・・。

同じような感じで、表示しているページにタグやキーワードがあれば、それによって表示を変えることができます。

ルートブログか子ブログか

a-blog cmsの大きな特徴の一つに簡単に子ブログを作れるということが挙げられます。簡単に作れるということは、それだけそういう実装をする人が多いということですね。 親ブログと子ブログで同じテンプレートを使い回すことも必然的に増えますので、これも便利なタッチモジュールです。

これを判断するのは、Touch_RootBlogとTouch_NotRootBlogです。親ブログだけ出したいとき、子ブログにだけ出したいときに使えるのはもう大丈夫ですね。

この系統でもう一つ覚えておきたいのは、Touch_BlogParentとTouch_NotBlogParentです。今見ているブログが子ブログを持っているかどうかを判断することができます。 ちょっとわかりにくいかもしれませんので、図で言えばこういう感じ。

ブログA
　　　└ブログB
　　　　　　└ブログC

この3つのブログのテンプレートに以下のコードを書いた場合の表示と表示結果です。

<!-- BEGIN_MODULE Touch_RootBlog -->ブログAのみに表示されます<!-- END_MODULE Touch_RootBlog -->
<!-- BEGIN_MODULE Touch_NotRootBlog -->ブログBとCに表示されます<!-- END_MODULE Touch_NotRootBlog -->
<!-- BEGIN_MODULE Touch_BlogParent -->ブログAとBに表示されます<!-- END_MODULE Touch_BlogParent -->
<!-- BEGIN_MODULE Touch_NotBlogParent -->ブログCのみに表示されます<!-- END_MODULE Touch_NotBlogParent -->

一番上の階層のブログと一番下の階層のブログだけに表示させたいという場合には、このままで大丈夫ですね。

Bのブログにだけ出したいというマニアックなリクエストがあった場合には、タッチモジュールを入れ子にすることで実現することもできます。

<!-- BEGIN_MODULE Touch_NotRootBlog -->
<!-- BEGIN_MODULE Touch_BlogParent -->
ブログBのみに表示されます
<!-- END_MODULE Touch_BlogParent -->
<!-- END_MODULE Touch_NotRootBlog -->

あまりにもわかりにくいので、こういう場合にはテーマ継承の機能やIFブロックを使って処理した方が楽だと思います。

ですが、タッチモジュールは入れ子にできるということはぜひ覚えておきましょう。

管理権限がどうなっているか

a-blog cmsの管理権限は以下の4つです。こちらは公式サイトよりぱく引用しました

権限を使って、表示を分けるタッチモジュールは結構たくさんあります。

• Touch_SessionWithAdministration(「管理者」の時のみ表示する)
• Touch_SessionWithCompilation(「編集者」以上の時のみ表示する)
• Touch_SessionWithContribution(「投稿者」以上の時のみ表示する)
• Touch_SessionWithSubscription(「読者」以上の時のみ表示する)
• Touch_SessionIsCompilation(「編集者」の時のみ表示する)
• Touch_SessionIsContribution(「投稿者」の時のみ表示する)
• Touch_SessionIsSubscription(「読者」の時のみ表示する)

7種類もあって、権限で決め打ちする場合と、ある権限以上という使い方に分けることができます。

「読者」は記事は投稿できないけれども、ログインはできるというユーザーになります。会員制のページでログインした人だけが見えるコンテンツなどの場合に使うことができます。

またa-blog cmsの特徴として外せないのは、「管理画面がHTMLで編集できる」ということにあります。

例えば特定の記事をピックアップして表示するというカスタマイズをするという場合に、投稿者は記事を書くことだけにして、編集者以上の人だけにチェックボックスを表示するという場合には、以下のような感じで書くことができます。

<!-- BEGIN_MODULE Touch_SessionWithCompilation -->
<table>
  <tr>
    <th>記事のピックアップ</th>
    <td>
      <input type="checkbox" name="pickup[]" value="true" id="input-pickup-true"{pickup:checked#true} />
      <label for="input-pickup-true">トップに表示</label>
      <input type="hidden" name="field[]" value="pickup" />
    </td>
  </tr>
</table>
<!-- END_MODULE Touch_SessionWithCompilation -->

これで管理者と編集者だけがチェックボックスを利用することができます。

タッチモジュールがわかれば、表示側のテンプレート・管理画面のカスタマイズが両方柔軟に行えるようになります。「使わない項目は表示させない」ことがたった2行でできるんですよね。楽でいいです。

ちなみに前述の編集者以上のみに表示するの場合を、IFブロックを使うと、こんな感じになります。

<!-- BEGIN_IF [%{SESSION_USER_AUTH}/eq/administrator/_or_/%{SESSION_USER_AUTH}/eq/editor] -->
チェックボックス
<!-- END_IF -->

タッチモジュールの方がすっきりしますよね。

ちなみにこのコードをどこに書くかわからないという人は、公式ドキュメントの「エントリーのカスタムフィールド」をご覧ください。

ログインしているかどうか

最後にログインしているかどうかです。簡単なところでは、

<!-- BEGIN_MODULE Touch_Login -->
おまえはログインしている
<!-- END_MODULE Touch_Login -->

という感じでログインしている人にだけ見えるようにできますね。

これにもログインしていない場合に動作するTouch_Unloginというタッチモジュールがあります。「Not」じゃないところが要注意です。

<!-- BEGIN_MODULE Touch_Unlogin -->
アクセス解析用のタグなど
<!-- END_MODULE Touch_Unlogin -->

こんな感じで書いておけば、ログインしている人をアクセス解析から除外することができますね。こういうのが1行でできるって素敵です。 現在のデフォルトのテンプレートには最初からこんな感じで書かれていますが、わざわざ教えてあげると結構喜ばれます。優しさの押し売りです。

ログインしている前提であれば、Touch_Edit(「エントリー編集(作成・変更・追加)」の時のみ表示する)やTouch_Admin(「管理状態(エントリー編集など)」の時のみ表示する)なんかもあって、結構細かく表示制御ができます。ここまで来るとがっつり管理画面をカスタマイズということになるでしょうが、ここをしっかりコントロールできれば、もっと使いやすい管理画面を作ることができるでしょう。

他にもいろいろありますが、これくらい知っていれば相当凝ったことができるはずです。何か条件分岐をしようと思ったら、まずはタッチモジュールの一覧を見ることをおすすめします。それで難しい場合にはIFブロックの出番ですね。

タッチモジュールにはビルトインモジュールも組み込めます

ここまで簡単な例でタッチモジュールについて説明してきましたが、タッチモジュールにはもちろんビルトインモジュールを組み込むことができます。

下層ページにだけエントリーの一覧を出したい場合には、こういう感じに書くことができます。

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

トップページ・一覧ページ・エントリーのすべてに記事一覧を出したいけど、下層だけ「トップページへ」というリンクを一番上に入れたいという場合にはこんな感じに。

<!-- BEGIN_MODULE Entry_List -->
  <ul>
    <!-- BEGIN_MODULE Touch_NotTop -->
    <li><a href="%{HOME_URL}">ホーム</a></li>
    <!-- END_MODULE Touch_NotTop -->
    <!-- BEGIN entry:loop -->
    <li><a href="{url}">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
<!-- END_MODULE Entry_List -->

いろいろなものの組み合わせで、いろいろ凝ったことをやっていくので、a-blog cmsはパズルのようだと言われますが、ピースの形を知っておけば組み立ては格段に楽になります。

この場合のピースはビルトインモジュール・タッチモジュール・グローバル変数ですかね。悩んだときはこの一覧を見直すようにしましょう。

と延々書いておいて、チートシートでも作ればよかったと思ったわけですが、それは他の方にお任せするとします。

それでは皆さま、今年もお世話になりました。よいお年をお過ごしください!