jQueryと外部JavaScriptでGoogleGadgetを作る
この記事は次のブログに引っ越しました。
以前、3ステップでGoogleGadgetでjQueryを使う方法の記事を書いたのですが、より簡単かつ大胆に使えて外部JavascriptがダイナミックロードなGoogleガジェットを作りました。外部ファイルが別ドメイン(クロスドメイン)間でも動作します。 よろしかったら使ってください。[ガジェットのXMLソースを見る] ■動作検証済ブラウザ:IE8,Firefox8,Chrome15 @Windows7 基本的な使い方 ガジェットを貼り付けて、プロパティ(設定)画面でjQueryを使った外部JavascriptファイルのURLを設定するだけで動きます。 以下、そのステップです。 簡単な外部Javascriptファイルを用意してサーバにアップロードする ガジェットのXMLファイルをアップロードする Google SitesやiGoogleなどで、ガジェットを挿入したいページを開き、編集する 挿入から「その他のガジェット」を開き、上記のガジェットのXMLファイルのURLを貼り付ける ガジェトのプロパティが開くので、読み込みたい外部JavascriptファイルのURLを入れる 保存する 外部Javascriptをガンガン修正する ブラウザをガンガン更新する (7)に戻る jQueryと外部Javascriptで動くGoogleガジェット ?xml version="1.0" encoding="UTF-8"? Module ModulePrefs title="DynamicLoading jQuery Gadget" description="Dynamic javascript loading gadget with latest jQuery implemented." author="KEINOS - MindstormsKid" height="0" width="0" Require feature="dynamic-height" / /ModulePrefs UserPref name="sScriptUrl" display_name="URL of the script" required="true" / Content type="html" ![CDATA[ script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" /script script type="text/javascript" /* Load external script dynamically */ var oPrefs = new _IG_Prefs(); jQuery.getScript( oPrefs.getString("sScriptUrl") ); /* Adjusting Gadget height */ gadgets.window.adjustHeight(); /script ]] /Content /Module ※このガジェットはMindstormsKidさんの"simple_HTML"ガジェットにインスパイアされたものです。中身は全然違いますが。 ■資料:GoogleガジェットのAPI(メソッドなど) 外部Javascriptのサンプル /* Body内にDIV要素をID付で挿入する */ jQuery(' div id=\'idMain\' メインエリア /div ').appendTo('body'); /* ガジェットのプロパティ値を取得 */ var oMyPrefs = new _IG_Prefs(); /* 処理本体 */ $(document).ready(function(){ /* ガジェットのプロパティ値を上記DIVに書き込む */ $('#idMain').text( oMyPrefs .getString("sScriptUrl") ); /* ガジェットの高さを調整する */ gadgets.window.adjustHeight(); }); 所感 スタンダード版GoogleAppsのGoogleSitesを使う場合、非公開ガジェットを作るのが大変なのと、PHPも使って動的に色々やる場合にガジェットを更新するのが面倒だったので、作りました。 オリジナルから必要な部分だけを抜いて、シンプルに挙動がわかるようにしてみました。 お客様に使ってもらう場合は、ガジェットのプロパティに「プロダクトコード」的な欄を作って、JavascriptのMD5や暗号化スクリプトと、IEでも使うならガジェットのgadgets.io.makeRequestメソッドを組み合わせるとハッピーになれると思います。
