クリボウの Blogger Tips

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

昨年（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 テンプレートでもかなり複雑な指示が出せそうですね。われこそは！と思う人は、ぜひチャレンジしてみてください。

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

• Japanese Bloggers Info メンテナンスのお知らせ

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

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

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

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

• GAE の Datastore を Master/Slave から High Replication (HRD)へ移行する方法 | クリボウのプログラミングひとりごと

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

前回、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 ヘルプ

先日、こういうメールをもらいました。

一昨日「Japanese Bloggers Info」を見つけました、あまりメジャーではないBloggerに関する情報サイトの存在が心強いです、そこで見つけた諸々の情報を有効に使わせていただきます、ありがとうございます。

さて、登録を済ませまして私のブログも登録しようとしたのですが、ログイン認証の段階で、

「お知らせ: サポートが終了した API は 2015 年 4 月 20 日よりご利用いただけなくなりました。サービスを再びご利用いただくために、代替 API への移行をお願いいたします。」

とのことです、ブログ登録に代替の手段はありますでしょうか。

このエラーは、Japanese Bloggers Info （以下 JBI）を動かしている Google App Engine （以下 GAE）上で、認証システムとして AuthSub が使えなくなり、登録ユーザーの所有ブログ情報が取得できなくなったのが原因です。現在、新しい認証システム OAuth2 への移行を行っている途中です。

このメンテナンスの間、JBI サイト上では、以下の機能が使えません。

• JBI へのブログ登録
• JBI からのブログ削除

ブログ情報削除に関しては、クリボウが GAE の管理画面で手動でデータを消すことということはできるので、急ぎブログを消したいという人は、削除したいブログの URL を本文に明記して、ブログを管理しているメールアドレスから、クリボウあてにメールをください。もしくは、ブログを管理している Google アカウントや Blogger アカウントで、この記事にコメントいただいてもかまいません。

ご不便をおかけしますが、メンテナンス終了まで、もうしばらくお待ちください。

Blogger のアダルトコンテンツポリシーの変更がされるというニュースが、2 月にありました。

Google、ブログサービス「Blogger」での性描写・ヌード投稿を3月23日から禁止へ - ITmedia ニュース

変更するとしていたコンテンツポリシーでは、

2015 年 3 月 23 日より、露骨な性描写やヌードを扱った画像および動画を Blogger で一般公開することはできなくなります。

とのことで、露骨な性描写やヌードを扱った画像や動画が含まれている場合は、ブログの公開設定が強制的に「限定公開」になる予定でした。

…が、このコンテンツポリシーの変更が、公式に撤回されています。

• 米Google、Blogger上でのアダルトコンテンツ公開禁止を撤回 | GGSOKU - ガジェット速報

で、現在のコンテンツポリシーがこちら。

• Blogger ポルノ コンテンツ ポリシー - Blogger ヘルプ

「アダルトコンテンツポリシー」から「ポルノコンテンツポリシー」に名前が変わっていますね。

ブログにポルノまたは露骨な性描写のコンテンツが含まれる場合は、アダルト コンテンツの設定をオンにする必要があります。この設定をオンにするとブログで警告が表示されます。アダルト コンテンツを含むブログが検出され、ブログの警告表示がオフになっている場合は、Google がオーナーに代わって警告表示をオンにします。これが繰り返される場合、ブログを削除することがあります。

というルールはこれまで通り。変更の知らせでヒヤリとした Blogger ユーザーも、ようやくホッと一息つけそうですね。

バッキーの日々是爆食/ウェブリブログ で知った情報。Blogger ヘルプフォーラムが閉鎖されるというアナウンスが Google 社員からありました。

