そんな中、最近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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/\u0022/g, '"');
}
</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によるガジェットは諦めたほうがいいなぁと次の手を考えます。
ここまできたら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の勉強になり、カンタンなガジェットなら時間を見てまた作っていこうかなと。やっぱり作るのは楽しいです！
0 件のコメント :
コメントを投稿