GoogleAppEngineとGoogleAppsScriptでアルクマを追いかける

Advent Calendar in 信州松本（だけじゃなくてもいいよ）の9日目を担当しているthinkAmiです。

8日目はKenさんの「Web制作現場にバージョン管理の仕組みを導入してみた」でした。
自分のところでも、日付ありExcelや誤って削除したときのバックアップデータ戻しなどはよく見る光景ですが、学習コストとの兼ね合いから現状維持中です...
あきらめずに取り組むことが大切だということを改めて感じさせてくれる記事でした。

さて本題に戻りまして、「Web全般」というテーマで記事を進めたいと思います。

信州松本といえば

いろいろとあるかもしれませんが、キャラクターでいえば「アルプちゃん」です。飛行機にペイントされたりと大人気です。
先日もゆるキャラグランプリ2012が開かれていたため、アルプちゃんはどうだったのか探してみましたが、そもそも参加していませんでした*1。
ゆるキャラグランプリ2013

ただ、県内からは多数のゆるキャラが参加していたようです*2。
その中のトップであったアルクマについて調べてみたところ、アルクマにはスケジュールがあることを知りました。
キャラバン隊スケジュール | 信州においでよ！信州アルクマキャラバン

アルクマの行動範囲は広く、10/14に開かれたIT系のイベント「 MA8 信州Caravan & Meetup」にも参加していたようです。
MA9 お知らせブログ【レポート】10/14 #MA8 信州Caravan & Meetup

さて、その記事の中で、以下の様なコメントがありました。

テキスト情報だけになっているので、マッピングしてほしいですね。
これも信州を愛している方、誰か作ってくれないかなー。

ということで、信州のAdvent Calendarらしく、Webアプリとして作ることにしました (ようやく本題)。

構成

地図とカレンダーというとGoogleのサービスが思い浮かびましたので、それを利用することにします。
あとはメインのインフラをどうするかというところですが、以前使用した時に比べGoogleAppsScriptがかなりパワーアップしていたため、そちらを使うことにしました。
また、パワーアップした機能では外部サイトとの連携もできるようになったため、GoogleAppEngineと連携させてみることにしました。
さらに、どうせなら使う言語も少なくしようと考え、JavaScript系縛りとした結果、以下の構成となりました。

Google App Engine (以下、GAE)の構成について

一般的にはPython・Java・Goなどの言語を使ってWebサイトを構築するかと思いますが、HTML一枚のページであればそれらの言語は使わなくてもWebサイトを構築できます。
今回はPythonベースで作るためyamlの編集も行いましたが、以下を参考にすれば問題ないかと思います。
参考：Google App Engineを使って無料でサイトを立ち上げる方法 - EC studio 技術ブログ

また、スケジュールデータをGoogleカレンダーに保存しておくことにしたため、データストアまわりの知識も不要となりました。
あとは普通のWebサイトと同じく、「HTML + CSS + jQuery」でGAE側を構築しました。

Google Apps Script (以下、GAS)の構成について

GASが紹介されているWebや書籍を見ると、「Excel + VBA」の比較対象として、「Google スプレッドシート + GAS」が取り上げられている印象です。
ただ、今年に入ってかなりパワーアップが行われ、HTMLによるWebアプリケーションの作成や、GETやPOSTに対してJSON等でのレスポンスもできるようになっています。
また、GASの言語自体はJavaScriptとほぼ同じものであるため、JavaScriptが分かれば障壁となることは少なそうです*3。
参考：Google I/O で発表された GAS の新機能で Web アプリを作ってみた - WebOS Goodies

今回使用したGASの機能は、以下の通りです。

UrlFetchApp:　アルクマWebのスケジュールデータを取得
Xml:　GASではDOMが使えないので、Xmlとして解析
CalendarApp:　Googleカレンダーを読み書き
ContentService:　GAEとJSONPでやりとりする

参考：Google Apps Script — Google Developers

GAEとGASの連携について

Googleカレンダーを介してGAEとGASで連携することも考えましたが、以前の記事でGAEからGoogleカレンダーを利用したことがあるため、今回はJSONPで連携しました。
GAE側でjQueryのajax()にてGAS側のdoGET()を呼び、GAS側でデータを取得してJSONP型にしてGAEに返す感じです。

■GAE側

$.ajax({
    type : 'GET',
    url : URL,
    cache : false,
    crossDomain: true,
    dataType : 'jsonp',
    scriptCharset:'utf-8',
    success : function(json, status, xhr) {
        $.each(json, function(i, calendar){
            addMarker(calendar);
        });
    },
});

■GAS側

function doGet(e) {

  var output = ContentService.createTextOutput();
  output.setMimeType(ContentService.MimeType.JSON);
  
  var json = JSON.stringify(createJSONFromCalendar());
  
  // jQueryに返すため、受け取ったパラメータにある「callback」の値を先頭につけておく
  var jsonp = e.parameters.callback + "(" + json + ")";
  output.setContent(jsonp);

  return output;
}