Blogger ヘルプ フォーラムは今年の後半に閉鎖されることになりました。サポートのリソースを整理・統合することにより、プロダクトやサービスを全般的に改善することを狙いとしています。7 月 28 日よりこちらのフォーラムは「閲覧専用」になります。直ちにフォーラムが閉鎖されることはありません。今後の数ヶ月間はフォーラムのコンテンツを閲覧することが可能であり、ヘルプセンターは引き続きご利用いただけます。しかし、新規の投稿を行うことはできません。なお、英語フォーラムのご利用も可能です。

Blogger ヘルプ フォーラム閉鎖のお知らせ - Google プロダクト フォーラム

ここに書かれている通り、現在 Blogger ヘルプフォーラムは現在閲覧専用で投稿不可になっており、今年後半には閉鎖される流れとのこと。3 年前にも同じようなアナウンスがあり、その時は閉鎖撤回の要望を出してそれが通ったんですが（参考）、今回はもうだめっぽいですね。

なお、英語版 Blogger Help Forum は従来通り利用できるとのことなので、非常事態の折りには、少しがんばって英語で質問を投稿してみるのがよさそうです。

これまで Blogger は、Google+ に接続させることでブログがこんなに便利になりますよ、というアピールをくり返ししてきたと思うんですが、

• Google+ プロフィールへの切り替えに関するよくある質問 - Blogger ヘルプ

これからは、Google+ に接続していないアカウントの方が「制限付きの Blogger プロフィール」と呼ばれるみたいです。

• SharePoint Technical Blog: Blogger 投稿者名の変更方法(google+プロフィールの使用をやめる方法)

この言葉が確認できるのは以下のページ。クリボウは Blogger アカウントを Google+ に接続していないので、上に貼り付けた画像のように表示されました。

• https://www.blogger.com/revert-profile.g?pli=1

単なる表記の問題とは思いつつ、Google の Blogger 戦略みたいなものが垣間見えたような気が…。Blogger が完全に Google+ に取り込まれてしまう日もそう遠くないのでは？と心配になってしまいました。Picasa ウェブアルバムや YouTube なんかもそうですが、Google+ を使っていないとサービスが不便になっていくというのは、ちょっと考えものですね。

Internet Explorer（以下 IE）のバージョン 10 や 11 で Blogger にログインすると、上記のような警告が出ることがあります。文面はこちら（括弧内はクリボウ訳）。

Web ページからのメッセージ
ERROR: Possible problem with your *.gwt.xml module file. The compile time user.agent value (ie9) does not match the runtime user.agent value (ie10). Expect more errors.

（エラー: *.gwt.xml モジュールファイルに問題がある可能性。コンパイル時のユーザーエージェント値「ie9」が実行時のユーザーエージェント値「ie10」と一致しません。さらに多くのエラーが予測されます。）

このエラーは、ダッシュボードからブログを選んだり、新規投稿画面を開いたりと、画面が切り替わる度に、何度も出てきます。この問題は、日本でも何件か報告されていますね。

• 多収穫を目指せ！！趣味の水耕栽培: Google Bloggerでgwt.xml module file　エラー発生
• Bloggerエラー - 質問・相談ならMSN相談箱
• エラーについて - Google Product Forums

ブラウザを替える

英語版の Blogger プロダクトフォーラムにも、この問題が上がっています。Hermione さんという Blogger Top Contributor によると、

Blogger is currently having problems in IE9, IE10 and IE11. the engineers have been alerted and are working on the problem.
In the meantime, please witch to a different browser, like Firefox or Chrome.

（Blogger は現在、IE9、IE10、IE11 で問題を抱えています。エンジニアはすでに警告を受けており、この問題に取り組んでいます。対処までの間、Firefox や Chrome などの、別のブラウザに切り替えてください。）

ERROR: Possible problem with your *.gwt.xml module file. - Google Product Forums

とのこと。Blogger チームが対応してくれるまで別のブラウザを使うというのが当面のおすすめみたいです。


ドキュメントモードをいじってみる

それでも「やっぱり IE がいい！」という人は、次の方法を試してみてください。



