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

昨年（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 ヘルプ

2013 年 4 月に、Blogger ブログに、通常のコメント欄と入れ替える形で Google+ のコメント欄が設置できるようになりました（参考）。複数のブログについたコメントや他人のブログにつけたコメントが Google+ で一元的に閲覧できるので非常に便利なんですが、その一方で通常のコメント欄と比べ不便なところもいくつか指摘されています。

• Google+ ユーザーしかコメントできない。
  通常のコメント欄なら Google ユーザー、OpenID ユーザーに加え、「匿名」も選べます。
• 公開範囲が分かりにくい。
  Google+ のサークルが適用されるため、誰にどのコメントが見えているのか把握しにくいかと。
• ブログのドメインを変えられない。
  Google+ 上でのコメントは、リンクの URL で Blogger ブログと関連付けられているため、ドメインを変更してしまうと、ブログから以前のコメントが見れなくなってしまいます。
• 記事ごとのコメント表示・非表示、新規受け付けの可否設定ができない。
  Blogger の投稿エディタのオプション指定が効きません。
• コメントの「オーナー承認後公開」ができない。
  ブログにコメントがつくというより、Google+ での言及をブログに表示できる、というのが本質なので、しょうがないといえばしょうがないんですが。
• ブログについたコメント一覧が確認できない。
  通常のコメントだと、ダッシュボードやコメントフィードで確認できますね。

参考：

• The Real Blogger Status: Reverting Your Blog Back To Blogger Comments, From Google+ Comments

ということで、従来のコメント欄も Google+ のコメント欄も両方ブログに載せてしまおうと思ったわけです。参考にしたのはこちらのブログ。

• Google+コメント機能をBlogger以外に設置する方法【非公式】 | アンギス

導入してみた様子が、次の画像です。



導入方法

１．Blogger の管理画面「Google+」から「このブログで Google+ のコメントを使う」のチェックを外します。元々 Blogger ブログを Google+ プロフィールと関連付けていない人は、そのままで。

２．Blogger 管理画面「テンプレート ＞ HTML の編集」から


というコードを見つけます。「Ctrl + f」キーからエディタの検索機能を使うと便利です。

３．２のコードのすぐ後に


というコードを挿入して「テンプレートを保存」ボタンを押します。赤字部分は Google+ コメント欄の最大幅です。通常のコメント欄の幅に合わせて調整するのがいいと思います。

青字の部分は、Google+ コメント欄の上部に表示されるメッセージで、自由に書き換えることができます。閲覧者がどちらにコメントすればいいのか迷わないように、何か説明を書いてもいいかもしれませんね。

なお、<div id='backlinks-container'> は 2 箇所あるので、両方のコードの後に同じコードを貼り付けてください。


ということで、「Google+ のコメント欄を置きたいけど、前についたコメントも表示しときたいんだよな…」という人も、「Blogger アカウントと Google+ アカウントをまだ関連付けていないんだけど…」という人も、ぜひお試しください。


ちなみに

テンプレートによっては、Blogger のコメント欄が 425px 幅で固定になっているものがあります。これは、Blogger 公式の外部 CSS ファイルで指定されているもので、Blogger 管理画面「テンプレート ＞ HTML の編集」から、テンプレートの CSS 部分


のすぐ後にでも、


と挿入することで、テキストエリアの幅の上書きが可能です。Google+ のコメント欄と幅を合わせたいというときに思い出してください。

Google AdSense の非同期広告コード

Google AdSense の広告コードで、「非同期」タイプを選ぶことができるようになりました。

• Inside Adsense - 日本語: 新しい広告コードによってユーザーの利便性が高まります

これまでの「同期」タイプと比べて、ページの読み込み時間が改善されるということです。

