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

前回のビデオチュートリアルで、自作 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 を設定しようと悪戦苦闘するメモ:

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

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

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

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

メモ3:
こちらのサイトを参考に:

<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 からガジェット背景色を赤にしようと試みているのですが。。)

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2007/09/19-102919.php/trackback
Listed below are links to weblogs that reference
ビデオチュートリアル:自作 iGoogle ガジェットをはてなダイアリーに貼付ける from trick7
AS3習得本
AS3の全容を学習できる本。この中でどれか1冊自分に合ったものを。
Adobe Flash CS4 詳細!ActionScript3.0入門ノート ActionScript3.0 プロフェッショナルガイド 初めてのActionScript 3.0 Flashユーザーのためのステップアップガイド 詳説 ActionScript 3.0 Actionscript 3.0 Cookbook
AS3発展本
ASでアニメーションさせる面白さを知るための本。
Flash Math & Physics Design:ActionScript 3.0による数学・物理学表現[入門編] ActionScript 3.0 アニメーション AdvancED ActionScript 3.0 Animation (Advanced)
AS2
"Flash"ではなく"ActionScript2.0"学習のための良著。他にもいろいろ読んだけど、この4冊を読んだ後、自分が成長できた感じがしました。
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付] Essential Actionscript 2.0 Flash 8 Essentials Foundation Actionscript Animation: Making Things Move (Foundation)

あわせて読みたいブログパーツ

相互リンク

hi-posiさん
携帯Flashといえばhi-posiの岡田昇三さん。FlashLiteの有益な記事もたくさん書かれていていつもお世話になってます。ついにご挨拶させていただきました。面白すぎる人でしたw。

Return to page top