これで、ページを切り替えるたびに出ていた警告がなくなると思います（多分…です。コメントで報告いただけるとうれしいです）。

Blogger にアクセスするたびにこうするのは面倒だと思いますが、Blogger チームが対応してくれるまでの間のつなぎとしては、使えるんじゃないでしょうか。IE + Blogger で、ストレスなく年末年始のあいさつができるといいですね。


…ということで、このブログの年内の投稿はこれで終わりです。みなさんのおかげで今年も一年、のんびり楽しく、ブログを更新することができました。ありがとうございました。みなさんも、どうぞよいお年をお迎えくださいませ。


追記（2014-01-01）：

IE11 の場合、「開発ツール」で「ドキュメントモード」のほかに「ユーザーエージェント文字列」も「Internet Explorer 9」に指定する必要があるそうです。詳しくは、以下のページをどうぞ。

• ShiroYuki_Mot の ひとりごと: Blogger IE11 上のダッシュボードでちょっと不具合 2013/12

Blogger の記事投稿時に写真をアップロードすると、自動的に写真の色合いが補正されるようになっているそうです。

• のんびりポタ・ランニング: BloggerにJPEG写真をアップロードすると色や彩度が自動補正されるようになった?
• Bloggerで、jpg画像をアップロードして表示させると、白色が灰色（グレー）ぽくなる問題について | 某氏の猫空

実際に、真っ白な JPEG 画像を投稿してみると…こんな風になりました。


たしかに、やや灰色がかった画像に差し替えられていますね。いつの間にか、この「自動補正」機能が、デフォルトで有効になっているようです。ちなみに、補正の対象になるのは JPEG 画像で、PNG 画像についてはそのままの色合いで表示されるそうです。


新規写真について

新しく投稿する画像に対して、この「自動補正」機能を無効にするには、Google+ での設定が必要です。下のリンクから Google+ のアカウント設定画面を開き、「自動補正」の項目のラジオボタンで「オフ」を選びます。

• Google+ - アカウント設定

これで、新しい写真に自動的に補正がかかることはなくなります。


補正後の写真について

すでに補正された画像については、上のような設定をしても、自動的には補正は解除されません。ブログ全体の画像を元に戻したい場合には、Google+ からアルバムを開いて、「下矢印」から「自動補正を適用」の項目で「オフ」を選びます。


ブログ全体の写真一括ではなく、「写真によっては自動補正を残しておきたい」という場合には、Google+ で個別に写真を開いて、「もっと」から「自動補正」の項目を出して「オフ」を選ぶことで、その画像だけ自動補正を解除することができます。



Blogger と Google+ が連携していくのはいいんですが、ブログの使い勝手が悪くなるというのはちょっと困りものですね…。写真が思ったように表示されない！と困っていた人は、ぜひお試しください。

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

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

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



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



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

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

によると、モバイル端末からのコメント入力が随分しやすくなったとのこと。目下 Google+ に押されがちですが、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+ プロフィールや Google+ ページとリンクさせている Blogger ブログで、記事を投稿した際に Google+ に自動共有されるようになりました。

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

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

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

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

Google+ ページ「クリボウの Blogger Tips」および、Facebook ページ「クリボウの Blogger Tips」で流した 2013 年 5 月から 8 月までの Blogger 関連のつぶやきを、ここにまとめておきます。

（普段は 1、2 か月分でまとめて記事にしているんですが、前回まとめるのをすっかり忘れていました…。すみません。）

これらの Blogger 情報をリアルタイムで読みたい！という人は、上記リンク先からサークルに追加したり「いいね！」したりしてください。Twitter アカウントや フィードも開設しているので、そちらもぜひご活用ください。

• Blogger 設置してあったGoogleカスタム検索が表示されなくなった - とのばしブログ
  Syntax Highlighter を入れていると Google カスタム検索が使えなくなる場合があるらしいです。