非同期広告コードとは、完全非同期バージョンの AdSense 用広告コードのことで、ウェブページの読み込み時間を改善し、サイトを訪れたユーザーの利便性を高めます。非同期コードには、ウェブページの他の部分の読み込みを妨げないというメリットがあるため、広告の読み込みに問題があるページでも、コンテンツの読み込みは問題なくできるようになります。モバイル ユーザーの場合は特に、ウェブページの読み込み時間の短縮を実感できるでしょう。

非同期広告コードについて - AdSense ヘルプ

これまでは AdSense 広告が読み込まれるまで残りのページ要素が表示されなかったんですが、このコードを使うと AdSense 広告が読み込まれようと読み込まれまいと、ページの残りをどんどん表示していくことができるというわけです。

このコードの取得は、AdSense サイト から「広告の設定」タブを押し、各広告の「コードを取得」リンクをクリック、「コードタイプ」のプルダウンから「非同期」を選ぶだけ。表示される「広告コード」をコピーして好きな場所に貼り付ければ、非同期バージョンの広告を簡単に設置することができます。


Blogger テンプレートに貼り付ける場合の注意点

この非同期広告コード、Blogger の投稿本文や HTML/JavaScritp ガジェットに貼り付ける分には問題がないんですが、テンプレートに直接貼り付ける場合には注意が必要です。実際に AdSense の非同期コードを Blogger のテンプレートに貼り付けると、このような警告が出ました。


「script 要素の async 属性に = がついてないよ」という内容です。新しいコードが Blogger のテンプレートエディタの XHTML 構文解析に引っかかっているんですが、これは async を async='async' とすることで回避することができます。

このことを知らせてくれたのが鷹野 凌さん。いつもありがとうございます！

【メモ】Bloggerのテンプレートに貼る場合、<script async='async' ～ と記述しないとダメ。｜Inside Adsense - 日本語: 新しい広告コードによってユーザーの利便性が高まります http://t.co/MqSGFRNSJk

— 鷹野 凌 (@ryou_takano) July 16, 2013

AdSense も Blogger も同じ Google なんだから、もうちょっと融通をきかせてくれてもよさそうなものですが…。ともかく、テンプレートに貼り付けている AdSense コードを非同期に書き換えたい！という時には、ご注意ください。

今やブログは PC だけでなく、スマートフォンやタブレットでも見られるようになってきています。そこで、最近広がってきたのが「レスポンシブ Web デザイン」と呼ばれる、あらゆるデバイスに対応させるウェブデザインの手法です。ウィンドウの幅が狭まったときに、自動的にサイドバーが省略されたり、画像が縮小されたりするアレですね。

Blogger ブログ用にもいろいろなところでレスポンシブデザインのテンプレートが公開されているので、今回まとめてみることにしました。

「デモ」ボタンでテンプレートが適用されたブログを閲覧できるので、ウィンドウ幅を変更したり、別の端末で開いてみたりして、どんな表示になるのか実際に確認してみるといいと思います。

なお、ご自身のブログへのテンプレートの適用は自己責任で。必ずテンプレートのバックアップを取ってから変更するようにしてください。


参考：

• 17 Best Responsive Blogger Templates to Download for your Blog
• 13 Best Responsive Blogger Templates 2013
• Top awesome and stylish responsive Blogger templates 2013 updated
• Best 10 Free Responsive Blogger Templates for 2013 Collections

Adsosive



Align



Aware



Bresponsive



Chronicl



CopyBlogger v2



DarkRed



Elite Minima



Exelencia



ExtraNews



Helicon



Incipient



JPSTATION



Labnol



Main Photo



Max Mag



Minimum Theme



Pinfinity



Portfolio



RBSimple



Responsival



Responsive



Sensational



TheStyle



Top Blogging Ideas




…ということで、25 個一気に紹介しましたが、気になるテンプレートはあったでしょうか。これを機会に、Blogger テンプレートも衣替えしてみるといいかもしれませんね。

