Blogger テンプレートにさらに新しいウィジェットタグが登場
前回、Blogger テンプレートのウィジェットタグに新しい表現方法が登場 という記事を書きましたが、すぐにまた新しいウィジェットタグが追加されています。
何が追加されたかというと、以下のとおりです。
- b:elseif
- b:switch
- b:eval
- b:with
elseif
これまで、条件分岐では
b:if （条件に合う場合）と b:else （合わない場合）というのがあったんですが、条件に合わない場合に別の条件を追加する b:elseif が新しく登場しています。下に掲載したのは、ページの種類によって表示する内容を切り替えるコード例です。
<b:if cond='data:blog.pageType == "static_page"'>
静的ページに表示する内容
<b:elseif cond='data:blog.pageType == "item"'>
個別投稿ページに表示する内容
<b:else/>
それ以外のページに表示する内容
</b:if>
静的ページに表示する内容
<b:elseif cond='data:blog.pageType == "item"'>
個別投稿ページに表示する内容
<b:else/>
それ以外のページに表示する内容
</b:if>
switch
複数の条件分岐で参照するデータが同じ場合、
b:switch というタグを使うこともできます。b:switch に参照するデータ名を、b:case に等しいかチェックする値を入れます。すると、該当した b:case の後に記述した内容が表示されます。b:default の後に記述した内容は、b:case で等しい物がなかった場合に表示されます。上のコードと同じ内容を b:switch で書き直したのが、下の例です。他のプログラム言語の switch でよく見られる break は要りません。「トップページの場合は」、「アーカイブページの場合は」などと、条件をどんどん付けくわえたい場合に便利です。
<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
静的ページに表示する内容
<b:case value="item" />
個別投稿ページに表示する内容
<b:default />
それ以外のページに表示する内容
</b:switch>
<b:case value="static_page" />
静的ページに表示する内容
<b:case value="item" />
個別投稿ページに表示する内容
<b:default />
それ以外のページに表示する内容
</b:switch>
eval
b:eval は、文字列を式として実行するための文です。ちょっとした計算や文字列の連結をして、内容を表示するのに適しています。
例 1： 画像などに適用するスタイルシートに、画像の縦横の比率そのままで拡大・縮小させた値を記述する例です。
min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
（「新しい幅 × 高さ ÷ 幅」を計算して、「新しい高さ」を表示。）たとえば元の幅 width が 200 で、高さ height が 150、新しい幅 newWidth が 400 の場合には、(400 * 150 / 200) ということで、実際に以下の内容を表示します。
min-height: 300px;
例 2： 配列構造になったデータを直接表示する例。
<b:eval expr="data:post.labels[0].url" />
（投稿の一つ目のラベルのラベルページの URL を表示。）データを直接記述する
<data:post.labels[0].url/> という書き方でもいいんじゃないかと試してみたんですが、これだとテンプレートを保存することができませんでした。従来、配列のような構造になっているデータについては b:loop を使わないといけなかったのが、b:eval でも直接記述できるようになったということのようです。例 3： 三項演算子の結果を書き出す例。三項演算子は、前回追加された表現でしたね。
<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
（投稿にコメント可能な場合「Comment」と表示、不可の場合は「Comment Disabled」と表示。）with
b:with を使うと、計算式の値などを一時的に格納する変数を作ることができます。
<b:with var='myComputedValue' value='50 + 40' >
<data:myComputedValue/>px;
</b:with>
（「50 + 40」の計算結果を「myComputedValue」に格納。その後、「px;」を付加して書き出し。）<data:myComputedValue/>px;
</b:with>
変数を書き出すのは、
<data:myComputedValue/> と <b:eval expr='data:myComputedValue' /> のどちらを使ってもＯＫです。属性値としてなら expr:width='data:myComputedValue' のように使います。なお、b:with で囲んだエリア内でしか変数は使えないので、注意が必要です。あとがき
今回のテンプレートタグの仕様変更で、実際には内容を書き出さずに、変数を指定したり、計算をしたりできるようになりました。Blogger テンプレートでできることが、格段に広がった印象です。新しいテンプレートタグを駆使して、自分だけのテンプレートづくりに挑戦してみるのもいいかもしれません。テンプレートタグのこういう組み合わせで、こんなことができるよというアイデアがもしあれば、教えてくださいね。
関連： 参考：
