Advent Calendar in 信州松本(だけじゃなくてもいいよ)の13日目を担当しているthinkAmiです。
さて、前回担当の 9日目の記事では、GoogleAppsScript(以下GAS)とGoogleAppEngine(以下GAE)でアルクマと遊びましたが、今回もアルクマという素材は同じで遊びます。
前回とはやり方を変えてみようということで、「今年からGASで利用できるようになった機能を使う」をメインテーマにアルクマップを作成してみました。
GASでGUI表示する方法について
従来どおりのGoogleSiteやUiServiceに加え、今年よりHTMLServiceでも表示できるようになりました。
HTMLServiceでは、HTMLのほかjQueryも使えるようなので、本当に使えるのかの検証も含め、利用してみます。
GASとGAEのデータ連携方法について
Webでよく見かけるのはGoogleスプレッドシートを使ったものです。
ただ、先月よりGASからGoogle CloudSQLへアクセスできるようになったため、今回はそちらを利用します。
参考:グーグル、MySQL互換の「Google Cloud SQL」性能強化。最大でメモリ16GBへ拡張。Google Apps Scriptからも利用可能に - Publickey
Google CloudSQLの設定について
Google APIConsoleに設定が必要なため、事前に行なっておきます。
- Billingに、クレジットカードの設定 (今回利用するD0インスタンスは、2013年6月1日までは無料とのこと)
- CloudSQLサービスのAuthorized Applicationsに、GAEのアプリケーションIDを設定
- SQLPromptなどで、databaseやtableを作成
Google CloudSQLのアクセスについて
■GAE側
公式ドキュメント通りで、簡単にアクセスできます。
Using Google Cloud SQL with the App Engine Python SDK - Google App Engine — Google Developers
delete&insert&commitという流れですが、特に問題なく動作しました*1。
def _update(self, schedules): # (手抜きのため) 全削除後に登録する keys = _get_api_key() cn = rdbms.connect(instance=keys['instance'], database='arukuma') # 文字コードを指定してあげないと、開発環境では文字化けする # See: http://www.dasprids.de/blog/2007/12/17/python-mysqldb-and-utf-8 # 開発環境のみ必要な設定(本番環境はutf-8化されているのか、大丈夫っぽい) if debug: cn.set_character_set('utf8') cursor = cn.cursor() self._delete(cn, cursor) self._insert(cn, cursor, schedules) cn.commit() cn.close() def _delete(self, cn, cursor): sql = 'DELETE FROM schedule' cursor.execute(sql) def _insert(self, cn, cursor, schedules): sql = 'INSERT INTO schedule (day, title, place) VALUES (%s, %s, %s)' for s in schedules: cursor.execute(sql, (s.day, s.title, s.place))
■GAS側
こちらも公式ドキュメント通りです。
JDBC - Google Apps Script — Google Developers
ただ、自分が探した範囲では、GAS上でCloudSQLのデータを使用する際に、列名指定ができず、indexでしか取得できませんでした。
var EventList = function(title, place, day){ this.title = title; this.place = place; this.day = day; } var connectionString = "jdbc:google:rdbms://" + InstanceName + "/arukuma"; var conn = Jdbc.getCloudSqlConnection(connectionString); var stmt = conn.createStatement(); var rs = stmt.executeQuery("select * from schedule"); var events = []; while(rs.next()){ events.push(new EventList(rs.getString(1), rs.getString(2), rs.getObject(3) )); }
GASのHTMLServiceでの制限について
HTMLServiceはGoogle Cajaの中で動作するため、いろいろと制限があります。
Introduction - Google Caja — Google Developers
今回の場合だと、動的なGoogleMAPが使えなかったため、GASのMAPsServiceのStaticMapを利用することにしました。
名前の通り静的な地図となりますが、マーカーの画像は変更できるため、今回の目的としては最低限満たせるかと思います。
デモ
以下のURLとなります。GAS自体をWebアプリケーションとして公開しているため、URLが特殊な感じです。
自分の作り方が悪いのか、作成者以外でアクセスした場合は、「This application was created by another user, not by Google.」のような警告が画面上部に出ます。
アルクマップ - HTMLService版
お願いなど
まとめ
開発環境さえできてしまえば、予想以上にGoogle CloudSQLへの接続は簡単でした。
開発中の動作確認をするときに、「バージョン管理→Webサイトとして公開」を何度も繰り返したため、そこを省力化できればより効率的に開発ができそうです。
次は
Advent Calendar in 信州松本(だけじゃなくてもいいよ)、次はハラヒロシさんです。よろしくお願いします。