Blogger には、テンプレートのタグを直接編集できる「テンプレート ＞ HTML」という管理画面がありますが、この画面がこのたび大幅にリニューアルされて、とても使いやすいものになっています。

• Blogger Buzz: Improvements to the Blogger template HTML editor

構文ハイライト

新しいエディタを一見して気づくのは、その色の鮮やかさです。これまでは黒一色のコード表示だったのが、HTML の構文に従った色分けで文字列がハイライトされています。


行番号

コードの左側には行番号が出るようになっています。これまで「何行目でエラー」と表示されても、ほかのエディタにコードを貼り付けてみないとその箇所を見つけられなかったことを考えると、圧倒的に便利になっていますね。


折りたたみトグル

行番号についている横三角ボタン「▶」で、ウィジェットのテンプレートを展開したり、折りたたんだりすることができるようになっています。これまでは、ウィジェットを直接編集するのに「ウィジェットのテンプレートを展開」チェックボックスで、すべてのウィジェットを展開するしか方法がありませんでした。


エラー行のハイライトとジャンプ

テンプレートにエラーが残ったままプレビューや保存をしようとすると、その行の背景が水色になってハイライトされるようになっています。カーソルもその行にジャンプするようになっているので、問題のコードの修正が簡単に行えます。


「ウィジェットへ移動」ボタン

上部の「ウィジェットへ移動」ボタンから、テンプレート内の任意のウィジェット記述箇所へジャンプすることができます。ブラウザの検索画面からウィジェット ID で検索をかけて…という手間はもう要りません。


「テンプレートをプレビュー」ボタン

上部の「テンプレートをプレビュー」ボタンから、編集中のテンプレートのブログ上の実際の表示が確認できます。これはまあ、「プレビュー」ボタンとして前にもありましたね。


「書式テンプレート」ボタン

相変わらず Blogger の日本語は片言で分かりにくいんですが、「書式テンプレート」というのは「Format template」の訳のようです。そのまま「テンプレートをフォーマット」ボタンだと思えばいいかと。押すと、それぞれのタグが正しくインデントづけされて表示されます。


「変更を元に戻す」ボタン

保存していない変更をすべて破棄して、保存されているテンプレートを再び表示します。以前の「編集内容をクリア」ボタンに相当するボタンです。。


「ウィジェットテンプレートをデフォルトに戻す」ボタン

そのテンプレートに対して行ったカスタマイズを全て破棄します。テンプレート選択画面でテンプレートを選択した直後と同じ状態になってしまうので、このボタンを使うのは慎重に。エラーがどうしても回避できなかったときの最後の手段ととらえればいいと思います。


テンプレートの新しい HTML エディタで、Blogger ブログのカスタマイズが大いにはかどりそうですね。AdSense のフィード広告廃止、Google Reader のサービス終了というニュースが続いていたので、「Blogger ももしかして？」とひそかに心配していたんですが、どうやらそれも杞憂に過ぎなかったようです。

Internet Explorer 10 でこのブログを表示してみると、上記画像のようになりました。読み込み中のマークがタブに出たまま、ページのスクロールができなくなっています。ためしにページをクリックしてみると最下部に「kuribo.info は応答していません。」というメッセージ。テキスト選択や文字入力もできません。

この問題を知ったのは、こちらのブログから。ありがとうございます。

• Blogger IE10でBloggerを使ったブログサイトを開くと応答なしになる現象 - 元「なんでもエンジニ屋」のダメ日記

自分のブログ以外にスズキさんのブログやクリボウさんのブログでも同様の現象が発生！
※現象が出ないBlogerサイトもありました。

そして 3 日後には、同ブログで解決策が紹介されました。

• Blogger IE10でブログを見ると固まる場合の対処法 - 元「なんでもエンジニ屋」のダメ日記

これによると、Blogger 管理画面「テンプレート ＞ HTML の編集」からテンプレートのコードを表示し、

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
　　　↓
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>

