久しぶりに Blogger、Blogger beta 共通の話題。
GIGAZINE によると、AdSense の検索向け広告で自サイト内に検索結果を表示させられるようになったそうです。

おお！と思ってAdSense のヘルプを読んでみるとこう書いてありました。

Blogger をご利用の場合など、ウェブ ホストまたはサイト アプリケーションで検索結果用に個別の URL を作成できない場合は、ページ内に検索結果を表示することはできません。

Blogger が名指しで無理だと言われていますね…。この検索向け広告の検索結果を自サイト内に表示するためには、検索結果を表示させるためだけのページを特別に作って、そこに AdSense 指定のコードを貼り付ける必要があるんですが、Blogger にはそれができないでしょう？というひどいお言葉です。

Google さんは案外 Blogger に詳しくないのかも知れません。というのも実は Blogger も Blogger beta も、投稿内にスクリプトコードを貼り付けることができるのです。つまり、この新しい検索フォームを Blogger でも導入出来るということ。まあ論より証拠、このブログにも新しい検索フォームをつけているので、ぜひご確認下さい。


導入手順

１．ブログで新規投稿をします。この投稿の個別ページが検索結果を表示するページになるので、「Google 検索」など、分かりやすいタイトルをつけておきましょう。本文は後で書き換えるので、abc とかなんとか、好きな文字列を入れておきます。入力できたら「公開（PUBLISH）」ボタンを押してください。

２．検索向け AdSense のコードを作成します。検索向け AdSense の設定画面に新しく「 検索結果ページを開く?検索結果をGoogle に表示するか、お客様のサイトに表示するかを選択します。」という項目が加わっています。「自分のサイトに結果を表示する」ラジオボタンをチェックすると「検索結果を表示する URL を入力 」というテキストボックスが出てくるので、１で作った記事単独ページの URL を指定してします。別の記事にも書きましたが、Blogger beta の場合は同ページ、「サイトの言語?お客様のサイトの主要な言語を選択ください」という項目で「英語（English）」を選択しておかないと、送信ボタンの文字が文字化けしてしまうので要注意です。

３．その後、表示幅やエンコード、パレット、チャネルの設定などなどをしていくと、上下二つのテキストエリアにそれぞれ違う種類のコードが表示されると思います。１で作った投稿の編集画面を開き、下のコード（検索結果のコード）を本文として貼り付け「公開（PUBLISH）」してください。スクリプトタグが本文として承認できない旨のエラーが出ますが、「この投稿に対して HTML エラーを表示しない（Stop showing errors for this post）」というチェックボックスにチェックをつけて、再びボタンを押すと公開することができます。

４．Blogger のテンプレート編集画面から、検索フォームを表示させたい位置に、AdSense 指定の上のコード（検索ボックスのコード）を貼り付けます。Blogger beta の場合は、特殊な貼り付け方をする必要があります。このページの手順に沿ってコードを貼り付けてください。Blogger の場合、貼り付け作業後、ブログの再構築をしてください。


以上でおしまいです。検索結果の表示幅を 500px 以下には設定できないという条件があり、ブログとしては少し厳しい気もしますが、テンプレート幅に余裕がある人はぜひお試し下さい。

Blogger beta ブログに「最近のコメント」を表示する方法。@aka さんが詳しく解説されています。

• clmemo@aka: Blogger Beta に「最近のコメント」を付ける

Blogger だとこんなに大変だったのが、Blogger beta だと標準の機能を組み合わせてこんなに簡単に実現出来るんですね。JavaScript で書き出すとかじゃなくて、直接 HTML で出力されるのも魅力。Blogger beta、なかなかやりますね。

今日こんなメールが届きました。

このたびは、Yahoo!カテゴリへの登録お申し込みをいただき、ありがとうございます。お申し込みいただいた次のサイトをYahoo!カテゴリに掲載させていただきました。

Yahoo! カテゴリにサイトを申請したのは五日前。このブログと「クリボウの Blogger 入門」の両方を申請していたんですが、今回掲載されることになったのは「Blogger 入門」の方。やっぱりブログは掲載されにくいんでしょうかね。

「クリボウの Blogger 入門」が掲載されることになったのは
コンピュータとインターネット > インターネット > ホームページ、ウェブサイト > ブログ > 無料サービス > Blogger
というカテゴリ。Blogger というカテゴリは今回新しく作ってもらいました。

念願かなってとてもうれしいクリボウなんですが、次の課題はこのブログを載せること。このブログもまだまだ見やすくする工夫が要りそうです。

