--- title: GAS+Vue.jsでサーバレスなWebアプリ① tags: GoogleAppsScript Vue.js author: kyhei_0727 slide: false --- #はじめに GASの[HtmlService](https://developers.google.com/apps-script/reference/html/html-service)を使ってSPAライクなWEBアプリケーションを書くことになったのでその時のメモです。 GASに合わせてフロント書くのしんどかった〜 #環境 [Google Apps Script](https://developers.google.com/apps-script/) [Vue.js 2.x](https://jp.vuejs.org/) #今回のアウトライン 1. GASプロジェクト作成 2. スクリプトのコーディング 3. GASのウェブアプリケーション設定 #さっそく書いていくよ とりあえず[GAS公式のベストプラクティス](https://developers.google.com/apps-script/guides/html/best-practices)に沿ってプロジェクト内にスクリプトファイルを作成していきます。 今回は簡単のため、必要最小限の以下のファイルを用意しました。 ```server.gs function doGet(request) { var template = 'index'; return HtmlService.createTemplateFromFile(template).evaluate(); } ``` ```index.html

{{ message }}

``` server.gsのdoGet(request)はエンドポイントがGETリクエストを受け取ったときに呼び出される関数。 変数templateの値は、HTMLファイル名の拡張子を除いた形にしておきます。 詳しいことは[公式のここ](https://developers.google.com/apps-script/guides/html/)に書いてあるので、気になる人は目を通しておくといいかも。 index.htmlでは[jsDelivr](https://www.jsdelivr.com/)上に置いてあるVue.jsのライブラリを読み込んでいます。 Google Apps Scriptのプロジェクトの作り方やVueの基本的な使い方はここでは説明しませんので、 公式や他の記事を探してみてください… ひとまずこれでserver.gsのエンドポイントにリクエストがあったときに、 index.htmlがレスポンスとして返される仕組みが整いました。 次に実際にHTTPリクエストを受け取るためのエンドポイントの設定を行います。 設定といってもワンクリックだから簡単簡単。 ![スクリーンショット 2018-03-27 16.56.01.png](https://qiita-image-store.s3.amazonaws.com/0/94505/431b734d-ca0c-2cca-2caf-79023403d5e2.png) アクセス権限などの設定が完了するとエンドポイントが発行される。 ![スクリーンショット 2018-03-27 16.57.03.png](https://qiita-image-store.s3.amazonaws.com/0/94505/dc7ad5e2-c4aa-1b24-4fb1-8152af9abf9b.png) 実際にエンドポイントへアクセスしてみると… ![スクリーンショット 2018-03-27 22.40.43.png](https://qiita-image-store.s3.amazonaws.com/0/94505/0277ffd0-c37f-c279-4b2c-92fe5ffa45e4.png) お疲れ様でした!! ちなみに開発途中のコードを見たいときは、 https://script.google.com/a/hogehoge/yourendpoint/exec ではなく https://script.google.com/a/hogehoge/yourendpoint/dev にアクセスするとエンドポイント発行時のスナップショットではなく最新状態が確認できます。 ひとまず最低限の準備はできたので今日はここまで。 いまの状態だとCSSもJSもindex.html内にぶちこまれていて開発が進んでくると大変管理し辛いので、 次はプロジェクト内のjavascriptやcssファイルの別ファイル化について書きます。