と変更すればいいとのこと。このやり方でこのブログも IE 10 で問題なく閲覧できるようになりました。重ねてありがとうございます。edge にした場合の挙動など、詳しい情報については上記リンクからご確認ください。

IE 10 は Windows 8 に標準搭載ということもあり無視できないものがあるかと思います。すべての Blogger ブログで IE 10 が固まるわけではないようですが、気になる人は対策をしておくといいかもしれません。


関係あるかもしれない情報：

• IE10の標準モードでは条件付きコメントは無視される: あるＳＥのつぶやき

Blogger のモバイルテンプレート（スマートフォン用のテンプレート）で、動的ビュー（ダイナミックビュー）のテンプレートを選択できるようになりました。

• A more dynamic mobile reading experience | Blogger Buzz

これを有効にするには、Blogger 管理画面「テンプレート」ページの「モバイル」欄の「歯車マーク」をクリック、「携帯端末では現在のテンプレートのモバイルバージョンを表示する」項目を「はい。携帯端末でモバイルテンプレートを表示する。」にして、「モバイルテンプレートを選択」項目で、「動的ビュー」を選択し「保存」ボタンを押すだけ。

もとからブログの PC 版テンプレートに動的ビューテンプレートを指定していて、なおかつモバイルテンプレートを「デフォルト」にしている場合には、上の設定なしで自動的にモバイル版も動的ビューになるとのこと。また、試してみたところ PC 版は通常のレイアウトテンプレートで、モバイル版だけ動的ビューという設定もできるようです。

現在モバイルテンプレートとして使用できる動的ビューのスタイルは「クラシック」だけみたいなんですが、それでもブログの見せ方のバリエーションが広がってきたというのはやっぱりうれしいですね。

Blogger ブログのテンプレートに、外部ツールのスクリプトなどを直接貼り付けると、思った通りには動かない場合があります。

ブログのテンプレートに直接コードを書くとGoogle AdSenseは表示されませんでした。

Google AdsenseをBloggerに自在に設置するためのノウハウ +Plus One World

私の環境では、ツイッターボタンがHTML貼り付けだとうまく表示できませんでした・・・。

簡単に設置出来る。Twitterタブボタンをbloggerに設置してみた。 | sunabox

Blogger のコメントアウトの扱い

なぜこういうことが起こるかというと、配布されているコードに含まれるコメントアウトが、Blogger では特別な扱いを受けるから。

たとえば、Blogger の 「HTML の編集」では


という形のコメントアウトが使えません。正確には、 <-- と --> とで囲まれたこのコードの行は Blogger テンプレート内のコメントとして扱われてしまい、実際のブログのページ生成時には、この部分が削除されてしまいます。

なので JavaScript でよく


という風にコードを書きますが、これを Blogger のテンプレートに直に書いても、


というデータしか書き出されず、肝心のコードが実行されなくなってしまいます。


対処法

では、どうやってコードを書き出すかというと、

• コメントアウトの書き換え
  
  <!-- コード -->
  というコードを
  &lt;!-- コード --&gt;
  と実体参照に書き換えて「HTML の編集」に貼り付けると、
  
  <!-- コード -->
  という風に HTML 上のコメントアウトとして、意図したとおりにブラウザにデータが届きます。
  
  
• コメントアウトをやめる
  単純に <-- や --> を消して
  コード
  だけにする方法です。当たり前ですが、コードが消えてなくなることを回避できます。
  
  
• ガジェットに入れる
  Blogger の「HTML/JavaScript」ガジェットに貼り付けたコードは、先に示した Blogger 独自のコメントアウトの制約を受けません。
  <!-- コード -->
  と書いても削除されることなく、そのままブラウザに送られます。

といった方法があるかと思います。
ブログのカスタマイズを考えている人は、覚えておくといいんじゃないでしょうか。

