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

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

• Blogger テンプレートのウィジェットタグに新しい表現方法が登場
• Blogger テンプレートにさらに新しいウィジェットタグが登場

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

• Official Blogger Blog: More custom template flexibility

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

• 第1回　ラムダ式 － ＠IT

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


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


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

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

• Lambda expression - Google プロダクト フォーラム

例えば


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

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

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

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

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

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

前回、Blogger テンプレートのウィジェットタグに新しい表現方法が登場 という記事を書きましたが、すぐにまた新しいウィジェットタグが追加されています。

• Blogger Buzz: Even more expansions to the Blogger template language

何が追加されたかというと、以下のとおりです。

• b:elseif
• b:switch
• b:eval
• b:with

早速、順に見ていきます。


elseif

これまで、条件分岐では b:if （条件に合う場合）と b:else （合わない場合）というのがあったんですが、条件に合わない場合に別の条件を追加する b:elseif が新しく登場しています。下に掲載したのは、ページの種類によって表示する内容を切り替えるコード例です。



switch

複数の条件分岐で参照するデータが同じ場合、b:switch というタグを使うこともできます。b:switch に参照するデータ名を、b:case に等しいかチェックする値を入れます。すると、該当した b:case の後に記述した内容が表示されます。b:default の後に記述した内容は、b:case で等しい物がなかった場合に表示されます。上のコードと同じ内容を b:switch で書き直したのが、下の例です。他のプログラム言語の switch でよく見られる break は要りません。「トップページの場合は」、「アーカイブページの場合は」などと、条件をどんどん付けくわえたい場合に便利です。



eval

b:eval は、文字列を式として実行するための文です。ちょっとした計算や文字列の連結をして、内容を表示するのに適しています。

例 1：　画像などに適用するスタイルシートに、画像の縦横の比率そのままで拡大・縮小させた値を記述する例です。

（「新しい幅 × 高さ ÷ 幅」を計算して、「新しい高さ」を表示。）

たとえば元の幅 width が 200 で、高さ height が 150、新しい幅 newWidth が 400 の場合には、(400 * 150 / 200) ということで、実際に以下の内容を表示します。



例 2：　配列構造になったデータを直接表示する例。

（投稿の一つ目のラベルのラベルページの URL を表示。）

データを直接記述する <data:post.labels[0].url/> という書き方でもいいんじゃないかと試してみたんですが、これだとテンプレートを保存することができませんでした。従来、配列のような構造になっているデータについては b:loop を使わないといけなかったのが、b:eval でも直接記述できるようになったということのようです。


例 3：　三項演算子の結果を書き出す例。三項演算子は、前回追加された表現でしたね。

（投稿にコメント可能な場合「Comment」と表示、不可の場合は「Comments Disabled」と表示。）


with

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

（「50 + 40」の計算結果を「myComputedValue」に格納。その後、「px;」を付加して書き出し。）

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


あとがき

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


関連：

• Blogger テンプレートのウィジェットタグに新しい表現方法が登場

参考：

• レイアウト用ウィジェット タグ - Blogger ヘルプ
• レイアウト用タグの式 - Blogger ヘルプ

Blogger のテンプレートには、ウィジェットタグという、一定の条件ごとに出力する HTML コードを変化させるための特別なタグが存在します。今回、このウィジェットタグに新しい表現方法が加わったと、Blogger Buzz が伝えています。

• Blogger Buzz: Adding new expressions to Blogger templates

これまで、ウィジェットタグの中では

• + で値を連結したり
• - で値を差し引いたり
• == や != で値が等しいか等しくないかをチェックしたり
• < や >、<=、>= で値を比較したり

といったことができたんですが、今回それらに加えて、次のような演算子や表現が使えるようになりました。


NOT 演算子

! や not を使って、「何かが true（真）ではないとき」という条件を表現する。

（コメントが可能でなければ…）

これまでは、<b:else/> を使って表現していたヤツですね。


三項演算子

? と : を使った三項演算子。? の前の条件が true（真）の場合は : の前のもの、false（偽）の場合は : の後ろのものを表示します。

<a expr:class='data:post.allowComments ? "comments" : "no-comments"' ...

（コメント可能な場合、a 要素の class 属性に comments を指定し、不可能な場合は no-comments を指定する。）

これまた、<b:if cond='...'> と <b:else/> を組み合わせて、表現していたものです。


メンバシップ演算子

これは、ある値が集合の要素の 1 つであるかどうかをチェックするためのもの。in と contains とが使えます。

<b:if cond='data:blog.pageType in {"index", "archive"}'>...

（ページタイプがトップページかアーカイブページのときに…）