Blogger beta に HaloScan が貼り付けられません、というメールが来ていたのでやってみました。

今回参考にしたのはこのページ。

• Logical Philosopher: Getting Haloscan to work in Beta Blogger

このページのとおりにやればいいのかというと、さにあらず。微妙にコードが間違っているので、Blogger beta の XML チェックにひっかかってしまいます。なので下記の方法をお試し下さい。

※ HaloScan のアカウントがすでにあるものとして解説しています。HaloScan ってなんだ？という方はこちらをご確認下さい。


導入方法

１．Blogger beta の管理画面「Template ＞ Edit HTML」を開き、「Expand Widget Templates」のチェックボックスにチェックを入れます。

２．コードの表示されているテキストエリアから </head> を見つけ出し、直前に script タグを挿入します。こんな感じになります。赤字の部分には HaloScan のアカウント名を入れてください。

３．次に、以下のようなコードのかたまりを見つけ出します。

４．３のコードを別のものに差し替えます。導入したい構成を確認して、以下のどちらかを３のコードの替わりに貼り付けてください。

(1) Blogger beta のコメント機能 ＋ HaloScan のトラックバック機能
(2) HaloScan のコメント機能 ＋ HaloScan のトラックバック機能

５．全部貼り付けられたら「SAVE TEMPLATE」ボタンを押して下さい。

これでおしまい。ぜひお試し下さい。

※ ４でつけた投稿フッターのトラックバックリンクはテンプレートを変更しても引き継がれますが、２の head 要素内の変更は引き継がれません。テンプレート変更時には１、２の作業だけしなおしてください。

美しいテンプレートをどんどん更新していく、テンプレート職人の Envy さんに触発されて、このブログでもテンプレートを変更しました。実は２日前に変更していたんですが、ようやく細部の調整が終わったので報告いたします。

今回は Blogger 用テンプレートを直接使わずに、サイト用のテンプレート集から気に入ったのを見つけてきて、CSS でカラムの調整をしたり、Blogger のテンプレートタグを各所に挿入したり、Flickr 画像用の CGI を作ったり、ということをしました。ちゃんと表示されていますよね？

この、新しいテンプレートを導入して、あたふたと HTML や CSS を調節していく作業がけっこう楽しいのです。クリボウはデザインはカラキシなんでアレですが、Envy さんの気持ちが少しわかった今日この頃。

Blogger beta なテンプレートでもこんなことが出来たらいいんですが…、もうちょっと勉強がいりますね。

先日別のブログで、

Beta に移行してから、Google sitemaps で「エラー」が表示されるようになりました。

というコメントをもらいました。

Blogger での Google Webmaster Tools（Google Sitemaps）の利用については以前 クリボウの Blogger Tips: Blogger でも Google Sitemaps という記事を書きました。そこで Blogger の Atom フィードをサイトマップファイルとして登録する方法を書いたんですが、記事の内容を実行してその後 Blogger beta に移行した人は、Webmaster Tools でエラーが出ていると思うのです。

おそらく原因は Blogger beta の Atom ファイルのフォーマットのせい。Blogger Help: What's new in Blogger? にあるとおり、Blogger beta から Atom が 1.0 になっているんですが、Webmaster Tools でサイトマップファイルとして指定できるフィードは Atom 0.3 と RSS 2.0 に限られているのです。

…ということはつまり、Blogger beta の場合、RSS ファイルを指定すればいいということですね。Blogger beta の場合でも http://example.blogspot.com/rss.xml というような RSS フィードへのアクセスができるので、その URL を Webmaster Tools で指定しておきましょう。

正確にいうと、beta でない blogspot.com の Blogger ブログへアクセスすると Internal Server Error が発生してしまい、ブログの内容が表示されません。

Blogger Help Group でも大騒ぎのようですが、頼みの綱の Blogger Status も落ちてしまっていて、どうすることもできません。

同じ blogspot.com でも、beta の方は大丈夫な模様。同じドメインだけに、beta の動的サービングの設定を変更して、beta 以外のブログに不具合が出てしまったんでしょうね。


追記（23:45）

あ、復旧したみたいですね。よかったよかった。原因は？と思って Blogger Status を見てみましたが「ok」の文字が表示されるだけ…。まだこちらは調整中のようです。

Blogger ユーザーには Flickr で写真を公開している人も多いように思います。かくいうクリボウも利用者なんですが、今日はこの Flickr から Blogger beta への写真投稿が便利になりました、というニュースです。

• Blogger Buzz: Flickr Support for Blogger in beta

この Flickr からの画像投稿の仕方については、@aka さんが詳しく解説されているので、ぜひそちらをご覧下さい。

