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上で使えるので、デザインも自由になりますよね。

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

■参考ページ:

関連記事

Google SitesでFTP,AFPプロトコルのリンクを使う... GoogleSitesでは、リンク(アンカー)先に"ftp://~","afp://~"といったプロトコルの指定ができない。保存しても無効になってしまう。 【回避方法】 ガジェットでリンク集を表示させる 任意のHTMLを書き出すガジェットを、GoogleSitesのページ上に設置(...
Google Sitesでタグもしくはカテゴリを付けるには... シンプルな解決法 Blogなどでよく使われる、記事のタグ付けやカテゴリ付けをGoogleサイトでもやりたいと思ったのですが、結論から言うと標準機能で持っていないようです。 海外でもニーズがあるようで、フォーラム(掲示板)を見てもやはり機能としてはないという事でした。 how to put ...
Google Sites内の更新をRSSフィード(配信)で知る... GoogleAppsのGoogleサイトに「お知らせ」ページで簡易掲示板(BBS)を作りました。 しかし、新規投稿、コメントや変更などを、メール通知ではなくRSSリーダーでチェックしたかったのです。 ■GoogleSitesの新規投稿をRSSでチェックする方法 RSSフィードでチェック...
Google Apps ScriptのmsgBoxはGoogle Sitesで動かない... GoogleSitesのリンクをクリックするとメールを送信するGoogle Apps Script 下記スクリプトのように、メールが送信された旨をダイアログ・ボックスやメッセージ・ボックスなどで知らせたかったのですが、どうやら”Browser.msgBox()”関数は、GoogleSitesで...

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

シェアする

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