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

7976 ワード
JavaScript GoogleAppsScript GoogleSite 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:）の省略について: 小粋空間