• How To Use Google+ And Blogger Comments System Together ~ Gameryard
  従来の Blogger コメント欄と Google+ コメント欄を同時に使う方法。
• Bloggerをおすすめできない２０の理由
  ラベルや Navbar についてはともかく、他はまあそうかもしれません。
• The Real Blogger Status: Blogger Blogs Redirecting To "opromo . com"
  「Opromo free visitor meter」を設置しているブログで Opromo . com にリダイレクトされてしまう現象が起きているようです。
• The Real Blogger Status: Empty Or New Blogs Can Be Classified As Possible Spam Hosts
  新しいブログや投稿なしのブログは「スパムの可能性あり」に分類されていると、The Real Blogger Status の記事。
• Blogger - Google+ - We introduced a new "Contact Form" widget today. If a…
  Blogger に Contact Form ガジェットが出ましたね。
  　» 「Blogger に「連絡フォーム」ガジェットが新登場」で紹介しました。
• Create Separate Contact Page in Blogger - Blogger Widgets
  Blogger 純正の「連絡フォーム」ガジェットを利用して、Blogger の「ページ」にフォームを設置する方法。
• Design a Responsive Blogger Template - Tutorial | My Blogger Tricks
  Blogger でレスポンシブテンプレートをデザインするためのチュートリアル。
  　» 関連記事 「Blogger で使えるレスポンシブデザインテンプレート 25 選」
• Blogger Status
  Blogger Status が更新停止。
  　» 「Blogger 公式ブログ「Blogger Status」が更新終了」で紹介しました。
• No Link
  7 月 1 日で Google Reader がサービス停止するわけですが、Blogger の読者機能とか、Blogger にだけ残っている Friend Connect なんかはどうなっていくんでしょうね…。
  → 今のところ問題なく動いているようです。
• 【Blogger】モバイルURLが違うためウェブマスターツールにタイトルとディスクリプションが重複していると怒られてしまったので対応してみた | For Content Creator
  canonical タグを外すと、ウェブマスターツールで警告が出るという話。
• Bloggerでスパム扱いされ削除されたブログを復活させる方法 | traveling 旅とiPhoneと筋トレ
  スパム判定でロックされたブログの解除にかかる時間→ 1 か月…。
• 2nd Life and Slow Life: Blogger で無駄時間！　腹の立つ！
  投稿エディタで投稿のタイトルを空にしていると警告が出るようになりましたね。
• Blogger の記事を markdown で記述する - C++でゲームプログラミング
  markdown を JavaScript で HTML に変換して、Blogger の投稿内に表示する方法。
• 【Blogger】Amazonの広告を記事の下に入れるのに、ちょっと手間取ったXHTMLの仕様 | For Content Creator
  Blogger のテンプレート編集で Amazon のコードを入れる時に気をつけること。
• Blogger threaded comments (system) stylization with CSS code | Tech Prevue
  あ、これいいかも。Blogger のスレッド方式コメントシステムの CSS カスタマイズ。
• Blogger:「Powered by Blogger」の横に自動更新コピーライトを表示させたい
  (c) で表示する年を JavaScript で自動的に書き込む方法。一年に一度のことだし、静的に書き換えてしまった方がいい気もしたり。
• Twitter / ryou_takano: 【メモ】Bloggerのテンプレートに貼る場合、<sc ...
  AdSense の非同期コードの貼り方。async='async' にして XHTML に対応させる必要があるようです。
  　» 「Google AdSense の非同期広告コードを Blogger ブログに貼り付けるときに注意すること」で紹介しました。
• Blogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？
  忍者おまとめボタンの解析ツールと実際のデータに違いがある理由について、忍者ツールズの見解が掲載されています。
• Blogger：ラベル設定(5)Googleさん、「全て選択解除」ボタンを作ってほしいな
  ラベルを一括編集しようとすると「一度に 50 個以上のエントリの変更はできません。」と警告が出るとのこと。
