>-->

新機能 | クリボウの Blogger Tips

クリボウの Blogger Tips

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

Home > 新機能

新機能

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

Posted at: 2016-05-30 Label: , 238


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

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

Blogger テンプレートにさらに新しいウィジェットタグが登場

Posted at: 2015-08-17 Label: , 63


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


あとがき

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


関連： 参考：

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

Posted at: 2015-05-24 Label: , 30



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

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

  • + で値を連結したり
  • - で値を差し引いたり
  • == ã‚„ != で値が等しいか等しくないかをチェックしたり
  • < ã‚„ >、<=、>= で値を比較したり
といったことができたんですが、今回それらに加えて、次のような演算子や表現が使えるようになりました。


NOT 演算子

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

<b:if cond='!data:post.allowComments'>...
（コメントが可能でなければ…）

これまでは、<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 のコメント欄がリニューアル

    Posted at: 2013-10-14 Label: , 23

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

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

    2013 年 9 月までの Blogger コメント欄

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

    2013 年 10 月からの Blogger コメント欄

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

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

    Blogger に投稿した記事を、自動で Google+ に共有できるようになりました

    Posted at: 2013-09-14 Label: , , 9



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

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

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

    Blogger に「連絡フォーム」ガジェットが新登場

    Posted at: 2013-05-19 Label: , , , 8

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

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

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


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

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


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


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

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

    Blogger ブログのコメント欄に Google+ でのコメントも表示できるようになりました

    Posted at: 2013-04-20 Label: , , , 2

    Google+ に接続した Blogger ブログのコメント欄で、これまでのブログのコメントに加えて、Google+ でブログへのリンクが共有された際の内容も表示できるようになりました。



    同じアナウンスが、Google Japan Blog にも掲載されているので、そこで新機能の大まかな感じがつかめると思います。あと、細かいところは Blogger ヘルプで。

    このコメント欄を有効にするには「Google+ ＞ Google+ のコメント」をオンにするだけ。すでに Google+ との接続を済ませているユーザーは、設定しておくといいかもしれませんね。


    注意点

    １．コメント投稿者

    上のスクリーンショットを見て分かるとおり、この機能を有効にすると、ブログのコメント欄に Google+ アカウントのある人しか投稿できなくなります。Blogger のコメント欄の進化というより、Google+ のコメント欄を Blogger に設置できるようになったととらえた方がいいかも。現在設定によって可能な Blogger、OpenID、匿名といったアカウントでのコメントができなくなると、ブログの種類によっては困る場合も出てくるかと。

    ï¼’．コメントの公開対象

    Google+ のサークルが Blogger のコメント欄でも適用されることになるので、誰にどのコメントが見えているのか、分かりにくいところがあると思います。それで混乱や読者間のトラブルなどなければいいですが…。

    ３．ブログ URL

    Google+ 上でのコメントはリンクの URL 単位で管理されています。
    ブログの URL を変更すると、既存の Google+ のコメントは削除されます。カスタム ドメインやブログの URL の変更を検討している場合、変更してから Google+ のコメントを有効にしてください。
    と、Blogger ヘルプにも書かれているのでご注意を。

    Blogger に新ガジェット「Wikipedia」が追加されました

    Posted at: 2013-03-30 Label: , , 2

    lightbox in blogger

    Blogger に新しいガジェットが追加されています。

    その名も「ウィキペディア」。インターネット百科事典「ウィキペディア」の記事をブログのサイドバーで検索することができます。テストブログのサイドバーにも設置しているので、興味がある人は触ってみてください。検索結果のリストがサイドバーの検索窓下にすぐ表示されるのが、なかなかいい感じです。


    lightbox in blogger

    この Wikipedia ガジェットの追加は、Blogger 管理画面「レイアウト」の「ガジェットを追加」リンクから。ガジェット選択のウィンドウで「その他のガジェット」タブをクリックすると「ウィキペディア」が出てくるので、それをクリックして「保存」で追加してください。学術的なブログや、話題がマニアックなブログで使うといいかもしれませんね。

    今回のニュースは、こちらの記事から知ったものです。ありがとうございます。

    Google データエクスポートで Blogger ブログのバックアップファイルのダウンロードが可能に

    Posted at: 2013-02-17 Label: , 1

    Google データエクスポートでの Blogger データのダウンロード

    Blogger ブログのテンプレートと全投稿のデータが、ATOM 形式のファイルとして Google データエクスポートからダウンロードできるようになりました。

    ネタ元はこちらです。ありがとうございます！

    Google データエクスポートでは、Google+ ã‚„ YouTube、Google ドライブなど、Google アカウントでアクセスするいろいろなサービスのデータが一挙にダウンロードできます。ここで Blogger のデータだけをダウンロードするには、「サービスを選択」、「Blogger」、「アーカイブを作成」、「ダウンロード」と、ボタンを順にクリックしていくといいかと。

    データ自体は、Blogger の管理画面「設定 ＞ その他」ページの「ブログツール ＞ ブログをエクスポート」で得られるものと同じだと思いますが、複数のブログデータ（それぞれ別の ATOM ファイルに格納）が 1 つの ZIP ファイルにまとめられて、いっぺんにダウンロードできるというのはとても便利だと思います。

    Google データエクスポートを使うとブログデータのダウンロードがとても簡単にできるので、これからは不測の事態に備えてまめにバックアップをとる習慣をつけたいですね。

    Blogger の投稿から Google+ へのメンションが可能に

    Posted at: 2012-12-22 Label: , , 5

    Blogger の投稿編集画面を開くと、こんなお知らせが。

    ブログから Google+ プロフィールやページを呼び出して、投稿について知らせることができるようになりました。開始するには、ブログを Google+ に接続します。詳細についてはこちらをご覧ください。
    Blogger に、Google+ のプロフィールやページへメンションを飛ばすための新機能が登場したようですね。

    実際にどのように動くかについては、次の動画の 02:16 あたりから見ると分かりやすいと思います。


    投稿編集画面の本文中に @ ã‚„ + をつけた Google+ プロフィール名や Google+ ページ名を記述すると、簡単にリンクを張れるようになっています。メンションを付けられたユーザーには、Google+ ページ内で通知が届く、はず。

    Google+ と Blogger との連携がどんどん進んでいきますね。Blogger アカウントを Google+ と接続させているユーザーは、一度試しにやってみたらいいんじゃないでしょうか。（Google+ ページ +クリボウの Blogger Tips 宛てに実験してみるというのも可です。）

    Blogger のモバイルテンプレートで動的ビューが使えるようになりました

    Posted at: 2012-09-03 Label: , , 7

    「クリボウのプログラミングひとりごと」動的ビューをモバイルテンプレートに


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

    Blogger 管理画面「テンプレート ＞ モバイルテンプレート」

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

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

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

    Blogger の Navbar がブログ管理画面からオフにできるようになりました

    Posted at: 2012-07-19 Label: , 7

    本日、こんなツイートを発見しました。


    えっ！と思って、さっそく確かめてみました。
    Blogger 管理画面「レイアウト」で「Navbar」ガジェットの「編集」リンクをクリックし、

    Blogger 管理画面「レイアウト」の「Navbar」ガジェット「編集」リンク

    表示される「Navbar の設定」ページをよく見てみると…。

    「Navbar の設定」画面、「オフ」の選択肢

    たしかに新しく「オフ」が選択肢として追加されていますね。以前、

    でも書いたように、これまで Navbar を非表示にするためには、Blogger が自動的に書き出す Navbar をユーザーのスタイルシートで無理やり隠すという方法がとられてきました。

    が、これからは最初から書き出さないようにできるということです。ブログデザイン的に Navbar をはずしたかったものの、なんとなく隠すのに抵抗だとかやましさだとかを感じていた人には朗報かと思います。


    Navbar の空白を詰める

    ちなみに、「オフ」を選ぶとこれまで Navbar があった部分がそのまま空白になります。Navbar のあった 30 ピクセル分の高さを詰めたい場合には、Blogger 管理画面「テンプレート」ページの「HTML の編集」から

    body .navbar {
      height: 0;
    }

    というコードを

    ]]></b:skin>

    の直前ぐらいに入れておくといいと思います。

    Blogger ブログの投稿ページの URL（パーマリンク）が自由に指定できるようになりました

    Posted at: 2012-07-01 Label: , , , 12

    Blogger ブログの各エントリには、個別の URL（いわゆるパーマリンク）がついています。これまで、Blogger のパーマリンクは、投稿タイトル中のアルファベットを元にして、自動的に生成されてきました。この Blogger の自動 URL 付加の仕組みについては、以前に記事にしているので、興味のある人はご確認を。

    そのパーマリンクが今回、投稿時に自由に URL を指定できるようになりました。ニュースを知ったのは、こちらのブログから。（@aka さんありがとうございます）

    パーマリンクが自由に指定できるようになった Blogger in Draft の設定画面

    上のスクリーンショットのように、Blogger in Draft からブログの新規投稿を行うと、投稿オプション設定に「パーマリンク」という欄が出てきます。

    ここに blogger-custom-permalink と入れると、このブログの場合だと、http://www.kuribo.info/2012/07/blogger-custom-permalink.html という URL になります。

    パーマリンクが自由に指定できるようになった Blogger in Draft の設定画面

    これまで、投稿を公開し終えるまでその記事の URL が分からなかったことを思うと、前もって URL が分かるだけでもずいぶん進歩です。さらに URL を自由に指定できるとは！ブログ URL 中の単語自体 SEO に影響があると言われてすでに久しいですが、Google 傘下の Blogger もようやく SEO に本腰を入れてきたというところでしょうか。

    このカスタムパーマリンク機能ですが、一応注意点をあげておくと、

    • パーマリンクのカスタマイズは Blogger ではなく、Blogger in Draft から。
    • URL で使えるのは半角英数とハイフン - とドット（ピリオド） . 。
    • ハイフンやドットは、ファイル名の先頭でも末尾でも使える。連続もＯＫ。
    • 大文字と小文字は区別される。（ABC と abc は別）
    • 文字数制限なし。長すぎても公開はできる。アクセスすると 414 エラーが出る場合も。100 文字は OK、3000 文字は無理でした。（テスト）
    • URL が指定できるのは、新規投稿時のみ。公開済み投稿の URL は変更できない。

    …と、こんなところです。現在 Blogger in Draft にしかない機能のため、途中で仕様が変わる可能性も大いにあります。パーマリンクの指定は、無理せずこれまでの Blogger のきまりにしたがって、半角英小文字とハイフンのみ、39 文字以内にしておいた方が無難でしょうね。

    関連：
    追記（2012-07-18）：

    コメント欄で教えてもらいました。このカスタムパーマリンク機能が、Blogger in Draft を卒業して、Blogger 標準でも使えるようになりました。

    Blogger ブログに公式「翻訳ガジェット」が登場

    Posted at: 2012-05-05 Label: , , , 3

    Blogger 公式「翻訳ガジェット」

    Blogger に新しい「翻訳ガジェット」が追加されています。

    ガジェットの追加は、Blogger 管理画面「レイアウト」から。「ガジェットを追加」リンクをクリックして、ガジェット一覧から「翻訳」を選びます。


    うまく動かないときの対処法

    …これだけで導入はいいはずなんですが、このブログにつけてみたところ、正しく動いてくれませんでした。問題点は、次の 3 つです。

    • 翻訳できない
      最初に気づいたのは、翻訳したい言語の選択肢に「英語」が出てこないことです。うちの場合、ブログ各部の表記を「英語」にしているせいか、ブログのコンテンツの言語も英語だと判断されているようです。そのため「英語から他の言語へ」の翻訳という扱いになり、どの言語への翻訳もうまくいきませんでした。
    • 表示形式を変更できない
      ガジェットの追加画面で、翻訳ツールの表示方法を「縦」「横」「プルダウンのみ」の中から選択することが可能なんですが、どう指定しても「縦」に戻ってしまいました。これはブラウザによるものかもしれません。
    • ツールバーが常時表示される
      最後は、好みの問題の気もしますが…。このガジェットを付けると、「Google 翻訳」ツールバーがページ上部に常に表示されてしまいます。Blogger には、そもそも Navbar があるので、その上にさらにツールバーが表示されると、不恰好な印象を読者に与えかねません。
    で、行ったのが、次のカスタマイズ。「翻訳ガジェット」追加してもうまくいかない場合にのみ、参考にしてみてください。

    １．Blogger 管理画面「テンプレート」ページで「HTML の編集」ボタン、「続行」ボタンを押し、出てきた画面から「ウィジェットのテンプレートを展開」にチェックを入れます。

    ï¼’．「Translate1」という ID のウィジェットを探します。ブラウザの検索機能を使うと便利です。

    ３．次のコードを見つけ、
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: &#39;<data:pageLanguage/>&#39;,
        autoDisplay: &#39;true&#39;,
        layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
      }, &#39;google_translate_element&#39;);
    }
    赤字部分を ja に、青字部分は翻訳ツール「横」表示なら HORIZONTAL に、「プルダウンのみ」表示なら SIMPLE に変更します。緑字部分は、最初から「Google 翻訳」ツールバーを表示するかどうかです。false にしておくと、翻訳が行われたときだけツールバーが出るようになります。この行ごと削除しても false 指定と同じになるみたいです。

    悪戦苦闘して、ようやく付けられた翻訳ガジェット。サイドバーに掲載しているので、動作を確かめてみてください。一度「英語」などで翻訳を行うと、その手続きを覚えているようで、再度ブログを表示したときにも自動的に「英語」で表示されるようです。


    他の 2 つのガジェットも動的ビュー（ダイナミックビュー）対応に

    「翻訳ガジェット」登場に伴い、従来からあった「ブログリスト」と「リスト」のガジェットも動的ビュー対応になりました。

    これで、動的ビュー対応のガジェットは

    • +1 ボタン
    • Google+ バッジ
    • 翻訳
    • 読者
    • ブログリスト
    • リンクリスト
    • リスト
    • ラベル
    • リンク登録
    • 基本情報
    • ブログアーカイブ
    の 11 種類になりました。


    関連：

    Blogger に新ガジェット「+1 ボタン」「Google+ バッジ」が登場

    Posted at: 2012-04-13 Label: , , 1

    Blogger に新しいガジェットが追加され、Google+ との連携がさらに強化されています。

    Blogger Google+ ボタンとバッジ

    サイドバーに設置してみたのがこちら。

    Blogger Google+ ボタンとバッジ

    上から Google +1 ボタン、Google+ バッジという順です。追加は、Blogger 管理画面「レイアウト」ページの「ガジェットを追加」リンクから。これまで Google+ のページからコードを取得して HTML/JavaScript ガジェットに貼り付ける必要があったんですが、随分と手軽になりましたね。

    Blogger ブログに「検索設定」が登場、SEO 対策の詳細設定が可能に

    Posted at: 2012-03-24 Label: , , 3

    Blogger 設定 ＞ 検索設定

    Blogger （新インターフェースダッシュボード）に新しい設定項目が増えました。その名も「検索設定」。

    ここで設定できるのは次の３点。
    • メタタグ
    • エラーとリダイレクト
    • クローラとインデックス
    順番に見ていきます。


    メタタグ

    Blogger の「検索設定」で設定できる「メタタグ」というのは、Google などの検索エンジンに「ここは、こんな内容のページですよ」と伝えるためのタグ
    <meta content='クリボウが Blogger の機能の実験をしているブログです。' name='description'/>
    のこと。Blogger では「検索記述子」と呼ぶようです。（ヘルプ）

    この項目の入力欄には、赤字部分にあたる、ブログの説明を入力します。

    この入力欄に説明を入れても、ページのソースに description の meta タグが出ない場合には、テンプレートの <title>... </title> の次の行に
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
      <meta expr:content='data:blog.metaDescription' name='description'/>
    </b:if>
    というコードを挿入するといいです。


    エラーとリダイレクト

    ここには２つの項目があります。
    • カスタム ページが見つかりません
    • カスタム リダイレクト
    カスタム ページが見つかりません

    ややこしい表記ですが、「カスタム ページ」が見つかりませんではなくて、カスタム「ページが見つかりません」です。誤った URL やすでに削除されたページの URL でアクセスされた場合に、表示するメッセージをカスタマイズできるようになりました。（ヘルプ）

    以前は、ブログとは別の Blogger の 404 ページが表示されていたんですが、いつの間にかこのメッセージがブログ内で表示されるようになっています（例）（ちゃんと 404 ステータスコードは出る）。この、ページがない時にブログ内に表示されるメッセージを、ブログ運営者が指定できるようになったというわけ。

    カスタム リダイレクト

    ブログ内のディレクトリやページへのアクセスを、同じブログ内の別のディレクトリやページへリダイレクトすることができます。（ヘルプ）

    この機能を使うと、記事の整理や訂正などでページを削除した場合に、削除したページへのアクセスを別の新しい記事に振り向けることができます。

    これは、別に削除したページの URL に限った話ではないので、特定の投稿や「ページ」に別のわかりやすい URL を付けて、読者に知らせたりするのにも便利です。


    クローラとインデックス

    ここにも２つの項目があります。

    • 独自の robots.txt
    • 独自の robots ヘッダー ã‚¿ã‚°
    独自の robots.txt

    検索エンジンのクローラがサイトを訪れた時に確認するのが robots.txt というテキストファイルです。クローラは robots.txt の内容から、どのページをインデックスすべきか判断します。

    robots.txt 自体は、以前から Blogger ブログにも用意されていました（参考）が、今回このファイルの内容もブログ運営者側で指定できるようになりました（ヘルプ）。

    この設定は、ブログの特定の記事を検索エンジンにインデックスしてほしくないときに使います。詳しくは、Google ウェブマスターツールのヘルプを確認してください。間違って指定すると、ブログ内の全ページが検索エンジンから削除されてしまう可能性もあるので、基本的にこの項目は触らなくていいと思います。

    独自の robots ヘッダー タグ

    これも先の「メタタグ」と同様に、検索エンジンのクローラに、「このページをインデックスする・しない」「リンクをたどる・たどらない」といった情報を伝えるためのタグです。

    この項目では、Blogger によってブログのページに書き出される
    <meta content='noindex,nofollow' name='robots'/>
    というコードの赤字部分を、「all, noindex, nofollow, none, noarchive, nosnippet, noodp, notranslate, noimageindex, unavailable_after」の選択肢から、チェックボックス簡単に指定することが可能です（ヘルプ）。

    各値の詳細は、Google ウェブマスターツールのヘルプで確認してください。


    rel='nofollow' 属性のリンク

    「検索設定」については、以上なんですが、検索関連でもう一つ Blogger に新しい機能がついています。

    Blogger の rel='nofollow' リンクオプション

    それは、投稿内のリンクで rel="nofollow" 属性を追加できるようになったこと（ヘルプ）。ブログの投稿エディタで別ページにリンクを張るときに、「Add rel='nofollow' attribute」というオプションが選べるようになっています。

    この属性のついたリンクのリンク先は、検索エンジンのクローラで追跡されません。Google ウェブマスターツールの ヘルプ では、「信頼できないコンテンツや有料リンク、クロールの優先順位付け」といった場合に、この属性を追加することが推奨されています。


    …とまあ、Blogger の SEO 対策設定についてみてきましたが、ようやく Blogger ã‚‚「Google のブログ」という感じになってきましたね。今後の機能追加にも、期待大です。

    Blogger の blogspot.jp リダイレクトに関していろいろ

    Posted at: 2012-03-22 Label: , , 20

    前回、カスタムドメイン以外の Blogger ブログ（blogpot.com）が日本からのアクセスで blogspot.jp へリダイレクトされるようになった件について、記事にしました。

    記事では、「大々的に blogspot.jp に URL が変わったことを知らせてしまった方がいいのかも」とか「各サービスで設定の変更が必要になりそう」と書きました。

    が、その一方で、Blogger に国別リダイレクトが導入されて、閲覧者の国によってブログがリダイレクトされてしまうとはいえ、Blogger ブログの基本のドメインはあくまで blogspot.com だという思いもあり…。

    blogspot.jp、blogspot.com のいずれかを取るべきか、またはうまく共存させていくべきなのか、まだ迷っている最中なんですが、この記事ではとにかく、これまでに得た情報をご紹介したいと思います。


    data:post.canonicalUrl

    まずは、外部サービスとの連携についてです。リダイレクトで URL が変わることによって、はてブ件数や Facebook のいいね！件数がリセットされる問題が各所で起きています。

    そんな中、いろんなブログを見て回っているうちに、

    という記事を見つけ、data:post.canonicalUrl という Blogger のテンプレート内で使える特別な情報タグ（データタグ）の存在を知りました。data:post.canonicalUrl は投稿ガジェット内で使える、投稿ページ URL を示すデータタグ。同様の data:post.url と異なるのは、必ず基本ドメインの URL を表示する点です。なのでたとえば、

    のカスタマイズでいうと、はてなからデータを得るために使用している data:post.url ã‚’ data:post.canonicalUrl に置き換えて使うことで、これまで blogspot.com で溜めたはてブ件数をリセットせずに表示したり、引き続き blogspot.com ドメインの投稿ページをブックマークしてもらったりすることができます。


    data:blog.canonicalUrl、data:blog.canonicalHomepageUrl

    もしやと思って調べてみると、ほかに data:blog.canonicalUrl というデータタグもありました。Blogger には data:blog.url という、現在見ているページの URL を示すデータタグがありますが、data:blog.canonicalUrl はその基本ドメイン版。

    たとえば、クリボウの写真日記: 京阪電車の分岐
    http://kuribo-photo.blogspot.jp/2012/02/blog-post.html
    というページを見ている場合、data:blog.url はそのままの URL を示しますが、

    data:blog.canonicalUrl は
    http://kuribo-photo.blogspot.com/2012/02/blog-post.html
    を示します。

    さらにさらに、ブログのトップページを表す data:blog.homepageUrl に対応するデータタグとして data:blog.CanonicalHomepageUrl というものも発見。これらのタグは、閲覧しているページの blogspot.com 版を「+1」してもらいたいとか、とにかくトップページの blogspot.com 版をブックマークしてほしいという場合に重宝するかと。


    JavaScript でリダイレクト

    先日のリダイレクトの説明記事に、コメントで教えてもらったのが次の記事です。

    これは、「Disable Blogger Country Specific Domain Redirection」を翻訳し、blogspot.jp 用にスクリプトを書き直したものだと思います。読者が blogspot.com を開くと Blogger によって blogspot.jp へリダイレクトされますが、それを再び blogspot.com/ncr へリダイレクトするためのスクリプトになっています。/ncr をつけて blogspot.com に移動すると、一時的にリダイレクト機能が停止されるため、blogspot.com 上でブログを見てもらうことができます。

    リダイレクトのリダイレクトについては Blogger（Google）の方針にそぐわないため、もしかするとなんらかのおとがめがあるかもしれません。導入はよって自己判断で。手順については、リンク先に丁寧に書かれているので、そちらを確認してください。

    もし、上記スクリプトで問題がある場合は、クリボウもスクリプトを書いているので参考にしてもらえたらうれしいです。


    Google Analytics でどちらもトラッキング

    アクセス解析の Google Analytics では、blogspot.com、blogspot.jp どちらも同じアカウントでトラッキングできるようになっています。情報元はこちら。



    Google Analytics サイトを「アカウント管理 ＞ トラッキングコード」と進み「何をトラッキングしますか？」の項目で「複数のトップレベルドメイン」にチェックを入れて「保存」ボタンを押すと、blogspot.com ã‚‚ blogspot.jp も同じアカウントとして集計してもらえるとのこと。これはいいですね。


    Zenback は blogspot.jp 用に

    ブログに関連記事・キーワード、twitter・はてブでの言及などの情報欄を設置できるサービス Zenback では、スクリプトを blopspot.jp で取得し直して貼り付けることを推奨しています。

    Bloggerのドメインが.comから.jpに変わって、Zenbackが動かなくなってしまった（「読込中」で止まる）方がいらっしゃるようです。

    その場合、お手数ですが、http://zenback.jp/ にログインして再度新しいURLでスクリプトを取得しなおし、張り替えてくださいませ。
    Bloggerのドメイン変更(.comから.jpへ)でお困りの方へ - Zenbackブログ

    貼りなおすと、blogspot.com の情報も引き継げる模様です。というより、blospot.jp 用のスクリプトに変えても、はてブや twitter への問い合わせ自体は blogspot.com 対象で行っている（？）みたいです。


    とりあえず、クリボウの現時点で知っている事柄はこれだけです。他にも情報をお持ちの方は、コメントなどで知らせてもらえるとうれしいです。


    追記（2012-03-24）：

    Zenback サポートからリプライあり、

    @kurikuribo 「.jp 用に変えても、.com 対象で行っているみたいです。 http://goo.gl/hwHib」の件、Zenbackはcanonicalタグを見ているので、canonicalに.comが指定されていれば、そちらのURLへの反応を表示しています。
    Twitter / @zenback: @kurikuribo 「.jp 用に変えても、.c ...

    だそうです。テンプレートから
    <link href='...' rel='canonical'/>
    みたいなコードを外したら、blogspot.jp 対象データが得られるのでは？と思いましたが、テンプレートのこの部分は、テンプレートタグ
    <b:include data='blog' name='all-head-content'/>
    によって Blogger 内部のデータが呼び出されているため、編集不可でした。


    Grow! も blogspot.jp 用に

    Grow! ボタンも Zenback と同様、
    Bloggerのブログに設置したGrow!ボタンが、正しく表示されない不具合が発生しています。

    Bloggerをお使いのユーザー様で Grow!ボタンが正しく表示されない場合は、Grow!のセッティングページから当該ボタンのドメインの値を 「●●●●●.blogspot.com」 から 「●●●●●.blogspot.jp」 に修正していただくことで、正常に表示されるようになります。
    【お知らせ】ブログサービス『Blogger』をご利用の皆様へ | Grow! Blog

    という風に、blogspot.jp 用コードへの貼り換えを推奨しているようです。

    Blogger ブログ（blogpot.com）へのアクセスが blogspot.jp にリダイレクトされる

    Posted at: 2012-03-17 Label: 289

    日本からの Blogger ブログへのアクセスが、blogspot.com から blogspot.jp へリダイレクトされるようになってしまいました。

    たとえば、「クリボウの写真日記」は、元の URL
    http://kuribo-photo.blogspot.com/
    へ日本からアクセスすると
    http://kuribo-photo.blogspot.jp/
    にリダイレクトされてしまいます。

    先月のつぶやきでも触れたんですが、とうとう以下の「特定の国」に日本も含まれるようになったようです。

    このことについて、すでに Blogger の公式ヘルプも出ています。

    ちょっと抜き出してみると…

    Q:URL が変換されるのはなぜですか？
    A: 今後数か月のうちに、閲覧中のブログのウェブサイト アドレスが国別のドメインにリダイレクトされることがあります。たとえば、オーストラリアにいる読者が [blogname].blogspot.com にアクセスすると [blogname].blogspot.com.au にリダイレクトされます。国別のドメインは、ユーザーが現在いる場所で決まります。

    Q: なぜ URL を変換するのですか？
    A: 地域ごとにコンテンツを管理できるようにするためです。Google で削除リクエストを受領したコンテンツが地域の法律に違反している場合、その法律が適用される地域のドメインの読者には、そのコンテンツは表示されなくなります。この変更は、表現の自由と問題となるコンテンツに対する Google の取り組みの一環であり、従来からの方針に変更はありません。

    どうやら国別に削除要請に対応するための取り組みのようですね。国内外のブログを問わず、日本からのアクセスを blogspot.jp ドメインにまとめた上で、日本の法律に照らして問題があれば blogspot.jp からは削除していく、と。

    一応、blogspot.com でブログを表示する方法としては
    Q. 米国外のユーザーはサービスの .com ドメインに引き続きアクセスできますか？
    A. はい。「http://[blogname].blogspot.com/ncr」と入力すると、常にブログの .com バージョンにアクセスできるので、誰でも Blogger ブログの .com バージョンを閲覧できます。ncr（no country redirect）を使用すると、読者がブログのローカル バージョンにリダイレクトされるのを一時的に無効にすることができます。

    Q: ブログ全体ではなく個々の投稿の URL についてはどうすればよいですか？
    A: 国別のドメインのすぐ後ろに「/ncr/」を追加して、個々の投稿にアクセスします。たとえば、[blogname].blogspot.com/examplepage の場合は、「[blogname].blogspot.com/ncr/examplepage」と入力します。

    という手段があります。これは読者がリダイレクトされたブログの URL に /ncr を付けて、リダイレクトを一時的に停止することができるというもの。

    blogspot.com バージョンが閲覧可能なら、国別リダイレクトも意味がないようにも思えますが、これは多分、中国（Great Firewall）のような国家的なアクセス制限が行われている国のことを想定しているんだと思います。中国当局によって blogspot.com 全体はそもそもアクセス禁止だけれども、blogspot.cn は表示する記事を操作するのでアクセスできるようにしてもらおうという Google の魂胆だろうなと思います。

    話を日本に戻すと、/ncr でリダイレクトを停止できるとはいえ、それは読者側の話です。ブログ運営者から「はてブするときは /ncr をつけて blogspot.com に移動してからにしてね」とお願いできるはずもないので、いっそのこと大々的に blogspot.jp に URL が変わったことを知らせてしまった方がいいのかもしれません。

    リダイレクトのため、blogspot.com へのアクセスでも記事にたどり着けなくなるということはないようですが、はてなブックマーク件数とか Facebook のいいね！件数などが、URL が変わることでリセットされてしまうのが痛いところですね。その他、外部サービスとブログを連携させている場合にも、各サービスで設定の変更が必要になりそうです。

    あと、気になるのは、このリダイレクト措置がいつまで続くのかということ。Blogger（Google）の方針によって、コロコロ URL が変わってはたまらないので、この機会に Blogger ユーザーは、カスタムドメインを一つの対策として考えてみてもいいかもしれません。

    Blogger ダッシュボードで、投稿の +1 された回数と +1 したユーザーが確認可能に

    Posted at: 2012-01-28 Label: , 1

    Blogger の新インターフェースのダッシュボード「投稿」ページから、投稿の +1 された回数が確認できるようになりました。

    Blogger ダッシュボード「投稿」に Google +1 された回数とユーザーが表示される

    上の画像の「+3」というのがそれです。数字をクリックすると、投稿を +1 したユーザーの Google+ プロフィールが表示されます。

    気になったのが、ここで表示されるユーザーについてです。通常、投稿の共有ガジェットでは、+1 してくれたユーザーの中でも、自分が Google+ でサークルに追加しているメンバーのみが表示されるようになっているんですが、この投稿一覧のページからだと、サークルに追加していないユーザーについても、その名前を確認することができます。

    元々 Google+ の投稿も、自身のサークルに追加しているかどうかを問わず +1 したユーザーをすべて確認できるようになっているので、Blogger がまた一歩 Google+ に近づいたということなのかもしれません。


    関連：

    Blogger 新コメントシステム開始、返信でスレッド表示に

    Posted at: 2012-01-14 Label: , , 11

    コメントのスレッド表示

    Blogger のコメントシステムが新しくなり、コメントへの返信が行えるようになりました。

    テストブログで試してみたのがこの画像。コメントが 2 階層になっているのが分かると思います。

    Blogger の新コメントシステム

    このコメントシステムで返信が可能なのは、トップに投稿されたコメントのみ。返信のコメントにさらに返信して階層を深めるということはできません。

    返信がつけられた元のコメントが削除された場合でも、返信コメント自体は残るようです。一方、管理者による「完全に削除」を行った場合は、コメントにつけられた返信もすべて削除されます。

    Blogger の新コメントシステムでコメント削除

    新しくなったコメント欄を使用できるブログの条件については、Okano さんの説明が分かりやすいかと。

    この新しいコメントシステムが利用できるのはコメントが埋め込みになっていて、なおかつブログフィードが全文になっている場合のみらしい。コメントを別ページ表示やポップアップ表示にしている場合には利用できないようだ。
    Bloggerのコメント欄が進化 | The Okano Mail

    返信がつけられた後に、コメント欄の位置設定を埋め込みからフルページに変更したらどうなるのか試してみたところ、返信かどうかに関係なく、コメントがフラットに時系列で並びました。話のつながりが分かりにくくなると思うので、コメント欄の位置設定はあまり変えない方がよさそうです。


    スレッド表示されないブログへの対策

    上掲の用件を満たしていても、独自にテンプレートをカスタマイズしたブログの場合、新しいコメントシステムを使えないことがあるようです。

    そういう場合には、次のブログで紹介されていた、2 つの方法を順番に試してみてください。

    その１

    １．Blogger 管理ページ「テンプレート ＞ HTML の編集」（旧インターフェース：「デザイン ＞ HTML の編集」）ページの「バックアップ／復元」ボタン（æ—§：このボタンは無し）、「テンプレートをすべてダウンロード」ボタンを押し、テンプレートファイルをダウンロード。

    ï¼’．「ウィジェットテンプレートをデフォルトに戻す」リンクをクリックして、ウィジェットをリセット。

    ３．「バックアップ／復元」ボタンを押し、「ハード ドライブ上のファイルからテンプレートをアップロードする。 」（æ—§：「次のハード ドライブにあるファイルから、テンプレートをアップロードします。」）項目から１の手順で保存したファイルをアップロード。

    その２

    １．Blogger 管理ページ「テンプレート ＞ HTML の編集」（æ—§：「デザイン ＞ HTML の編集」）ページの「ウィジェットのテンプレートを展開」にチェックを入れる。

    ï¼’．<b:include data='post' name='comments'/> というコードを見つける。（ブラウザの検索機能を使うと便利です。）

    ３．２のコードを
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
    に書き換える。

    ※２のコードは、テンプレート内に複数存在するので、いずれにも同じ処理を行う。


    従来のコメント欄を使用したい場合

    新コメントシステムは、要件を満たしているブログに自動的に導入されています。コメント表示を元に戻し、従来の埋め込みコメント欄を使いたい場合には、上の「その２」の手順を逆に行うといいと思います。下の画像は、コメントのスレッド表示が自動的に導入されたブログで、実際に元に戻してみたものです。

    Blogger の旧コメントシステム

    画像を最初のものと見比べてみると気づくと思うんですが、新しいコメントシステムにはタイムゾーンが反映されていません。いずれ対応するとは思いますが、

    記事の投稿時刻は正しいのですが、コメントの投稿時刻は全て17時間前になってしまっています。設定を見てみると、正しい時刻になってますし・・・タイムゾーンも「東京」になっています。パソコンの時刻も正しいです。どのようにすれば直るでしょうか！？
    クリボウの Blogger Tips: Navbar をはずした Blogger 用の検索ボックスガジェット

    という質問のように、新コメントシステムの PST（太平洋標準時）表記が気持ち悪い人は、コメントシステムを従来のものに戻してみてもいいかもしれません。

    手順

    １．Blogger 管理ページ「テンプレート ＞ HTML の編集」（æ—§：「デザイン ＞ HTML の編集」）ページの「ウィジェットのテンプレートを展開」にチェックを入れる。

    ï¼’．次のコードを見つける。
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>

    ３．２で見つけたコードを <b:include data='post' name='comments'/> に書き換える。

    ※２のコードは、テンプレート内に複数存在するので、いずれにも同じ処理を行う。

    ということで、いろいろ試してみてくださいね。
    © 2005-2014 Kuribo. Powered by Blogger.