JavaScript
GoogleAppsScript
clasp

claspを使い、Google Apps Scriptプロジェクトをgitでバージョン管理する

はじめに

Google Apps Script、活用していますか?
筆者は業務でそこそこ活用しており、その経験も踏まえて先月はアドベントカレンダーを書いたりしていました。
Google Apps Scriptを実例交えて基礎からざっくり学ぶ Advent Calendar 2017

ただ、業務で使っていると困ることがあります。

  • ソースコードが全てGoogleドライブ上で管理されている(誤削除怖い。gitでバージョン管理したい)
  • クラウド上のScriptEditorより、お気に入りエディタで開発したい

その長年の悩みが、Google公式のCLIツール「clasp」が登場したことにより少し改善しそうです。
まぁ今までもプラグイン等を使えば解決できたのですが、徐々にGASプロジェクトが肥大化するにつれてバージョン管理しないとなーと思っていた矢先、Google先生がリリースしてくれたのでこれを期に重い腰を動かした、というのが実情に近いです。

claspとはなんぞや

Googleドライブ上のGASプロジェクトを操作できるCLIツール。
claspとは「留め金」を意味するみたいです。

詳しくは以下記事を参照していただくと良いかと思います。
https://qiita.com/soundTricker/items/354a993e354016945e44

必要なもの

  • gitクライアント
  • gitリポジトリ(GitHubでもbitbucketでもGitLabでもお好きなものを)
  • Node.js(npm使うので)
  • npm(claspはnpmで配信されている)
  • clasp

ステップ

  1. gitクライアントを入れる
  2. Node.jsとnpmを入れる
  3. claspを入れる
  4. GAS APIをONに、claspでログインする
  5. Googleドライブでテストプロジェクトを作る
  6. claspでローカルにファイルをclone
  7. gitリポジトリを準備する
  8. pushする

筆者は自宅マシンがWindowsなのでWindowsでやっていますが、そんなに凝ったことはしていないのでMacでもLinuxでもイケるはずです。

1. gitクライアントを入れる

だいぶ前に入れて手順覚えていないのですが、恐らくこの辺の記事を参考にすればイケるはずです。

Windows
https://qiita.com/shinsumicco/items/a1c799640131ae33c792
Mac
https://qiita.com/furusin_oriver/items/974a7b7fb8c56ad88d6e

$ git --version

でバージョンが表示されたらOK

2. Node.jsとnpmを入れる

同じくだいぶ前に入れて手順覚えていないですが、入っていなければこの辺の記事を参考に。

Windows
https://qiita.com/taiponrock/items/9001ae194571feb63a5e
Mac
https://qiita.com/akakuro43/items/600e7e4695588ab2958d

$ npm -v

でバージョンが表示されたらOK

3. claspを入れる

claspの公式に書いてある通り、

$ npm i @google/clasp -g

だけで完了するはずです。
npm入っているのに正常に動かなかったら、npmのバージョンを上げてみるといいかもしれないです。

4. GAS APIをONに、claspでログインする

https://script.google.com/home/usersettings
にアクセスし、Google Apps Script APIをオンに。
これで該当アカウントのGASプロジェクトをclaspから操作が可能になります。

on.png

オンに変更したらclaspでログイン。

$ clasp login

Webブラウザが立ち上がるのでアカウント選択。

login.png

これでclaspを使い、Googleドライブ上のGASプロジェクトが操作できます。

5. Googleドライブでテストプロジェクトを作る

Googleドライブの新規→その他→Google Apps Scriptから新規PJを作成。
もしその他の選択肢にGASが無い場合は新規→その他→アプリを追加からGASを選択。

プロジェクト名は適当でOKです。

claspは公式のREADMEにある通り、スラッシュ区切りのファイル名はローカルに持ってきた際、自動的にディレクトリに変換されます。
それを確かめてみましょう。

  • script.google.com:
    • tests/slides.gs
    • tests/sheets.gs
  • ローカル:
    • tests/
      • slides.js
      • sheets.js

コード.gsをtest/dayo.gsにリネーム。
更に同一プロジェクトにスクリプトファイルを追加。
ファイル→新規作成→スクリプトファイルを選択。
追加したファイルはtest/nano.gsにリネーム。

directory.png

せっかくローカルに落としてもファイルが空だと成功か分かりづらいので、適当にソースコードを変更して保存しておきましょう。

test/dayo.gs
function myFunction() {
  Logger.log("hoge");
}
test/nano.gs
function myFunction() {
  Logger.log("fuga");
}

6. claspでローカルにファイルをclone

さて、いよいよclaspの本領発揮。このプロジェクトをcloneしてみましょう。
まずは保存したいディレクトリを作成し、cdで移動しておきましょう。

$ clasp clone [プロジェクトID]

プロジェクトIDはファイル→プロジェクトのプロパティで表示されます。
以下画像の赤で囲んだ部分をコピペします。

scriptId.png

成功すると、以下のようにちゃんとディレクトリ形式でcloneされます。

files1.png
files2.png

ファイルを開くとソースコードが正常にDLできているはずです。
あとはお好きなエディタで編集してみてください。

7. gitリポジトリを準備する

GitHubはPrivate(非公開)が有料の為、今回はbitbucketを利用します。
もちろん公開範囲に注意すれば別のサービスでもOKです。

bitbucketにログインしたらサイドメニューの+マークからリポジトリの新規作成を選択。

newRepo.png

非公開リポジトリとして新規作成します。
言語は…GASがないのでJavaScriptにしておきましょうか(未設定でも問題ないです)。

repoCreate.png

gitでpushやpullをするにはSSH鍵の登録が必要。無ければ作りましょう。

$ ssh-keygen -t rsa

テストであればパスフレーズも不要なので、Enter3回で作成完了。
デフォルトでは~/.ssh/にid_rsa(秘密鍵)とid_rsa.pub(公開鍵)が生成されます。

id_rsa.pub(公開鍵)をbitbucketに登録します。
サイドメニュー左下のユーザーアイコンからbitbucket設定→SSH鍵設定→鍵を追加でid_rsa.pubの中身を貼り付けます。

これでリポジトリにpushができるようになるはずです。

8. pushする

Tanaka Taro部分はご自身のお名前、tanaka_taro@example.comはご自身のメールアドレスを。
git@bitbucket.org:[アカウント名]/[リポジトリ名].git部分も変更必須です。

$ git config --global user.name "Tanaka Taro"
$ git config --global user.email tanaka_taro@example.com
$ git init
$ git status
$ git add -A
$ git commit -m 'first commit'
$ git remote add origin git@bitbucket.org:[アカウント名]/[リポジトリ名].git
$ git push -u origin master

正常にpushされたら成功!

source.png

おわりに

今回はgit管理下に置くところまで紹介しました。
実際はclaspでpullやpushをすることになりますが、やはり以下記事が参考になります。

https://qiita.com/soundTricker/items/354a993e354016945e44

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