veilブロック

非表示部分の制御 :veil ブロック

条件による表示/非表示の制御について、モジュール単位では「タッチモジュール」がありますが、ここでは :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 を使うことで、変数の有無による表示/非表示の制御ができます。
変数の有無を超えた条件による表示の制御にはIFブロックを使います。

位置情報を使って記事を絞り込む

注意: このハンズオンではGoogle Maps APIを利用します。先に Google Maps API を使って地図を表示するカスタマイズ を行ってください。

エントリーの記事を一覧で表示する場合、現状だとid順や日付順などで表示する事はできていました。しかし昨今スマフォの利用率が増えてきており、GPSなどの位置情報を使って近くの情報を表示するような需要は増えてきていると思います。

そこで、Ver. 2.7.0より位置情報による記事の絞り込み、並び替えができるようになりました。ここでは、記事に位置情報を付加して記事詳細ページで近くの記事を出す事と、ブラウザから位置情報取得して、現在位置から近くの記事を表示する事を行います。

最近のブラウザは、位置情報（Geolocation API）を利用するために、SSL/TLS（https://）が必須になってきています。 ChromeやSafariでは確認できませんので PCのFireFox で確認するようにお願いします。

まずは、位置情報を付加したエントリーを作成しましょう。ここでは分かりやすいように位置情報（map）というカテゴリーを作成して作っています。4, 5件作成してみてください。

IFブロック

詳細な条件による表示/非表示の制御 IFブロック

条件による表示/非表示の制御については、:veil ブロックによるモジュール内での部分的な表示の制御について解説しましたが、ここでは、より詳細な条件による制御を行う IFブロックについて解説します。

IFブロックの記述例

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

上記の記述は、グローバル変数%{PAGE} が5以上の場合は「5ページ以上です」を表示、4の場合は「４ページです」、それら以外の場合は「3ページ以下です」を表示するという意味を持っています。

BEGIN_IF部分には、条件式の指定として[]の中にa-blog cmsのURLコンテキストのように 値/オプション/値 と指定します。またネスト（入れ子）にすることもできます。

<!-- BEGIN_IF [a-blogcms/lk/cms] -->
cms
<!-- ELSE -->
not cms
<!-- END_IF -->

基準となる値を左側に、対象を右側にしてください。例えば上記の「含まれる」では、「a-blogcms」の中に「cms」があるかを判断しています。「cms」の中に「a-blogcms」があるか、ではない点に注意してください。書く順番が重要になります。

注意事項

また、演算する値に改行が含まれるとIFブロックが機能しなくなるため、改行を含む変数 {hoge} などを使うときは、 [delnl] の校正オプションと併用します。

// {hoge}に改行が入る場合

<!-- BEGIN_IF [{hoge}[delnl]/eq/true] -->
IFブロックは機能します
<!-- END_IF -->

<!-- BEGIN_IF [{hoge}/eq/true] -->
IFブロックは機能しません
<!-- END_IF -->

オプション

演算子条件意味
eq=等しい
neq!=等しくない
gt>より大きい
gte>=以上
lt<より小さい
lte<=以下
lkLIKE含まれる
nlkNOT LIKE含まれない
reREGEXP指定した正規表現に合致する
nreNOT REGEXP指定した正規表現に合致しない
emEMPTY値が空（"0"は空と判定されます）
nemNOT EMPTY値が空（"0"は空と判定されます）ではない
issetISSET値が空でない（"0"も値があると判定されます）
nissetNOT ISSET値が空である（"0"も値があると判定されます）

テンプレート内での実行順序

テンプレートエンジンの実行順序は以下のようになります。

  • インクルードを解決
  • インクルード処理と同時にグローバル変数を解決
  • タッチモジュールを解決（デフォルトON）
  • モジュール類を内側から解決（同じ階層の場合は下から）
  • IFブロックを解決

IFブロックの解決は一番最後に解決される為、条件式でグローバル変数やモジュールの変数も使用できます。 またモジュールのループ内でも動作します。

AND演算子とOR演算子

IFブロックではバージョン2.1.1からANDとOR演算子が使えるようになりました。AND演算子を使えば、両方の条件を満たした際、満たさなかった際の処理が出来ます。OR演算子を使えば、どちらか一方の条件を満たした際、満たさなかった際について処理できます。

AND演算子の記述例

<!-- BEGIN_IF [3/gt/2/_and_/2/lt/4] -->
	<p>条件を満たします</p>
<!-- ELSE -->
	<p>条件を満たしません</p>
<!-- END_IF -->

このソースのように判定したい条件同士を、_and_でつないであげることによって判定を行うことができます。上のソースの場合、3 > 2、2 < 4は両者とも条件を満たしますので、条件を満たしますが出力されます。

OR演算子の記述例

<!-- BEGIN_IF [4/lt/2/_or_/2/eq/2] -->
	<p>条件を満たします</p>
<!-- ELSE -->
	<p>条件を満たしません</p>
<!-- END_IF -->

このソースのように判定したい条件同士を、_or_でつないであげることによって判定を行うことが出来ます。上のソースの場合、4 < 2は条件を満たしませんが、2 = 2は条件を満たしますので、条件を満たしますが出力されます。