クリボウの Blogger Tips

（はじめに）

今回は予告していたとおり、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 も理解しておかないといけないと思うので、また日本語にしてこのブログで公開することにします。需要があるかはわかりませんが…（汗）。