VsCodeでclaspの使い方(GASのコードをGitHubで管理する)

2024年7月23日

GASの管理はclasp経由でGitHubを使うことにしました。

Contents

1 claspとGoogle Apps Script GitHubの比較、どっち!?
2 VsCodeでclaspの使い方(GASのコードをGitHubで管理する)
- 2.1 .clasp.jsonとappsscript.json
- 2.2 .claspignoreと.gitignoreで無視するファイルを設定(claspとGoogle Apps Script GitHub)
3 GASでファイル名を変更してもclaspに反映されない
4 claspの開発環境と本番環境を運用
- 4.1 Windowsのclaspで開発環境と本番環境を切り分ける
- 4.2 開発と本番で共有されるものとされないもの
5 GASのデプロイ!ウェブアプリのURLでできること
6 GASとGoogleドライブのAPIと画像データ

claspとGoogle Apps Script GitHubの比較、どっち!?

小規模のGAS開発なら、claspよりGoogle Apps Script GitHub アシスタントの方が管理楽そう
大規模？なら、clasp, tsで開発 → github actionsでデプロイかなー　あえてGASを使う意味ないかもやけどhttps://t.co/u2lGFM5aZp #google #gas #github #git
— すず (@hide_tech122) January 31, 2023

いままで #GAS をウェブIDE上で書いて、Google Apps Script GitHub アシスタントで #Github にpushしてたけど、#node.js と #clasp でローカルに環境作って、コードは #VSCode とかで書いて、それをGASとGithubにpushするように切り替えたら、作業も環境も整理されて、とっても楽ちんになった。
— Maita | Corporate Engineer (@cemaimai) October 9, 2021

GASのエディタ、少し微妙なのでやっぱVsCodeでclaspですかね。

claspは本家Googleが開発、Google Apps Script GitHubは最近更新されていない点も考慮材料になりました。

claspを使うことにしました。

VsCodeでclaspの使い方(GASのコードをGitHubで管理する)

すでにGASで開発しており、Githubにデータをpushする流れです。

Google Apps Script APIをオンにする

https://script.google.com/home/usersettings

VsCodeで新規プロジェクト作成。node.js、npmが入っているか確認。インストール。ログイン。

node -v
npm -v
npm install @google/clasp -g
clasp login

ブラウザが立ち上がるのでGmailでログイン > 許可

clasp clone [スクリプトID]

GASエディタを開き、スクリプトIDを取得します。

左上のアイコンをクリックして「プロジェクトの設定」 > 「スクリプトID」をコピー

cloneが成功したらプロジェクトを保存し、リポジトリを作成します。

git initしていつも通り、コミットpushします。

ebookbrain

Githubでリモートリポジトリのファイルを削除他、覚書! Githubの使い方覚書です。 Githubでリモートリポジトリのファイルを削除(ターミナル) うっかりとGitHubにプッシュしてしまったけど、リポジトリから外したくなりました。 ….

clasp pushとclasp pullでGASとやりとりします。なお、JavaScriptのファイルになっていますが、気にしなくてOKです。.jsファイルを.gsに変換してGASプロジェクトにpushし、逆に.gsを.jsに変換してローカルにpullします。

`.clasp.json`と`appsscript.json`

.clasp.jsonファイルとappsscript.jsonファイルは、Google Apps Scriptプロジェクトに関連する重要な設定情報を含むファイルで、ソースコードと一緒にバージョン管理することが推奨されます。

ただし、.clasp.jsonファイルはスクリプトIDを含むため、これを公開すると、他の人があなたのスクリプトにアクセスすることが可能になる場合があります。そのため、プロジェクトがプライベートである場合や、特定のチームや組織内での共有のみを想定している場合は、このファイルを含めてバージョン管理することは問題ありません。しかし、プロジェクトを公開する場合は、スクリプトIDを含む.clasp.jsonファイルを.gitignoreファイルに追加してGitで管理されないようにすることを検討してください。

一方、appsscript.jsonファイルは、プロジェクトの設定（例えば、スクリプトの実行に必要なGoogleサービスの有効化設定や、Webアプリケーションとして公開する場合の設定など）を含むため、これはバージョン管理に含めるべきです。このファイルには、特にセキュリティに影響するような情報は含まれていません。

.claspignoreと.gitignoreで無視するファイルを設定(claspとGoogle Apps Script GitHub)

ひとまず、これで様子見します。なお、node.jsはGitHubで管理するだけなくても大丈夫のようです。

