VSCodeでGoogleAppsScript(GAS)を編集する

GoogleAppsScript（GAS）のスクリプトエディター（編集画面）はなんか使いづらい。インデントとかスペースとかあんまり自動でやってくれない。また、AfterEffectsなどのスクリプトはVSCodeで書くので、一箇所にまとめてそちらでやりたい、と思ったら出来るみたい。調べてみると、慣れないワードが飛び交っていたので備忘録も兼ねて。

まずは言葉を理解せねば。

インストール

ログイン～クローン（ローカルにファイルを作成）

アップロード・ダウンロード

その他

参考サイト

Google Apps Scriptを使う上での.clasp.jsonについて調べた - よしたく blog

CLASPのインストール – 経理業務向けGoogle Apps Script講座

まずは言葉を理解せねば。

調べているうちに頭痛くなってきた。

clasp

Googleが提供しているパッケージ？で、コマンドラインで実行するツール。（CLI：コマンドラインインターフェース。コマンドプロンプトとかってこと）

これがあれば、自分のPC（ローカル）⇔ウェブ上のスクリプト（script.google.com）でデータのやり取りが可能。

つまりウェブのAppsScriptのページでスクリプトを書かなくても、ローカル環境でお気に入りのソフトで開発出来る。

もちろんコマンドプロンプトなどを立ち上げるのはめんどくさい。VSCodeの「ターミナル」がコマンドプロンプトと同じ役割なので、そこから実行する。そしたら開発とアップロードがVSCode内で済む！

【公式のページ】

clasp - The Apps Script CLI

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 (パッケージ管理ツール) - Wikipedia

npm入門 - とほほのWWW入門

で、このnpmはNode.jsに同梱されているので、Node.jsをインストールしないといけない。

Node.js

どのサイト見てもみんな「Webサーバー上で動くプログラム」とか「サーバーサイド」って説明するけどわからん。

クライアントサイドスクリプトは、サーバーから受信したjavascriptを自分のブラウザが処理する。

サーバーサイドスクリプトは、サーバー側でjavascriptを処理して、その結果のみをクライアントに返す。

javascriptはウェブブラウザ上で動かすものだったけど、そうじゃなくてコマンドプロンプトなどで動かすためのものってこと？

【参考】

Node.js入門 - とほほのWWW入門

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"に書き直しておくのが無難か。