ビデオチュートリアル：自作 iGoogle ガジェットをはてなダイアリーに貼付ける

2007-09-19 (水) 10:29
video_tutorial

前回のビデオチュートリアルで、自作 Flash ブログパーツを iGoogle ガジェット化しました。

今回は、はてなダイアリーが iGoogle ガジェットを貼れることを活かして、はてなダイアリーにできるだけシンプルに自作 Flash ブログパーツを貼付ける方法を実演しています。

今回ご紹介している内容、および、はてなダイアリー用貼付けコードのテンプレートは：

「iGoogle ガジェットを可能な限りシンプルに「はてなダイアリー」に貼る方法 : メディアテクノロジーラボ　ブログ」

にまとめておりますので、そちらもあわせてお読みくださいませ。

で、今回のビデオは：

「trick7.com blog: 自作 iGoogle ガジェットをはてなダイアリーに貼付ける」（11分3秒）

にて、だいぶグダグダとやっております。

で、上記作業を済ませば、自作 Flash ブログパーツを「はてなダイアリー」ユーザーさんにも使ってもらえるようになるわけです。僕の場合：

はてなダイアリー用「コジマヨシーケンサー」貼付けコード：

<script src="http://gmodules.com/ig/ifr?url=http://www.trick7.com/yosequencer/yosequencer.xml&synd=open&w=160&h=225&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>

はてなダイアリー用「ジョネレーター」貼付けコード（こちらは xml をサイトのルートに置いた例）：

<script src="http://gmodules.com/ig/ifr?url=http://www.trick7.com/jonerator.xml&synd=open&w=240&h=340&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>

という感じですね。興味ありましたら貼付けて下さい。
（Windows:IE6, FireFox2 / MacOSX:Safari, FireFox2 にて表示確認）

Google Japan Blog の方もどんどん更新されていますのでどうぞ。FLASHer と iGoogle ガジェットの親和性の高さに、逆に申し訳なく感じている僕のコメントが見られます：

以上で、iGoogle ガジェットに関する一連のエントリを締めくくろうと思っております。それでは iGoogle ガジェットコンテストでお会いしましょう。僕はもっと「便利ツール」っぽいガジェットを作ろうと思ってます。

追記：あれ！もっとシンプルに貼れるの？

なんとか貼付けコードから CSS を設定しようと悪戦苦闘するメモ：

メモ１：
埋め込みコードの中で、JavaScript から CSS を操作して：

.ig_reset, .ig_reset{
border:0;
padding:0;
background-color:#ffffff;
}

みたいな設定したいのだけど、こういう記事を拝見しても DOM が理解できていないので、要勉強です。

メモ２：
「CSS + JavaScript Tips」の資料を拝見しました。頑張ってみます。

メモ３：
こちらのサイトを参考に：

<script type="text/javascript">
// stylesheet object
var ss = document.styleSheets[0];
if (document.all) {
// IE
ss.addRule(".ig_reset, .ig_reset td", "background-color:0xff0000");
} else {
// FireFox
ss.insertRule(".ig_reset, .ig_reset {background-color:0xff0000}", ss.cssRules.length);
}
</script>

してみたけど駄目だった。（サイト全体の css でガジェット部分のボーダー＆背景色を消しているので、試しに JS からガジェット背景色を赤にしようと試みているのですが。。）