Help us understand the problem. What is going on with this article?

GAS+Vue.jsでサーバレスなWebアプリ①

More than 1 year has passed since last update.

はじめに

GASのHtmlServiceを使ってSPAライクなWEBアプリケーションを書くことになったのでその時のメモです。
GASに合わせてフロント書くのしんどかった〜

環境

Google Apps Script
Vue.js 2.x

今回のアウトライン

  1. GASプロジェクト作成
  2. スクリプトのコーディング
  3. GASのウェブアプリケーション設定

さっそく書いていくよ

とりあえずGAS公式のベストプラクティスに沿ってプロジェクト内にスクリプトファイルを作成していきます。

今回は簡単のため、必要最小限の以下のファイルを用意しました。

server.gs
function doGet(request) {
  var template = 'index';
  return HtmlService.createTemplateFromFile(template).evaluate();
}
index.html
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <meta charset="utf-8">
  <style>
    p {
      color: #4aac00;
    }
  </style>
  <!-- vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="vm">
    <p>{{ message }}</p>
  </div>
  <script>
    var vm = new Vue({
      el: "#vm",
      data: {
        message: "Hello GAS and Vue!"
      }
    })
  </script>
</body>
</html>

server.gsのdoGet(request)はエンドポイントがGETリクエストを受け取ったときに呼び出される関数。
変数templateの値は、HTMLファイル名の拡張子を除いた形にしておきます。
詳しいことは公式のここに書いてあるので、気になる人は目を通しておくといいかも。

index.htmlではjsDelivr上に置いてあるVue.jsのライブラリを読み込んでいます。
Google Apps Scriptのプロジェクトの作り方やVueの基本的な使い方はここでは説明しませんので、
公式や他の記事を探してみてください…

ひとまずこれでserver.gsのエンドポイントにリクエストがあったときに、
index.htmlがレスポンスとして返される仕組みが整いました。

次に実際にHTTPリクエストを受け取るためのエンドポイントの設定を行います。
設定といってもワンクリックだから簡単簡単。

スクリーンショット 2018-03-27 16.56.01.png

アクセス権限などの設定が完了するとエンドポイントが発行される。
スクリーンショット 2018-03-27 16.57.03.png

実際にエンドポイントへアクセスしてみると…
スクリーンショット 2018-03-27 22.40.43.png

お疲れ様でした!!

ちなみに開発途中のコードを見たいときは、
https://script.google.com/a/hogehoge/yourendpoint/exec
ではなく
https://script.google.com/a/hogehoge/yourendpoint/dev
にアクセスするとエンドポイント発行時のスナップショットではなく最新状態が確認できます。

ひとまず最低限の準備はできたので今日はここまで。

いまの状態だとCSSもJSもindex.html内にぶちこまれていて開発が進んでくると大変管理し辛いので、
次はプロジェクト内のjavascriptやcssファイルの別ファイル化について書きます。

kyhei_0727
LOVE DRIVEN DEVELOPER web周りを広く浅く楽しんでます
topgate
Google技術を中心に取り扱う技術者集団
https://www.topgate.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした