しがないエンジニアのブログ

技術的な内容をメモ代わりにつらつら

claspを使ったGoogle App Scriptのローカル開発・自動コンパイル

claspとは

claspは、Google App Script(GAS)をローカル環境で開発するためのgoogle製ツールである
ローカルで作業できる一番のメリットは、やはりgitとの連携が可能になることだろう

しかし、gasはES6には対応しておらず、イマドキのjsのコーディングスタイルは使えない
そこで本記事では、本ブログの前回の記事を利用して、

  1. ES6対応のjsコードで開発
  2. babelを使ってECMAScript5へコンパイル
  3. claspを使ってコンパイルしたファイルをgas上のスクリプトと同期(push)

をすべて自動で行えるようにする

claspのセットアップ

1 . claspのインストール

npm install -g @google/clasp

googleアカウントをプロジェクトごとに使い分ける場合はローカルにインストールし、package.jsonのscriptにloginみたいなのを作ればいいと思う

2 . 以下のサイトでGoogle Apps Script APIをオンにする
  https://script.google.com/home/usersettings

f:id:turgure:20180820145215p:plain

3 . ログインする

clasp login

ここまでの作業は最初の一度だけ行えばよい

ローカル環境の構築

claspの設定

clasp create <project_name>

とすれば、gasが連携したアカウントのgoogle drive上に作成され、ローカルに.clasp.jsonappsscript.jsonの2つのファイルが生成される

それぞれ以下のようなファイルになっている


.clasp.jsonに記述するscript idを取得し、手動で作成する
idの場所は
  ・ gasのURL
  ・ ファイル > プロジェクトのプロパティの「スクリプトID」
のいずれかから取得する(どちらも同じid)

前まではプロジェクトキーを使っていたが、現在は変わったらしい
古いプロジェクトだとurlがプロジェクトキーのものになっていて使えないので要注意

f:id:turgure:20180820155836p:plain
f:id:turgure:20180820170546p:plain

そして

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するディレクトリを選べるようになった。


参考サイト