> テンプレート | 資料 >
Blogger beta のウィジェットタグ
この開始タグと終了タグの間に、そのウィジェット特有の内容を書き入れます。この二つのタグの間に置くことができるものについて、以下に解説していきます。
インクルード
ウィジェットの内容にはインクルーダブル領域が含まれます。
この b:includable タグの属性は次のとおり。
この b:include タグの属性は次のとおり。
別のところで複数回繰り返したいコードがある場合、インクルードは非常に役に立ちます。あなたは一度だけコードを書いて b:includable にそれを書き、あなたが表示させたいところに b:include を含めて下さい。もしその必要がなければ、main インクルーダブルタグを一つだけを忠実に使って、ほかの事は考えなくてもいいです。（main インクルーダブルには自動的に
データ
データタグは、実際のブログの全ての内容を表す、最も重要なタグです。このタグの例がこちら。
一つ目は最も簡単な例ですが、ウィジェットのタイトルを表示するものです。ウィジェットはたいていタイトルを持っているので、ほとんどのウィジェットで利用することができます。
２番目の例は、特定のコンポーネントを指定した少し複雑な例です。たとえば、プロフィールウィジェットにおける文脈では、photo は url や height、width の値を持っています。 . を使った記法は、他のものから URL を得るのではなく、この photo の URL が必要であることを示します。
Blogger beta のテンプレートには、データタグでアクセスできる多くのデータがありますが、どのウィジェットで使うかによって利用できるデータが異なります。データを見つけるためには、このリストを確認してください。
ループ
b:loop タグを使うと、複数回同じセクションを繰り返すことが出来ます。これは投稿やコメント、ラベルなどのリストを表示するために、最も一般的に使われています。ループを使用するための基本的な形式はこちらです。
ID 部分はどんな名前でもいいですが、ループされる一回一回の内容で、リストの項目を表すために利用されます。一般的には慣例として i と名づけることになっています。あなたがデータのために指定したデータセットは、例えばブログポストウィジェット中の posts のような、データタグの記事で紹介されているデータの場合もあります。
以下のようなコードは各投稿を通じて、ヘッダータグで囲まれたそれぞれのタイトルをループします。
各投稿のタイトルを得るために、i がどのように順番に各投稿のデータを表していくかに注意してください。
条件分岐 If / Else
内容をある場所では表示し、またある場所では表示しないように b:if と b:else タグを使うことができます。このタグの一般的な形式はこちら。
b:else タグはオプションです。これがない場合、b:if で示された内容を表示するかしないかになります。どちらにしても終了タグ
（おわりに）
Blogger beta では、インクルードやループ、条件分岐と、テンプレートで表現できることが格段に広がっているんですね。これまで以上にいろんなことができそうな予感。クリボウも何か公開すると思いますが、みなさんも独自のウィジェットのアイデアがあったらぜひ教えて下さいね。
スポンサードリンク：
お願い：
（はじめに）
今回は予告していたとおり、Blogger beta のテンプレート、特にウィジェットタグの具体的な書き方です。といっても例のごとく、自分の勉強のために訳した Blogger Help: Widget Tags for Layouts の内容を公開するだけなんですが。正式にヘルプが日本語化されたら、そちらを必ず確認してくださいね。
ウィジェットタグ
Expand Widget モードの Edit HTML ページで、ウィジェットに含むことができるものについて、この記事では説明します。
まず最初に、ウィジェットの終了タグを加えます。
<b:widget （いくつかの属性）/>
を
<b:widget （いくつかの属性）>
</b:widget>
とします。</b:widget>
この開始タグと終了タグの間に、そのウィジェット特有の内容を書き入れます。この二つのタグの間に置くことができるものについて、以下に解説していきます。
インクルード
ウィジェットの内容にはインクルーダブル領域が含まれます。
<b:includable id='main' var='thiswidget'>
（好きな内容）
</b:includable>
（好きな内容）
</b:includable>
この b:includable タグの属性は次のとおり。
- id … （必須）英数字によるユニークな名前。
- var … （オプション）この領域の中で参照するデータの ID （英数字）。
この b:include タグの属性は次のとおり。
- name … （必須）英数字でつけた名前。これは同じウィジェット中のインクルーダブルタグの ID と一致しなければなりません。
- data … （オプション）インクルードダブルに渡すためのデータの表現。これがインクルーダブルタグの 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>
<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 ということですね。
上の例は、JavaScript 的にはこんな関係になるかと。
うーん、伝わるかな…。
ここら辺の内容は難解なので少しヒントを。関数を定義するのが 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>
<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;
}
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>
（繰り返したい内容）
</b:loop>
ID 部分はどんな名前でもいいですが、ループされる一回一回の内容で、リストの項目を表すために利用されます。一般的には慣例として i と名づけることになっています。あなたがデータのために指定したデータセットは、例えばブログポストウィジェット中の posts のような、データタグの記事で紹介されているデータの場合もあります。
以下のようなコードは各投稿を通じて、ヘッダータグで囲まれたそれぞれのタイトルをループします。
<b:loop var='i' values='data:posts'>
<h2><data:i.title/></h2>
</b:loop>
<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: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 では、インクルードやループ、条件分岐と、テンプレートで表現できることが格段に広がっているんですね。これまで以上にいろんなことができそうな予感。クリボウも何か公開すると思いますが、みなさんも独自のウィジェットのアイデアがあったらぜひ教えて下さいね。
スポンサードリンク：
「この記事役に立った！」と思ったら、ぜひフィード登録をお願いします。 
なんだか楽しみになってきましたよ！
ReplyDeleteうひゃ?、ご苦労様です！
ReplyDeleteIf構文やループのコマンドがあるなんて、プログラムが組めちゃいますね（やりませんけど(笑))。
＞ H & A さん
ReplyDelete面白そうですよね。いろんなことができそうなんですが、具体的なアイデアが浮かびません。また何かアイデアがあれば教えて下さいね。
＞ちゃめさん
テンプレートの書式というより、たしかに新しいプログラムという感じですね。Blogger Buzz の new language という記載の意味がやっとわかりました。
勉強させていただいております。ところで、突然ですいませんが、ご質問をさせてください。
ReplyDeleteblog-contents
とはなんなのでしょう。
こちらにリンクの張ってあった
http://at-aka.blogspot.com/2006/11/blogger_05.html
をみて気になりました。
cssのidセレクタのようでありますが、いったいどこに定義されているのか、しらべてもわかりませんでした。
Freechip melalui Dealer Kiu-Kiu Online Elista Region Capital Rusia Situs www.pokerrusia.us Melalui BPD Sumsel Babel Syariah dengan Kode Bank 120.
ReplyDelete