.claspignoreはGASにclasp pushする際に無視するファイル。

**/.env
**/node_modules/
**/.git/

.gitignoreはgithubに無視するファイル。.gitは自動的に除外されるため設定しない。

**/.clasp.json
**/node_modules/

GASでファイル名を変更してもclaspに反映されない

GAS上でファイル名を変更しました。clasp pullをしても直接反映される機能はないため、VsCode上で古いファイルを削除する必要がありそうです。

clasp pull
git rm [旧ファイル名]

そののち、新規ファイルをaddするとRに変換されました。置き換えができました。

claspの開発環境と本番環境を運用

ユーザーにスプレッドシートのコピーを作成して使ってもらうとしよう。

開発環境と本番環境をわけていないと、大元がコピーされることになって大変まずいことになります。さらなる実装をしている最中、動かなくなったタイミングでコピーされたらおしまいです。

だから、もちろんというか、GASも開発環境と本番環境をわける必要があります。

開発から本番に反映させるのはclaspでスプレッドシートを切り替えて、上書きするのが楽そう。ユーザーにURLを告知している場合、新規実装が終わるたびに、新たに複製する方法はURLがかわるため、使えません(外部のリダイレクトサービスを使うなどしたらいけるかもしれませんが、リダイレクトサービスが終了するリスクもあるためなるべく使いたくありません)。

Windowsのclaspで開発環境と本番環境を切り分ける

.clasp.jsonは一つのGoogle Apps Scriptプロジェクト（スクリプト）にしか紐づけることができません。つまり、.clasp.dev.jsonと.clasp.prod.jsonの各々、切り替え用のファイルを用意する必要があります。

{
  "scriptId":"<scriptIdはGASのURL内にある!開発と本番は別ものになる>",
  "rootDir":"<rootDirのパスは一緒>"
}

Windowsの場合は最終的にこうまとめるのがよさそうです。

"scripts": {
    "link:dev": "copy .clasp.dev.json .clasp.json",
    "link:prod": "copy .clasp.prod.json .clasp.json",
    "pull:dev": "npm run link:dev && clasp pull",
    "push:dev": "npm run link:dev && clasp push",
    "push:prod": "npm run link:prod && clasp push"
},

コマンドはこんな感じで使います。

npm run link:dev
npm run push:dev
npm run link:prod
npm run push:prod

スプレッドシートの変更は開発から本番にコピペで移植する方法が楽です。ただ一括でやるならスクリプトを書いた方がよさそうですね。

開発と本番で共有されるものとされないもの

最後に本番環境をURLを閲覧者で共有する方法がよさそうです。

共有されるもの：スプレッドシート、スクリプト
共有されないもの：スクリプトプロパティ、デプロイのデータ、修正履歴

確認方法

スプレッドシートの修正履歴：ファイル > 変更履歴 > 変更履歴を表示
スクリプトデータのデプロイ：デプロイ > デプロイの管理

スクリプトプロパティは一緒のものを使うはずなので、再度いれなおしになります。

GASのデプロイ!ウェブアプリのURLでできること

必要になるケースに次のようなものがあります。

ウェブサービスとしての利用
外部サイトとの連携

GASとGoogleドライブのAPIと画像データ

Google APIなしにGoogleドライブにアクセスすることはできるよう!同じGoogleのサービスだから特別にAPIなしにということでしょうか。アップロードやダウンロードができます。(ただし、Google Picker APIを使うためにはやはりGoogleドライブのAPIが必要で、できることは限定されています。ユーザーがGUI上でファイル選択の操作できない)
Googleドライブを画像置き場として使った場合、Googleの画像Urlは拡張子がつかない形式です。そのあと、使おうとするときいろいろまずいようで一工夫必要そうです。

Googleドライブの画像を使うにあたり、3パターンほどやりくちがありそう！

https://drive.google.com/uc?export=view&id=YOUR_FILE_IDというURLに変える方法!この方法は簡単ですが、Googleの正式仕様ということではないっぽい。
Blobデータを直接利用する。バイナリデータでエンコードをしなくてもいいけど、ちょっとややこい。
Base64エンコードを利用する。Base64エンコードはよく使われますが、バイナリデータよりも画像が約1/3大きくなるため、データ量が増えます。

個人的にややこいBlobデータを使いました。どの方法もGoogle APIを使うことは回避できます。

参考になれば幸いです。