(はじめに)
今回は
予告していたとおり、Blogger beta のテンプレート、特にウィジェットタグの具体的な書き方です。といっても例のごとく、自分の勉強のために訳した
Blogger Help: Widget Tags for Layouts の内容を公開するだけなんですが。正式にヘルプが日本語化されたら、そちらを必ず確認してくださいね。
ウィジェットタグ
Expand Widget モードの Edit HTML ページで、ウィジェットに含むことができるものについて、この記事では説明します。
まず最初に、ウィジェットの終了タグを加えます。
<b:widget (いくつかの属性)/>
を
<b:widget (いくつかの属性)>
</b:widget>
とします。
この開始タグと終了タグの間に、そのウィジェット特有の内容を書き入れます。この二つのタグの間に置くことができるものについて、以下に解説していきます。
インクルード
ウィジェットの内容にはインクルーダブル領域が含まれます。
<b:includable id='main' var='thiswidget'>
(好きな内容)
</b:includable>
この 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/>
一つ目は最も簡単な例ですが、ウィジェットのタイトルを表示するものです。ウィジェットはたいていタイトルを持っているので、ほとんどのウィジェットで利用することができます。
2番目の例は、特定のコンポーネントを指定した少し複雑な例です。たとえば、プロフィールウィジェットにおける文脈では、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'>
その投稿が2つ以上のコメントを持っていたら。
(おわりに)
Blogger beta では、インクルードやループ、条件分岐と、テンプレートで表現できることが格段に広がっているんですね。これまで以上にいろんなことができそうな予感。クリボウも何か公開すると思いますが、みなさんも独自のウィジェットのアイデアがあったらぜひ教えて下さいね。