GAS関連

GASのコードをGitHubで管理する

はじめに

とある案件でGASを利用することとなり、複数人でコードを触ることになりそうなのでGitHub でのコード管理について手順を整理してみます。

手順は至ってシンプルで、GAS GitHub アシスタントというChrome 拡張機能をGitHub と連携するだけ、といった感じです。

では早速。

GAS GitHub アシスタントをインストール

▼「Google App Script GitHub アシスタント」 を開き、「Chrome に追加」をクリックする

▼「拡張機能を追加」をクリックする

GitHub でアクセストークンを作成

GAS (GitHub アシスタント) からGitHub を操作するためのトークンを作成します。(ブラウザからGitHub にアクセスして操作を行う)

▼アイコンクリック後、「Settings」をクリックする

▼「Developer settings」をクリックする

▼「Tokens (classic) 」をクリックする

※「Fine-grained tokens」では、より細かい設定ができるようですが今回はclassicの方を利用します。

▼Note にわかりやすいトークン名を入力し、Select scopes で[repo/ gist] にチェックを入れて「Generate token」をクリックする

※gist のチェックは不要だったか。。

▼作成されたトークンを控える(コピーアイコンをクリックする)

トークン自体はこの画面(タイミング)でしか表示されないので、忘れずコピーする必要あり。
後で再表示しようとしても参照不可。

▼トークンが追加されていることを確認する

先ほどNote で指定した名称でトークンが作成されていることを確認する(前述の通りトークンの参照は不可)

GAS GitHub アシスタントにトークンを設定

▼Chrome の拡張機能一覧から、GitHub アシスタントのオプションを選択する

▼ユーザー名と、先ほど取得したトークンを入力して「GITHUB LOGIN」をクリックする

ユーザー名は任意の名称でOKだと思います。

▼Google アカウントを選択する

上記画面では、GAS を利用しているアカウントを選択します。
(複数アカウントを利用されていない場合には、上記選択画面は表示されない可能性ありです。)

▼Google アカウントへのアクセス許可を求められるので「Allow」をクリックする

“GasHub” って名前なんだ…と思いつつ。

▼ログインが完了(Logged in as:〜)していることを確認する

(設定完了まであと一歩!)
このタイミングでGitHub アシスタントのAPI が有効になっていることを確認しましょう。
無効化されている状態(恐らくデフォルトは無効化)だと、GitHub アシスタントが正常に動作しないようです。(後述しますが私の環境ではエラーがでました)

GitHub アシスタントでGitHub へのログイン完了が表示された画面で、地味ですが下記一文が記載されています。

Please make sure you have enabled Script API

指示通りに、API の有効化を確認します。

Apps Script サイト にアクセスして、Google App Script API を「オン」に設定する

▼GAS 画面で表示が増えていることを確認する

設定後の動作確認

設定が完了したので、動作確認してみました。

GAS から既存リポジトリへのPush

▼事前にGitHub 側でリポジトリを作成する(中身はREADME だけの状態)

▼GAS側でリポジトリを選択し、「↑」アイコンをクリックする

▼Diff 画面で差分を確認し、Comment を記入して「Push」をクリックする

▼画面下部の実行ログに ”Successfully” が表示されている事を確認する

▼GitHub 側でコードがPush されていることを確認する

GAS から新規リポジトリを作成

▼GAS 画面のリポジトリ選択部分で「Create new repo」 を選択し、「↑」アイコンをクリックする

▼「Repository name」 と「Description」 を入力し、「Create」 をクリックする

▼画面下部の実行ログに ”Successfully” が表示されている事を確認する

▼GitHub 側でリポジトリが追加されていることを確認する

GAS から新規ブランチを作成

▼GAS 画面のブランチ選択部分で「Create new branch」 を選択し、「↑」アイコンをクリックする

▼「Branch name」 を入力し、「Create」 をクリックする

▼画面下部の実行ログに ”Successfully” が表示されている事を確認する

▼GitHub 側でブランチが追加されていることを確認する

既存リポジトリからGAS へのClone (Pull)

▼新たに新規スプレッドシートを作成し、拡張機能からApp Script (GAS) を開く

▼(この時点ではリポジトリ, ブランチ 共に未選択の状態であることを確認)

▼リポジトリとブランチを選択し、「↓」アイコンをクリックする

▼Diff 画面で差分を確認し、「Pull」をクリックする

※タイトルに「Clone」 と記載しましたが、GitHub からGAS にコードを反映させるときはPull になります。

▼(このログ表示は一瞬しか表示されないが、) 画面下部の実行ログに ”Successfully” が表示されている事を確認する

▼画面下部の実行ログに ”Repository updated” が表示されている事を確認する

GitHub アシスタントのAPI が有効になっていない場合、下のようなエラーログ(”undefined”) が表示される可能性があります。(私は表示されました)

▼(上手くいかないときのエラーログ表示)

まとめ

  • GAS とGitHub 連携はGitHub アシスタントを使えばOKということが確認できた
  • 連携後はGAS 側のGitHub アシスタントのAPI 有効化を忘れないこと
  • Push / Pull 時にはDiff 画面で差分確認できて便利
  • トークンについては、きめ細かなアクセス権の制御ができる「Fine-grained personal access tokens」を利用した方が良いかもしれない

使い方もとてもシンプルで使いやすいと思いました◎

ただひとつ難点をあげるとすれば、、、リポジトリ名の表示範囲が狭いという点ですかね。

そんなにリポジトリを切り替えることは無いとは思いますが、選択中のリポジトリがわかりづらい点が少し気になりました。

もっと言うと選択中のリポジトリを確認する方法が無いように感じましたが気のせいですかね…(確認方法ご存じの方いれば教えてください)

▼(リポジトリ名が省略されている点が悲しい)

以上です。最後まで読んでいただきありがとうございました。