a-blog cms の Entry Summary に何が書かれているのか解説してみた
a-blog cms でカスタマイズしたいなと思う時に必ず出てくるのが "Entry_Summary" 。私が始めて スニペット をみた時、「なぜコメントで括られているのか?」「%{ROOT_DIR}??」と疑問だらけでした。そこで私が始めにやったことは、とりあえずスニペットを貼り付けて使ってみるということと、スニペットに何が書いてあるのかを確認するということでした。
今回のブログでは、「スニペットに何が書いてあるのか」について記録していきたいと思います。
Entry_Summary のスニペット
<!-- BEGIN_MODULE Entry_Summary --> <div class="acms-margin-bottom-medium"> <!--#include file="/admin/module/setting.html"--> <!-- BEGIN notFound --> <p>ただいまページを準備しております。もうしばらくお待ちください。</p> <!-- END notFound --> <div class="acms-grid"> <!-- BEGIN unit:loop --> <!-- BEGIN entry:loop --> <div class="acms-col-md-4 js-autoheight-r"> <div class="acms-summary"> <div class="acms-summary-image"><!-- BEGIN image:veil --> <img src="%{ROOT_DIR}{path}[resizeImg(100,100)]" alt="{alt}" width="100" height="100"><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" width="{noImgX}"><!-- END noimage --> </div> <div class="acms-summary-body"> <h3>{title}</h3> <p>{summary}</p> <p><a href="{url}" class="acms-btn">詳細をみる</a></p> </div> </div> </div> <!-- END entry:loop --> <!-- END unit:loop --> </div> <!-- BEGIN pager:veil --> <div class="acms-text-center"> <ul class="acms-pager"> <!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink --> <!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop --> <!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil --> <!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink --> </ul> </div> <!-- END pager:veil --> </div> <!-- END_MODULE Entry_Summary -->
スニペットの解説
モジュールの始まりと終わり
a-blog cms では、モジュールと呼ばれる機能(エントリーの一覧を表示させる機能など)を使用したい場合、まずは<!-- BEGIN_MODULE モジュール名 --><!-- END_MODULE モジュール名 -->で囲います。このコメントによる宣言で、a-blog cms 独特の変数やループ機能が使えるようになります。
<!-- BEGIN_MODULE Entry_Summary --> <!-- END_MODULE Entry_Summary -->
class="acms-grid" などのクラス名について
acms-**** というクラス名は、モジュールの制御には基本的に関係ありません。CSSにより、エントリー一覧のレスポンシブ対応もしたスタイルがデフォルトで設定されています。
モジュール設定へのリンク
<!--#include file="/admin/module/setting.html"-->
モジュール内にインクルードすることで、モジュール設定へのリンクをつけることができます。
エントリーがない場合の表示設定
<!-- BEGIN notFound -->と<!-- END notFound -->の間に、エントリーがない時に表示する内容を記述できます。自分でエントリーがあるのかを分岐させるプログラムを書く必要はありません。notFoundタグを入れておくだけで CMS が勝手に制御してくれます。
<!-- BEGIN notFound --> <!-- END notFound -->
エントリーのループ
<!-- BEGIN unit:loop --> <!-- BEGIN entry:loop --> <!-- END entry:loop --> <!-- END unit:loop -->
このタグの中でエントリーをループさせて表示させることができます。
unit:loop と、entry:loop は、テーブルタグの tr と td と同じような機能を持っており、unit:loop が tr(行)で、entry:loop が td(セル)の役割をしています。
変数がない場合にタグを消す機能
<!-- BEGIN 任意の文字列:veil --><!-- END 任意の文字列:veil -->の間にある変数に値が入っていなかった場合、その間のタグごと非表示になります。
<!-- BEGIN image:veil --> <!-- END image:veil -->
変数や校正オプションについて
変数表や校正オプションは、下記のリンク先に書いてあります。
エントリーサマリーのスニペットに記載してある分については、メモとして残しておきます。
- ■%{ROOT_DIR}
- ドキュメントルートからindex.phpのある場所までのパス
公式サイトには、"ドキュメントルートからindex.phpのある場所までのパス"とありました。しかし、正直これを読んでも理解ができなくて、以前アップルップルの誰かに聞いた事があります。
「%{ROOT_DIR}{path} は、まず、%{ROOT_DIR}には /archives/ というパスが入っており、{path}は/archives/を含まないため、%{ROOT_DIR} を入れる事でパスを補間している。」のだそうです。ちなみに、 /archives/ には、エントリー作成する時に画像ユニットに入れた画像が入っています。
しかし、 /archives/ に index.php は見当たらないので、「ドキュメントルートからindex.phpのある場所までのパス」という解説文を完全に理解しきれていません。これから %{ROOT_DIR} を記述する事でどう /archives/ まで繋がるのかを調べるか聞き込みをしていきたいと思います。
また、ドキュメントルートがどこに当たるのかがよくわからなかったので調べてみました。
この画像は、a-blog cms の基本ページについて解説しているところです。トップページがある場所の事をドキュメントルートと言うようです。つまり、使用しているテーマフォルダがドキュメントルートのようです。
さらに、ドキュメントルートについて理解を深めるためにa-blog cms 以外のWebサイトでも調べてみました。
引用元:NTTPCコミュニケーションズ
【ドキュメントルート】仮想ルートディレクトリ
ウェブサイトや FTPサイトの、トップページのデータが入っているディレクトリやフォルダ。一般に、ドキュメントルートということが多いけど、仮想ルートディレクトリという方が分かりやすいだろう。
まず、ルートディレクトリの説明から。簡単にいうと、ハードディスクなどのドライブのなかで、その第一階層、つまり一番上のディレクトリをルートディレクトリという。そして、そのなかにサブディレクトリがあって、それぞれのディレクトリにいろいろなファイルが保存されている。
つまりディレクトリ階層は、ウィンドウズのフォルダ構造に相当する。しかし、インターネット上のサーバーはユニックス系の OS(基本ソフト)を使うことが多いので、ユニックスの流儀でディレクトリと呼んでいる。
また、ウェブサイトなども / (スラッシュ)で区切られたディレクトリ構造になっている。そして、一番上の階層、つまりルートディレクトリにトップページのデータ(index.html など)が置いてある。
しかし、サーバーの実際のルートディレクトリと、そのサーバーで公開しているウェブサイトのルートディレクトリが同じだとリスクが高い。サーバーのルートディレクトリにはサーバー自体を管理する OS などが保存されている。一方、ウェブサイトのルートディレクトリには外からアクセスしてきた人に送り返すホームページ情報などが置かれる。
そこで、実際のルートディレクトリとは別のディレクトリ(フォルダ)をウェブサイト用のルートディレクトリとして指定する。そして、外部からアクセスがあったら、その指定されたディレクトリに行くよう設定しておく。
こうして指定された、ウェブサイトや FTPサイトなどのためのルートディレクトリを、仮想ルートディレクトリあるいはドキュメントルートという。
エントリーサマリーの変数
- ■{path}
- /archives/ を含まない画像までのパス。
- ■{title}
- エントリータイトル。
- ■{alt}
- 画像の alt 属性。
- ■{summary}
- テキストサマリー。エントリーのテキストユニットで挿入した文章が表示されます。何文字表示するかは校正オプションを使用して設定できます。
- ■{url}
- エントリーのURLを取得。
校正オプション
- ■[resizeImg(100,100)]
- 横と縦のサイズを指定して画像をリサイズする事ができる。アスペクトを維持したままリサイズする校正オプションもあるため、使用する際は校正オプションの一覧を要チェック。
画像がなかった場合の設定
エントリー一覧に画像を載せたいが、エントリーの中には画像がないものもあるかもしてません。そんな時に、ダミー画像として共通の画像を表示させる機能があります。
<!-- BEGIN noimage --> <img src="/テーマフォルダから画像までのリンク先" alt="" width="{noImgX}"> <!-- END noimage -->
{noImgX}については、エントリーサマリーの変数表をみても、「横サイズ」としか乗っていないためその画像のサイズなのか、エントリー一覧の他の画像サイズに合わせたサイズなのかがわからなかったため、自分で試してみました。試したところ、その画像のサイズを取得してきているようでした。
ページャー
エントリーサマリーのスニペットには、ページャーも記載されています。ページャーの設定はエントリーサマリーのモジュールIDを設定してからでないと変更できません。
<!-- BEGIN pager:veil --> <!-- END pager:veil -->
ページャーの変数については、変数表の解説でも理解しやすいと思ったので、ここでは書かない事にしましたが、校正オプションについてのみ書いておきます。
[raw]というのは、「校正せず、そのままのデータを出力する」という設定です。"<" や ">" といった文字を実体参照に変換しないという意味になります。
※校正オプションが何も指定されない場合には、デフォルトでescape(実体参照する)が指定されます。
「<」はHTMLで書くとタグの開始として認識されますが、実体参照にすると「<」はタグの開始ではなくただの"大なり記号"として扱われます。具体的には「<」は実体参照だと「&lt;」と書きます。