ローカルでgas編集・更新するための環境設定



# 動機
普段はweb屋さんをしていますが、この仕事をしていると、

- 「googleスプレッドシートでこんな感じに作って」
- 「googleフォームをこんな風にしたい」

なんていう社内からのリクエストが飛んできたりします。
大体はサクッと作れたりするのですが、今回そこそこの量のコードを書かないといけない仕事を依頼されたときに私は思いました。

**「スクリプトエディタが使いづらい。。。」**

※デフォルトのこれです
![スクリーンショット 2018-06-30 14.34.19.png](https://qiita-image-store.s3.amazonaws.com/0/131949/e73649ff-2937-16d5-9052-8f1dea656eb6.png)

# 目的
google apps scriptのベースはjavascriptなので、理想は、普段どおりvimを使うこと。
ただ、スクリプトエディタは更新と同時に実行したりデバッグしたり出来ます。
スプレッドシートなどを確認する都合などもあるので、その部分はブラウザ上で出来ればいいかなと思いました。
なので、今回は、

- ローカル環境でgasを編集する
- 編集した内容を簡単に更新する

ための環境を作ります。

# 環境
- macOS High Sierra 10.13.5
- node v10.5.0
(v0.12.x 以上であれば良いようです。)

# 手順

## 1. インストールとOAuth承認

ホームディレクトリでコマンド叩く

```sh
$ npm install -g node-google-apps-script
```

<a href="https://console.developers.google.com/">Google Developers Console</a>からプロジェクト作成。
![スクリーンショット 2018-06-30 13.49.05.png](https://qiita-image-store.s3.amazonaws.com/0/131949/f16daf02-d68d-46b6-d9a5-199b6cd2e056.png)

プロジェクトが出来たら、APIを有効化。
![スクリーンショット 2018-06-30 13.57.11.png](https://qiita-image-store.s3.amazonaws.com/0/131949/19c20c08-2a9a-4885-dd94-30c98c330281.png)

Google Drive APIを検索して選択。
![スクリーンショット 2018-06-30 13.51.05.png](https://qiita-image-store.s3.amazonaws.com/0/131949/5e891fef-18cc-c15d-c168-65ea38182e7d.png)

有効にする。
![スクリーンショット 2018-06-30 13.51.26.png](https://qiita-image-store.s3.amazonaws.com/0/131949/4c1c09f1-bcf2-b96f-3c37-725db345df7e.png)

ダッシュボードに戻るので、「承認情報」から、承認情報を作成。
「OAuth クライアント ID」を選択。
![スクリーンショット 2018-06-30 13.52.45.png](https://qiita-image-store.s3.amazonaws.com/0/131949/9051f0a5-aae6-df8b-00f2-e78d57fcb0a8.png)

サービス名を求められたので設定。
![スクリーンショット 2018-06-30 13.52.59.png](https://qiita-image-store.s3.amazonaws.com/0/131949/c2b3d7f6-0836-ed86-6867-31180933f46b.png)
↓
![スクリーンショット 2018-06-30 13.53.19.png](https://qiita-image-store.s3.amazonaws.com/0/131949/b120f822-aa85-adaf-0903-b492c6a02623.png)

アプリケーションの種類は「その他」を選択。
![スクリーンショット 2018-06-30 13.53.54.png](https://qiita-image-store.s3.amazonaws.com/0/131949/69dbc7b5-5c1d-1e82-ebce-f5e95f811ff4.png)

クライアントIDとシークレットが表示される。
![スクリーンショット 2018-06-30 13.54.05.png](https://qiita-image-store.s3.amazonaws.com/0/131949/d80f7b56-b62f-354c-5c4e-45e53025bac4.png)

先ほど作成したIDが表示されるので、右の編集アイコンをクリック。
![スクリーンショット 2018-06-30 13.54.52.png](https://qiita-image-store.s3.amazonaws.com/0/131949/4ae1fa72-dca3-f192-a9db-057a3bd868cd.png)

jsonファイルをダウンロード。
![スクリーンショット 2018-06-30 13.55.05.png](https://qiita-image-store.s3.amazonaws.com/0/131949/b905fad6-c430-c0cc-39f4-59f9630eee9f.png)

jsonファイルを、ダウンロードしたフォルダからホームディレクトリに移動。

そのままコマンドを打って、認証。

```sh
$ gapps auth ./client_secret_<client_secret_key>.json
```

正常に読み込まれると、

```
Please visit the following url in your browser (you'll only have to do this once): https://accounts.google...
```

と表示されるので、表示されているURLに移動して、承認する。

```
Successfully Authenticated with Google Drive!
```

という画面が出たら成功。

## 2. gasプロジェクトの作成とローカルでの編集

任意の場所にgasファイルを作成する。
![スクリーンショット 2018-06-30 14.42.52.png](https://qiita-image-store.s3.amazonaws.com/0/131949/b6145ce4-7f9d-6cc6-c128-0dfdcd24ab4f.png)

作ったファイルのURLからプロジェクトIDをコピーして下記のコマンドを打つ。

```sh
$ gapps init <Project ID>
```

すると、ローカルにファイルが出来る。
(画像はvim上の画面)
![スクリーンショット 2018-06-30 14.54.21.png](https://qiita-image-store.s3.amazonaws.com/0/131949/05ac1c4b-bd6c-a1ef-d341-de18b1ae6302.png)

## 3. 更新
ファイルを編集・保存したら、一度vimを抜けて、コマンドを打つ。

```sh
$ gapps upload
```

これだけ。

# 感想・その他
下記のリンクを参考にさせていただいたのですが、とっても良いですね。
開発速度がエグいくらい違います。
本当にこういった情報の共有には助けられます。
感謝感謝ですね。

ちなみに、アップロードされるのはjsファイルとhtmlファイルのみだそうです。
また、ブラウザのスクリプトエディタ上での更新は反映されないので、もしブラウザ上で更新してしまった場合は、自動生成された

- gapps.config.json
- src(ディレクトリ)

を削除してしまえば、もう一度```$ gapps init```が使えます。

# 参考
<a href="http://tech.speee.jp/entry/2016/04/28/190236">Google Apps Scriptの開発をモダンに行う方法</a>