VSCodeでGoogleAppsScript(GAS)を編集する
GoogleAppsScript（GAS）のスクリプトエディター（編集画面）はなんか使いづらい。インデントとかスペースとかあんまり自動でやってくれない。また、AfterEffectsなどのスクリプトはVSCodeで書くので、一箇所にまとめてそちらでやりたい、と思ったら出来るみたい。調べてみると、慣れないワードが飛び交っていたので備忘録も兼ねて。
まずは言葉を理解せねば。
調べているうちに頭痛くなってきた。
clasp
Googleが提供しているパッケージ？で、コマンドラインで実行するツール。（CLI：コマンドラインインターフェース。コマンドプロンプトとかってこと）
これがあれば、自分のPC（ローカル）⇔ウェブ上のスクリプト（script.google.com）でデータのやり取りが可能。
つまりウェブのAppsScriptのページでスクリプトを書かなくても、ローカル環境でお気に入りのソフトで開発出来る。
もちろんコマンドプロンプトなどを立ち上げるのはめんどくさい。VSCodeの「ターミナル」がコマンドプロンプトと同じ役割なので、そこから実行する。そしたら開発とアップロードがVSCode内で済む！
【公式のページ】
Apps Script | Google Developers
GitHub - google/clasp: 🔗 Command Line Apps Script Projects
で、結論的にはこれが欲しいのだけれど、これをインストールするために先に必要なものがある。
Apps Script | Google Developersに次のように書いてある。
*********************
Requirements
clasp is written in Node.js and distributed via the npm tool. Prior to using clasp, you must have Node.js version 4.7.4 or later installed. Installing Node.js requires administrative privileges.
（Apps Script | Google Developersより）*********************
「Node.jsで書かれていて、npmを通じて配布されています。Node.jsバージョン4.7.4以降がインストールされている必要があります。 Node.jsをインストールするには、管理者権限が必要です。 」とのこと。
npm - Node Package Manager
Node.jsのパッケージ管理システム。これを使っていろんなパッケージ（ライブラリ的な？）をインストールできる。（Pythonでいうpipと同じ存在？）
このnpmを使ってGoogleが提供しているclaspというパッケージをインストールする。
なんかいろいろ買収の結果、Microsoft > GitHub > npmになってるみたい。マイクロソフトの孫なのね。
【参考】
で、このnpmはNode.jsに同梱されているので、Node.jsをインストールしないといけない。
Node.js
どのサイト見てもみんな「Webサーバー上で動くプログラム」とか「サーバーサイド」って説明するけどわからん。
クライアントサイドスクリプトは、サーバーから受信したjavascriptを自分のブラウザが処理する。
サーバーサイドスクリプトは、サーバー側でjavascriptを処理して、その結果のみをクライアントに返す。
javascriptはウェブブラウザ上で動かすものだったけど、そうじゃなくてコマンドプロンプトなどで動かすためのものってこと？
【参考】
Node.jsの中にnpmが一緒に入ってるのでまずはNode.jsを入れる。
インストール
Node.jsのインストール
Google公式のclaspコードラボページ（clasp - The Apps Script CLI ）を見ると、
The Apps Script CLI (clasp) requires Node.js >= v6.0.0 to be installed. Install Node.js here.
と書いてある。Node.jsのv6.0.0以上が必要とのこと。
Node.jsのダウンロードページに行くと、推奨版と最新版とがある。基本的には推奨版にしといたほうが無難かね。OSに合わせて必要な方をダウンロード。
無難に推奨版。これはダウンロードページだけど、トップページからでもダウンロード出来る。
Node.jsインストール画面
ていうかNode.js runtimeも含め、全部そのままインストールしないとダメ。
claspをインストール
Node.jsと一緒にnpmが入ったはず。これでコマンドプロンプトなどから、npmを実行できるようになった。次はnpmを使ってclaspをインストールする。
別にコマンドプロンプトとかpowershellを直接起動してもいいんだけど、ここはVSCodeのターミナルで、
npm i @google/clasp -g
を打って実行する。-gをつけることでグローバルでインストールすれば、現在のパスに関係なくどこからでも実行できる、とのこと。所謂「パスを通す」ってことですかね？
WARNて出てるけど、別にいいっぽい？適当に調べただけだが。
「覚えておくべき唯一のコマンドはclaspだ！」と書いてあるので、
clasp
とだけ打って実行してみる。
ヘルプが出たということはインストール出来ているということに他ならない！
コマンド一覧をざっと見てみると、login,logoutなどに並び、pull,pushとかもあるのがわかる。VSCodeで書いて、これらのコマンドを実行すればアップロードされたりダウンロードしてきたり出来るってわけですね！ふむふむ。
claspを実行した画面
ログイン～クローン（ローカルにファイルを作成）
ログインする
でもいきなり自分のプロジェクトからソースコードをひっぱたり出来ないですよね。どう考えても。自分のGoogleアカウント情報を入れてないのだから。なのでまずログインする。ログインしないとなんにも出来ない。
clasp login
を実行すると、ブラウザでアカウント認証が開くので、好きなアカウントで認証を進める。
認証画面になる前に、ファイアウォール関係でNode.jsに許可しろって出たら許可する。
claspはNode.jsで外と通信しているってことね。ん～、専業プログラマーじゃないのでもうよくわからんばい！！完了すると、ブラウザが
Logged in! You may close this page.
とだけ表示されるページになるので、言われたまま閉じる。ターミナルの方を確認すると、
Authorization successful.
成功って出てますね。やった！これでログイン出来た。
ログイン成功
新規プロジェクトを作成する場合
Createコマンドで新規作成
「1つのプロジェクトに1つのフォルダを作る」って覚えておく。"One Folder for One Project."。この言葉は今勝手に作った。
コードラボのページ通りに進めてみる。
mkdir clasp_codelab
cd clasp_codelab
clasp create --title "Clasp Codelab"
新規作成なのでフォルダも用意しましょう。現在のフォルダに「clasp_codelab」というフォルダを作成して、その中に「Clasp Codelab」というプロジェクトを作成するコード。フォルダを作成する前に、現在のパスに作って問題ないかちゃんと確認してから、実行してみる。現在のフォルダがダメならcdコマンドで適当に移動してからする。
mkdirで作らなくても、普通にエクスプローラーでフォルダ作成してもいいけど。とにかくプロジェクト用のフォルダを作成して、ターミナルでそこに移動してからclasp createする。
すると選択肢が出てくる。スプレッドシートシートなどに関連付けられたプロジェクト（スクリプト）を作成するのか、単独で動くやつを作るのか、ウェブアプリか、apiか、どれにする？と聞かれる。とりあえず [standalone] を選択してみる。
選択肢が出る。とりあえず [standalone] を選択してみる
なんか出た。
sheetsを選んだ場合。新規スプレッドシートが作成されて、コンテナバインド（スプレッドシートに関連付けされた）スクリプトファイルも作成された
APIの有効化が必要
なんか出たので読む。
User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.
Apps Script のAPIが有効になってないから、AppsScriptの設定ページで有効にしてから出直してこい、と。もちろん「オン」になっていた場合は出ない。
これをONにしないと使えない。
オンにした後、再度実行する。暫く待つと、右画像のようなメッセージが出る。
Created new standalone script: https://script.google.com/d/xxxxxxxxxxxxxx/edit
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 1 file.
└─ appsscript.json
Createdと言ってるので、ファイルの作成は成功したみたい。Googleドライブを見るとたしかにファイルが作成されている。
気になるのはWarningの文字。
「.claspignore」ファイルを設定しない限り、サブフォルダー内のファイルは考慮されません。
「考慮しない」ってのは、問答無用でアップロードしますよってこと。ローカルフォルダ内の全てのファイルをアップロードしてほしくない時、.claspignoreファイルを自分で作成して、アップロードしたくないファイルの条件を書けば、それらはアップロードされない。開発中に必要なファイルなので一緒に置いておきたいけど、アップロードは必要ないといったファイルはこれを使って除外しておく。
で、
Cloned 1 file.
└─ appsscript.json
とのこと。見るとローカルフォルダ内にappsscript.jsonというファイルが出来ているのがわかる。あと.clasp.jsonファイルもある。ファイルの意味は後で書くが、とにかくファイルが作成されて、1ファイルがClone、つまりダウンロードされてきたということ。
成功したっぽい
Googleドライブにも表示されている
VSCodeでフォルダ内を見た状態
既存のスクリプトファイルを使用する場合
スクリプトIDを調べる
新規作成じゃない場合は、スクリプトファイルのIDをclaspに教えてあげないと、どのファイルを編集したいのかわからないので、先に調べる必要がある。
ただし、スタンドアローンのスクリプトの場合は、調べなくても可能。詳しくは次で。
既存ファイルを開いて、「スクリプトエディタ」を起動
「プロジェクトのプロパティ」から
「スクリプトID」をコピー
クローン（複製）を作る
コピーしたスクリプトIDで<scriptID>部を置き換えて次のコードを実行する。
clasp clone <scriptID>
ここのWarningは先程書いた通り。
今回はCloned 2 files.となっている。「コード.js」というファイルが先程と比べて多い。これは実際にソースコードを書くファイル。先程はプロジェクトの新規作成を行っただけなので、まだファイルが作られていないまっさらな状態、ということで存在しなかった。今回は手動でスクリプトエディタを開いたのでその時点で自動的にコード.jsが作成されている。それが落ちてきたということ。
実行結果
IDを与えなかった場合
スクリプトIDを与えなかった場合、候補が出てくるのでそこから選択することも出来る。ただし、候補に出るのはスタンドアロンのプロジェクトのみ。スプレッドシートなどと関連付けされているものは表示されないので、その場合はスクリプトIDを与えるしかない。
ファイルの意味
次に進む前に、気になるので作成されたのがどういう意味のファイルなのか見ておきたい。
.clasp.json
どうやらスクリプトのIDが書かれたファイルのよう。なるほど、この情報を使って「.clasp.jsonがいるこのローカルフォルダは、GASのどのプロジェクトと対応してますよ」ってことを判断してるってことか。だからcreateコマンド使用時に、.clasp.jsonが存在しているとエラーになるというわけね。
"One Folder for One Project." ですな。
別ファイルでも1つのプロジェクトで使用するファイルならサブフォルダに入れてもOK。
初期状態ではスクリプトIDしか書かれていないが、claspに関する設定を書き込むことが出来る。詳細はこちらで。
appsscript.json
これは実はGAS書いてたらいつもあるファイル。ウェブ上のスクリプトエディタで[表示] > [マニフェストファイルを表示]にチェックを入れると、隠れていたこのファイルが現れる。スクリプトの設定など出来るファイル。基本的には触ることはない。
Manifests | Apps Script | Google Developers
Manifest structure | Apps Script | Google Developers
ただ、claspからプロジェクトを作成した時は、タイムゾーンが"America/NewYork"になっちゃう（絶対なのかは知らない）。そのままでもスクリプトは動きはするだろうが、もしスクリプト内で日付や時間を扱っていたら最終的な時間表示がずれる、かも。なので日本ならば"Asia/Tokyo"に書き直しておくのが無難か。
これらのファイルの中身を確認してみる
.clasp.jsonの中身。スクリプトのIDが記されているのみ
appsscript.jsonの中身。マニフェストファイル
"Asia/Tokyo"にしたほうが無難か
スクリプトエディタでのマニフェストファイルの出し方
ここまでが、「プロジェクトのクローン（複製）をローカルに作成した」ということ。
あとは、
ローカルでスクリプトを書いてpushしてウェブ（script.google.com）のコードをアップデート
もしウェブ（script.google.com） で直接編集したり誰かがpushした場合は、pullしてローカルのスクリプトをアップデート
を繰り返す。
gitなどの知識があれば当たり前だが、間違えたくないのが、リアルタイムで同期するわけではないということ。
あくまで自分でアップロード、ダウンロードが必要である。というかそうじゃないと困るんですけど。
アップロード・ダウンロード
アップロード（push）する
clasp push
で、今いるフォルダのプロジェクトをアップロードできる。
claspで新規プロジェクトを作成したのならば、拡張子を*.jsとしてファイルを作り、ローカル環境で書く。で、出来たらpushする。
ダウンロード（pull）する
clasp pull
で、今いるフォルダのプロジェクトをダウンロードする。
誰かが直したものを引き継いで編集するとか、そういう時はウェブ上のデータを引っ張らないといけないのでpullする。１人でやってるなら使うタイミングがあんま思いつかない。「最終的な細かいデバッグはオンラインで書いたほうが早いわ」ってそっちで直しちゃったときとか？
フォルダ階層
AppsScriptのオンラインエディタでは、プロジェクト内に複数のファイルを持てるが、フォルダの概念はない。（フォルダの概念がないのはGoogleドライブも同様。ドライブの場合はあたかもフォルダ構造があるように見せているだけ）
スクリプト名にスラッシュ（/）をつけていると、ローカルにダウンロード（pull）した時にフォルダとしてみなされる。
アップロード（push）時も同様、サブフォルダに入れているものは、サブフォルダ名とスラッシュがついたファイル名でアップロードされる。
その他
claspからスクリプトをブラウザで開いてみる
ターミナルで今いる場所のプロジェクトを開くことが出来る。
clasp open
通常問題ないかもしれないが、Google Chromeで複数のGoogleアカウントを使用している場合、Chromeのデフォルトアカウントでブラウザが開くので、claspでログインしているアカウントがそれと違うと、「アクセス権がない」と言われる。
「ログイン名」のところから切り替えようにも面倒だったので、該当ユーザーのブラウザを起動してからURLをコピペするしかなさそう？
複数アカウントを使っているとこうなることもある
注意する！
clasp自体はgitみたいなバージョン管理ツールではない。ローカルとオンラインエディタで同時編集していると、上書き合戦になってしまい、取り返しのつかないことになる。バージョン管理にはgitなどを使うこと！と先生は仰っている。
版を管理
バージョン管理ツールではないが、AppsScriptでバージョンをスナップショットとして取っておくことが出来る。
clasp version "my First version"
これで現在のパスのプロジェクトに新しいバージョンをスナップショットしておける。
このバージョン違いのファイル達は、APIなどとしてスクリプトを公開した時の読み込み専用で、各ユーザーがどのバージョンを使うか選択することが出来る。
Created version 1 などでれば成功
オンラインのエディタで[ファイル] > [版を管理]
これに相当