<b:if cond='{"item", "static_page"} contains data:blog.pageType'>

（ページタイプが個別ページか静的ページのときに…）

in と contains で、チェック対象の値と集合（もしくは配列）の記述順が逆になるので要注意。とはいえ、複数の <b:if cond='...'> を併記する必要がないのは、便利です。


AND 演算子

and や && を使って、複数の条件をともに満たす場合について、記述可能に。

<b:if cond='data:blog.pageType == "index" and data:post.allowComments'>...

（ページタイプがトップページで、かつコメント可能なとき…）

以前は、<b:if cond='...'> をネスト（入れ子に）して実現していたもの。


OR 演算子

or や || を使って、複数の条件のうち、1 つでも満たす場合について、記述可能に。

<b:if cond='data:blog.pageType == "index" or data:post.allowComments'>...

（ページタイプがトップページか、またはコメント可能なとき…）

in、contains と同様、これからは <b:if cond='...'> を何回も書かなくて済みます。


括弧

( ) を使って、演算の順序を指定する。

<div expr:style='"max-width: " + (data:width + 10) + "px;"'>...

（div 要素 style 属性の最大幅に、現在の横幅プラス 10 ピクセルした値を指定する。）


これらの新しい演算子や表現を使うと、これまで Blogger テンプレートで条件分岐を記述していた、煩雑な作業が随分と楽になりそうですね。本格的に Blogger テンプレートをいじってみたい！という人は、ぜひ参考にしてください。


参考：

• レイアウト用タグの表現 - Blogger ヘルプ

この間、Google+ での言及を表示する「Google+ コメント欄」の話題を記事にしてきました。

• Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法
• Blogger ブログのコメント欄に Google+ でのコメントも表示できるようになりました

が、今回は Blogger オリジナルのコメント欄について。先月（2013 年 9 月）までこうだったコメント欄が



こんな風に変わっています。



Google+ のコメント欄と同じような、フラットなデザインに変わっていますね。今回の変更について、Blogger 公式のアナウンスを見つけることができなかったんですが、

• つわものぶろぐ: Bloggerのコメントシステムが改良

によると、モバイル端末からのコメント入力が随分しやすくなったとのこと。目下 Google+ に押されがちですが、Blogger オリジナルのコメント投稿も、今後活発になっていくといいですね。

Google+ プロフィールや Google+ ページとリンクさせている Blogger ブログで、記事を投稿した際に Google+ に自動共有されるようになりました。

• Blogger Buzz: Automatically share your blog posts to Google+

2013 年 4 月には Blogger のコメント欄を Google+ のものに置き換えるオプションも出ていますし（参考）、Blogger と Google+ の垣根がますます低くなりますね。

この設定を以前の方式（投稿の度に Google+ に共有するか確認するダイアログを表示したり、尋ねなくしたり）に戻す場合は、Blogger 管理画面「Google+」から「投稿後に自動的に共有する」のチェックを外すといいようです。詳しくはヘルプでご確認を。

• 投稿を Google+ で共有する - Blogger ヘルプ

Blogger に新ガジェット「連絡フォーム」が追加されています。

• Blogger - Google+ - We introduced a new "Contact Form" widget today. If a…

「コンタクトフォーム」とか「問い合わせフォーム」とか言われるアレですね。コメントと違いブログ上にメッセージが公開されないのと、メールと違いブログオーナーのアドレスを公開する必要がないのが特徴です。

ブログへの追加は、Blogger 管理画面「レイアウト」から「ガジェットを追加」リンクをクリック、「その他のガジェット」タブから「連絡フォーム」を選ぶだけ。


ガジェットの設定画面で選択できるのは「タイトル」のみ。このタイトルはデフォルトで「連絡フォーム」になっています。「お問い合わせ」などの方が分かりやすいかもしれませんね。

実際にブログに追加してみたのが、下の画像。


ブログ訪問者のつもりで試しに、「クリボウ」「（自分のメールアドレス）」「こんにちは！」とメッセージを入力し送信してみたところ、ブログ管理用メールアドレスに、以下のようなメールが届きました。


送信者に「クリボウ <no-reply@blogger.com>」と出ているので、メールアドレスは入力しても表示されないのかな？と一瞬思ったんですが、メールのソースを見てみるとアドレスは「From」欄ではなく「Reply-To」欄にしっかり記録されていました。なので「返信」すれば、メッセージをくれた人に直接メールを送れるというわけです。

一般のサイトのように運用しているブログなんかでは、コメント欄を閉じて問い合わせフォームだけを設置するのもいいかもしれません。こんな風に、訪問者とのコミュニケーションに選択肢が増えるのはいいことですね。