インストール clasp
clasp コマンドは @google/clasp
で提供されています。 @google/clasp
をグローバルにインストールしてclasp コマンドを使えるようにします。
npm install -g @google/clasp
npm なのでインストールは時間が必要です。
インストール確認
clasp コマンドがインストールされたかチェックしておきます。
which clasp #=> /usr/bin/clasp clasp help
初期設定
インストールが終わったら初期設定です。google アカウントと紐付けます。
ログインしてOAuthします。
clasp login
scrpipt.google.com にログインして、プロジェクトにアクセスできるようにしなくてはいけません。login を実行してブラウザを立ち上げて、clasp コマンドにパーミッションを与えます。 ローカルホストでWEBが起動しブラウザ経由でOAuthします。
oauth 完了
設定ファイル
Googleアカウントの権限付与したら、設定ファイル~/.clasprc.json
が作られます。
$ ll ~/.clasprc.json -rw------- 1 takuya takuya 2267 Jun 7 21:44 /home/takuya/.clasprc.json
準備完了
これで、プロジェクトをローカルに取り込む準備ができました。
clasp clone
既存のプロジェクトをclone する。
まずは、既存のプロジェクトをデスクトップにコピーしてきます。
mkdir してから clasp clone
clasp clone
コマンドでGASの一覧から、スクリプトをコピーできる。
サンプル
## プロジェクトフォルダをつくる。 mkdir myGas cd myGas mkdir src ## GASからコードを取り出す。 clasp clone 0wmjSXXXXXXXXXXsx98zZtcpljDBc ## 編集したら pushする clasp push
フォルダは自動生成されません。
フォルダは作成されないので、さきにフォルダをつくり、clone します。 git clone のようにフォルダが自動生成されないので注意(大事なので2回書いています。)
clone 後は、ローカルファイルとして編集できます。編集が終わったら push
します。
clasp push
push すればアップロードされアップデートされます。
clasp push
clasp push でアップロードです。`ローカル→script.google.com
へアップロード
プロジェクトIDの発見方法。
GASの「プロジェクト」には固有のプロジェクトIDが割り振られています。これを取得します。
アドレスの文字列をコピーします。
プロジェクトを開いたときのアドレスをコピーすればOKです。
https://script.google.com/home/projects/{ここ}/
複数アカウントGoogleログインしている場合はURLが異なります。
https://script.google.com/u/2/home/projects/{ここ}/
google サービスは複数アカウントのログイン時にhostname.google.com/u/{number}/
のようなアドレスになりますが、もうずっと10年以上複数アカウントの不具合が残ってます。今使ってるアカウントには注意しておきます。
プロジェクトの設定画面
プロジェクトの設定画面からもプロジェクトの固有IDを見つけることが出来ます。
clone は時間がかる。
clasp の clone はすこし時間がかかります。辛抱強く待ってください。
ローカルで管理するメリット。
ウェブサイトで開発できるのに、わざわざローカルにコピーするメリットはいくつかあります。
- git によるコード管理・属人化の防止
- トランスパイラ利用
- エディタ
git による管理。
ファイルがローカルになることで、git push 管理できます。git にすることで変更点を残しておけます。
cd CLASP_DIR git init git remote add origin ssh://xxxx git commit -m import git push
これで、コードを管理しやすくなります。とくに共通コードをまとめて管理できるようになるはずです。
Google Driveからの独立
Google Driveから独立して管理できるので、個人のGoogle Driveやscript.google.com から独立し、自立できます。個人のGoogle Driveに依存しないので、ドキュメント類を残したり手順を標準化しやすくなります。
トランスパイラ利用(コンパイル)ができるようになる。
polyfill を使ったり TypeScript を書いたものを gs/js にトランスパイルすることで、記述を柔軟にできるようになって便利です。gas を typescript で書いたり reactできるようになって便利です。
外部ライブラリをまるっと取り込んでnpm の恩恵に預かれる。
エディタを選べて補完ももできる。
自由にエディタを選べるようになります。
コード補完をする。
次のパッケージを使えばコード補完もできるようになります。
npm install --save @types/google-apps-script
@types/google-apps-script
が GASの補完などのファイル・タイプ定義ですね。
補完例
Visual Studio Code で GASを補完しながら書いている例です。completion は特に設定しなくても install するだけで大丈夫です。
おまけ、clasp /git 管理は、 --rootDirをつける
claspを使ってGASをgit 管理するとき、clasp clone --rootDir
を使いましょう。
cd project mkdir src clasp clone --rootDir=src
--rootDir
を設定することで、gas の管理が楽ちんになります。GASは全ファァイルをロードするので、うっかりすると必要のないファイルまでpushされ、GASロードされちゃいます。
なので --rootDir がないとき、 .claspignore で .git を無視する必要があります。そのために、 --rootDir を使います。必ずつけましょう。
またトランスパイラを通すときは、トランスパイラの出力フォルダ dist
を 指定します。 --rootDir=dist
ですね。
次回へ続く
長いので分割しました→次回