Blogger のテンプレートを配布している BTemplates にて、Blogger レイアウトテンプレート用のチートシートを発見しました。2009 年末に公開されたもののようで、めちゃくちゃ遅いニュースになってしまったんですが、一応ご紹介を。

• Blogger’s Cheat Sheet | BTemplates

上記ページの「Blogger Cheat Sheet」というリンクから PDF ファイルを格納した ZIP ファイルがダウンロードできます。

PDF ファイルには、Blogger レイアウトテンプレートのスタイルシートで用いられている id 名、class 名が数多く紹介されています。

Blogger ブログのデザイン変更で、テンプレートデザイナーでは少し物足りないという人は、このチートシートを使って CSS 編集にチャレンジしてみてはいかがでしょうか。

前回、ダイナミックビューがカスタマイズ可能になったというニュースをお伝えしました。

• クリボウの Blogger Tips: ダイナミックビューがテンプレートデザイナーで編集可能に

そして、今回は、モバイルテンプレートです。ご存知のとおり、iPhone や Android 端末からブログにアクセスしたときに表示されるテンプレートのことですが、今回新たにこちらもカスタマイズ可能になりました。

• Blogger Buzz: Introducing custom mobile templates

設定は Blogger の新しいダッシュボードの「テンプレート」ページから行えます。ページを開いてみると、このような表示が出てきます。



「モバイル」の歯車ボタンを押して、ポップアップしてくる画面がこちら。



これまでにモバイルテンプレートを有効にしたことがない場合でも、ここから有効にすることができます。

「モバイルテンプレートを選択」の欄で選べるのは、今のところ「デフォルト」、「シンプル」、「画像ウィンドウ」、「Awesome Inc.」、「ウォーターマーク」、「エスィリアル」、「旅行」、「カスタム」の 8 種類のテンプレート。最後の「カスタム」を選ぶと、現在の PC 用テンプレートのデータをできるだけ引き継いだモバイルテンプレートが自動的に作成されます。


モバイルテンプレートにウィジェットを表示する

Blogger Developers Network ブログには、モバイルテンプレートにブログのウィジェット（ガジェット）を表示させる方法が載っています。

• Blogger Developers Network: Introducing custom mobile templates

ブログ上のウィジェットで、デフォルトでモバイルテンプレートに表示されるのは、次の 6 種類。

• Header … 「ページヘッダー」ウィジェット
• Blog … 「投稿」ウィジェット
• Profile … 「基本情報」ウィジェット
• PageList … 「ページリスト」ウィジェット
• AdSense … 「AdSense」ウィジェット
• Attribution … 「帰属」ウィジェット

それ以外のウィジェットをモバイルテンプレートに表示させたい場合は、ブログのテンプレートを HTML で編集する必要があります。

（上級者向けの内容です。必ずテンプレートのバックアップをとってから試してください。）

新ダッシュボード「テンプレート ＞ HTML の編集」（旧ダッシュボード「デザイン ＞ HTML の編集」）ページで、「ウィジェットのテンプレートを展開」にチェックを入れて、ウィジェット要素を見つけます。その開始タグに mobile='yes' 属性を追加すると、ウィジェットがモバイルテンプレートでも表示されるようになります。

「ブログアーカイブ」ウィジェットをモバイルテンプレートに表示する例：
mobile 属性で指定できる属性値は、yes、no、default、only です。no でデフォルトで表示することになっているウィジェットも非表示にすることができます。

• yes … PC テンプレート、モバイルテンプレートともに表示
• no … PC テンプレートのみに表示
• default … デフォルト設定に従う
• only … モバイルテンプレートのみに表示

モバイルテンプレート関連の新しいデータタグ

さらにマニアックな話題ですが、モバイルテンプレート関連の新しいデータタグも追加されています。

• blog.mobileClass … モバイルで閲覧時に  mobile を表示
• blog.isMobile … モバイルで閲覧時に true を、それ以外は false を表示

blog.mobileClass

