2016年12月15日木曜日

Google Apps Script を紹介


皆様お疲れ様です。
入社一年目の佐藤範幸と申します。

去年も書かせていただきましたが、今年もアドベントカレンダーの記事を書かせていただきます。
よろしくお願いいたします。


Googleスプレッドシート、活用してますか?

近頃はなんでもかんでもGoogleに頼ってしまう風潮、ありません?
僕はこの風潮、大好きです。便利なんですよ。
もっと盛り上がってほしい。
盛り上がることで、Googleが提供するサービスが向上してほしい。
この前Google翻訳が進化して、ニューラルネットを活用した翻訳サービスが始まりましたね。
この調子でどんどん便利になってほしいですね。

さて、僕は少し前に新しいPCを買いましたが、性能に予算をかけてしまったせいでMicrosoft Officeを買うことが出来ませんでした。
そんな僕にぴったりのサービス。それが、Googleスプレッドシートです。
Googleスプレッドシートは表計算アプリケーションで、Microsoft Excelのように使うことが出来ます。

「でもマクロ使えないじゃん」

こう思ったIT技術者の皆さんいませんか?

実は同様の機能があるんです。


Google Apps Script 

それがこれ、Google Apps Script。

これを使えば、Excelのように簡単なマクロを組むことが出来ます。
主な言語は java script。なじみのある言語ですね。
サーバーサイドのjava script+Google独自の関数を用いて記述していきます。


ちょこっと実践

うろ覚え知識でクイズアプリを作ってみました。















簡素なものですが簡単に作れます。
ソースコードを全部載せます。勉強&作成途中のため汚いですが容赦ください。


//初期化
function initialize(){
 
  //シート取得
  var sheet_m = SpreadsheetApp.getActive().getSheetByName('main');
 var sheet_q = SpreadsheetApp.getActive().getSheetByName('question');
  var sheet_s = SpreadsheetApp.getActive().getSheetByName('set');
  var sheet_l = SpreadsheetApp.getActive().getSheetByName('log');
  
  //setシート
  if (sheet_s != null){
    SpreadsheetApp.getActiveSpreadsheet().deleteSheet(sheet_s);
  }
  SpreadsheetApp.getActive().setActiveSheet(sheet_q);
  sheet_s = SpreadsheetApp.getActive().duplicateActiveSheet().setName('set');
  
  //値クリア
  sheet_m.getRange('A1').setValue('第1問');
  sheet_m.getRange('B1').clearContent();
  sheet_m.getRange('B2').clearContent();
  sheet_m.getRange('B5').setValue(0);
  sheet_l.clear();
  sheet_l.getRange('A1').setValue('第1問');
  
  SpreadsheetApp.getActive().setActiveSheet(sheet_m);
  
}
//初期化
function initialize(){
 
  //シート取得
  var sheet_m = SpreadsheetApp.getActive().getSheetByName('main');
 var sheet_q = SpreadsheetApp.getActive().getSheetByName('question');
  var sheet_s = SpreadsheetApp.getActive().getSheetByName('set');
  var sheet_l = SpreadsheetApp.getActive().getSheetByName('log');
  
  //setシート
  if (sheet_s != null){
    SpreadsheetApp.getActiveSpreadsheet().deleteSheet(sheet_s);
  }
  SpreadsheetApp.getActive().setActiveSheet(sheet_q);
  sheet_s = SpreadsheetApp.getActive().duplicateActiveSheet().setName('set');
  
  //値クリア
  sheet_m.getRange('A1').setValue('第1問');
  sheet_m.getRange('B1').clearContent();
  sheet_m.getRange('B2').clearContent();
  sheet_m.getRange('B5').setValue(0);
  sheet_l.clear();
  sheet_l.getRange('A1').setValue('第1問');
  
  SpreadsheetApp.getActive().setActiveSheet(sheet_m);
  
}


//問題表示
function questionSet(){
  
  //シート取得
  var sheet_m = SpreadsheetApp.getActive().getSheetByName('main');
 var sheet_s = SpreadsheetApp.getActive().getSheetByName('set');
  var sheet_l = SpreadsheetApp.getActive().getSheetByName('log');
  
  //残問題数からランダムに選択
  var randomCount = sheet_s.getRange("E3").getValue();
  var range = sheet_s.getRange(Math.floor(Math.random()*randomCount),1,1,3);
  var values = range.getValues();
  
  //問題表示
  var questionCount = sheet_s.getRange("E2").getValue();
  sheet_m.getRange(1,2).setValue(values[0][1]);
  sheet_l.getRange(questionCount+1,2,1,3).setValues(values);
  sheet_l.getRange(questionCount+1,5).setValue(range.getRow());
  

}


//答え表示
function answerSet(){
  
  //シート取得
  var sheet_m = SpreadsheetApp.getActive().getSheetByName('main');
 var sheet_s = SpreadsheetApp.getActive().getSheetByName('set');
  var sheet_l = SpreadsheetApp.getActive().getSheetByName('log');
  
  var questionCount = sheet_s.getRange("E2").getValue();
  
  var answer = sheet_l.getRange(questionCount+1, 4).getValue();
  var answerMsg = 'A:' + answer + '\\n正解しましたか?';
  var yes_no = Browser.msgBox(answerMsg,Browser.Buttons.YES_NO);
  var rightCount = sheet_m.getRange(5, 2);
  var rightCount_v = 0;
  if (yes_no == 'yes'){
    sheet_l.getRange(questionCount+1, 5).setValue('○');
    rightCount_v = rightCount.getValue() +1;
  }else if(yes_no == 'no'){
    sheet_l.getRange(questionCount+1, 5).setValue('×');
    rightCount_v = 2;
  };
  
  
  rightCount.setValue(rightCount_v);
  if (rightCount_v == 3){
      Browser.msgBox('おめでとう。',Browser.Buttons.OK);
    }; 
  

}