• clmemo@aka: Flickr が Blogger Beta への画像投稿をサポート

クリボウはブログに写真を載せないつもりなんですが、フォトログをつけている人なんかはこの機能、便利だろうなと思います。


ところで、Flickr というと現在 Yahoo! が運営しているサービスですよね。Blogger beta に対応したからといって、Google のブログサービス Blogger の公式ブログで、喜んで紹介していていいのか、というツッコミが海外のブログでありました。

• Bloggeratto: Blogger Says: Use Flickr In Blogger v3.0

それより Picasa のアップグレードを急ぐべきじゃないの、と。そう言われてみるとそうですね…。

（はじめに）

今回は予告していたとおり、Blogger beta のテンプレート、特にウィジェットタグの具体的な書き方です。といっても例のごとく、自分の勉強のために訳した Blogger Help: Widget Tags for Layouts の内容を公開するだけなんですが。正式にヘルプが日本語化されたら、そちらを必ず確認してくださいね。


ウィジェットタグ

Expand Widget モードの Edit HTML ページで、ウィジェットに含むことができるものについて、この記事では説明します。
まず最初に、ウィジェットの終了タグを加えます。

を とします。

この開始タグと終了タグの間に、そのウィジェット特有の内容を書き入れます。この二つのタグの間に置くことができるものについて、以下に解説していきます。


インクルード

ウィジェットの内容にはインクルーダブル領域が含まれます。


この b:includable タグの属性は次のとおり。

• id … （必須）英数字によるユニークな名前。
• var … （オプション）この領域の中で参照するデータの ID （英数字）。

各ウィジェットは、id='main' と名づけられたインクルーダブルタグを、必ず含まなければなりません。通常このインクルーダブルタグは、ウィジェットの内容の大部分か全てを含むでしょう。別の ID で別のインクルーダブルタグを作っても、その内容は自動的には表示されません。でもたとえば id='new' とした を含むインクルーダブル領域を作ることで、その中身を表示することができます。

この b:include タグの属性は次のとおり。

• name … （必須）英数字でつけた名前。これは同じウィジェット中のインクルーダブルタグの ID と一致しなければなりません。
• data … （オプション）インクルードダブルに渡すためのデータの表現。これがインクルーダブルタグの var 属性の値になります。

b:includable タグと b:include タグの簡単な使用例がここにあります。ループとデータについては後で説明しますが、ここで一番重要なのは main なインクルーダブル領域が post インクルーダブル領域をどのように含むかということです。 ここでは、i で呼ばれた post インクルーダブルが p を用いて posts データを参照し、投稿タイトルを表示しています。

<b:includable id='main'>
  <b:loop var='i' values='posts'>
    <b:include name='post' data='i'/>
  </b:loop>
</b:includable>

<b:includable id='post' var='p'>
  Title: <data:p.title/>
</b:includable>

別のところで複数回繰り返したいコードがある場合、インクルードは非常に役に立ちます。あなたは一度だけコードを書いて b:includable にそれを書き、あなたが表示させたいところに b:include を含めて下さい。もしその必要がなければ、main インクルーダブルタグを一つだけを忠実に使って、ほかの事は考えなくてもいいです。（main インクルーダブルには自動的に <b:include name='main'/> が含まれるのでわざわざ書く必要はありません。）

クリボウ注：

ここら辺の内容は難解なので少しヒントを。関数を定義するのが includable、実際にその関数を利用するのが include と考えるとわかりやすいかも知れません。その二つをつないで引数を渡したり受け取ったりするのが b:include の data と b:includable の var ということですね。

<b:includable id='main'>
  <b:loop var='i' values='posts'>
    <b:include name='post' data='i'/>
  </b:loop>
</b:includable>

<b:includable id='post' var='p'>
  Title: <data:p.title/>
</b:includable>

上の例は、JavaScript 的にはこんな関係になるかと。

function main() {
  for (var i in posts) {
    document.write(post(posts[i]));
  }
}

function post(p) {
  return p.title;
}

うーん、伝わるかな…。

データ

データタグは、実際のブログの全ての内容を表す、最も重要なタグです。このタグの例がこちら。

<data:title/>

<data:photo.url/>

一つ目は最も簡単な例ですが、ウィジェットのタイトルを表示するものです。ウィジェットはたいていタイトルを持っているので、ほとんどのウィジェットで利用することができます。

２番目の例は、特定のコンポーネントを指定した少し複雑な例です。たとえば、プロフィールウィジェットにおける文脈では、photo は url や height、width の値を持っています。 . を使った記法は、他のものから URL を得るのではなく、この photo の URL が必要であることを示します。