• Blogger Blogs での脚注の付け方 | まさるな日記
  Blogger 投稿中の脚注の付け方。
• Bloggerブログ CSS外部化する方法。ページ表示速度を高速化 | せきらら白書～備忘録～
  高速化のため、Blogger のスタイルシートを別ファイルにして参照する方法。
• BloggerのブログにiPhoneからコメントが入れられない時の対処法 | ももぴんの競馬予想とレビューと？
  Blogger のコメント欄、確かに分かりにくいかもしれませんね。
• ドラクエのリハビリに Blogger から Github Page にブログ移行したった | 諸葛亮孔明もびっくりですわ のブログ
  Blogger → Github Page 移行記録。
• Twitter / tw14g: Bloggerのスマホ用テンプレート、こっそり更新されたよう ...
  ほんとだ、モバイルテンプレートのデザインがわずかに変更されていますね。
• [K!]Blogger TIPS：特定のページのみにHTMLコードを記述したい場合に見る記事。
  Blogger のテンプレートタグ <b:if> の分かりやすい使用例。
• The Real Blogger Status: Recovering Stolen Blogs Is Not An Open And Shut Case
  「Blogger ブログが盗まれた！」と Blogger チームに申請することで、逆にブログを盗んでしまうケースがあるそうです。そのため、Blogger チームが調査に非常に時間をかけるようになったとのこと。
• Blogger IEの追跡防止でうまく表示されない | Alpaca PC
  「追跡防止」機能のため、IE で Blogger ブログが正しく表示されないことがあるそうです。
• Blogger:CSSスプライトでテキストリンクアイコンを読み込む
  お、なんかかっこいい！リンクに CSS スプライトでアイコンをつける方法。
• YouTube で「1980」をタイプするとミサイルゲームができる件
  通常のブログコメント欄と Google+ コメント欄の両立を模索中…。上手くいけば記事にしようと思うんですけど、どうでしょう？
  　» 「Blogger ブログに従来のコメント欄と Google+ のコメント欄の両方を表示する方法」で紹介しました。
• Known Issues for Blogger
  CAPTCHA 解決の後、ブログを公開できないという不具合が一部ユーザーに起きているそうです。

このブログでは毎月もしくは隔月で、記事にしたネタや記事にしきれなかった Blogger 関連ニュースを掲載しています。最新のニュースについては、Google+ ページ、Facebook ページ、Twitter アカウント、フィードのうち、利用しやすいもので確認してください。

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 コードを非同期に書き換えたい！という時には、ご注意ください。

このブログに

いつも楽しく拝読しています。
ところで、Twitter CardsのSummaryができるかBloggerへMetaタグを入れてみたのですがサムネイル画像が出なく、クリボウ様のサイトに情報ないかなぁと思い来てみた次第です。
もし、次のネタが決まっていないのなら、この辺りを記事にしていただければ嬉れしゅうございます m (_ _) m

Kats

というコメントが入っていたので、やってみたところ


できました。導入方法をこちらでまとめておきたいと思います。


Twitter Cards って何？

最初に Twitter Cards についてです。上の画像を見て分かるかと思いますが、Twitter のツイートに URL が含まれたときにそのリンク先ページのタイトルや要約、画像を自動的に挿入してくれるのが Twitter Cards の機能です。

これを表示させるためには、リンクされるブログの方で Twitter Cards に対応したメタタグをブログテンプレートに記載しておかないといけません。Facebook の OGP（Open Graph Protocol）と同じようなものと言うと理解しやすいかもしれません。

今回はシンプルな Summary Card の導入についてみていきます。参考にさせてもらったのはこちらのサイト。ありがとうございます！

• ソーシャルメディアマーケティングラボ

導入方法

早速、Twitter Cards 用のメタタグを用意します。クリボウが使用したのは次のタグです。