スプレッドシートだけじゃない

Excelマクロのように使える、Excelの代わりになる、と推してきましたが、Google Apps Script はそれだけじゃありません。
実はGoogleが提供する他のサービスにも使えます。
例えばGoogleフォームに入力したデータをGmailで自動送信したり、フォームで入力したデータをスプレッドシートに連携させてまとめることが出来ます。
そして、これから流行ればより機能が拡張され、できることが増えていくでしょう。
みなさんも是非Google Apps Script を触って見てください。一緒に流行らせましょう。




最後までご覧いただきありがとうございました。








2015年12月25日金曜日

マテリアルデザインに挑戦


皆様、お疲れ様です。
入社4ヶ月目の佐藤範幸と申します。

アドベントカレンダー2015のトリでありクリスマスである25日の記事をかかせて頂きます。
私はまだ研修生ということで、皆様に比べ経験も知識もありませんが、温かい目で読んでいただけると幸いです。


Webページデザイン

さて、最近私はCSSとjQueryについて触れる機会が多くあります。
CSSの魅力は、なんといっても目に見えて変化がわかること。
綺麗に配置できたとき、見栄えをかっこ良くできたときは感動します。
そして、jQueryを使うことでページに動きをつけることができます。
たとえば、ボタンをクリックするとクリックしたところから波紋が広がる、ボタンにカーソルをのせるとスライドしてメニューが出てくる、などです。

そんなWebページのデザインについて熱中している私がみつけてしまったもの。
それがこちらのサイト

https://events.google.com/io2015/

Google I/Oのページです。
ページを開いた人はすでにお気付きでしょうが、かっこいい。
ボタンを押すたび、動かすたび、かっこいい。
すぐにその魅力にとりつかれました。
そして、このデザインを"マテリアルデザイン"と呼ぶことを知りました。


 マテリアルデザイン

"マテリアルデザイン"とはGoogleが発表したWebページのデザインのことです。
詳しくはこちらへ。

https://www.google.com/design/spec/material-design/introduction.html#

よくわからないので、私なりに解釈してみました。
・それぞれが独立した紙のようなパーツ
・楽しく直感的なアニメーション
先ほどのGoogle I/Oのページを見ると、どのページにおいても、背景と紙のようなパーツ、ボタンで構成されています。
また、メニューのScheduleをクリックすると波紋が広がり下の線がニュルッと動きます。楽しいですね。


CSS・JSフレームワーク

私は、こんなWebページを作ってみたいと思いました。
ですが、最近CSSとjQueryを始めた私には、一から実装するのはあまりにも難しく感じました。
そこで、調べているうちに"CSS・JSフレームワーク"なるものがある事を知りました。
CSS・JSフレームワークとは、一から構成すると手間がかかり難しい配置やアニメーションなどを、予め用意してあるCSSやJavascriptを組み合わせるだけで簡単にじっそうできるようにしたものです。
たとえば以下の様なものがあります。

・bootstrap   http://getbootstrap.com/
・Materialize   http://materializecss.com/
・Material Design Lite   http://www.getmdl.io/

私は Material Design Liteを使ってマテリアルデザインを実装しようと試みました。


Material Design Liteの使い方

では、簡単な使い方を説明いたします。
まず、先ほどのMaterial Design Liteのページから、TEMPLATESの欄を開いて好みのテンプレートをダウンロードしてください。
そして、好みのテンプレートのフォルダの中のindex.htmlを開き、リンク先や文字列、画像を変えたり、パーツを削除複製して、構成してみてください。
基本的にはこれだけです。
ですが、これだけではオリジナル感が出ません。
そこで、先ほどのMaterial Design Liteのページから、COMPONENTSの欄を開いてみてください。
様々なパーツが有りますね。ここからソースをコピペすることで好きなパーツを組み込むことができます。
以上です。

一からCSSとJSを記述するの方法に比べたら、断然こちらのほうが簡単に作れます。


デメリット

ここまでさんざん持ち上げてきましたが、使っていて悪い面も見えてきました。
CSSフレームワーク全てに当てはまることだと思いますが、仕様を理解しないと使えないこと、元々仕様にないものは実装できないことです。
例えば、メニュー一覧からクリックしたらもう一段メニューを出したい時。これはCOMPONENTSには載っていません。
そこで、少し手を加えて自作のCSSやJSを作ろうとしますが、既存のclassが邪魔してうまく動作してくれません。
仕様を理解しなければならないと思い、CSSやJSファイルを見ますがよくわかりません。
結局、CSSやJSの知識がなければ、自在に作るのは難しいということです。

ですので、こうしたフレームワークを使う際には、テンプレートの通り素直に作るか、仕様が理解しやすいものを使うといいでしょう。


最後に

今回はマテリアルデザインに挑戦ということで、記事を書かせていただきました。
マテリアルデザインについて知らなかった方、興味はあるけど手が出せなかった方、少しでもやってみようと思ってもらえたなら幸いです。

最後まで読んでいただきありがとうございました。 メリークリスマス。良いお年を。

https://santatracker.google.com/?hl=ja#tracker
http://www.adventar.org/calendars/911