ブログパーツの作り方まとめ

　いいめもプロジェクト久しぶりのリリースとして、【いいめもウォーキング】というのを開発中です。

　携帯電話からの情報蓄積にこだわってきたいいめもとしては、自動でメールを送ってくれる仕組みはとても興味深く見ています。

F906i のウォーキングチェッカー(万歩計)を使ってみる : 僕は発展途上技術者


とはいえ、歩数の管理は携帯だけで完結していますので、じゃあブログパーツにしますか、ということになりました。

テケトーに引数を受け取ってHTMLを生成するCGIは書けますが、ブログパーツってどうするの？と思って調べながら作ったので、簡単にまとめです。

ブログパーツの仕組み

　たいていのブログでは、

<script src="hogehoge.js"></script>

というようなコードを書くことで、外部にあるJavaScriptを実行することができます。

<script src="http://example.com/hogehoge.js"></script>

と書けば、他のサーバにあるJavaScriptを実行することもできます。

すると、上のhogehoge.jsが

document.write('いいめもウォーキング');

となっていれば、結局、

<script src="http://example.com/hogehoge.js"></script>

の位置に「いいめもウォーキング」が差し込まれることになるわけです。

つまり、HTMLとCSSでブログパーツを書いて、それをdocument.writeで出してあげればいいことになります。

ユーザーごとに表示を変える

　このままだと、すべてのユーザーが同じコードを表示することになってしまいます。

ブログパーツとしては、自分のサイトの情報を表示してもらいたい。

そのためには、何らかの形で、ユーザーIDを渡してもらう必要があります。

そこで、PHPなりRubyなりPerlなり、言語はなんだっていいので、引数でユーザーIDを受け取って、そのユーザー向けのブログパーツコードを返すCGIを用意すれば、ユーザーごとに違うデータを返すことができるようになります。

「それって簡単に他人の情報を見られちゃうよね？認証とかなくていいの？」と一瞬思ったのですけど、考えてみたらブログ上に表示された時点でだれでも見られる情報ですから、認証は不要です。

ちなみにいいめもウォーキングでは、あえてCGIを使いませんでした

サーバー上に、各ユーザー向けのブログパーツがずらりと置いてあります。



hogehoge-000001.js

hogehoge-000002.js

hogehoge-000003.js

：

ユーザーさんには、hogehoge-(ユーザーID).jsを呼び出してもらいます。

動的に生成しなくても、ユーザーさんから歩数計データが送られてきたタイミングでブログパーツが丸ごと更新される、ので、あとは静的データで十分、という考え方です。

キャッシュとか考えなくていいので、とっても楽ちんですが、デザインが変わった際、動的にデータが差し替わらないのが難点といえば難点ですね。

文字コードについて

　当初、文字化けするので文字コードごとにブログパーツを用意していたのですが。

<script type="text/javascript" charset="UTF-8" src="http://example.com/hogehoge.js"></script>

という具合にして文字コードを指定してあげることができるみたいです。こうすると、一つのコードでたいていのブログに対応させることができます。

今の悩み

　ブログによってサイドバーのサイズが違うのです。



ブログパーツの作り方：横幅は何ピクセル？:WebClip – ウェブのニュースと Second Life (セカンドライフ) – CNET Japan
というような話もあって、実際千差万別。

こちらは小サイズが横幅160ピクセル。大サイズ横幅424がピクセル。

このように複数選べると理想的。もし企業でやるならこのほうがいいかもしれない。ブログの本文でコメントつきで紹介してもらうときなど、大サイズを掲載してもらえるかもしれない。

ショート/トール/グランデ(S/M/L)とサイズ別のブログパーツを生成することは難しくないですが、そうするしかないのかなぁ。何かもうちょっといい手はないものか。