それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

Goole App Script ( GAS ) の基本的な操作方法。17. claspで GASをローカルからVisualStudioCode編集して補完し、git管理する。

f:id:takuya_1st:20210607213754p:plain

インストール 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 完了

f:id:takuya_1st:20210607214445p:plain

設定ファイル

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を見つけることが出来ます。 f:id:takuya_1st:20210607214857p:plain

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 するだけで大丈夫です。

f:id:takuya_1st:20210607221319p:plain

おまけ、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 ですね。