Blogger beta のテンプレートには、データタグでアクセスできる多くのデータがありますが、どのウィジェットで使うかによって利用できるデータが異なります。データを見つけるためには、このリストを確認してください。


ループ

b:loop タグを使うと、複数回同じセクションを繰り返すことが出来ます。これは投稿やコメント、ラベルなどのリストを表示するために、最も一般的に使われています。ループを使用するための基本的な形式はこちらです。

<b:loop var='（ID）' values='（データセット）'>
  （繰り返したい内容）
</b:loop>

ID 部分はどんな名前でもいいですが、ループされる一回一回の内容で、リストの項目を表すために利用されます。一般的には慣例として i と名づけることになっています。あなたがデータのために指定したデータセットは、例えばブログポストウィジェット中の posts のような、データタグの記事で紹介されているデータの場合もあります。

以下のようなコードは各投稿を通じて、ヘッダータグで囲まれたそれぞれのタイトルをループします。

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

各投稿のタイトルを得るために、i がどのように順番に各投稿のデータを表していくかに注意してください。


条件分岐 If / Else

内容をある場所では表示し、またある場所では表示しないように b:if と b:else タグを使うことができます。このタグの一般的な形式はこちら。

<b:if cond='（条件）'>
  （条件が真なら表示する内容）
<b:else/>
  （条件が偽なら表示する内容）
</b:if>

b:else タグはオプションです。これがない場合、b:if で示された内容を表示するかしないかになります。どちらにしても終了タグ </b:if> は必要です。cond 属性には、真偽を評価できるものなら何でも設定することができます。データタグの中は allowComments のように単純に真偽だけを示すものもありますが、他のデータを利用して真偽を判別させるようにも指定することができます。たとえば、こんな風に。

<b:if cond='data:post.showBacklinks'>

このポストがバックリンクを表示するように設定されていれば。

<b:if cond='data:blog.pageType == "item"'>

表示されるページがアイテムページ（記事単独ページ）なら。

<b:if cond='data:displayname != "Fred"'>

ディスプレイネームがフレッドでなければ。

<b:if cond='data:post.numComments > 1'>

その投稿が２つ以上のコメントを持っていたら。


（おわりに）

Blogger beta では、インクルードやループ、条件分岐と、テンプレートで表現できることが格段に広がっているんですね。これまで以上にいろんなことができそうな予感。クリボウも何か公開すると思いますが、みなさんも独自のウィジェットのアイデアがあったらぜひ教えて下さいね。

クリボウも実験用に Blogger beta ブログを持ったんですが、それで次のコメントへの答えがわかりました。

Google検索ボックスは、タグを貼り付けても、検索できない状態なため、 今のところ取り付けてないです。どなたか、BETAでGoogle検索ボックスを導入されている方、いますでしょうか？

問題

通常の AdSense 広告や Amazon のリンクは、問題なく HTML/JavaScript な Widget として Blogger beta ブログに追加することができました。一方、検索向け AdSense を同じように追加すると、表示はされるものの検索機能が働きません。また、ボタン上の「検索」という文字も文字化けしてしまうことがわかりました。


対策

１．「検索」という文字が化ける件は、いまのところ解決することが出来ません。数値文字参照を使うという手もありますが、AdSense のコードは改変してはいけないので、却下です。AdSense 側の設定「詳細オプション ＞ サイトの言語」を「English」にすると「検索」が「Search」に替わり、文字化けを避けることができます。この設定をした検索向け AdSense のコードをコピーしておいてください。

２．Blogger beta の管理画面「Template ＞ Page Elements」ページでサイドバーの「Add a Page Element」リンクをクリックし HTML/JavaScript な Widget を新しく追加します。内容は後で書き換えるので、abc でも何でもいいです。

３．素直に Page Elements から検索向け AdSense を追加すると、勝手にコードが変更されてしまいます。なので、今回はテンプレートの HTML 編集で Widget を操作します。「Template ＞ Edit HTML」ページを開き、「Expand Widget Templates」というチェックボックスをチェックします。

４．２で追加したウィジェットのコードを書き換えます。下のコードの青で示した数字は、各ブログのウィジェットの構成によって異なりますが、一番数字の大きいのが２で追加したもののはず。下のようなコードのまとまりを Edit HTML ページで見つけてください。 コードが見つかったら、上で赤く示した部分を、１で得たコードに差し替えて、「SAVE TEMPLATE」ボタンを押してください。これで手順は終了です。


