claspを使ったGoogle App Scriptのローカル開発・自動コンパイル
claspとは
claspは、Google App Script(GAS)をローカル環境で開発するためのgoogle製ツールである
ローカルで作業できる一番のメリットは、やはりgitとの連携が可能になることだろう
しかし、gasはES6には対応しておらず、イマドキのjsのコーディングスタイルは使えない
そこで本記事では、本ブログの前回の記事を利用して、
をすべて自動で行えるようにする
claspのセットアップ
1 . claspのインストール
npm install -g @google/clasp
googleアカウントをプロジェクトごとに使い分ける場合はローカルにインストールし、package.jsonのscriptにloginみたいなのを作ればいいと思う
2 . 以下のサイトでGoogle Apps Script APIをオンにする
https://script.google.com/home/usersettings
3 . ログインする
clasp login
ここまでの作業は最初の一度だけ行えばよい
ローカル環境の構築
claspの設定
- gasやスプレッドシートを新規作成する場合
clasp create <project_name>
とすれば、gasが連携したアカウントのgoogle drive上に作成され、ローカルに.clasp.json
とappsscript.json
の2つのファイルが生成される
それぞれ以下のようなファイルになっている
- gasやスプレッドシートがすでに存在する場合
.clasp.jsonに記述するscript idを取得し、手動で作成する
idの場所は
・ gasのURL
・ ファイル > プロジェクトのプロパティの「スクリプトID」
のいずれかから取得する(どちらも同じid)
前まではプロジェクトキーを使っていたが、現在は変わったらしい
古いプロジェクトだとurlがプロジェクトキーのものになっていて使えないので要注意
そして
clasp pull
を実行することで、google drive上のgasファイルをローカルに同期することができる
.claspignoreの追加
基本的に、ローカルのファイルをgas上に同期(push)しようとすると、すべてのファイルが同期されてしまう
そのため、.claspignore
ファイルを作成することで、どのファイルをpushするかを決める(.gitignore
と同じ役割)
このとき、pushするファイルにはappsscript.json
が必ず含まれていなくてはいけない
以下のようなファイルを作成するとよい(main.jsはgas上に同期するファイル)
(余談)
本来なら、.claspignore
など作らずとも、.clasp.json
のプロパティにrootDirなるものが存在し、それを指定すれば自動的にそのディレクトリ内のファイルのみをターゲットとしてpushするファイルを決めてくれるはず、だった。
しかし、appsscript.json
がどう頑張ってもignoreされてしまい、2018/08/20現在まだその問題が続いている
$ clasp status Not ignored files: └─ dist/main.js Ignored files: └─ dist/appsscript.json
なので、今は諦めて.claspignore
を使おう
Command Failed: clasp push · Issue #281 · google/clasp · GitHub
babelの設定
前回の記事を参考に構築
そして、package.jsonを以下のように書き換える
"scripts": { "start": "watch 'npm run build' src/", "build": "node index.js && npm run push", "push": "clasp push" }
build後にclasp push
を実行するコマンドを追加
これで、前回同様
$ npm start
を実行すれば、自動的にgas上のファイルの変更まで行うことができる
gasのファイルを変更しても、ブラウザ更新しないと反映されないので一瞬ドキッとする…
なにか組み合わせてできないものだろうか
追記:20181218
20181218時点でclaspの最新版が 1.7.0
だったので、それに移行した。
$ npm info @google/clasp versions [ '1.0.0', '1.0.1', '1.0.2', '1.0.3', '1.0.4', '1.0.5', '1.0.6', '1.0.7', '1.1.0', '1.1.1', '1.1.2', '1.1.3', '1.1.4', '1.1.5', '1.3.0', '1.3.1', '1.3.2', '1.3.3', '1.4.0', '1.4.1', '1.5.0', '1.5.1', '1.5.2', '1.5.3', '1.6.0', '1.6.1', '1.6.2', '1.6.3', '1.7.0' ] $ npm install @google/clasp@1.7.0 -g /usr/local/bin/clasp -> /usr/local/lib/node_modules/@google/clasp/src/index.js + @google/clasp@1.7.0 added 16 packages from 11 contributors, removed 4 packages and updated 32 packages in 8.627s $ npm list --depth=0 -g /usr/local/lib ├── @google/clasp@1.7.0 ├── npm@6.4.0 ├── npm-check-updates@2.15.0 └── pure-prompt@1.7.0
また、このときに、このまま使おうとすると、以下のエラーが発生する
$ clasp push Error retrieving access token: TypeError: Cannot read property 'expiry_date' of undefined
そのため、再度ログインし直す
$ clasp logout $ clasp login
1.7.0に移行したことで、 .clasp.json
のrootDirを指定してpushするディレクトリを選べるようになった。
参考サイト