エントリーユニットの途中に別のモジュールを入れる

エントリーのユニットとユニットの間に、バナーモジュールや一覧など何か別のモジュールを表示したい場合の方法を説明します。
本機能はver2.1.1で追加されましたbuildTplの校正オプションを利用します(ver2.1.1のリリースノート)。

サイト速度を改善する(その2)

前回、サイト速度を改善する(その1)でgzipに圧縮することによるサイト速度の向上について紹介しました。今回は、そのgzip圧縮の作業を効率よく行う方法を紹介します。
Node.jsとgulpを使って圧縮の自動化を行います。ローカルのMac環境を例に圧縮の自動化を説明します。

サイト速度を改善する(その1)

サイトの表示速度は(ごくわずかの効果かもしれませんが)SEOの観点からみても重要です。
a-blog cmsではキャッシュ機能を使うことで、サーバーキャッシュを作ることができます。アクセスがある度に動的にhtmlファイルを生成するところを、キャッシュしておくことで高速化しています。

キャッシュ機能を有効にしている場合、サイバーキャッシュによる高速化の他に、htmlファイルはgzip圧縮されています。これはブラウザにある開発者ツールなどを使ってそのページのレスポンスヘッダーを確認することで確認ができます。
下記のように表示されていましたらgzip圧縮されています。

IFブロック利用事例の紹介

ver2.0からの機能、IFブロックの利用事例を紹介します。
IFブロックの説明についてはドキュメントページを参考にしてください。

モジュールの変数を使う例

<!-- BEGIN_MODULE Category_EntryList id="clinicTop" -->
 <!-- BEGIN categoryEntryList:loop -->
 <!-- BEGIN category:loop --><!-- BEGIN entry:veil --><!-- BEGIN entry:loop -->
  
  <!-- BEGIN_IF [{entryCode}/eq/state.html] -->
  <p class="icon_camera">{entryTitle}</p>
  <!-- ELSE_IF [{entryCode}/eq/access.html] -->
  <p class="icon_pin">{entryTitle}</p>
  <!-- ELSE -->
  <p>{entryTitle}</p>
  <!-- END_IF -->
  
 <!-- END entry:loop --><!-- END entry:veil --><!-- END category:loop -->
 <!-- END categoryEntryList:loop -->
<!-- END_MODULE Category_EntryList -->

上記の例では、特定のエントリーコードの場合に、表示するアイコンを変えています。IFブロックを使わずに、カスタムフィールドにクラス名を登録し、それを表示するような方法も可能です。

<!-- BEGIN_IF [{url_a}{url_b}/nem/] -->
    <h2>リンク</h2>
    <!-- BEGIN url_a:veil --><p><a href="{url_a}" class="acms-btn">リンクA</a></p><!-- END url_a:veil -->
    <!-- BEGIN url_b:veil --><p><a href="{url_b}" class="acms-btn">リンクB</a></p><!-- END url_b:veil -->
<!-- END_IF -->

上記の例では、カスタムフィールド「url_a」「url_b」があり、どちらか一方でも値がセットされていれば表示されるようになっています。
{url_a}{url_b}と値をつなげて、nem(値が空ではない)かどうかを判断しています。
このように、複数のフィールドを文字列としてつなげて使うことも可能です。

また、nemのように比較対象がない記述は”{hoge}/nem”ではなく”{hoge}/nem/”と最後の/が必要になります。

<!-- BEGIN pager:veil -->
<div>
  <!-- BEGIN page:loop --><span <!-- BEGIN_IF [%{PAGE}/eq/{page}] -->class="itemPagerActive"<!-- END_IF -->>
  <!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear -->
  </span><!-- END page:loop -->
 </p>
</div>
<!-- END pager:veil -->

上記の例では、今見ているページ(グローバル変数の%{PAGE})とページャーのページ番号(モジュール変数の{page})が一致した時だけクラスがセットされるようにしています。
グローバル変数をIFブロックに使うことができます、比較対象は必ずしも固定値である必要はなく、モジュール変数との比較にも利用できます。

<!-- BEGIN_IF [%{CID}/re/^(31|44)$] -->
<!-- END_IF -->

正規表現を使って、複数の値を許可する場合にも利用できます。

IFブロックの注意点

IFブロックはとても便利な機能ですが、いくつかのデメリットもあります。

メンテナンス性の低下

テンプレートファイルに直接条件を記入するため、FTPでテンプレートファイルを確認・変更できる方でないと修正ができません。サイト構築時には大きな問題ではありませんが、お客様での運用時に柔軟な調整ができません。
モジュールIDでの調整でしたら、管理ページから変更が可能です。

表示速度の低下

実行順序の関係で、IFブロックは最後に処理されます(これによって柔軟な条件分岐処理が可能になります)
そのため、テンプレート処理が一通り動いてから条件分岐処理が行われます。
例えば、エントリー一覧に出ている100件のエントリーからある1件だけを表示するような処理をIFブロックで行いますと、ページ表示には不要な99件のエントリーも一旦テンプレートに書きだされます。そのため表示速度は低下します。こういった用途でのIFブロックの利用はお勧めできません。

ユニットグループの不具合について

ユニットグループで不具合が確認されました

不具合内容

ユニットグループを使用しそのエントリーの最後のユニットが非表示だった場合に 最後の<div>が閉じられずレイアウトが崩れてしまう事が確認されました。

テンプレートエンジン IFブロック

テンプレートエンジン改良

次期バージョン(執筆時1.7.0最新)でテンプレートエンジンの改良を考えています。 実はもう動いているものがあったりするのですが。 そこで今回は現在出来ているものを紹介したいと思います。

IFブロック

今回のテンプレートエンジンの改良点はIF(条件分)を使用できるようにした事です。 if文がなくても十分にサイトを作製する事は出来るのですが、どうしても細かい所で if文が必要な場合があります。そこで今回実装してみました。

記述方法

<!-- BEGIN_IF [%{PAGE}/gte/5] -->
5ページ以上です
<!-- ELSE -->
4ページ以下です。
<!-- END_IF -->

テンプレートエンジン IFブロック

この記事は開発段階のものです。最終的な仕様のIFブロックのドキュメントの記事をご覧ください。

テンプレートエンジン改良

次期バージョン(執筆時1.7.0最新)でテンプレートエンジンの改良を考えています。 実はもう動いているものがあったりするのですが。 そこで今回は現在出来ているものを紹介したいと思います。

IFブロック

今回のテンプレートエンジンの改良点はIF(条件分)を使用できるようにした事です。 if文がなくても十分にサイトを作製する事は出来るのですが、どうしても細かい所で if文が必要な場合があります。そこで今回実装してみました。

記述方法

<!-- BEGIN_IF [%{PAGE}/gte/5] -->
5ページ以上です
<!-- ELSE -->
4ページ以下です。
<!-- END_IF -->