Redmine APIをGASで実行して、ガントチャートを同期する(6: webpackを導入し、複数のツールを１つのシートで使えるようにする(発展編))
こんばんは！株式会社スマレジ、開発部のmasaです！
緊急事態宣言の対象都道府県が縮小されて、徐々に沈静化してきていますが、 皆様いかがお過ごしでしょうか？
規制が緩くなって、人の動きが増えるタイミングが来そうなので、 一層、免疫力を下げないように、健康に留意して毎日過ごしていきたいですね。
今回は前回に引き続き、webpackを使って一つのシートに複数のツールを紐づける方法を考えます。
webpackでビルドしたスクリプトを実行するときの懸念点
webpackでビルドしたスクリプトはfunctionで囲わないと実行できない
コンテナバインド型のプロジェクトの場合、webpackでビルドしたソースはそのままGAS上で実行することはできません。
なぜなら、GASの実行単位は基本的に「関数」単位だからです。（調べてみた限りだと、関数単位以外の実行は無理そう・・・？）
- webpackでビルドする
- ビルドしたソースをfunction hogehoge(){ ... } で囲う(hogehogeの部分は任意)
- clasp pushする
ここで注意が必要なのは、関数名(hogehogeの部分)はユニークである必要がある点です。 なので、前回のように複数人でツールを作成する場合は、関数名の重複を意識して実装する必要があります。
また、2.の作業を忘れてclasp pushを実行した場合、ツール類はすべて動かなくなるリスクもあります。
上記の理由から、できる限りこの工程を自動化させたくなってきます。
画面付きのツールに対応する
GASには、あらかじめプロジェクト内にHTMLファイルを登録しておき、 スクリプトからそのHTMLを読み込んで表示させる機能があります。 また、そのHTMLにフォーム要素を持たせ、submit時にその値を取得することもできます。
こういった、ツール専用の画面では、 1. ツール画面を表示する関数を拡張メニューから実行(function Aとする) 2. ツール画面からメインロジックを実行(function Bとする)
という二つの段階を踏みます。 この場合、function A,B両方をwebpack１回でビルドするのは難しいです。 (ツールにわたってくる値によって、メソッドを振り分けすればできそうですが、実装は煩雑になってしまいます。)
シンプルなのは、画面の表示をするメソッドは別に用意(function Aとfunction Bを別ファイルとして用意する)しておいて、clasp pushする際にビルドファイルと一緒に実行環境にあげる手段です。
上記の手段を実行するために、下記のような対応を追加します。
- ツール作成時に、「拡張メニューから実行する関数(function A)」と「ビルドしたときにつける関数名(function B)」を決める機能を追加
- webpackのビルド対象にならないディレクトリ
resourcesをツール内に用意 - HTMLやビルドしないJavascriptを
resources内に設置 - ツールのビルド後に、
resources内のファイルをpushされるフォルダにコピー - 拡張メニュー用スクリプトを自動生成
clasp pushの仕様
clasp pushは実行環境のソースを差分更新ではなく、全体更新します。
つまり、a.gsとb.gsが実行環境にある状態で、c.gsをclasp pushすると、a.gsとb.gsは消えてしまうのです。
これは、webpackでビルドするときに、ビルドしたいツールのみビルドできるようにしておかないと、
実行環境でデグレしてしまう原因になります。
ツール管理用のバッチをnode.jsで作成する。
前述で上がった問題を解消するために、ツール管理用のバッチ群CTMを作成しました。
作成したものを↑のgithubに設置しておりますので、 興味のある方は覗いてみてください。
大まかな流れを書くと、
1. npm run createで新規のツール用プロジェクトを作成（この時プロジェクト内にresourcesディレクトリも作られる）
2. npm run buildを実行すると、どのツールをビルドするか選択し、ビルド。
3. ツールが不要になったらnpm run deleteを実行し、ツールを削除
こんな感じです。
