ブログパーツの基本的な仕組み

ブログパーツの基本的な仕組み

　まずは、ブログパーツを表示するまでの基本的な仕組みを見てみましょう。今回はサンプルとしてブログのサイドバーへ画像が表示される、シンプルなブログパーツを作ります。ここで準備するファイルは、以下の3つです。

1.ブログパーツ画像ファイル
2.ブログ貼（は）り付け用のHTMLタグ
3.ブログパーツ表示用のJavaScriptファイル

　ブログパーツを公開する際には、「2.ブログ貼（は）り付け用のHTMLタグ」をユーザーへ配布し、ブログのテンプレートなどへ追加してもらいます。このタグから、サーバー上にある「3.ブログパーツ表示用のJavaScript」が呼び出され、「1.ブログパーツ画像ファイル」がブログ上に表示される仕組みになります。

ブログパーツを作ってみよう

　では、実際に簡単なブログパーツを作ってみましょう。

　最初に、「1.ブログパーツ画像ファイル」を作ります。ファイルの形式は、jpg、gif、pngなどのブラウザで表示できる形式のもので作成してください。また、作成する画像の大きさについては、ブログのデザインによりサイドバーの横幅もバラバラですが、幅160ピクセル以内に収めて作ることで、既存のブログサービスのほとんどをカバーすることができます。

　次に、「2.ブログ貼（は）り付け用のHTMLタグ」を作ります。このHTMLから、ブログパーツを表示するためのJavaScriptファイルを呼び出します。ポイントとしては、このタグをユーザーがブログにコピー＆ペーストすることになりますので、できるだけシンプルで短くなるように心がけましょう。



　次に、「3.ブログパーツ表示用のJavaScriptファイル」を作成します。これは、上記のブログ上に貼（は）り付けられたHTMLから呼び出されるJavaScriptファイルです。以下のようにJavaScriptのdocument.writeを使って、HTMLタグを書き出します。

function samplePartsShow(){document.write("");}
samplePartsShow();

　これで、すべてのファイル準備ができました。「1.ブログパーツ画像ファイル」の画像と「3.ブログパーツ表示用のJavaScriptファイル」のJavaScriptファイルをサーバーへアップした後に、ブログのサイドバーのテンプレートに「2.ブログ貼（は）り付け用のHTMLタグ」を配置すると、ブログのサイドバーに画像が表示されます。

　今回は、画像を表示するサンプルを使用しましたが、Flashを使ったブログパーツの場合も、JavaScriptを使って、HTML上にソースを書き出す仕組みは同じです。また、サンプルファイルをダウンロードできますので、ぜひご参照ください（823_1.zip/4.12 KB）。

　次回は、Flashで作ったコンテンツをサイドバーへ表示するブログパーツの作り方を紹介します。