Google Apps Script(GAS)をclasp&GitHub Actionsでお手軽CI管理する

本ページについて

コーポレートエンジニアとして生きていく以上、お友達にならないといけない(?)Google Apps Script。
使いこなすと、色々と便利なので大変役立つので業務で使っている方も多いと思います。

ですが、最大のデメリットとして、 Google Apps Scriptは標準機能だけではコード管理ができない」 ということがあげられると思います。
このページはGASをコード管理するためにステップバイステップで手順を記載したページになります。

対象読者

  • 個人でGASを使っているが、チームにもコードを共有して管理したくなった。でも手法がわからない。CIって何?って人向け。
    • 「CIは興味あるけど手が出せないよ...」という方に役立てば幸いです。
    • GitHubの操作方法については触れないので自学してください。

今回のページでどんな嬉しいことがおこるか

コード管理ができる

上記につきると思うのですが、具体的になにが嬉しいかというと

  • 問題のあるコードがリリースされてしまっても比較的かんたんに戻せる。
  • レビューしていないものはリリース禁止等のルールがGitHub側の機能でもたせることができるので、「誰かが知らないうちに更新して事故発生」案件が防げる。

といったことがあるかなと。そして、

GASのオーナーをGAS編集者と分離できる。

これは何かというと、共有のGASを作成した場合、よくあるケースとして「共有用Gsuiteアカウントを作成して、そのアカウントのID/PASSを共用してGASを編集する」というのがあると思います。

これは実は危険で、「誰が編集したかがわからない」とか、そもそもGAS以外にGmailとかも使えるので「共有用アカウントでGmail等から情報持ち出し&誰が持ち出したかがわからない」という問題がおきます。

繰り返しになりますが、これは非常に厄介。
しかもそのアカウントが「Webアプリケーションとして公開」(詳細は後述)が可能なユーザだったりすると、各種社内資料の閲覧権限をいじってしまい、Internetに公開されてしまうかもしれないという問題も。
これが、CI化することで

  • GAS編集はGitHub上で行う。
    • 編集者が誰かわかる。
  • GAS編集以外できない。
    • 情報の持ち出しようがない。

という嬉しいことがおきます。

使うもの

  1. clasp
    • claspとは?
      • googleが提供するGAS等を管理するフレームワーク
      • 詳細はググるとたくさん出てくるのでそちらを参照。
      • ざっくりいうと、GAS管理を簡単にする便利ツール。
  2. GitHub Actions
    • GitHub Actionsとは?
      • GitHub社謹製のCI製品。GitHubに標準で搭載されている。
      • 無料ではないが、契約プランによっては無料枠の範囲で使える。詳細はググってください。
  3. CIって?
    • 細かく語ると色々深いのでざっくりいうと「GitHubに反映すると本番にも自動反映する仕組み」(本当は違うが、こういう理解で十分かと。)
    • 参考URL: https://cloudbees.techmatrix.jp/devops/ci/

本ページで作成する構成

色々なケースに対応できるように下記要件で構成しようと思います。 管理対象のGASのケースに応じて下記要素の不要なところを適宜削ってもらえればと思います。

  • GASはWebアプリケーションとして公開する。
    • GASを外部アプリ(例えば、SlackのOutgoing Webhook(参考URL)) と連携できるGASにする。
  • いきなり編集内容のGASが反映されると改修ミスがあったときなどが怖いのでテスト環境(Sandbox)を用意。そちらに一旦、反映し問題が無いものを本番GASに反映されるようになする。

構成図でいうと、こう。

f:id:undersooon:20191225131257p:plain
構成図

構築手順

事前準備その1:必要アカウント、リポジトリの用意

まず、事前に下記アカウント、リポジトリを用意しておきます。2はお近くのコーポレートエンジニアにお願いするといいと思います。 1についてもコーポレートエンジニアに相談すると検証用のアカウントくれるかもしれません。

  1. Sandbox用のGmailアカウント(何でもいいのでフリーのGmailアカウントとかを取得するといいと思います。もちろんコードテスト用のみに使用し、悪用は厳禁です。)
  2. 本番GASを動かすGsuiteアカウント(個人アカウントでもいいですが、後々のこと、セキュリティのこと諸々を考えるとGAS専用アカウントとかを払い出すといいと思います。)
  3. GAS管理用のGitHubリポジトリを用意する。Privateリポジトリ推奨。

事前準備その2:認証Tokenの取得、管理対象GASの作成