モバイルで閲覧時に  mobile （最初に空白あり） を表示します。すでにテンプレートには


と記述されており、PC での閲覧時には


と、モバイルでの閲覧時には


と書き出されるようになっています。なので、


といった風に、モバイル閲覧時にだけ適用される CSS が簡単に書けます。

blog.isMobile

モバイルで閲覧時に true を、それ以外は false を表示します。テンプレートのウィジェット内に


と書くことで、実際の表示内容を書き分けることができます。


…ということで、随分長くなってしまいましたが、Blogger 歴の短い人も長い人も、モバイルテンプレートを選択したり、モバイルテンプレートのカスタマイズに挑戦してみたりするといいんじゃないでしょうか。

Blogger には、読者がブログの表示を変更できるダイナミックビューという仕組みがあります。

• クリボウの Blogger Tips: Blogger に新テンプレート「ダイナミックビュー」が登場

これまでダイナミックビューの適用は、読者がブログの URL 末尾に /view という文字列を付け足していたんですが、いつの間にか、ブログ運営者の方で特定のダイナミックビューをデフォルトのテンプレートとして選択できるようになったようです。

• Dynamic Views: Update #1 | Blogger Buzz

設定は、テンプレートデザイナーで「動的ビュー」を選択するだけ。また、このテンプレートデザイナーへのダイナミックビューの登場に伴って、ダイナミックテンプレートも色やフォント、背景の画像などを自由に編集できるようになっています。

• Dynamic Views: Update #2 | Blogger Buzz

こういう、カスタマイズできる部分が増えるのは、ユーザーとしてうれしいことですね。


デフォルトのダイナミックビューを一時的に解除する方法

つけたしなんですが、ブログのデフォルトテンプレートにダイナミックビューが設定されていると、記事単独ページを表示しても
といった文字列が URL 末尾に自動的に追加されてしまいます。これが困る人には、一時的にダイナミックビューの起動を停止する方法があります。

• Disable Blogger's Dynamic Views

それは、本来のページの URL 末尾に ?v=0 をつけること。オンラインブックマークなどで困っている人は、ぜひお試しください。

新テンプレートと Google Analytics

近頃 Blogger には、モバイルテンプレートやダイナミックビューといった新しい形のテンプレートが導入されています。

• クリボウの Blogger Tips: ブログをスマートフォンから閲覧できる「モバイルテンプレート」が Blogger in Draft に登場
• クリボウの Blogger Tips: Blogger に新テンプレート「ダイナミックビュー」が登場

それぞれ、スマートフォンでの閲覧時に表示させるテンプレートと、読者がブログのレイアウトを指定するためのテンプレートなんですが、どちらも Blogger によってページが自動生成されるため、テンプレートの HTML コードを自由にカスタマイズできないという問題点があります。

それで一番困るのが Google Analytics のアクセス解析。通常の Blogger のテンプレートの場合 Google Analytics の指定するタグ（トラッキングコード）を、Blogger 管理画面（「デザイン ＞ HTML の編集」もしくは「テンプレート ＞ HTML の編集」）から簡単にテンプレートに挿入できたんですが、モバイルテンプレートやダイナミックビューではそうはいかず、Google Analycs を動作させることができませんでした。


新テンプレートにもトラッキングコードを挿入してくれる新機能

そこに今回のニュースです。モバイルテンプレートやダイナミックビューでも Google Analytics を利用可能になりました。

• Google Analytics support in Blogger | Blogger Buzz

ブログに Google Analytics のプロファイルの ID を指定しておくと、モバイルテンプレートやダイナミックビューが表示されたときに、Blogger が自動的に Google Analytics のトラッキングコードを挿入してくれるという機能が、新しく追加されています。



