--- title: 【GAS】html Serviceでスプレッドシートの値を非同期に取得する tags: GoogleAppsScript JavaScript jQuery author: MssKnd slide: false --- 簡単な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()`に関しては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で生成されたWebサイトにアクセスし、引継ぎを受けます。 ##GoogleAppsで開発する利点 ###無料 当たり前ですが、お金が掛からないのが大きなメリットです。 課など小さな規模の業務効率化に費用は掛けられないので、Webアプリケーションのサーバの維持・設備投資費が不要というのは大きいです。 会社でGoogle Apps for Workを導入してたら社員のアカウント情報なども取得できて便利です。 ###データ入力UIを開発する手間を省ける データ入力のUIはかなり重要だと思います。 ITリテラシが高くない職場ですので、表計算ソフトのUIをデータ入力に使用するのは敷居が低くていい感じです。開発の手間もありません。 編集履歴を確認して状態を戻す機能がSSにはありますが、こんなの一から作っていたら大変です。 ###javascriptとhtmlを作るだけでWebアプリが作成できる これが本当に楽! ###複数人が同時編集可能 SSは複数人での同時編集が可能なので、ほかの人の記載を手伝ったりすることが容易です。 引継時間間近になると慌ただしくなってしまうので、手の空いてる方が協力することができます。 また、データを誰かが誤って消してしまったとしても、編集履歴から復元することができます。