claspで使用するための認証Tokenを取得します。
自分のPCでclaspを一時的にインストールしてtokenを取得しますが、tokenを得られたら自PCからはclaspを削除してもOKです。

  1. SandBoxアカウントで「Google Apps Script API」をオンにする。
  2. claspはNode.jsで動くので Node.js/npmをインストールします。
  3. claspをインストールします。
    • npm i @google/clasp -g
  4. tokenを取得するため、事前準備で用意したSandBoxアカウントでclasp loginする。
    • clasp login
      • ログインウィンドウが立ち上がるので認証情報を入力する。いろいろと権限も求められるがOKしておく。
      • ログインに成功するとtoken情報を生成した旨、そのパスを示すメッセージが表示されるのでそのtokenファイルをメモしておく。(後で使う)
        • Macの場合のパスは「 ~/.clasprc.jsonWindowsは試してないのでわかりません。。
  5. 適当なパスに空ディレクトリを作成して、そこにcdする。
  6. 管理対象のGASを作成する。
    • clasp create SAMPLE
      • WebAppとして公開する場合は、「webapp」、通常のGASとして作成する場合は「standalone」を選択するが、あとで変更可能なのでとりあえず「standalone」にしておく。
      • f:id:undersooon:20191225135652p:plain
    • ※作成されるとGASのURLが表示されるので、忘れずにメモしておくこと。
  7. カレントディレクトリに「.clasp.json」 が出来ているのでこのファイルの内容もメモしておく。(後で使う)
  8. 本番GASを動かすGsuiteアカウントでもtokenを取得するため、上記手順を行いtokenを取得、GASを作成する。

構築

以上までの準備が整いましたらいよいよ構築です。
GitHub Actions用のワークフローとして下記ymlをGitHub側にアップロード(push)するので事前に作成しておきます。

  1. 下記リポジトリにテンプレートを用意したのでgit clone等で取得する。
  2. 「事前準備その1」で用意したリポジトリに上記リポジトリの内容を配置する。
    • 手で配置してもいいですし、 この参考手順で配置してもいいと思います。
    • ちゃんと配置できていればこんな形になっているはず。
    • f:id:undersooon:20191225182404p:plain
  3. Tokenをベタ書きするのは怖いので、GitHub側の「Secrets」にToken情報をそれぞれ下記のように登録する。Token情報は「事前準備その2」で取得した、「.clasprc.json」から得る。
    • f:id:undersooon:20191225182830p:plain
    • 面倒&細かいことは気にしない!という人は、clasprc.jsonに「事前準備その2」で取得したTokenファイル「.clasprc.json」を上書いてください。
    • PRD_ACCESS_TOKEN
      • 本番側Tokenの「access_token」
    • PRD_ID_TOKEN
      • 本番側Tokenの「id_token」
    • PRD_CLIENT_ID
      • 本番側Tokenの「client_id」
    • PRD_REFRESH_TOKEN
      • 本番側Tokenの「refresh_token」
    • PRD_CLIENT_SECRET
      • 本番側Tokenの「clientSecret」
    • STG_ACCESS_TOKEN
      • Sandbox側Tokenの「access_token」
    • STG_ID_TOKEN
      • Sandbox側Tokenの「id_token」
    • STG_CLIENT_ID
      • Sandbox側Tokenの「client_id」
    • STG_REFRESH_TOKEN
      • Sandbox側Tokenの「refresh_token」
    • STG_CLIENT_SECRET
      • Sandbox側Tokenの「clientSecret」
  4. 「事前準備その2」で取得した、「.clasp.json」から、下記値を上記手順と同様に「Secrets」に登録する。
    • PRD_SCRIPT_ID
      • 本番側の「scriptId」
    • STG_SCRIPT_ID
      • Sandbox側の「scriptId」
  5. (オプション)「Webアプリケーションとして導入」をするなら、「appscript.json」に下記を追記する。
  6. 以上!

運用編

上記までが完了しましたら、GitHubでGASのコードが管理できるようになります。
具体的には

  1. scripts/配下に .js もしくは .ts拡張子のScriptを配置する。
  2. (今回のSAMPLEを使用する場合) masterリポジトリにmergeするとSandBox側のGASに設定内容が反映されるので確認する。
    • 例: Code.jsというファイルを配置して、アップロードすると、GAS側にもCode.gsという形で反映されます。
  3. (今回のSAMPLEを使用する場合) 2でコードが問題ないことが確認できたら、releaseリポジトリにmerge。本番側GASにマージされることを確認する。

参考までに:運用デモ
https://streamable.com/dfzyv

最後に

色々と初期設定は煩雑ですが、一回設定が終わればGitHubにpushするだけでGASに反映されるので便利です。
また、GitHubの機能を使ったレビュー機能が使えたり、GASのオーナー権限を絞ることができたりと色々と応用の幅があると思いますのでぜひぜひ試してみてくださいませ。

参考にさせて頂いたURL

qiita.com

qiita.com

github.com