【GAS】html Serviceでスプレッドシートの値を非同期に取得する

簡単なWebアプリを作ったので、コアな部分を残しておこうかと思います。
作った経緯とかは余談を参照下さい。

#サンプル
[**SpreadSeets**](https://docs.google.com/spreadsheets/d/1ps8G5AF77PtMyjd853rpB9pm0Jyu4qc77VMgt_cOj_M/edit?usp=sharing)
[**GoogleAppScript**](https://script.google.com/macros/d/1SK2JWFuKVCewK7pSbaHb64xzWEBwnV9DaSXXHLxkNyNJ1-k72rRGlkB0/edit?template=app&uiv=2&mid=ACjPJvE_A-Nx1TXgTxlgVlcpkt2TlE1KIv9MjU0hvBS-SQWV6iLsOslbE_LkDcpz-Mj_Yp82WXWCV4LvDeiFu38rH-1k0R-IioWEX3yUmOvx0VBjD-HbpNJ9cCYXqi1lLNVmRJJk4VqCSOA)
[**生成したWebサイト**](https://script.google.com/macros/s/AKfycbwjVNXDy_-wawAL8v_-JCDwMxgjoK7XGIQ8urFJWUA1lKwa93M/exec) ※ 承認が必要です

#スプレッドシートのデータを取得
GASからSpreadSheet（以下、SS）のデータを参照する方法はいくつかあるのですが、
非同期で取得する方法について説明します。

```js:code.gs
/* get Spresd Sheet Values */
function getSSValues(sheetName) {
  var SSValues = SpreadsheetApp
    .openById( ****** SPREADSEET ID ****** )
    .getSheetByName(sheetName)
    .getDataRange()
    .getValues();
  return JSON.stringify(SSValues);
}
```

```js:引継.html
/* code.gsの関数を呼び出してhtmlに反映 */
$(function() {
  google.script.run
      .withSuccessHandler( takeoverSample )
      .withFailureHandler( onFailure )
      .getSSValues("サンプル"); // シート名
});

/* code.gsの返値を受けとる関数 */
function takeoverSample(SSValues){
  var incident = arrangedate_takeoverSample(JSON.parse(SSValues));
  ...
}

/* SpreadSheet > JSON > 連想配列 */
function arrangedate_takeoverSample(SSValues){
  ...
}
```
順番は`google.script.run` > `getSSValues()` > `takeoverSample()` > `arrangedate_takeoverSample()`といった感じです。
htmlにSSのデータを送るにはJSONにする必要があります。

`google.script.run`に関してはGASのリファレンスにも記載してあるので参照してください。
[HTML Service: Communicate with Server Functions](https://developers.google.com/apps-script/guides/html/communication#top_of_page)

#取得したデータを使ってhtmlを作成#
```html:index.html
<?!= include('Stylesheet'); ?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
  <body>
    <?!= include('引継'); ?>
  </body>
</html>
<?!= include('JavaScript'); ?>
```
`include()`に関してはGASのリファレンスにも記載してあるので参照してください。
[Separate HTML, CSS, and JavaScript](https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript)
`引継.html`の中でjQuery使ってるので、それより前にjQueryは読み込まないといけません。

##日付データの注意点
```js:引継.html
/* SpreadSheet > JSON > 連想配列 */
function arrangedate_takeoverSample(SSValues){
  var UTC2JST = 32400000; // UTC+09:00の時差補正
  var output = [];
  for (var i = 1; i < SSValues.length; i++) {
    ...
    var obj = {
      "date": new Date( Date.parse(SSValues[i][1].replace(/(\d{4})-(\d\d)-(\d\d)T(\d\d:\d\d).*/,"$1/$2/$3 $4:00")) + UTC2JST ),
      ...  
    }
    output.push(obj);
  }
  return output;
}
```
注意点ですが、SS上で日付のデータを扱うと、`JSON.stringify()`した際にUTC+09:00の時差が出てしまうので気をつけて下さい。

#余談（htmlServiceを使ってWebアプリを作った経緯）
現在あるシステムの365d24h運用保守業務をしています。
日に2回、夜勤と日勤の案件引継ぎがありまして、個々人の案件引継ぎを円滑にするために、業務改善として取り組みました。

##引継ぎの流れ
![引継システムの構成 のコピー.png](https://qiita-image-store.s3.amazonaws.com/0/16535/827c6c82-1af3-9260-a7df-5bb98dbd826a.png)

引継ぎ時間間近になると、各個人の案件をSSに集約します。
引継ぎ担当者（SV : super visor）と引継受者が、html Serviceで生成されたＷebサイトにアクセスし、引継ぎを受けます。

##GoogleAppsで開発する利点

###無料
当たり前ですが、お金が掛からないのが大きなメリットです。
課など小さな規模の業務効率化に費用は掛けられないので、Webアプリケーションのサーバの維持・設備投資費が不要というのは大きいです。
会社でGoogle Apps for Workを導入してたら社員のアカウント情報なども取得できて便利です。

###データ入力UIを開発する手間を省ける
データ入力のUIはかなり重要だと思います。
ITリテラシが高くない職場ですので、表計算ソフトのUIをデータ入力に使用するのは敷居が低くていい感じです。開発の手間もありません。
編集履歴を確認して状態を戻す機能がSSにはありますが、こんなの一から作っていたら大変です。

###javascriptとhtmlを作るだけでWebアプリが作成できる
これが本当に楽！

###複数人が同時編集可能
SSは複数人での同時編集が可能なので、ほかの人の記載を手伝ったりすることが容易です。
引継時間間近になると慌ただしくなってしまうので、手の空いてる方が協力することができます。
また、データを誰かが誤って消してしまったとしても、編集履歴から復元することができます。