jQueryと外部JavaScriptでGoogleGadgetを作る

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

以前、3ステップでGoogleGadgetでjQueryを使う方法の記事を書いたのですが、より簡単かつ大胆に使えて外部JavascriptがダイナミックロードなGoogleガジェットを作りました。外部ファイルが別ドメイン(クロスドメイン)間でも動作します。

よろしかったら使ってください。[ガジェットのXMLソースを見る]

■動作検証済ブラウザ:IE8,Firefox8,Chrome15 @Windows7

基本的な使い方

ガジェットを貼り付けて、プロパティ(設定)画面でjQueryを使った外部JavascriptファイルのURLを設定するだけで動きます。
以下、そのステップです。

  1. 簡単な外部Javascriptファイルを用意してサーバにアップロードする
  2. ガジェットのXMLファイルをアップロードする
  3. Google SitesやiGoogleなどで、ガジェットを挿入したいページを開き、編集する
  4. 挿入から「その他のガジェット」を開き、上記のガジェットのXMLファイルのURLを貼り付ける
  5. ガジェトのプロパティが開くので、読み込みたい外部JavascriptファイルのURLを入れる
  6. 保存する
  7. 外部Javascriptをガンガン修正する
  8. ブラウザをガンガン更新する
  9. (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メソッドを組み合わせるとハッピーになれると思います。


スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存