GogleAppsスクリプトでガジェットをあっさり作っちゃう。

　ここ数年はphpを中心にスクリプト関係の言語を仕事で使っていたことから自分のメイン言語になってきました。当然Webアプリケーションを扱うので併せてHTMLやCSS、Javascriptも使うようになりました。（まだまだ使いこなせるとこではないですが。。。）
　そんな中、最近GoogleSitesを使ってあるページを作成するということを仕事で担当することに。GoogleSitesはHTMLを得に意識することなく、Webページが作成されるサービスで、ページ自体はあっさりとできちゃいました。
　ただ、それだけで終わるのも何か味気ない。

　仕様の中にGoogleDriveのスプレッドシートで管理している資料をWebページでも同じような一覧で確認したいという要望が。

　単純にスプレッドシートを挿入させるだけでもいいかな～なんて考えてたんですが、いざ挿入して見た目を確認してみるとあまりにも見た目が。。。。縦にも横にもスクロール。幅が大きかったり、ヘッダに当たる部分が分け合って4行目からだったり。

　。＠ω＠。。スクリプトでどうにかできないものか。。。。そうだ！Javascriptで読み込めんじゃね！！？

　かくしてGoogleガジェット作りが始まったのです！

まずGoogleSitesはJavascriptが実行できない！

　驚きました。。。マジかと（汗

　最初にスプレッドシートの情報をhtmlファイルの中でJavascriptを使って取り出すようコーディングしていたので、そのコードが使えないことにファっとなりました。

　ちなみにその時のJavascriptコードがこちらです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1");
var dataSource = 'スプレッドシートのURL';
var queryLanguage = 'select  order by A';
google.setOnLoadCallback(function() {
  var query = new google.visualization.Query(dataSource);
  query.setQuery(queryLanguage);
  query.send(handleResponse);
});
function handleResponse(response)
{
  var el = document.getElementById('result');
  if(response.isError()) {
    el.innerHTML = escapeHtml(response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  var html = [];
  for (var row = 0; row < data.getNumberOfRows(); row++)
  {
    var line = [];
    for (var col = 0; col < data.getNumberOfColumns(); col++)
      line.push(escapeHtml(data.getFormattedValue(row, col)));
    html.push('<tr><td>' + line.join("</td><td>"));
  }
  el.innerHTML = '<table border="1"> + html.join('') + '</table>';
}
function escapeHtml(text) {
  return (text || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\u0022/g, '&quot;');
}
</script>
<div id="result">読み込み中...</div>

　このコードをbodyタグ内に記載してテーブルを作成するようにしていましたが、そのままGoogleSitesにコピペしてもエラー判定されスクリプト部分は削除！
　ずっと「読み込み中...」のページしかできません。

ではXml化して読み込めばいいじゃん！

　GoogleSitesにてJavascriptを実行したいとき、スクリプトをXmlにて作成し、公開できる場所においてからそこを読み込めばいいらしい。
　さっそく、上のスクリプトをXml化。Xmlのフォーマットは

<?xml version="1.0" encoding="UTF-8" ?> <Module><ModulePrefs title="タイトル">  <Locale lang="ja" country="jp" />  <Require feature="dynamic-height" /></ModulePrefs><Content type="html"><![CDATA[　※ここにJavascriptコードを記載します。]]></Content></Module>

　です。
　できたファイルを早速アップロードするんですが、公開できるようなサーバがなく、GoogleSitesにて公開しようと思い、サイト管理からファイルをアップロードしました。

ファイルのアップロードは、まずメニューボタンから「サイトを管理」を開きます。

そこで「添付ファイル」を選択し、そこにXmlをアップロードします。

















　これでXmlを公開し、GoogleSitesから呼び出せばいいじゃないか！
　と思っていたのですが。。。
　
　GoogleSitesで「挿入」から「その他のガジェット」へ

登録したXmlを読み込めばそれで万事OKのはずだった。

























「追加したガジェットは無効です」

（　　ω　）　　　...　。　。

どこかヤバかったか。ファイルはちゃんとルートに置いたつもり。個人アカウントでやったときはうまくいったのに。なんで会社アカウントでやるとエラー。。。混乱しました。

　しばらくぐだぐだやっていたのですがどうにもうまくいかず。Xmlによるガジェットは諦めたほうがいいなぁと次の手を考えます。

ここまできたらGASだろう！

そう。GAS（Google Apps Script）だろうと。

　正直、始めて触るんでちょっと乗り気になれませんでした。でも可能性があるとすればこれだけだったんで、思い腰を上げ挑戦。

　まずはgsファイルを作成。
　チュートリアルや逆引きを見てみるとなんかJavascriptとそんなに大差ない。スプレッドシートを取り出すくらいなんでそこまで難しくもない。

　お、なんかできてきた！！

　あ、ちなみにコードは
　http://www.bmoo.net/archives/2012/06/314057.html
　を参考に適宜変更しました。（コードを載せれなくて申し訳ないです。。。）

　スプレッドシートから情報を抜き出した後はhtml系の関数でhtml＋cssで整形するようにして見た目を整え、GoogleSitesに表示する用にしています。




　当初、想定している時間よりかなり早くやりたいことができてしまった。というかホントJavascriptライクにコードかけるんだね。ごめん食わず嫌いしてたよGAS。

　こうして仕事のおかげでGoogle Apps Scriptの勉強になり、カンタンなガジェットなら時間を見てまた作っていこうかなと。やっぱり作るのは楽しいです！