unoh.github.com

ブログパーツ貼り付けタグのまとめ＋Googleガジェット＠はてな

Fri Aug 17 07:12:02 -0700 2007

こんばんわ、isogawaです。

ウェブサービスのブログパーツを提供しようと思ったときに、ブログサービスによっては利用可能なHTMLタグが制限されていて、ブログパーツの貼り付けタグをどういったものにするべきか悩む場合があります。そこでいくつかのブログサービスについて、ブログパーツ類の扱いがどうなっているかサクっと調べてみました。大雑把な調査なので、間違ってたりするかもしれません。お気づきの点があれば訂正させていただきますので、お気軽に突っ込んでいただければ幸いです。

Flash貼り付け用HTMLタグの利用可否

まずは、ブログパーツの多くで利用されているFlashオブジェクトを表示するHTMLタグの選択肢としては、OBJECT/EMBED、SCRIPT、そしてIFRAMEがあると思いますが、以下はこれらのタグが各ブログサービスで利用できるかどうか（裏技による例外は除く）の一覧表です。

ブログ ちなみに文字コード OBJECT/EMBED SCRIPT IFRAME
アメブロ UTF-8 × × ×
ウェブリブログ Shift_JIS ○ ○ ○
エキサイトブログ UTF-8 × × ×
FC2ブログ EUC-JP ○ ○ ○
gooブログ EUC-JP × × ×
ココログ UTF-8 ○ ○ ○
Seesaaブログ Shift_JIS ○ ○ ○
JUGEM EUC-JP ○ ○ ○
So-net blog UTF-8 ○ ○ ○
TypePadファミリー UTF-8 ○ ○ ○
ドリコム Shift_JIS ○ ○ ○
はてなダイアリー EUC-JP △ △ △
Yahoo!ブログ UTF-8 △ × ×
ヤプログ Shift_JIS ○ ○ ○
livedoorブログ EUC-JP ○ ○ ○
楽天広場 EUC-JP × × ×

ごらんの通りこれらのタグは、一部例外を除き少なくとも上表にあるブログサービスでは、すべてOKかすべてNGかのどちらかで、つまりこれらのひとつがNGなら他のタグもNGであるようなので、どのタグを選択するか、ブログサービス側の制限を考慮して悩む必要はないようです。

そうするとFlashオブジェクトの表示は、「Internet ExplorerでのActiveXコントロールのアクティブ化問題」を考慮するなら、OBJECTタグを直接記述するのは避けて、JavaScriptで行ったほうがよいのかなと。

全般的な留意点

貼り付けコードはブログの投稿設定などに影響されないように配慮しておく必要があります。特に、サイドバーだけではなく記事本文中にも貼り付けられることを想定している場合は、以下の設定は、殆どのブログサービスで記事本文の投稿についてはデフォルトでONの筈なので、こうした設定に影響を受けないものであるか要確認です。

また、稀な例ですが、記事本文ではタグ自体はOKでも属性がNGというブログサービスがありました（入力は可能で保存もされていますが、ウェブブラウザへの出力時に除去されます）。どうやらここでは、ID属性はとにかくNGのようなので、例えば、貼り付けコード中にID属性を付けたDIV要素があって、それをJavaScriptから操作するといったコードは正常に動作しません。

以下、特殊な対応が必要なケース。

Yahoo!ブログ

HTMLタグとしてのOBJECT/EMBEDは使用できませんが、記事本文の投稿に「Wiki文法」を使用する場合は、以下のような記述でFlashオブジェクトを挿入できます（サイドバーでは利用できません）。

