前提条件
javascript によるコードを実行できる環境として Google Apps Script は低コストな環境と言え、 手軽にWebアプリケーションやボットなどを作ることができます。ただし、現時点でサポートされている Google Apps Script の実行環境はjavascript1.6に1.7，1.8の機能を追加したもののようです。
Built-in Google Services | Apps Script | Google Developers
さらに、Weｂブラウザ上の編集画面を利用してしまうとプロジェクトのバージョン管理やテストもやりにくく、チーム開発を行ったり一人開発でも長期間の場合に効率の低下は免れません。
こういった問題を解決するべく、モダンに npm によって管理されたプロジェクトを使って Google Apps Script の開発を行います。
サンプルプロジェクト
numa08/familly-calendar-notifier
やり方
依存関係
環境を構築する上で欠かせない依存ツールは以下となります。
- babel-cli
- babel-preset-es2015
- babel-preset-latest
Babel を使って es6 で書かれたコードを google apps script でも動作するようにコンパイルします。
- babelify
- browserify
- gasify
Browserify を使って Google Apps Script で import/export や require を利用できるようにします。gasifyは Google Apps Script でも global を利用できるようにするためのパッケージです。
- node-google-apps-script
cli から node のプロジェクトを Google Apps Script にアップロードするためのツール。
ディレクトリ構成
環境を作るにあたりディレクトリの構成を考えます。開発のためのソースコードはsrcディレクトリに配置していきます。BabelやBrowserifyを利用して生成されたコードはbuildディレクトリ以下に展開しバージョン管理対象外とます。イメージとしてはこんな感じ。
├── README.md
├── build # 自動生成されたコード
├── gapps.config.json # node-google-apps-script の設定ファイル
├── node_modules
├── package-lock.json
├── package.json
└── src # ソースコードはここに書く
こういう構成になるようにセットアップをしていきます。
セットアップ
npm initをして作業ディレクトリを作ります。
danthareja/node-google-apps-script: The easiest way to develop Google Apps Script projectsのREADMEを読んで認証とかを終わらせて、作業ディレクトリにgapps.config.jsonを作ります。
{
"path": "build/generated/src",
"fileId": "<google apps script のファイルID>"
}
また、Babelの設定を.babelrcに書きます。
{
"presets": ["es2015"]
}
スクリプト
package.jsonにスクリプトを追加します。
{
"scripts": {
"build": "mkdir -p build/intermediates/babel; mkdir -p build/generated/src; babel src -d build/intermediates/babel; browserify -t babelify -p gasify build/intermediates/babel/index.js -o build/generated/src/index.js",
"test": "mocha --compilers js:babel-core/register src/*_test.js",
"deply": "npm run build; gapps push"
}
}
- build
ビルドスクリプトではBabelでbuild/intermediates/babel以下にコードを生成し、Browserifyでbuild/generated/src以下にコードを生成します。node-google-apps-scriptはbuild/generated/src以下のソースをアップロードしてくれます。
- test
今回はsrc/*_test.jsがテスト対象としています。VSCodeでこういうファイル名にしておくとファイル名指定ジャンプのときに楽なんですよね。mochaの中でimport/exportを利用したいのでmocha --compilers js:babel-core/registerを指定しています。
- deploy
ビルドしてデプロイ
.gitignore
バージョン管理をするときに対象外にしておきたいファイル達。とりあえず、https://www.gitignore.io/api/nodeは含めておくものとしてそれ以外に次の内容を書き足す。
build
gapps.config.json
- build
自動生成されたコードが展開されるディレクトリはバージョン対象外にする。
- gapps.config.json
Google Apps Script のファイルIDなんかが書かれているので、オープンなリポジトリで開発をするときは対象画にしておいた方がforkとかできそう。クローズドなリポジトリの場合はその限りでもない。
まとめ
Google Apps Script を es6 で開発できる環境を作りました。これでテストやバージョン管理ができるようになります。また、CLIを利用する公正なのでCIサービスとの連携なんかもお手軽に行うことができそうです。あとは、お好きなエディターで開発をするとより作業効率も上がるでしょう。ｼｭｯとWebアプリを作るときに Google Apps Script は便利そうですね。