Bloggerのウィジェットについて調べてみました

公開日 : 最終更新日 :

カテゴリー :

Bloggerの構造を調べてみました」の続きになります。
前回は<b:widget>タグの属性やどのように使えばいいかを紹介しました。今回は、<b:widget>タグの中身がどのようになっているかを紹介します。Bloggerのウィジェットをレイアウト画面で作成したりする場合は特に中身をみる必要はありませんが、どのようなことが書かれているかを知っておいてもいいかもしれません。Bloggerの場合、外部からブログのレイアウトに追加できるウィジェットはもちろんのこと、記事の表示する部分もウィジェットとしてできているからです。

インクルード

まずは、インクルードをする<b:includable>タグから紹介します。このタグは、ウィジェットで表示するコンテンツを記述するタグです。必要な情報のほとんどはこのタグの中に記述されています。<b:includable>タグの属性は以下の通りです。

  • id : (必須) incluable固有の識別子(名前)
  • var : (オプション) incluable固有の識別子(名前)。varに記述されているデータを参照します。

ウィジェットには、「id=’main’」という<b:includable>タグが必ず1つ必要になります。「id=’main’」以外のidを指定した<b:includable>タグを作成することも出来ますが、この場合の<includable>タグは自動的に表示されません。これを表示させるには、<b:include>タグを使用します。<b:include>タグの属性は以下の通りです。

  • name : (必須) 参照したい<b:includable>タグのIDの識別子(名前)。ウィジェット内の<b:includable>タグのIDと一致する必要があります。
  • data : (オプション) includableに渡されるデータもしくは出力したいデータ。includableのvar属性の値になります。

<b:includable>タグと<b:include>タグの関係を説明します。わかりやすくするために以下を見てください。

上のコードの動きは、<b:includable id=’main’>から「i」と呼ばれる投稿が渡され、渡された投稿が<b:includable id=’post’ var=’p’>で変数「p」として参照されてタイトルが表示されます。なので<b:includable id=’post’ var=’p’>はプログラミングで言えば関数みたいな動きになります。<b:includable id=’post’ var=’p’>は、<b:include name=’post’ data=’i’ />で複数箇所に参照するような形で使いまわすことが出来ます。

データ

<data:>タグは、実際のコンテンツを表示するために重要になるタグです。このタグを使ってBloggerにアクセスしてデータを取得します。簡単な例は以下の通りです。

<data:title/>
<data:photo.url/>

<data:title/>は、単純にタイトルを取得します。<data:photo.url/>は、画像そのものではなく、画像のurlを取得します。<data:>タグで取得できるデータの種類は幅広いのでざっくりとデータのマスターを紹介します。

ウィジェットデータ 用途
Globally Available Data ブログページ全体に使えるデータマスター(title, url など) <data:blog.title/>
Page Header ブログページのヘッダーで使用しているデータマスター(title, description のみ) <data:title/> , <data:description/>
Blog Posts ブログ記事本体で使用しているデータマスター(feedLinks, posts など) <data:feedLinks.url/> など
Blog Archives ブログアーカイブで使用しているデータマスター(title, style など) <data:title/>など
Profile Widget プロフィールウィジェットで使用しているデータマスター(title, photo など) <data:photo.url/> など
Text/HTML/JavaScript Widget テキストウィジェットやHTMLウィジェットで使用しているデータマスター(title, content のみ) <data:title/>, <data:content/>
Feed Widget フィードウィジェットで使用してるデータマスター(title, feedUrl のみ) <data:title/>, <data:feedUrl/>
Picture ピクチャーウィジェットで使用しているデータマスター(title, sourceUrl など) <data:title/> など
Labels ラベルウィジェットで使用しているデータマスター(title, labels のみ) <data:title/>, <data:labels.url/> など
List リストウィジェットで使用しているデータマスター(title, items のみ) <data:title/>, <data:items/>
Link List リンクリストウィジェットで使用しているデータマスター(title, links のみ) <data:title/>, <data:links.name/> など
Logo ロゴウィジェットで使用しているデータマスター(fullButton のみ) <data:fullButton/>

<data:>タグについての詳細は今度記事にしたいと思います。

ループ

<b:loop>タグは一般的なループとして動かすことが出来ます。プログラミングの初歩の初歩なので意味は端折ります。<b:loop>タグの使い方は以下の通りです。

<b:loop var='5' values='set-of-data'>
・・・・・
</b:loop>

if/else

<b:if>タグ、<b:else>タグは一般的なif/else文として動かすことが出来ます。プログラミングの初歩の初歩なので意味は端折ります。<b:if>タグの使い方は以下の通りです。

<b:if cond='sample1'>
  ・・・・
<b:else />
  ・・・・
</b:if>

使用例

これらをざっくりと使ったウィジェットの使用例が以下の通りです。ブログアーカイブウィジェットのコードです。

参考

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>