>-->

クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Blogger テンプレートでラムダ式が使用可能に


新しいテンプレート表現「ラムダ式」

昨年(2015å¹´)5・6 月に、Blogger テンプレートに新しい表現方法が相次いで登場したのを覚えているでしょうか。

Blogger テンプレート上で扱える構文が増えて、随分柔軟になった印象を受けたものですが、今回、さらにラムダ式が使えるようになりました。次のリンクが Blogger 公式のアナウンスです。

「ラムダ式とはなんぞや?」という人は、このサイトの説明がわかりやすいかと。

// 匿名メソッド
Calculate(1, 2, delegate(int x, int y) { return x + y; }); // 出力:3

// ラムダ式
Calculate(1, 2, (x, y) => x + y); // 出力:3

無名関数の定義と呼び出しが簡単に記述できる式というと…伝わるでしょうか。Blogger テンプレート上に記述する実際の例として挙げられているのが次のコードです。

<b:if cond='data:post.labels any (l => l.name == "Flower")'>
  <img src=’/img/flower.jpg’ />
<b:if/>

その投稿に「Flower」ラベルがついていれば、花の画像を表示するというコードです。これまで b:loop タグを使わないと書けなかったものが、確かに随分簡単になっていますね。


Blogger で使えるラムダ式の仕様

Blogger で実際に使えるラムダ式ってどんなもの?と思って調べてみると、ヘルプフォーラムで解説を発見。

例えば

data:posts count (p => p.numComments > 0)

というコードは、少なくとも 1 コメントついている投稿の数を示すためのもの。

細かく見ていくと、赤字部分は対象となるデータ(アイテムセット:今回は投稿情報)ã‚’、青字部分は行う処理の種類(ラムダオペレータ:今回はその数)ã‚’、緑部分は実際のチェック内容(ラムダエクスプレッション:今回はコメントの数 0 より多いかどうか)を指定しています。

ラムダエクスプレッションは、さらに => 前後で分けられて、左辺に変数名(今回は data:posts セット内の各アイテム post ã‚’ p と名付けている)ã‚’、右辺にその変数を使った表現を記述することになっています。

うーん、使い慣れると便利なのかもしれませんが、使い方をマスターするのになかなか時間がかかりそうですね。ちなみに、ラムダオペレータに使えるキーワードは次の通り。

any ... ラムダエクスプレッションを満たすアイテムがセット内に 1 つでもあれば true を返す。
all ... セット内のアイテムすべてがラムダエクスプレッションを満たせば true を返す。
none ... ラムダエクスプレッションを満たすアイテムがセット内に 1 つもなければ true を返す。
count ... セット内でラムダエクスプレッションを満たすアイテムの個数を返す。
filter ... セット内でラムダエクスプレッションを満たすアイテムだけを集めたセットを返す。
map ... ラムダエクスプレッションで記述された結果を集めたセットを返す。
first ... セット内でラムダエクスプレッションを満たす最初のアイテムを返す。

filter ã‚„ map が自在に使えるようになれば、Blogger テンプレートでもかなり複雑な指示が出せそうですね。われこそは!と思う人は、ぜひチャレンジしてみてください。

Japanese Bloggers Info がメンテナンス終了、OAuth2 対応に


5 月にお知らせしていた Japanese Bloggers Info のメンテナンスが、ようやく終わりました。

メンテナンス期間中は、ブログの閲覧しかできなかったんですが、再び新しいブログの登録ができるようになりました。

今回の問題は、Web アプリケーションを動かしている Google App Engine 上で、AuthSub という認証システムが使用不可になったことが原因です。

(もう少し正確にいうと、非推奨になったシステムを使い続けたクリボウのズボラさが原因です。すみません…。)

そして、認証システムの更新作業中に、これまた Master/Slave Datastore というデータシステムが使用不可になってしまい、アプリケーション自体が動かなくなってしまいました。それで、Master/Slave Datastore から High Replication Datastore へデータシステムの移行をしたのち、AuthSub から OAuth2 への認証システムの移行を行ったため、とても時間がかかってしまったというわけです。M/S から HRD への移行については、以下に少し書いているので、興味がある人はどうぞ。

…ということで、Japanese Bloggers Info でまたブログ登録ができるようになりましたので、まだ登録していなかった!という人も、ぜひ一度登録してみてくださいませ。

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>


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>


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」と表示、不可の場合は「Comments Disabled」と表示。)


with

b:with を使うと、計算式の値などを一時的に格納する変数を作ることができます。

<b:with var='myComputedValue' value='50 + 40' >
  <data:myComputedValue/>px;
</b:with>
(「50 + 40」の計算結果を「myComputedValue」に格納。その後、「px;」を付加して書き出し。)

変数を書き出すのは、<data:myComputedValue/> と <b:eval expr='data:myComputedValue' /> のどちらを使ってもOKです。属性値としてなら expr:width='data:myComputedValue' のように使います。なお、b:with で囲んだエリア内でしか変数は使えないので、注意が必要です。


あとがき

今回のテンプレートタグの仕様変更で、実際には内容を書き出さずに、変数を指定したり、計算をしたりできるようになりました。Blogger テンプレートでできることが、格段に広がった印象です。新しいテンプレートタグを駆使して、自分だけのテンプレートづくりに挑戦してみるのもいいかもしれません。テンプレートタグのこういう組み合わせで、こんなことができるよというアイデアがもしあれば、教えてくださいね。


関連: 参考:
© 2005-2014 Kuribo. Powered by Blogger.