iGoogle ガジェットを可能な限りシンプルに「はてなダイアリー」に貼る方法
前回のエントリーで、Flash ブログパーツを Google ユニバーサルガジェットにすることができました。
今回は、その ガジェットを、iGoogle 以外にも貼付けてみましょう。この作業を「シンジケーション」と言います。通常 Flash ブログパーツが貼れないブログサービスでも iGoogle ガジェットの貼付けを許可している「はてなダイアリー」に貼れるようになったのは嬉しいですね。
ただ、はてなダイアリー特有の挙動がありますので、今回は表題にもある通り、ブログパーツ提供者側が「できるだけオリジナルのブログパーツの状態を目指した貼付けコード」を提供するための Tips をまとめてみました。
いきなりですが、シンジケーション貼付け用テンプレートは以下になります。
<script src="http://gmodules.com/ig/ifr?url=http://www.trick7.com/piccolee/piccolee.xml&synd=open&w=160&h=130&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>
上記コードをブログに貼付けると以下のように表示されます。
はてなダイアリーのサイドバーに貼付けた時は下の画像のような感じです。きちんと貼れていますね。
わりとシンプルに仕上がっているのではないでしょうか？ポイントは：
- "url=" 以降には、Google ユニバーサルガジェット化の時に使った xml ファイルのパスを設定します。幅と高さの部分もブログパーツ swf サイズに設定しておいて下さい。
- 「title=」と、タイトル設定を空にして、タイトル非表示にしています。タイトルを表示させる設定にすると、ブログパーツの上にテキストでタイトルが入り、リンクも設定できたりするのですが、Windows+IE環境だと、日本語タイトルは文字化けしてしまうので、シンプルさを求めて非表示にしました。尚、ここで言及しているのは、上記シンジケーション用の title 属性についての話です。xml内に記述している title 属性とは別物ですので、xmlファイルをいじる必要はありません。
- ガジェットの border ラインを 0px に設定し、非表示にしています。
- 前回のエントリーで書きましたが、xmlファイル内で、Windows + IE の余白バグの対応をしておいたので、IE でもきちんと表示されるはずです。
- 最大の注意点は、サイドバーの幅を超えるサイズのブログパーツを貼らないこと！Windows + IE では表示されないし、Mac + FireFox 等でもサイズをはみ出た部分の Flash は描画されません。画面をスクロールすると再描画されるのですが、とにかくバグってる感満点なので、パーツの横幅は抑えましょう！
はてなダイアリーサイドバーへの表示は、上記作業だけできちんと表示されると思います。
ところが、上記ガジェット貼付けコードを、ブログエントリの部分にペーストした状態では、
（キャプチャ画像です）
のように、空タイトルやフッター周りの「空テーブルのボーダーライン」が表示されてしまっています。
今回は「できるだけオリジナルの Flash ブログパーツに近い状態」に近づけたいということで、対応としては、はてなダイアリーのスタイルシートに：
div.section table.ig_reset, div.section table.ig_reset td {
border:0;
padding:0;
}
の記述を追加してやると、
（キャプチャ画像です）
のように、スッキリと表示させることができます。
ブログパーツ制作者さんは、はてなダイアリーユーザーさんのためにも、この「Google ユニバーサルガジェットとしての貼付けコード」を用意しておくとよいのではないでしょうか。
参考記事：
「てっく煮ブログ - はてなダイアリーに Flash を埋め込むガジェット」
「ウノウラボ Unoh Labs: ブログパーツ貼り付けタグのまとめ＋Googleガジェット＠はてな」
