Edited at

Google Apps Script 開発環境構築

More than 1 year has passed since last update.


前提条件

javascript によるコードを実行できる環境として Google Apps Script は低コストな環境と言え、 手軽にWebアプリケーションやボットなどを作ることができます。ただし、現時点でサポートされている Google Apps Script の実行環境はjavascript1.6に1.7,1.8の機能を追加したもののようです。

Built-in Google Services  |  Apps Script  |  Google Developers

さらに、Webブラウザ上の編集画面を利用してしまうとプロジェクトのバージョン管理やテストもやりにくく、チーム開発を行ったり一人開発でも長期間の場合に効率の低下は免れません。

こういった問題を解決するべく、モダンに 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/exportrequire を利用できるようにします。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を作ります。


gapps.config.json

{

"path": "build/generated/src",
"fileId": "<google apps script のファイルID>"
}

また、Babelの設定を.babelrcに書きます。


.babelrc

{

"presets": ["es2015"]
}


スクリプト

package.jsonにスクリプトを追加します。


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は含めておくものとしてそれ以外に次の内容を書き足す。


.gitignore

build

gapps.config.json


  • build

自動生成されたコードが展開されるディレクトリはバージョン対象外にする。


  • gapps.config.json

Google Apps Script のファイルIDなんかが書かれているので、オープンなリポジトリで開発をするときは対象画にしておいた方がforkとかできそう。クローズドなリポジトリの場合はその限りでもない。


まとめ

Google Apps Script を es6 で開発できる環境を作りました。これでテストやバージョン管理ができるようになります。また、CLIを利用する公正なのでCIサービスとの連携なんかもお手軽に行うことができそうです。あとは、お好きなエディターで開発をするとより作業効率も上がるでしょう。シュッとWebアプリを作るときに Google Apps Script は便利そうですね。