こんにちは。アクトインディでPCおじさんをしている kadota です。
以前、Google Apps Script(GAS)の紹介記事を書きました。
今度はイマドキの素敵なツールで試してみましょう。ブラウザ上のスクリプトエディタではなく、ローカル環境でコードを編集・管理できるようにします。
google/clasp https://github.com/google/clasp
まず前回の構成でなぞってみる
google/clasp については、すでに弊社森下が以下の記事で取り上げています。
これにならって、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(); }
超簡単ですね!!
アクトインディでは エンジニアを募集しています!