美食の会

美食の会

皆様お疲れ様です。バルテック所属の佐藤範幸です。

今年のアドベントカレンダーのテーマは「ITと食」ということなので、

ITの方は偉大な先輩方に任せ、食について投稿いたします。

美食の会　とは

さてタイトルにもある通り、今回は美食の会について書こうと思いますが、

皆さん美食の会というのをご存知でしょうか。

はい。知るはずもありませんね。

美食の会というのは、月に一度本社の同期数人と集まってうまいものを食べようという会です。

これにより幸福感を満たし、日々の仕事に励むことができます。それが真の目的です。

美食の会は全12回行いましたが、今回はその中でも特に満足度が高かった3回を独断で選びます。

第3位　紅ズワイガニ食べ放題（第12回）

蟹。それはうまいもんの象徴。

これは写真から美味しさがわかると思います。

食べ放題なので遠慮せずに食べすぎました...

とにかくおいしかったのですが、食べづらいため3位に。ごめんなさい。

第2位　中華食べ放題（第11回）

ちゅーか、中華うまいやんな。

誰しもが一度は本格中華を好きなだけ食べたい。そう思ったはず。

その夢を叶えてくれた回でした。

特に小籠包がおいしかったのですが、熱いので2位に。ごめんなさい。

第3位　ウニ丼＆牡蠣（第1回）

この記事を見ている方、牡蠣をなめないでいただきたい。

正直、この店に行くまでは牡蠣のレヴェルを下に見ていました。

アツアツのままちょこっと醤油を垂らして口に頬ればそこは天国でした。

ウヰスキーが好きな方は是非醤油の代わりにウヰスキーを垂らしてください。

特にスコッチ。もっと言えばボウモア。最高です。

ウニは、うまいに決まってますよね。ええ。

いかがでしたか？

うまそうですよね。是非ご自身の舌で確かめていただきたいです。

満足度は私が補償いたします。

以上、ありがとうございました。

Google Apps Script を紹介

皆様お疲れ様です。

入社一年目の佐藤範幸と申します。

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

よろしくお願いいたします。

Ｇｏｏｇｌｅスプレッドシート、活用してますか？

近頃はなんでもかんでもGoogleに頼ってしまう風潮、ありません？

僕はこの風潮、大好きです。便利なんですよ。

もっと盛り上がってほしい。

盛り上がることで、Googleが提供するサービスが向上してほしい。

この前Google翻訳が進化して、ニューラルネットを活用した翻訳サービスが始まりましたね。

この調子でどんどん便利になってほしいですね。

さて、僕は少し前に新しいPCを買いましたが、性能に予算をかけてしまったせいでMicrosoft Officeを買うことが出来ませんでした。

そんな僕にぴったりのサービス。それが、Googleスプレッドシートです。

Googleスプレッドシートは表計算アプリケーションで、Microsoft Excelのように使うことが出来ます。

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

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

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

Google Apps Script　

それがこれ、Google Apps Script。

https://developers.google.com/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 を触って見てください。一緒に流行らせましょう。




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

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

皆様、お疲れ様です。
入社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