Google Apps Script でWebアプリ事始め（ややモダン版）

こんにちは。アクトインディでPCおじさんをしている kadota です。
以前、Google Apps Script(GAS)の紹介記事を書きました。

今度はイマドキの素敵なツールで試してみましょう。ブラウザ上のスクリプトエディタではなく、ローカル環境でコードを編集・管理できるようにします。

google/clasp https://github.com/google/clasp

まず前回の構成でなぞってみる

google/clasp については、すでに弊社森下が以下の記事で取り上げています。

tech.actindi.net

これにならって、srcディレクトリにソースコードを置くようにします。 gitによる管理は package.json と src内に対して行えば良いことになります。

$ clasp create clasp-ts-sample --rootDir ./src
$ clasp pull

※pullする前に clasp login している必要があります。初回準備についてはこちらもわかりやすいです。 https://codelabs.developers.google.com/codelabs/clasp/#0codelabs.developers.google.com

pullに成功すると、srcディレクトリに Code.js ができています。ではsrcディレクトリにそれ以外のファイルも作っていきます。まずは jQuery を使う以前の紹介記事の構成です。以下のファイルを新規作成し、中身を（Code.js含めて）前回のコードをそのまま流し込んでみます。

index.html
index.js
index.css

※過去記事の「Webアプリのテンプレまとめ」の内容をコピペしてください。※Code.js (= コード.gs) も忘れずに

clasp status でどう push されるかを事前に確認できます。

$ clasp status  
Not ignored files:  
└─ src/Code.js  
└─ src/appsscript.json  
└─ src/index.html  
└─ src/index.js  

Ignored files:  
└─ src/index.css

このままではcssファイルが無視されてしまうようです。試しにこのまま push してみます。

$ clasp push
Push failed. Errors:
A file with this name already exists in the current project: index

cssの件だけでなく、push自体が失敗してしまいました。index.jsとindex.htmlの名前が競合してるでしょうか。

index.css.html
index.js.html

ファイル名は上記のようにすればpushすることはできます。中身も実質タグで囲ったhtmlなのでまあ今回はOKです。（本来はビルドツール使ってインライン化するほうが良さげですが）

スクリプトエディタでの「ファイル＞版の管理」、バージョン付与は以下のコマンドでできます。

$ clasp deploy

現在の状態は、以下で確認できます。

$ clasp deployments

4 Deployments.
- AKfycbyZN7yNftlIDu0mJil-2Ylz0HkDBfU-WU1TbeRrcbY @HEAD 
- AKfycbytuKhFSN1dFu6IQt7t-slG2ODOrGczB8-JL7imD1xPcqJbWEI @2 - web app meta-version
- AKfycbynDYTEKXvkeDQJSum-bHSPIUPk9VfsAEMmIkuGSaR9oC673ndweLhrj67JieOdznw- @2 
- AKfycbxzVjjsHbd2SHtGT4XJa7CFLEpUWjflszW63EGm7AGz1Je-EiOx5uKZPh6vW-Li3ncD @1

末尾に - web app meta-version と付いてるものは、スクリプトエディタで「公開＞ウェブアプリケーションとして導入」で版を選んで公開したものです。

これで google/clasp で以前紹介した内容のローカル環境での編集と、版の管理ができるようになりました。

中身もモダンにしたい

せっかくなので中身もちょっとだけモダンにしたいと思います。
テンプレート index.html と JS index.js.html を書き換えます。

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title><?= title ?></title>
    <?!= include('index.css'); ?>
  </head>
  <body>
  <div id="app">
    <h1><?= title ?></h1>
    <p>{{ message }}</p>
    <ul>
      <li v-for="li in lists">{{ li }}</li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <?!= include('index.js'); ?>
  </body>
</html>

GAS の scriptlet <?= foo ?> と Vue.js の mustache シンタックス {{ foo }} を（わざと）混在させてます。
Vue.js のほうは、データバインディングのおかげで変更を即座に画面に反映できます。

index.js.html

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Content ...',
    lists: ['foo', 'bar', 'baz', '...'],
  },
  mounted: function() {
    this.message = "... Loaded."
  },
});
</script>

駆け足の紹介で、まだコンポーネント化もなにもされてませんし課題も残っているのですが（まだ TypeScript 触ってなかった！）、GASでもさくっとWebアプリが作れることがわかります。

※おまけ
実は、Code.js の拡張子を ts に書き換えて push するだけで、いちおう TypeScript になります。スクリプトエディタ上で確認すると、ちゃんと TypeScript として評価・コンパイルされたのがわかります。

Code.gs

var exports = exports || {};
var module = module || { exports: exports };
function doGet(request) {
    var t = HtmlService.createTemplateFromFile('index'); //index.htmlをテンプレートに使う
    t.title = 'Vueだだだ';
    return t.evaluate();
}
function include(filename) {
    return HtmlService.createHtmlOutputFromFile(filename).getContent();
}