導入は、Blogger 新ダッシュボードの「設定 ＞ その他」ページ、「Google Analytics」の項目から。（旧ダッシュボード利用の人は、Blogger in Draft にアクセスすると、その時だけ新ダッシュボードになるので便利です。）「Google アナリティクスアカウント番号」の欄に Google Analytics のプロファイル別のアカウント番号を入力するだけ。アカウント番号がわからない人は「トラッキング コードとアカウント番号の確認方法 - アナリティクス ヘルプ」を確認してください。

ということで、Blogger + Google Analytics なユーザーは、とりあえず設定しておくといいんじゃないでしょうか。スマートフォンからのアクセスの動向を知って、ブログ運営に役立てられるといいですね。

と、NO MAC , NO LIFE ? の realpandaya さんに教えてもらっていたんですが（ありがとうございます！）、ようやく Blogger のアナウンスの方も出ました。

• Blogger Buzz: Latest updates, August 1st

これによると、Blogger のスマートフォン用テンプレート、いわゆる「モバイルテンプレート」が、スマートフォン上のスワイプ操作に正式に対応したとのことです。iPhone や Android 端末をお持ちの方は、今すぐお試しを。

• クリボウの Blogger Tips（モバイルテンプレート）
  

最近の Blogger、徐々にですが、確実に便利になっていく印象ですね。今後のアップデートにも期待です。

関連：

• クリボウの Blogger Tips: Blogger にスマートフォン向け「モバイルテンプレート」が正式採用
• クリボウの Blogger Tips: ブログをスマートフォンから閲覧できる「モバイルテンプレート」が Blogger in Draft に登場

昨年末に紹介したのが、こちらの記事。

• クリボウの Blogger Tips: ブログをスマートフォンから閲覧できる「モバイルテンプレート」が Blogger in Draft に登場

このスマートフォン向けのブログテンプレートが、ようやく Blogger に正式採用になりました。

• Blogger Buzz: Announcing Blogger Mobile Templates

設定は、Blogger 管理画面「設定 ＞ メールとモバイル」ページの「モバイルテンプレート」の項目から「モバイルテンプレートを表示する」を「はい」にするだけ。

自分のブログが、スマートフォンで実際にどのように表示されるかは、ブログ URL 末尾に ?m=1 を付け加えてアクセスすることで確認することができます。

正式採用となったモバイルテンプレートで、スマートフォンの読者が増えるといいですね。

ダイナミックビュー

Blogger に新しいテンプレートが登場しています。「パースペクティブ」とか、「ダイナミックテンプレート」とかいろんな呼び方があるようですが、ここでは言葉を「ダイナミックビュー」に統一して紹介します。

普通、テンプレートというのは、ブログの著者が指定するものですが、このダイナミックビューでは、読者の側が閲覧中のブログのレイアウトを 5 種類の中から自由に選択できるようになっています。

• Blogger Buzz: Fresh new perspectives for your blog

YouTube にこの機能の紹介ビデオも上がっています。なんとなく新しいテンプレートの雰囲気がつかめると思います。


（YouTube - Blogger Dynamic Views）

このダイナミックビューには AJAX、HTML5、CSS3 といった最新の Web テクノロジーが駆使されているとのことで、Internet Exploere 8 以降、Firefox 3.5 以降、Chrome、Safari といったブラウザで閲覧可能だとのことです。（参考：All about Dynamic Views for Readers - Blogger ヘルプ）

ダイナミックビューでブログを表示するには、ブログの URL 末尾に /view という文字列をつけてアクセスするだけ。うれしいことに、クラシックテンプレートだろうとカスタムドメインだろうと問題ないようです。試しにこのブログを表示してみてください。

• http://www.kuribo.info/view

通常のテンプレートと違うところとして

• リンクをクリックすることなく、次のページが自動的に読み込まれる
• 複数のレイアウトが用意されている。
• 画像は、最初に全部ではなく、その画像が画面に表示される時に初めてロードされる。

といった特徴が挙げられています。


使用条件

Blogger ダッシュボードを見てみると、早速このような吹き出しが出ていました。

5 つの新しい動的ビュー
ブログが一般公開されていて、フィードが有効になっている場合は、読者に 5 種類の動的ビューで投稿を閲覧してもらうことができます。また、これらのビューはいつでも無効にできます。

って書いてありますね。

自分のブログでダイナミックビューを有効にするためのより詳しい条件としては、

• 「設定 ＞ サイトフィード」の「ブログフィードを許可」の項目で「完全」か「追記の区切りまで」を選択していること
• 「設定 ＞ 許可」の「ブログの閲覧者」が「すべてのユーザー」になっていること（閲覧制限をかけるとフィードが発行されないため）
• 「設定 ＞ フォーマット」の「動的ビューを有効にする」が「はい」になっていること

といったものがあります。（参考：All about Dynamic Views for Authors - Blogger ヘルプ）


レイアウトの種類

ダイナミックビューでは、読者がレイアウトを選択できます。写真を多用しているブログの方が見栄えがよさそうなので、今回は クリボウの写真日記 を例にします。各画像をクリックすると、実際のダイナミックビューへとジャンプします。

Flipcard

• カードにマウスを合わせると、タイトルとコメント数が表示されます。スクロールすると追加の投稿がロードされます。
• カードをクリックすると、記事単体で表示されます。J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動できます。Esc キーでは、投稿一覧へ戻ります。
• 上部左側のリンクから、日付、ラベル、筆者で投稿をソートすることができます。
• 利用は、ブログ URL 末尾に /view/flipcard を追加。

Mosaic

• タイルにマウスを合わせると、投稿のタイトルが表示されます。
• タイルをクリックすると投稿が開かれ、もう一度クリックするか Esc キーを押すことで、投稿が元の場所に折りたたまれます。
• 投稿が開かれた状態のとき、J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動できます。
• タイルの大きさはビューのロードの度に異なりますが、左上から右下にかけて投稿の日付順に配置されています。
• タブレット端末に最適化されており、端末の回転に対応しています。
• 利用は、ブログ URL 末尾に /view/mosaic を追加。

Sidebar

• ブログを素早く読むために最適化されています。
• ダイナミックビューのデフォルトのレイアウトはこれになっています。
• 左のサイドバーは日付順の投稿タイトルになっていて、コメント数や、画像サムネイルが表示されるようになっています。
• J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿を表示することができます。
• 「Show」リンクのクリックで、同じページ内にコメントを表示することができます。
• 利用は、ブログ URL 末尾に /view/sidebar を追加。

Snapshot

• 画像単位で表示します。（画像のない投稿は表示されない。1 投稿に複数の画像がある場合、画像の数だけ表示される。）
• ポラロイドカメラの写真のようなレイアウトで、写真下部にタイトルが書かれています。マウスを合わせると投稿本文が表示されます。
• 写真をクリックすることで、投稿が単独で表示されます。J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動。Esc キーで画像一覧へ戻ります。
• 画像は、Blogger、Flickr ともに表示できるようですが、Flickr だと上記のように写真に大きな余白ができてしまうようです。
• 利用は、ブログ URL 末尾に /view/snapshot を追加。

Timeslide

• 画像、投稿タイトル＋投稿本文冒頭、投稿タイトルのみの 3 エリアに分割されています。
• 各エリアをクリックすると、投稿が単独で表示されます。J キー（右キーも）で前の投稿、K （左キーも）キーで新しい投稿へ移動。Esc キーで一覧へ戻ります。
• 文字列を検索すると、該当する投稿がハイライトされます。
• 利用は、ブログ URL 末尾に /view/timeslide を追加。

このダイナミックビューは、今のところ試験的に導入されているもののようで、いずれブログ運営者がこのビューをカスタマイズできるようになるとのことです。Blogger ブログも時代に合わせて、どんどん進歩していっている感じですね。この新機能、ぜひぜひいろんなブログで試してみてください。