Google Apps Script ってすごいね

先日まで、Google Developer Day 2011 の DevQuiz がありました。

その中で Apps Script に関する問題が出題されていました。

個人的に気になっていたもので、ちょっとやってみることにしたのですが、ユーザガイドをみて驚きました。機能がすごく充実しています。

「オラ、わくわくすっぞ！」って感じです。

Google Apps Script ってなに？

Google Apps Script は、JavaScript を使用して Docs, Spreadsheets, Sites などから各種 Google サービスを制御することできます。
Microsoft Office における VBA のようなものです。

Apps Script では、作成した JavaScript のプログラムがサーバ上で実行される、という点が特徴ですね。

まだまだ日本語の情報が少ない Google Apps Script ですが、 Googleを追いかけろ！ が参考になります。

Google Apps Script って何が出来るの？

何が出来るのかは、これから見ていきましょうｗ。

Excel を Apps Spreadsheets に移行する際の障壁は、VBA マクロだと思っていましたが、それが取り除かれた。と思ってもいいくらいなことができそうな予感です。

Google Apps Script を使ってみる

何はともあれ、どんなものかやってみましょう。

お題

よくある Excel マクロのように、CSV ファイルを読み込んで、Spreadsheets に出力してみます。

1. スクリプトエディタ
   

   新規に作成した Spreadsheet から、ツールメニューの「スクリプトエディタ」でスクリプトエディタを起動します。

2. コードを記述
   

   コード欄に下記を打ち込みます。

   function onOpen() {
     var app = UiApp.createApplication().setTitle("Upload CSV to Sheet");
     var form = app.createFormPanel().setId('frm').setEncoding('multipart/form-data');
     var formContent = app.createVerticalPanel();
     form.add(formContent);
     var file = app.createFileUpload().setName('thefile');
     var button = app.createSubmitButton('Submit');
   
     formContent.add(file);
     formContent.add(button);
   
     app.add(form);
   
     var doc = SpreadsheetApp.getActive();
     doc.show(app);
   }
   
   function doPost(e) {
     var app = UiApp.getActiveApplication();
     var fileBlob = e.parameter.thefile;
   
     var data = fileBlob.getDataAsString();
     if (!data) {
   	return app.close();
     }
     var csvData = data.split('\n');
   
     var sheet = SpreadsheetApp.getActiveSheet();
     sheet.getRange(sheet.getLastRow()+1, 1).setValue(fileBlob.getName());
   
     var startRow = sheet.getLastRow()+1;
     var startColumn = 1;
     for (var i=0,l=csvData.length;i<l;i++) {
   	var csvRow = csvData[i].split(',');
   	for (var j=0,l2=csvRow.length;j<l2;j++) {
   	  sheet.getRange(startRow+i, startColumn+j).setValue(csvRow[j]);
   	}
     }
   
     return app.close();
   }
   		

3. Script の実行
   

   フロッピーアイコンでスクリプトを保存し、「関数を選択」より「onOpen」を選択します。

   再生ボタンでスクリプトを実行します。

4. CSV をアップロード
   

   表示されたフォームより、適当な CSV ファイルを選択して、Submit です。

5. CSV がシートに出力される
   

   CSV の内容がシートに書きだされました！

プログラムの説明を少しすると、[onOpen]という関数が、シートを開いたときに自動実行される関数です。VBA にもありますね。

ここで、アップロードフォームを作成し、表示させています。

もう一つの[doPost]という関数。これはフォームポスト時に呼び出されるもので、データの取得とシートへの書き出しを行っています。

doPost がポスト時に呼ばれるということに気付くまで結構はまりました…。

参考までに、アップロード時に使用した CSV と、Spreadsheet は下記から。参考にしてください。
*スクリプトの実行はできません

• GoogleAppsScriptPractice1.csv
• Google Apps Script Practice 1

Google Apps Script をやってみて

リファレンスとにらめっこが必要ですが、汎用的な JavaScript で記述できるので非常にわかりやすいですね。

これから少しずつ、どんなことができるのか確認しながら、紹介してきたいと思います。

Google AppEngine の新料金体系

とっても久しぶりのブログ更新です。皆さんお元気ですか？僕は元気です。

最近、AppEngine の料金体系変更によって、大幅に料金が増えるという話題をよく目にします。

気になって自分も確認してみました。
そして、多分にもれず驚いたのでメモしておきます。

AppEngine 新料金体系

AppEngine の新料金体系は、従来(現行)の CPU Time での課金から、Instance Hours での課金に変更されます。

料金の詳細は、 Google cloud services – App Engine に記載されています。

また、気になる、新料金体系ではどのように見積もられるのか？は、Admin Console の Billing History から確認することができます。

via Managing Your App's Resource Usage - Google App Engine - Google Code

今なら半額キャンペーン中！

上記のレポートの一例では、 Frontend Instance Housrs は、 $12.41 となっています。

為替レートが 1米ドル /円 = 77.089115 （ほんと円高ですね）ということなので、約956円/日。一ヶ月で 28,700円です。

でもよくみると、「Frontend Instance Hour costs reflect a 50% price reduction active until November 20th, 2011.」となっています。

11月20日までは半額キャンペーン中みたいです。

