Googleガジェット関係のネタ

※要Google Drive Webホスティング機能有効化

Googleガジェットは非常に柔軟性の高いパーツで、Google Siteで使う場合には必須とも言えるパーツです。iGoogleの廃止などや、WindowsやOSXでのガジェット文化の終焉、そしてそもそもガジェットそのものがあまり活用されてこなかったこともあって、その開発熱はすっかり覚めた感がありますが、Google Siteに於いては、その低機能を補完するのにはとても役に立つ重要な要素です。とりわけ、サイト内でのJavaScriptを自由に使ったり、Googleドキュメントとの連携、パーツ化により自由に配置が後で可能になるなどなど、恩恵は実は非常に大きいのです。それは通常のサイトやブログなどでも同様です。

Google Apps Scriptガジェットも柔軟性の高いパーツなのですが、こちらはGoogle Site外では使えない（Google Site外であれば、通常のガジェットでApps Scriptのウェブアプリケーション化したページをiFrameで表示は可能。但し、Google Site内ではどうがんばってもサイト内であっても表示は出来ない。）上に、HTMLボックスもそうなのですが、外部のファイルの読み込みが出来ないように制限が掛けられています。また、JavaScriptが動かせるといっても、自由気ままに書けて動かせるということでもないので、そこでこのガジェットが出てきます。Googleガジェットの美味しいポイントを列挙します。

  1. 別にGoogleサイトじゃなくても登録すれば外部サイトで使用することが出来る
  2. ガジェット内で自由気ままにJavaScriptを記述することが可能
  3. 外部CSSやJSファイルの読み込みに対応している
  4. Google提供のAPIを使用すれば、Google SpreadsheetやGoogle Driveのデータや情報を引き出し、連携させることが可能
  5. Google Visualization APIを使ってグラフの描画も可能
  6. Google Web Toolkitを使用してちょっとしたアプリケーションの構築も可能
  7. ガジェット化することで、自由自在にパーツを配置できるので、HTMLの書き換えが不要になる。
  8. ガジェット化することで、動的なインターフェースパーツの再利用が用意になる。

Google Site内で全てを完結させるにはちょっとしたテクニックというか知識が必要ですが、これから下記に紹介するものは、本家のGoogleガジェットで登録されているパーツではなく、ウェブで公開されているパッケージをそのままガジェット化したものです。単純なガジェットならば、シンプルなひな形となるXMLの特定の範囲内にそのまんま、サンプルファイルに入っているHTMLファイルの中の記述をコピペし、呼び出す画像やCSSへのリンクを書き換えるだけで動作します。

Googleガジェットのシンプルなひな形

今回使用しているガジェットのシンプルなひな形は以下のとおりです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample" />
<Content type="html">
<![CDATA[
​・・・ここにHTMLやJavaScriptをそのまんま記述する・・・
]]>
</Content>
</Module>

これをXMLファイルとし、上記のここにHTMLやJavaScriptをそのまんま記述するの部分にコピペして上げ、参照しているファイル類へのURLを書き換える。たったこれだけです。あとは、アップロードして、ガジェットの挿入でアップロードしたXMLファイルへのURLを入れて上げるだけ。

ガジェットそのものに機能を持たせる為には、あとは、Google Gadget APIの仕様にしたがってXMLの中にパラメータの設定の為の記述を追加し、JavaScript内でその情報を受け取って表示するようにすると、ガジェットの設定画面が増えて、より使い勝手が向上します。

ガジェットサンプル

これから紹介するガジェットは、そもそもウェブページに記述して使用するために公開されているものですが、XMLに記述してガジェットとして挿入しているものです。ガジェットそのものに機能を付加していませんが、さらにガジェットとして機能を付加することで、とても素晴らしいパーツになります。サイズや、中身はそれぞれのガジェットで利用しているCSSの中身を書き換えたり、JavaScriptの記述を書き換えることで変更することが可能です。

Sitesで使う場合のちょっとしたテクニック

Google Site内で全てを完結させる（ガジェットパーツで使用する画像類やCSS、JSといったファイル他、ガジェットパーツそのものであるXMLファイル）には、ちょっとしたテクニックが必要です。

Google Site内で完結させる方法その１

Google Driveは実は本来の意味でのファイルの直リンクやプログラムからの呼び出しをする為のファイル置き場としては使えません。そのため、Google Siteで使う場合には、DropBoxのPublicフォルダにてアップロードし、公開リンクを得て、それをプログラムに食わせるみたいなことが必要でした。

しかし、以下の手順でGoogle Site内で完結させることが可能です。

  1. XMLファイルや外部CSS、画像類はファイルキャビネットのページを用意し、そこへアップロードしておく
  2. XML内のコードやJS、CSS内で参照しているそれらファイルへのURLをアップロードしたファイルへのリンクに書き換える

