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の実行しているバージョンを確認

コメント

  1. このコメントは投稿者によって削除されました。

    返信削除
  2. GoogleサイトでのJavascript実行について調べていて、ここに来ました。
    さっそくで申しわけありませんが、お伺いしたいことがあります。

    サイトにアクセスした人のIP、ブラウザ、OS、画面解像度を
    取得するJavaScriptを埋め込み、その履歴をログとして残したいのです
    Googleサイトで、HPスペース内にログを書き出して残すという事はできるのでしょうか。

    返信削除
  3. > JFKさん
    こんにちは。
    質問の件ですが、Google Analyticsの情報を表示するのが手っ取り早いと思います。
    Google Analytics APIやGoogle Apps Scriptあたりで検索すれば情報が見つかるかもしれません。

    http://code.google.com/intl/ja/googleapps/appsscript/class_page.html
    このクラスを使えばスクリプトから書き込めそうです。詳しくはリファレンスを読んでください。

    返信削除

コメントを投稿

このブログの人気の投稿

【.NET】DataGridViewを選択した際に背景色を変更しない

【PostgreSQL】ROWNUMのように行番号(現在行)を取得するROW_NUMBER

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links