確かに Frontend Instance Hours: $0.04/Hour となっています。正規の料金は $0.08/Hour ですよね！

キャンペーンが終了したらどうなるのでしょうか？

単純に倍なので、約1,912円/日。一ヶ月で 57,400円です。

これ、みんな気づいているんでしょうか？僕は最初気がつかなかったです。

ダブルでビックリしますね。

新料金体系対策

今まで無料枠で気軽にアップしていたアプリが、突然金食い虫になったらたまりません。

App Engine アプリケーションのリソースを管理する方法 - Kay's daddy のリソースの管理方法が参考になります。

要は、ちゃんとリソース意識してアプリ作ってね、ということですが、

一番手軽な方法は、Admin Settings にある、 Max Idle Instances を 1 にする ということでしょうか。

近頃は、フリーミアムモデルからフリーの部分がなくなる、もしくは縮小される傾向が強いように思います。

手軽な環境がなくなっていくのは残念ですね。

Rails 3, MySQL, jQuery, Shoulda, FactoryGirl

Rails 3 で、MySQL, jQuery, Shoulda, FactoryGirl を使うときのプロジェクトメモ。

MySQL でプロジェクトを作成

デフォルトでは Sqlite3 を使用するので、オプションで MySQL を使用するように指定。

$ rails new appname -d mysql

jQuery, Shoulda, FactoryGirl の設定

jQuery, Shoulda, FactoryGirl を使用するために、各ファイルを編集する。

environment.rb

require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

Gemfile

gem 'jquery-rails'
gem 'rails3-generators', :group => :development
group :test do
  gem 'shoulda'
  gem 'factory_girl_rails'
end

application.rb

config.generators do |g| 
  g.test_framework :shoulda, :fixture => true
  g.fallbacks[:shoulda] = :test_unit
  g.fixture_replacement :factory_girl, :dir => "test/factories"
end

インストール

$ bundle install

Shoulda / FactoryGirl が適用されているか確認。

$ rails g scaffold --help
...

Shoulda options:
  [--dir=DIR]                   # The directory where the model tests should go
                                # Default: test/unit
  [--fixture-replacement=NAME]  # Fixture replacement to be invoked
                                # Default: factory_girl

jQuery をインストール

generator で jQuery に置き換えます。

$ rails g jquery:install

Rails 3 で OpenSSL::SSL::SSLError

Rails 3 でプロジェクト作成後、まずは jquery を使うようにしようと思い

$ rails g jquery:install

すると、早速エラー発生。

    fetching  jQuery UJS adapter (github HEAD)
c:/ruby/lib/ruby/1.8/net/http.rb:586:in `connect': SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (OpenSSL::SSL::SSLError)

ソースを github から取得する際に、SSL 接続でエラーということか。

Rails3 で jQuery を使う を参考に、environment.rb に下記を追記。

require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

無理やり SSL 非接続にしてなんとか回避。とりあえずは、よしとします。

Google Maps API v3 でカスタムマップを作成

暫く前に、「googlemapでドラクエ」ということで、ドラゴンクエストの世界地図を Google Maps で表示するサイトが話題になりました。
当時、コレを見て感動したのを覚えています。

今では Google Maps API も v3 となり、v2 は正式に廃止され、アップデートすることが推奨されています。

ということなので、カスタムマップの作成を v3 でやってみます。

大きい画像の用意

まずは、拡大時に耐えるような大きな画像を用意します。

1900年に作成された日本の世界地図 から拝借しました。

タイル（tile）を作成

Google Maps は、それぞれのズームレベルに合わせて 縦横 256px の画像（タイル）を地球全面に覆う仕組みになっています。
例えば、ズームレベル 1 では、256x256 px の画像を縦横 2枚、計 4枚のタイルにより構成されます。
ズームレベル 2 では、縦横それぞれ 2 倍の、計 16枚のタイルで構成されます。

GMIC - The GMap Image Cutter

というわけで、多数のタイルが必要になるのですが、自力でカットしていくのははっきり言って無理があります。

そこで GMIC というとても便利なツールの登場です。

このツールを使えば、用意した画像を Google Maps に合わせたタイルにカットしてくれます。しかも、解像度から最大ズームレベルまで判断してくれます。

使用方法も簡単で、ダウンロードした zip を解凍し、GMapImageCutter.batを実行（Windows の場合。その他は .sh）して起動させます。

起動したら、File を Open して、 Create するだけ！簡単です。動作も高速であっという間に作業が完了します。

出力ファイルには、タイル画像だけではなく、作成したタイルを表示するためのサンプル HTML も出力されます。
大きな画像を Google Maps 的に見たい！というなら、これだけで OK ですね。

V3

GMIC より出力された HTML は、残念ながら今現在は v2 の Google Maps API を使用しています。

そこでやっと本題の、カスタムマップを v3 で書き換えてみます。

ポイントは、ImageMapType というクラスを使うことで、一から MapType インターフェースを実装する手間を省いています。

サンプルは下記リンクから！

Google Maps API v3 カスタムマップサンプル

 

参考：

• Google Maps JavaScript API V3 オーバーレイ - Google Maps JavaScript API V3 - Google Code