[[item(http://i.yimg.jp/i/topics/blogparts/topics.swf,222,240)]]

Flashオブジェクトを挿入する際の記述は、以前は非公式のembed記法が知られていましたが、現在は新たに追加された公式のitem記法を使用します（embed記法も引き続き使用可能です）。

Wiki文法を記述する場合は、記事の新規投稿時に「Wiki文法使用」をチェックしておく必要があります。このチェックを付けずに投稿してしまった記事は、以降の編集時にWiki文法を使用することはできません。またWiki文法を使用する記事で、HTMLタグを併用することはできません。

ココログ and TypePadファミリー

ココログや、typepad.jp及びTypePad ASPを利用した各ブログサービス、それにtypepad.comでは、以下の例のようなHTMLフォームで貼り付けコードをPOSTすることで、各ブログサービスの管理画面でブログパーツ（TypePadでは「ウィジェット」と呼ばれます）が簡単に設定できる仕組みが用意されています。

<form action="https://www.typepad.jp/t/app/weblog/design/widgets" method="post">
  <div>
    <input type="hidden" name="service_key"  value="(ウィジェットAPI Key)" />
    <input type="hidden" name="long_name"    value="サンプルウィジェット" />
    <input type="hidden" name="short_name"   value="widget_example" />
    <input type="hidden" name="service_name" value="example_org" />
    <input type="hidden" name="service_url"  value="http://www.example.org/" />
    <input type="hidden" name="return_url"   value="http://www.example.org/widgets/return-page.html" />
    <input type="hidden" name="content"      value="&lt;script type=&quot;text/javascript&quot; src=&quot;http://www.example.org/widgets/example.js&quot;&gt;&lt;/script&gt;" />
    <input type="submit" value="ウィジェットを追加する" />
  </div>
</form>

ブログサービスによってPOST先のURLが異なる場合があるものの、ウィジェットAPI Keyも含めてそれ以外は基本的に同じなので、合計20近くのブログサービスにまとめて対応できます（ただしTypePad ASPを利用したすべてのサービスがこの仕組みをサポートしているわけではありません）。

はてなダイアリー and Googleガジェット

自分のはてなダイアリーにブログパーツを設置できるようになりました、ということで、はてなが許可したものについては、従来禁止されていたHTMLタグがそのまま挿入できるようになりました。そしてその「はてなが許可したもの」の中にGoogleガジェットが含まれているため、事実上あらゆブログパーツが利用できるようになっています。

既存のブログパーツをGoogleガジェット化すると、はてなダイアリーはもちろん、iGoogleやGoogleデスクトップなどにも貼り付けることができるようになります。ブログパーツのガジェット化は（凝ったことをしなければ）非常に簡単なので、ガジェットをまだ提供していなければ、この機会に検討するといいかもしれません。

Googleガジェットの基本

既存のブログパーツをGoogleガジェット化するには、以下のような内容のXMLを作成します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="(ブログパーツのタイトル)" />
  <Content type="html">
    (CDATAセクションに納めた、またはエスケープ処理を施したブログパーツの貼り付けコード)
  </Content>
</Module>

これはガジェットXMLの最小構成ですが、多くのブログパーツはこれだけでイケると思います。ただしGoogleガジェットでは、その本体はIFRAME内に表示されるので、ブログパーツにリンクが設定してある場合、リンクターゲットを変更する必要があるかもしれません。

このXMLをインターネットに公開すればガジェットの提供準備は完了です。

iGoogleなどではこのXMLのURLを指定してガジェットを追加します。はてなダイアリーなど、Google以外のウェブページで利用する（Googleでは「シンジケーション」と呼ばれます）には、XMLのURLとその他のパラメータをクエリーストリングに含めた、gmodules.comのURLをSRC属性値に指定したSCRIPTタグを貼り付けます。

ガジェットXMLのロケーションは任意ですが、このXMLを取得しにやってくるのはエンドユーザのウェブブラウザではなく、Google Readerなどと同じFeedfetcherロボットなので、XMLはこのロボットがアクセス可能なロケーションに配置する必要があります。つまり、localhostや認証が必要なURLはNGです。なお、Feedfetcherはrobots.txtを無視するので、robots.txtによるアクセス制限については配慮する必要はありません。

ちなみにFeedfetcherロボットのUser-Agentは以下です。

FeedFetcher-Google; (+http://www.google.com/feedfetcher.html)

Googleガジェットの貼り付けコード

はてなダイアリーなどへのGoogleガジェットの貼り付けコードは以下のようなものになりますが、はてなダイアリーに貼り付ける場合、コードの内容には注意が必要です。

<script src="http://gmodules.com/ig/ifr?url=(XMLのURL)
&amp;(その他のクエリーパラメータ)"></script>

はてなダイアリーでは、貼り付けられたコードがGoogleガジェットのものであるか検証が行われますが、現時点ではこの検証は非常に厳格（？）です。

上の例では、SCRIPT要素にTYPE属性が欠落していますが、これを付け足したコードは、現時点ではGoogleガジェットのものとはみなしてくれません。また、クエリーストリングに指定するパラメータは下表の通りですが、これがこの順番通りに並んでいないと、やはりNGとなります。パラメータが足りなくてもダメです。

キー 説明
url ガジェットXMLのURL。この値はエンコードしてはいけませんマジで。エンコードされてると、現時点のはてなダイアリーではGoogleガジェットのコードとはみなしてくれません。
up_なんとか この使い途は後述します。このパラメータは無しでもOKです。up_なんとかを複数指定する場合はここに（「url」と「synd」の間に）並べます。
synd 「open」で固定。
w ガジェットの本体を表示するIFRAME要素の幅（ピクセル値）。本来は数値の他に「auto」を指定して、幅を親要素のものに揃えられますが、これが「auto」だと、現時点のはてなダイアリーではGoogleガジェットのコードとはみなしてくれません。
h ガジェットの本体を表示するIFRAME要素の高さ（ピクセル値）。
title ガジェットの上部に表示されるガジェットのタイトル。日本語文字が含まれる場合、現時点のはてなダイアリーではIE6で文字化けます。
border ガジェット全体を囲む外枠のデザイン指定。指定方法はこちら。
output ガジェットXMLのContent要素内にJavaScriptコードが含まれる場合は「js」。そうでなければ「html」。

この、現時点でのはてなダイアリーの貼り付けコードの検証は、ガジェットディレクトリから「自分のウェブページに追加」ボタンをクリックして遷移するページ（http://gmodules.com/ig/creator?～）で取得する貼り付けコードの構成に則ったものでないとダメ、という仕様のようです。

IFRAMEの横幅に「auto」を指定できないのは、単純にこのページの「幅」入力欄に数値以外は入力できない（正確に言うと入力はできますが「NaN」と表示されますｗ）ためだと思われ、同様にTYPE属性が欠落していなければならないのも、XMLのURLをエンコードしてはいけないのも、単純にここで表示される貼り付けコードがそうなっているからなのだろうなと。なので、「ここでscriptは使用出来ません」とか怒られた場合は、ここのコードと見比べてみるのが吉です。

ガジェットの動作を動的に変更させる

ブログパーツによっては、設定に応じてその動作を変更する必要がある場合に、あらかじめその設定値を貼り付けコードに含めている場合があると思います。しかしGoogleガジェットではXMLをホスティングする必要があるため、同じ方法は採り難く、別の仕組みが必要になります。

もちろんXMLをホスティングするサーバが、XMLの内容を動的に出力してもよいのですが、Googleガジェット自体にこうした仕組みが用意されており、これを利用すればXMLは静的なもので済ませられます。

以下はこの機能を利用した至極簡単なガジェットのXMLです。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Hello __UP_myname__" />
  <UserPref name="myname" display_name="Name" required="true" />
  <Content type="html"><![CDATA[
    <div id="hello__MODULE_ID__"></div>
    <script type="text/javascript">
    var prefs = new _IG_Prefs(__MODULE_ID__);
    _gel("hello__MODULE_ID__").appendChild(
      document.createTextNode(
        "Hello " + prefs.getString("myname")
      )
    );
    </script>
  ]]></Content>
</Module>

iGoogleにこのガジェットを追加すると、「Name」入力欄と、「ガジェットは必要な設定がすべて完了するまで表示できません」というメッセージが表示されます。名前を入力すると「Hello (入力した名前)」と表示されます。

はてなダイアリーなどでは、貼り付けタグ中のクエリーストリングに、「up_myname=(表示したい名前)」を追加すると、「Hello (表示したい名前)」と表示されます。

ガジェットXMLのUserPref要素は、ユーザの設定値を指定できるようにするためのもので、そのname属性値に合致する入力値やクエリーパラメータ（「up_(name属性値)」キーの値）が格納されます。その値は、上の例にあるように、「__UP_(name属性値)__」という記述やGoogleガジェットのJavaScript ライブラリを使って取得できます。これを利用して、ガジェットの動作を動的に変更することができるというわけです。

ガジェット開発のメモ

UserPref要素を利用した設定変更時の動作確認は、iGoogleでやったほうがいいっぽい。そしてiGoogleでの動作確認ではデベロッパー ガジェットはマストアイテム。

いったん取得されたガジェットXMLは1～2時間程度のサイクルでキャッシュされます。開発時にキャッシュを無効にする方法は以下。