2 行目赤字部分には、ブログに関する Twitter のアカウント名を入力します。これはオプションなので、特にアカウントがない場合には行ごと削除してかまいません。他の行は、どのブログでも通用するよう Blogger のテンプレート用データタグを使用しているので、そのまま使えるはずです。これらのメタタグを Blogger の管理画面「テンプレート ＞ HTML の編集」で <head> のすぐ後に貼り付けて保存します。

その後、Twitter Developers で Twitter Cards の申請を行います。

• Card Validator | Twitter Developers

「Card Catalog」のポップアップが出たら「Summary」を選択、「Validate & Apply」タブを押して、自分のブログの好きな投稿の URL を入力して「Go!」を押してください。


ここで、ブログの Twitter Cards 対応状況が確認できます。右側にはプレビューが表示されます。「Standard Tags」の項目がグリーンだったら、ブログ側の設定は問題なしです。

「Request Approval」を押して申請画面を開きます。Twitter アカウントなど、必要事項を記入して（ほとんど入力済みだと思います）「Register Domain」ボタンを押します。これで全作業が終了です。意外と簡単なんじゃないでしょうか。

これで Twitter 経由のアクセスが少しでも増えるといいですね。


技術的なことなど

ここから先は、気になる人だけ読んでください。先ほどのメタタグについての解説です。


Twitter Developers のドキュメントで例示されていたメタタグを Blogger ブログ用に調整してみました。タグ内の属性が読みにくいのは、Blogger の HTML エディタが属性をアルファベット順に並べ替えてしまうので、混乱を避け最初からその順にしているためです。


１．まず、どの行でも、meta タグの最後に / を入れておきます。こうしておかないと Blogger の HTML エディタが


と、meta タグが閉じていない旨のエラーを出してしまいます。


２．3 行目のページタイトル欄は、Blogger のテンプレート用データタグを使って「（投稿タイトル） | （ブログタイトル）」という設定にしています。区切りの文字「|」は変更可能です。Blogger 標準のページタイトル「（ブログタイトル）: （投稿タイトル）」を使いたい場合は青字部分を data:blog.pageTitle に変えるといいと思います。

参考：

• Blogger ブログのページタイトルを「投稿タイトル | ブログタイトル」の順にする方法 | クリボウの Blogger Tips

３．4 行目のページの画像については、BloggerSpice という Web アプリを利用しています。http://bloggerspice.appspot.com/postimage/ に投稿 URL を付加して（メタタグ内ではページの URL を示すデータタグ data:blog.url を連結）アクセスすると、投稿内の最初の画像へとリダイレクトしてくれます。これがめちゃくちゃ便利です。

参考：

• BloggerをOGPに対応させるときのog:imageをなんとかする : たき備忘録

ちなみに、data:blog.postImageThumbnailUrl というデータタグを使って、投稿のサムネイルを取得するという方法もあるにはあるんですが、その場合 Blogger 以外にアップロードした画像が反映できないのと、画像サイズが 72 x 72 ピクセルで小さいのとで、今回は採用しませんでした。


４．最後の行では、そのページの説明文を指定しています。Blogger では、2012 年から投稿ごとのメタデータ（descriptions）を投稿エディタから指定できるようになりました（参考１・参考２）。そのデータを持って来られないかな？と思い data:blog.metaDescription というデータタグを入れてみたところ、上手くいきました。めでたしめでたし。

Blogger サービスの障害情報を報告する公式ブログ「Blogger Status」が更新を終了しました。

• Blogger Status

今後の Blogger のサービス利用可否については、ほかの Google サービスと同じように「Apps Status Dashboard」で見られるようになるとのこと。「Blogger ブログにアクセスできない！」というときに確認できるよう、今のうちにブックマークしておくといいかも。

ちなみに、Blogger のバグ・不具合についての公式ブログ「Known Issues for Blogger」の方はいまだ健在です。こちらは、「あれ？この機能動いてない？」というときに確認するといいですね。

今やブログは 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 テンプレートも衣替えしてみるといいかもしれませんね。