Google SitesのGoogle GadgetにjQueryを使う簡単な方法

シェアする

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

Google Sitesでガジェットの開発をする際に、Javascriptを使い始めると、やはりjQueryも使いたいと感じる事が多いと思います。

色々な方法はありますが、簡単と感じる(3ステップで追加できる)方法を記載します。

※追記:Google Apps Scriptがスタンダード版Appsでも使えるようになったそうです。Ajax風にURLの表示結果をフェッチしたい場合、今後はこっちもありかも。まだSitesで使えるAppsScriptは限定されていて、フェッチ関数は使えません。

追記
よりシンプルかつ大胆に使えるガジェットを作りました。別ドメインに設置されたjQueryを使った外部Javascriptを指定して実行します。

ポイントは、ガジェットのプロパティに書かれたHTMLを表示するだけのシンプルなガジェットをまず追加して、そのプロパティにjQueryの読み込みやJavascriptを記載するという事です。

■手順

  1. Google Sitesの適当なページの編集画面で”safe html bypass” というガジェットを検索して追加(※1)
  2. ガジェットのプロパティ欄に1行でコードを記載する(下記サンプル参照)
  3. 保存する

(※1)同じ内容のXMLファイルをサイトのページに添付して使うのがいいかも。その場合、URLの最後が.xmlで終っていないと追加できないので、余計なクエリは削除します。

追記:
サイトのページにガジェットのXMLファイルを添付してガジェットを利用する場合、サイトが非公開だと、下記エラーでガジェットを追加できません。

Unsupported feature: org.apache.shindig.common.xml.XmlException: Open quote is expected for attribute "cellpadding" associated with an element type "table". At: (153,61)

これは、ガジェット追加時にXMLファイルをサーバが検証するのですが、非公開であるため、XMLファイルにアクセスできないことが原因です。

つまり、このガジェットだけは別サイトを用意して一般公開する必要があります。

■”safe html bypass”ガジェットのプロパティに記載するサンプルコード

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><input type="text" value="oerten" id="text" onclick=""> </input><input type="button" value="Click" id="but" onclick="var val = $('#text').attr('value'); alert(val); "> </input><br />

コードが長くなると、プロパティに記載するのが面倒かもしれませんが、そこはjQueryを使っているので、外部から読み込んで表示するなど工夫しだいなのだと思います。

またタグにCSSやIDをGoogleSites上で使えるので、デザインも自由になりますよね。

※このガジェットで表示しているエリアに限る。

■参考ページ:


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

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク
レクタングル(大)広告