Hatena::ブログ(Diary)

shi3zの長文日記 RSSフィード Twitter

2013-04-18

Google Spreadsheetのスクリプト機能で秒速でWebアプリを作ってみる 10:42

 前回のエントリーが好評で、はてな村の人たちって意外とGoogle Apps Script使ったことなかったんだなーと思いつつ、ついでにWebアプリを簡単に作る方法も紹介するよ


 今回は占いアプリを作ってみよう。

 まずは「現在」「過去」「未來」についてありそうなネタをひたすら表に書く。

f:id:shi3z:20130418103325p:image

 次に、これをスクリプトから参照するんだけど、Webアプリを作るのでスクリプトもちょっと変えないと行けない。

function rand(max){
  return ~~(Math.random()*max);
}

function doGet(e) {
  var ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active'));
  var sheet = ss.getSheetByName("Sheet1"); 
  var cell = sheet.getRange('a1'); 
  var max = ss.getLastRow()-1;
  
  var past = cell.offset(rand(max)+1,0).getValue();   //過去
  var now = cell.offset(rand(max)+1,1).getValue();    //現在
  var future = cell.offset(rand(max)+1,2).getValue(); //未來
  
  //出力
  var app = UiApp.createApplication(); 
  var panel = app.createVerticalPanel();
  panel.add(app.createLabel("占いの館"));
  panel.add(app.createLabel("------------------------------------------"));
  panel.add(app.createLabel(past +"あなた"));
  panel.add(app.createLabel(now));
  panel.add(app.createLabel(future));
  panel.add(app.createLabel("------------------------------------------"));
  app.add(panel);
  return app;  
}

function setUp() {
  ScriptProperties.setProperty('active', SpreadsheetApp.getActiveSpreadsheet().getId());
}

 で、一回「setUp」を実行する。

 すると認証ダイアログが表示されるので承認する。

 このsetUp関数ではなにをやってるかというと、一旦、スプレッドシートを記憶するという役割がある。スクリプトのプロパティ「active」に現在のアクティブなスプレッドシートを記録するんだね。

 それからdoGet関数の中でいろいろとインチキな占いをやってる。

 最後にappを返してるのがミソのようだ。

 作ったら

f:id:shi3z:20130418103631p:image


 「Manage versions」でバージョンを保存。

 それから

f:id:shi3z:20130418103735p:image

 Publish→Deploy as Web appで、こんなダイアログが出るので、「誰からもアクセスできる(anyone)」としてPublishすると・・・

f:id:shi3z:20130418103837p:image

 こんな感じでデプロイされる。

 デプロイされたURLをコピーして、ブラウザにペースト

f:id:shi3z:20130418104517p:image

 おお、占いアプリになっとる!

 ↓試したい人はこちら

https://script.google.com/macros/s/AKfycbxb6f9-CPHw-whYUR3XzCYv8dYTGex_hvBFmffgQh522RV0IWTa/exec


 こんな感じでベリーイーズィーにゆるふわWebアプリを作れるぜ

 これを応用すれば機能のToDoやプロジェクト管理なんかも、スマートフォン向けのページをHTML5で作って、JSONで吐き出してローカルで見る、なんてことも自由自在だ。凄いぜGoogle Apps。お前がこんなに使えるヤツとはな!


 これで本一冊書けそうな気がして来たぜ。