注意

追加した検索向け AdSense は Widget としてドラッグ＆ドロップでレイアウトすることが可能です。が、Edit ボタンを押して内容を再び SAVE してしまうと、また検索が機能しない Widget になってしまいます。Edit ボタンは押さないようにしてください。

（はじめに）

前回の記事で、Blogger beta 用のレイアウト可能なテンプレートを書くには、新しい形式のタグを使わないといけない、ということを書きました。そのタグについてのヘルプ Blogger Help: Page Elements Tags for Layouts を自分の勉強のために日本語にしてみました。正式にヘルプが日本語化されるまでの間ですが、参考にしてもらえたら、と思います。


ページエレメントタグ

新しい Blogger beta テンプレートの body 要素内は、セクションとウィジェットで構成されます。

• セクション … サイドバー、フッターといったページの領域のこと。
• ウィジェット … 画像やリスト、ブログロールなど、Blogger beta 管理画面のページエレメントタブから加えることができる、ページの部品たち。

セクションタグ

たとえばヘッダーセクションではこのようなタグが使われています。

この b:section タグで指定できる属性は次のとおりです。

• id … （必須）英数字だけを使ったユニークな名前。
• class … （オプション）テンプレートで共通に使われているのは、navbar、header、main、sidebar、footer。別の名前を使用することも可能。
• maxwidgets … （オプション）そのセクションに含むウィジェットの最大数。未指定だと最大数を設けません。
• showaddelement … （オプション）yes か no を設定することができます。これはページエレメントタブでこのセクションに Add a Page Element（ページエレメントを追加する）リンクを表示するかどうかです。未設定だと yes。
• growth … （オプション）horizontal か vertical を設定します。これはそのセクションが含むウィジェットを水平（horizontal）に配置するか、垂直に配置するかを設定するもの。未設定は vertical。

この b:section タグは動的ページ生成の際に div 要素に書き換えられます（id はそのまま）。なので id='header' な b:section 要素に CSS を適用したい場合は、div.header を指定したスタイルを書きましょう。

セクションはウィジェットしか含むことが出来ません。他のセクションや他のコードは含むことができないので注意が必要です。


ウィジェットタグ

Blogger beta 管理画面の簡単な表示形式では、ウィジェットは一つのタグで表されます（内容を展開して表示する事も可能）。例を挙げるとこんな感じです。



b:widget タグが指定できる属性は、次のとおりです。

• id … （必須）英数字のみの、テンプレート内でユニークな名前。ウィジェット ID はウィジェットを削除して新しいものを作らないと、変更することが出来ません。
• type … （必須）どんな種類のウィジェットかを示します。指定できる文字列は次のとおりです。
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
• locked … （オプション）yes か no を指定します。ウィジェットをロックするかどうかの設定です。ロックされたウィジェットは動かしたり削除することができません。
• title … （オプション）ウィジェットの表示タイトルです。未指定だと List1 などの文字列が自動的に使われます。
• pageType … （オプション）そのウィジェットをどのページに表示するかを設定します。all（全ページ）、archive（アーカイブページ）、main（メインページ）、item（記事単独ページ） のいずれかを指定します。デフォルトは all です。この pageType に関わらず、ページエレメントタブにはウィジェットが表示されます。

自分でウィジェットを作る場合には、ウィジェットのレイアウトとコンテンツを、ウィジェット内容が展開された形式のフォームに書き入れます。
バックアップのために Edit HTML タブからダウンロードするコードは、この展開されたコードになります。
普通、このモードでウィジェットを操作する必要はないと思います。ページエレメントタブからそれらを変更するだけの方が簡単なので。

この b:widget タグも動的ページ生成の際に div 要素に書き換えられます（id はそのまま）。そのため id='myList' な b:widget 要素に CSS を適用したい場合は、div.myList を指定したスタイルを書くようにしましょう。


（おわりに）

テンプレートタグを新しいものに書き換えないと、ぐらいにしか考えていなかったんですが、テンプレートの仕組み自体が大きく変わっているんですね。ブログの部品のフォーマットがはっきりしている分、部品を導入したりはずしたりということが随分楽になりそうな予感。もちろん部品を作る方は、新しいタグの仕組みをしっかり覚えないといけませんが。

Blogger beta で用いる独自のウィジェット作成に関しては、ウィジェットタグの詳細 Widget Tags for Layouts や、ウィジェットで参照するデータ Layouts Data Tags も理解しておかないといけないと思うので、また日本語にしてこのブログで公開することにします。需要があるかはわかりませんが…（汗）。