これでOKです。ここで動いているファイル類も全て、外部のドライブなどを利用していません（ただし、公開されてる外部CSSなどはそのまま利用させてます。）。こうすることで、Google Site内で完結させることが可能です。あまりにもファイルが多すぎるとちょっと大変ですが、ガジェットではそこまで大量のパールファイルを扱うケースは少ないので、十分かと思います。

※Google Appsの場合管理者のセキュリティ権限次第では、外部JSやCSSの読み込みが制限されている場合があります。また、ファイルキャビネットにあっぷしたXMLをガジェットとして差し込めない場合があります。

Google Site内で完結させる方法その２

実は、先ほどGoogle Drive内のファイルを直リンクやプログラムからの呼び出しに使えないと書いたわけなのですが、直リンクで扱う方法がありました。ちょっとだけ厄介です。

  1. ファイルを普通にアップロードする。もちろん、外部に共有で公開しておく
  2. そのままだと、直リンクといっても、ダウンロードされるだけで、プログラムから参照や読み込みができない。
  3. 以下のようなルールでURLを組み立てる
https://googledrive.com/host/そのファイルが存在するフォルダのID/対象のファイル名

これでOKです。実際にやってみたところ、ガジェットを公開フォルダに入れて、参照してみました。ちゃんと読み込めました。これならば、jsファイルやxml、cssなどのファイルも呼び出すことが可能です。htmlファイルを置いた場合、同じフォルダなら相対パスでも行けますね。Google Driveがホスティング機能を持ったというニュースがあったので、もしやと思い調べたらこのサイトに行きつきました。もちろん、Google Sites内から呼び出すときは、https://から始まる絶対参照でソースURLを指定すれば良い。

ひょっとしたら、Google Driveに置いたファイルに読み込みだけでなく書き込みもできるのかな・・・・

Google Chromeなどに対する対策

Google Chromeなどはスクリプトの読み込みに対して時々、「このページには安全でないコンテンツが含まれています。」といったメッセージが出るケースがあります。これは、Google Siteにガジェットを貼り付けた時によく見かけるものですが、再度アドレスバーの横にあるシールドのアイコンをクリックして再読み込みで読み込むことはできますが、スマートとはいえません。ショートカットやレジストリエディタでレジストリをいじるなどの方法もありますが、やはりおすすめできるものではありません。

この現象は読み込んでいるページがhttps://なのにスクリプト内のファイルはhttp://で外部ファイルを参照しているケースによく起こります。そこでこの対策をしてあげないと、ブラウザによっては読み込めない、読み込んでも正常に動作しないなどの現象が起きるわけです。解決法はJavaScript内の外部JSやCSS参照をhttp://の部分を削ってしまうことです。外部読み込みのJSやCSS内で参照しているファイルも同じです。最も良いのは、ファイルはすべてファイルキャビネットに収めて、外部参照をなくすことです。確実に動きます。safariだと別に警告もなく動くんですけれどね。

ガジェット自体の機能を追加

追加といっても、大したことではなく、設定を持たせる事ができます。もちろん、プログラムの中からそれらガジェットの設定値を拾ってくる事ができます。今回、ModulePrefsとUserPrefsを設定し、UserPrefsは特定のスプレッドシートへのURLを必須の入力項目として設定しました。以下にガジェットのテンプレートのソースを記載します。

今回のテンプレートはテンプレートと銘打ってますが、特定のタイプのシートで、しかもバブルチャートしか書けません。いろいろ、UserPrefsを追加すれば、基本的なグラフをオプション指定なしで、このガジェットだけで描くことが出来ると思います。一部の特殊なグラフを除いて、ガジェット内のスクリプトは、ほぼ共通なので。

また、設定した値は、ガジェット内でnew gadgets.Prefs()を宣言することで、設定値を呼び出すことができます。今回は設定したURLを拾って、queryの引数としてそのまま投げています。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" scaling="true" scrolling="true" />
<UserPref name="spurl" display_name="SpreadsheetURL" required="true" datatype="string"></UserPref> 
<Content type="html">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

//corechartのパッケージをロード

google.load("visualization", "1", {packages:["corechart"]});

          google.setOnLoadCallback(initialize);
      function initialize() {
        // The URL of the spreadsheet to source data from.

var prefs = new gadgets.Prefs();

var spreadsheeturl = prefs.getString("spurl")

        var query = new google.visualization.Query(spreadsheeturl);
        query.send(draw);
      }
      function draw(response) {
        if (response.isError()) {
          alert('Error in query');
        }
        var data = response.getDataTable();
        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));


//グラフオプションの指定

var options = {

          title: 'トラブルの多さと投薬回数、金額との相関関係',
          hAxis: {title: '使用回数'},
          vAxis: {title: '値段'},
          bubble: {textStyle: {fontSize: 11}},

chartArea:{left:100,top:30,width:"80%",height:"75%"},

height: 600,

width: 1000,

        };


//グラフの描画

        chart.draw(data, options);

}

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="chart_div"></div>
  </body>
</html>
]]>
</Content>
</Module>

参考リンク