googleサイト上で好き勝手にjavascriptを動かす方法 #JavaScript

はじめに

googleサイト上で色々見た目をリッチ化したい、というミッションがあり、結構大変だったので
主に未来の自分に向けてメモを残しておきます。
全コード github

GASのHTMLServiceを使っても色々できるようですが、Google Caja内での動作につき色々制限有。

あと、HTMLボックスでも行ける感じだったので試してみましたが、jQueryのバージョンが
特定以外だとダメだったり、やはりこちらも色々制限があります。

また、今回はどうしても従来のgoogle site内のコンテンツを拡張するというミッションだったため、
既存のgoogleサイト内にガジェットを配置する方法でjavascriptを走らせました。

できれば新しめの方法でいきたかったのですが、時間が無い中で安全策を採択しました。
もっと簡単で良い方法があるはずです、だれか教えて下さい。

既存の方法おさらい

詳しくは参考サイトを参照

1.ガジェットxmlを書く
2.そのファイルをweb上の参照できるところに置く
3.googleサイト上でガジェットを配置し、ガジェットのURLに上記2.で置いたところを指定する
これらが基本的な方法です。

が、色々ハマった所がありました。

置き場所

dropboxのpublicに置く方法も紹介されていましたが、どうせならgoogleのサービスで統一したい。
→ google siteを作ってファイルを添付する方法が便利です

+ サイトに各種ファイルを添付します

ガジェット内で外部javascriptやCSSを読み込ませる

方法が参考サイトで紹介されていましたが、うまく行かず。
各種例では、外部ファイルをhttpプロトコル決め打ちで呼び出しており、（ブラウザによっては）
SSLコンテンツ混在で怒られたりする。各種例の掲載時にはコレでも通ってたのかな？
→ 外部ファイルの読み込み指定は、http, httpsを省略して記述すると自動的に親ページとプロトコルを合わせてくれるので、警告無しで通ります。

こんな感じにガジェット用xmlを書きつつ、動かしたいスクリプトを読み込みます

全コード github

myapp.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <!-- ガジェット名 -->
  <ModulePrefs title="myapp" />

  <!-- ガジェットから渡すユーザーパラメータの定義 -->
  <UserPref name="param00" datatype="string" default="9999" />
  <UserPref name="param01" datatype="string" default="hoge" />

  <Content type="html">
    <![CDATA[
        <!-- CDNから読み込み(http, https省いています) -->
        <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js '></script>
        <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js'></script>
        <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css">

        <!-- google site添付から読み込み(https省いています) -->
        <!-- ライブラリ -->
        <script type="text/javascript" src='//sites.google.com/site/qiitatestpublic/jquery.jqGrid.src.js'></script>
        <script type="text/javascript" src='//sites.google.com/site/qiitatestpublic/grid.locale-ja.js'></script>
        <script type="text/javascript" src='//sites.google.com/site/qiitatestpublic/apprise-1.5.full.js'></script>
        <link rel="stylesheet" type="text/css" href="//sites.google.com/site/qiitatestpublic/apprise.css">

        <!-- 自前コード -->
        <script type="text/javascript" src='//sites.google.com/site/qiitatestpublic/myapp.js'></script>


        <!-- 実行 -->
        <script type="text/javascript">
            $(document).ready(function(){
                MYAPP.setJqGrid("#jqGridList");
                apprise('TEST', {'animate':true});
            });
        </script>


        <h2 class="ui-widget-header ui-corner-all">テスト</h2>
        <br>
        <table id="jqGridList"> </table>

    ]]>
  </Content>
</Module>

サイトにgadgetとして貼り付ける

サイトに適当にページを作る
挿入 → その他のガジェット → URLを指定してガジェットを追加
指定するURLは、 ファイル添付したサイトのURL + ガジェットxmlファイル名 を指定してください
例 https://sites.google.com/site/XXXXXX/gadget_myapp.xml
幅や高さはお好みで設定
外部から渡すパラメータは、サイトからスクリプトに自由にパラメータ渡せるので適宜利用

動作サンプル

サンプルページを設置しました。
こんな感じで、わりと自由に動かせますのでJavaScriptを軽く書いたりサービスのプロトタイプ作って公開したいけど、
いちいちホスティング確保してられないケースなどに便利だと思います。
大事なので２度書きますが、※もっと簡単で良い方法があるはずです、だれか教えて下さい

参考サイト

2011-02-22 - sho235711
×4 new B's: プログラムはじめてみました Google sitesでjQuery/JavaScriptを使う
 HTMLやCSSでのプロトコル表記（http:、https:）の省略について: 小粋空間