Google Apps Scriptをclaspでローカル管理しつつGithub管理

# はじめに

## claspとは

* Command Line Apps Script Projectsのレターで、[GSuite Developer Hub](https://script.google.com/home)（または、[G Suite Developer](https://developers.google.com/gsuite)のHomeから「[Go to console](https://developers.google.com/gsuite)」押下でアクセス）で管理しているGoogle Apps Scriptをローカル環境のワーキングコピーで管理したり、ローカルで[デバッグ](https://github.com/google/clasp/blob/master/docs/run.md)するためのツール

# 導入手順

1. npmをインストールする (既にインストールされている場合はバージョン確認）

```text:Terminal
## 1. npmをインストールする (既にインストールされている場合はバージョン確認）
$ cd ~
**PCM-99:~ webmaster-patche$ npm -v
6.10.3
## インストールされていない場合はbrewからinstallする
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort
<enter the login user password>
・・・
Downloading Command Line Tools (macOS Mojave version 10.14) for Xcode
・・・
==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations
==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh
$ brew -v
Homebrew 2.2.1
$ brew install node
・・・
==> node
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
$ node -v
v13.3.0
$ npm -v
6.13.2

## rootユーザーで実行した場合
Don't run this as root!
```

２. claspをインストールする

```text:Terminal
**PCM-99:~ webmaster-patche$ npm i @google/clasp -g
/Users/webmaster-patche/.nodebrew/node/v12.10.0/bin/clasp -> /Users/webmaster-patche/.nodebrew/node/v12.10.0/lib/node_modules/@google/clasp/src/index.js
npm WARN inquirer-autocomplete-prompt@1.0.1 requires a peer of inquirer@^5.0.0 || ^6.0.0 but none is installed. You must install peer dependencies yourself.

+ @google/clasp@2.3.0
added 191 packages from 118 contributors in 15.755s
**PCM-99:~ webmaster-patche$ clasp login
Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?%以下、マスキング%

Authorization successful.

Default credentials saved to: ~/.clasprc.json (/Users/webmaster-patche/.clasprc.json).
```

# セットアップ

１. ログイン

```shell:Terminal
$ clasp login
Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.deployments%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.projects%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fscript.webapp.deploy%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.metadata.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fdrive.file%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fservice.management%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Flogging.read%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&client_id=%マスキング%-vm2v2i5dvn0a0d2o4ca36i1vge8cvbn0.apps.googleusercontent.com&redirect_uri=http%3A%2F%2Flocalhost%3A57056
```

ウェブブラウザがopenされますので、ログインします

![スクリーンショット 2020-06-08 13.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/f2b7dd25-4980-f76d-4261-d4499af54c69.png)
![スクリーンショット 2020-06-08 13.30.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/6e3d2a20-e045-8f6d-6f60-d166f2a758da.png)
![スクリーンショット 2020-06-08 13.31.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/c3f7fd70-c698-b290-8b2d-a8e532638d4f.png)

ログインしたメッセージが表示されたらブラウザを閉じます

```shell:Terminal
Authorization successful.

Default credentials saved to: ~/.clasprc.json (/Users/webmaster-patche/.clasprc.json).
```

２. 既存のGasのプロジェクトをclone

```text:Terminal
**PCM-99:~ webmaster-patche$ clasp clone %以下、マスキング%
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 4 files.
└─ slack_notification/googleWeatherNotification.js
└─ appsscript.json
└─ const.js
└─ slack_notification/calendarNotification.js
```

３. Gitリポジトリ用のディレクトリを作成

```text:Terminal
**PCM-99:~ webmaster-patche$ mkdir -m 777 gas_script
**PCM-99:~ webmaster-patche$ mv slack_notification/ gas_script/
**PCM-99:~ webmaster-patche$ cd gas_script/
```

これでclaspのワーキングコピーにGSuite Developer Hubで管理しているリソースを移動することができました

# Githubと連動する

1. Gitリポジトリの初期化

- [Githubのリポジトリ一覧](https://github.com/%user_name%?tab=repositories)にアクセスする
- Newを押下する
<img width="326" alt="スクリーンショット 2019-12-13 19.45.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/d567cc91-d62b-9a1c-430d-817191de0016.png">

<img width="NaN" alt="スクリーンショット 2019-12-13 19.46.49.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/3c7ab38a-c020-7917-5a4b-b5bb57e58542.jpeg">

２. ワーキングコピーをGitに追加する

```text:Terminal
**PCM-99:~ webmaster-patche$ git init
Initialized empty Git repository in /Users/webmaster-patche/gas_script/.git/

**PCM-99:~ webmaster-patche$ ls -la
total 0
drwxrwxrwx   4 webmaster-patche  600333409   128 12 13 19:48 .
drwx------+ 75 webmaster-patche  600333409  2400 12 13 19:48 ..
drwxr-xr-x   9 webmaster-patche  600333409   288 12 13 19:48 .git
drwxr-xr-x   4 webmaster-patche  600333409   128 12 13 19:47 slack_notification
```

３. Index追加

```text:Terminal
**PCM-99:~ webmaster-patche$ git add .
**PCM-99:~ webmaster-patche$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

	new file:   slack_notification/calendarNotification.js
	new file:   slack_notification/googleWeatherNotification.js
```

４. Commit & push

```text:Terminal
**PCM-99:~ webmaster-patche$ git commit -m "slack notification scripts on GAS"
[master (root-commit) 5ecb74e] slack notification scripts on GAS
 2 files changed, 253 insertions(+)
 create mode 100644 slack_notification/calendarNotification.js
 create mode 100644 slack_notification/googleWeatherNotification.js
**PCM-99:~ webmaster-patche$ git remote add origin https://github.com/%user_name%/gas_script.git
**PCM-99:~ webmaster-patche$ git push -u origin master
```

５. リポジトリの確認
<img width="NaN" alt="スクリーンショット 2019-12-13 19.57.30.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179927/5c01ac1d-4218-c085-ceff-87400990a170.jpeg">