2010年4月23日金曜日

Google sites(サイト)でJavaScriptを実行させる

前の記事でjavascriptのデモ画面を作ろうと思い立ち、Google サイトがちょうどいいかなと思ったけど、Google サイトではスクリプトを実行できない。それを何とか実装させたときのメモ。

scriptタグは書けないのでガジェットとして追加する。

流れとしては

  1. 実行したいJavaScriptを書いたガジェットのXMLファイルを作成
  2. Googleサイトにアップロード
  3. ガジェットを追加するページを作成
  4. 挿入 → その他のガジェット → URLを指定・・・で追加したXMLのアドレスを指定

という感じ。

下の例ではblink.xmlというファイルをアップロードした。トップレベルにアップロードしないと使えなかった。

image

このXMLファイルの中身は次のような感じ。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs
  title="jQuery blink"
  title_url=""
  author="Daiki Suganuma"
  author_email="daiki.suganuma@gmail.com"
  author_affiliation=""
  author_location="Nagoya,Japan"
  author_photo=""
  author_link="http://se-suganuma.blogspot.com/"
  description=""
  thumbnail=""
  screenshot =""
  height=""
  width=""
  >
  <Locale lang="ja" country="jp" />
  <Require feature="dynamic-height" />
</ModulePrefs>
<Content type="html"><![CDATA[
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1");
    google.load("jqueryui", "1");
</script>
<script type="text/javascript">
$(function() {
    //jQuery UI theme load
    $('<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" type="text/css" media="screen">').appendTo("head");
    //button
    $(".blink").button();
    //点滅させる
    setInterval(function(){
        $(".blink").effect("highlight",{},800);
    }, 1000);
  });
</script>
<button class="blink">点滅</button>
]]>
</Content>
</Module>

ガジェットとして指定するURLは

http://sites.google.com/site/sesuganuma/blink.xml

というようなアドレスで大丈夫。

まぁ実現してみたけど、bloggerの記事内にscriptタグを書いた方が早かった・・・・

 

<関連記事>

【JavaScript】jQueryとjQuery UIを使ってボタンを点滅させる
jQueryとjQuery UIの実行しているバージョンを確認
コメントを投稿
Related Posts Plugin for WordPress, Blogger...

Blog Archives