GAS(Google App Scripts)用の CLI ツール clasp からローカル環境でGASを実行してログを確認する手順

TypeScript環境構築
GAS(Google App Scripts)用の CLI ツール clasp からローカル環境でGASを実行してログを確認する手順
Memo
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

GAS(Google App Scripts)用の CLI ツール clasp からローカル環境でGASを実行してログを確認する手順をメモしました。

今回は前回の記事で作成した環境をベースにローカルでGASを実行してログを確認する手順を紹介します。

環境

  • Node.js 14.15.3
  • Yarn 1.22.10

ファイル操作で利用するUnixコマンドについて

基本的なディレクトリ作成やファイル操作はUnixコマンドを利用します。
Unixコマンドについて詳しくはこちらの記事を参考にしてください。

claspからGASを実行する環境

ローカルからGASを実行する

clasp runコマンドでエラー

そのままclasp runコマンドを実行するとエラーになります。

terminal
$ yarn run clasp run yarn run v1.22.10 $ /Users/XXXX/clasp-sample/node_modules/.bin/clasp run ^C ~/workspace/everyones-quiz.com/eq_app/eq_spreadsheets_api yuki.hayakawa$ yarn run clasp run yarn run v1.22.10 $ /Users/XXXX/clasp-sample/node_modules/.bin/clasp run Running in dev mode. ? Select a functionName sample Could not read API credentials. Are you logged in locally?

ローカルからGASを実行できるようにするためには追加で設定が必要になります。

ローカル実行のために必要な設定

  • GASを Cloud Platformプロジェクトと関連付け
  • GCPのApps Script APIを有効化
  • GASを実行可能APIとして公開

GASを GCP(Cloud Platform)プロジェクトと関連付け

GCPのコンソールを開いて新しいプロジェクトを作成します。
GCPのコンソール

GCP プロジェクトの設定

GCP プロジェクトを作成

GCPのコンソールトップの左メニュー > IAMと管理 > プロジェクトの作成をクリックします。

GCPのコンソールトップ 左メニュー > IAMと管理 > プロジェクトの作成

プロジェクト名を入力

任意のプロジェクト名を入力します。

作成をクリック

プロジェクト名の入力が完了したら作成をクリックします。

GCPのコンソール プロジェクトを作成

プロジェクト作成完了の通知

作成をクリックするとプロジェクト作成が開始されます。
数十秒ほど待つとプロジェクトの作成が完了し通知バーへ完了通知が届きます。
GCPのコンソール プロジェクト作成 完了通知

プロジェクトを選択

通知バーからプロジェクト選択をクリックします。

プロジェクトの設定

GCPのコンソールトップの左メニュー > IAMと管理 >設定
プロジェクトの設定ページを開きます。

プロジェクト番号のメモ

プロジェクト設定ページにあるプロジェクト番号をメモします。
GCPのコンソール プロジェクト設定ページ プロジェクト番号をメモ

GASへGCPのプロジェクト番号を紐付け

GASプロジェクトの設定

ターミナルからGAS プロジェクトページを開く

再度ターミナルからclasp openコマンドで GAS プロジェクトページを開きます。

terminal
$ yarn run clasp open

プロジェクトの設定を開く

GASプロジェクトページの左メニューのプロジェクトの設定をクリックします。
GASプロジェクトページ プロジェクトの設定をクリック

プロジェクトを変更

GASプロジェクト設定ページ下部にあるプロジェクトを変更をクリックします。
GASプロジェクト設定ページ プロジェクトを変更

プロジェクト番号の設定

先ほどGCPコンソールで作成したGCPプロジェクトのプロジェクト番号を
GCPのプロジェクト番号欄へ入力しプロジェクトを設定をクリックします。
GASプロジェクト設定ページ GCPのプロジェクト番号欄へ入力

OAuth 同意画面を設定が必要というエラー

下記エラーが発生するためOAuth 同意画面を設定をおこないます。

プロジェクトを変更するために、OAuth 同意画面を設定する必要があります。OAuth 同意の詳細を設定してください。
GASプロジェクト設定ページ OAuth 同意画面を設定が必要というエラー

OAuth 同意の詳細をクリック

エラーメッセージにあるOAuth 同意の詳細のリンクをクリックします。

GASプロジェクト設定ページ 同意の詳細のリンクをクリック

再度GCPへ戻り認証情報の設定とOAuth 同意の詳細の設定

プロジェクトの選択

このページの閲覧権限がありませんというエラーになりました。 プロジェクトが選択されていなかったのでプロジェクトの選択からプロジェクトを選択します。

GCPのコンソール APIとサービス

認証情報の設定

GCPのコンソール APIとサービスメニューの認証情報をクリックします。

GCPのコンソール 認証情報をクリック

認証情報の作成

GCPのコンソール 認証情報上部の+認証情報を作成をクリックします。

GCPのコンソール 認証情報をクリック

そしてOAuth クライアント ID の作成をクリックします。

GCPのコンソール OAuth クライアント ID の作成をクリック

OAuth クライアント ID の作成

アプリケーションの種類を選択

アプリケーションの種類からデスクトップアプリを選択します。
GCPのコンソール アプリケーションの種類からデスクトップアプリを選択

名前を入力

任意の名前を入力します。
GCPのコンソール 名前を入力

作成をクリック

作成をクリックします。

認証情報の設定ファイルをダウンロード

作成した認証情報の右側にあるダウンロードボタンをクリックして認証情報をダウンロードします。
GCPのコンソール 認証情報をダウンロード

ダウンロードしたファイルをcreds.jsonというファイル名へ変更し、プロジェクトの直下へ配置します。

terminal
$ tree ./ ├── README.md ├── creds.json ├── package.json ├── src │ ├── appsscript.json │ └── smaple.ts └── yarn.lock

OAuth 同意の詳細の設定

OAuth 同意画面

GCPのコンソール APIとサービスメニューのOAuth 同意画面をクリックします。

GCPのコンソール OAuth 同意画面をクリック

OAuth 同意画面 外部を選択して作成

OAuth 同意画面でデフォルトで外部しか選択できないため
外部を選択して作成をクリックします。

アプリの登録の編集 OAuth 同意画面

必須項目である下記をして保存して次へをクリックします。

  • アプリ名
  • ユーザーサポートメール
  • メールアドレス
GCPのコンソール アプリの登録の編集
GCPのコンソール アプリの登録の編集

アプリの登録の編集 スコープ

保存して次へをクリックします。
必要に応じて変更してください。

アプリの登録の編集 テストユーザー

保存して次へをクリックします。
必要に応じて変更してください。

アプリの登録の編集 概要

入力内容が正しいか確認します。

アプリを公開

公開ステータスの下部のアプリを公開をクリックしアプリを公開ステータスへ変更します。
GCPのコンソール アプリを公開をクリック

再度GASへ戻りGASプロジェクトの設定

GASのプロジェクト設定ページでプロジェクト番号を変更

再度GASのプロジェクト設定ページ戻り
先ほどGCPコンソールで作成したGCPプロジェクトのプロジェクト番号を
GCPのプロジェクト番号欄へ入力しプロジェクトを設定をクリックします。
GASプロジェクト設定ページ GCPのプロジェクト番号欄へ入力

GASへGCPのプロジェクト番号を紐付け完了

これで無事 GASへGCPのプロジェクト番号を紐付けが完了しました。
GASプロジェクト設定ページ GASへGCPのプロジェクト番号を紐付け完了

GCPのApps Script APIを有効化

Apps Script APIの有効化の設定

ライブラリを表示

再びGCPのアプリの登録の編集画面へ戻りライブラリをクリックします。

GCPのコンソール ライブラリを選択

Apps Script APIを検索

Apps Script APIと検索バーへ入力しApps Script APIを開きます。
GCPのコンソール Apps Script APIを検索

Apps Script APIを有効化

Apps Script APIを有効化します。
GCPのコンソール Apps Script APIを有効化

GASを実行可能APIとして公開

GASプロジェクトのデプロイ

GASプロジェクトのエディタを表示

左メニューのエディタをクリックしエディタを表示します。
GASプロジェクト設定ページ 左メニューのエディタをクリック

GASプロジェクトのデプロイを実施

右上のデプロイボタンをクリックし新しいデプロイをクリックします。
GASプロジェクト設定ページ デプロイを実施

種類の選択

種類の選択をクリックし実行可能なAPIを選択します。
GASプロジェクト設定ページ 実行可能なAPIを選択

実行可能なAPI

実行可能なAPIのアクセスユーザーを任意の値に選択します。
GASプロジェクト設定ページ アクセスユーザーを任意の値に選択

デプロイ実行

入力が完了したらテプロイ実行を実施します。
GASプロジェクト設定ページ 新しいデプロイ

コマンドラインから実行

設定を変更したためプロジェクトをpull

設定を変更したため再度プロジェクトをpullします。

terminal
$ yarn run clasp pull // 中略 └─ ./src/appsscript.json └─ ./src/smaple.ts ✨ Done in 4.97s.

設定が更新されました。

appsscript.json
"timeZone": "America/New_York", "dependencies": {}, "exceptionLogging": "STACKDRIVER", "runtimeVersion": "V8", "executionApi": { "access": "MYSELF" }

GCPのプロジェクトIDの設定

clasp settingコマンドで プロジェクトIDを指定し設定します。

terminal
$ yarn run clasp setting projectId XXXXX // 中略 Updated "projectId": """XXXXX" ✨ Done in 1.74s.

ログインコマンドでGoogle認証

clasp loginコマンドで 認証します。

terminal
yarn run clasp login --creds creds.json

Googleアカウントを選択

ブラウザが開き認証するGoogleアカウントを選択します。

ログインコマンドで認証 Googleアカウントを選択

アプリへ移動

アプリへ移動数かどうかの案内が出るため下部のアプリのページへ移動します。

ログインコマンドで認証 アプリへ移動

アプリへの権限付与

アプリへの権限付与の許可をするダイアログが出るので許可をクリックします。

ログインコマンドで認証 アプリへの権限付与
terminal
$ yarn run clasp login --creds creds.json // 中略 Authorization successful. Local credentials saved to: ./.clasprc.json. *Be sure to never commit this file!* It's basically a password. ✨ Done in 160.82s.

.clasprc.jsonが作成され認証が完了しました。

runコマンドでローカルから実行

clasp runコマンドでスクリプトを実行します。

terminal
$ yarn run clasp run Running in dev mode. ? Select a functionName sample No response.

ログコマンドで実行ログを確認

clasp runコマンドで実行結果を確認します。

$ yarn run clasp run
INFO       2021-06-19T09:49:20.934Z N/A {"message":"Hello world!","serviceContext":{"service":"XXXXXXXXXXXXXXX"}}
DEBUG      2021-06-19T09:49:20.939Z N/A {"serviceContext":{"service":"XXXXXXXXXXXXXXX"},"message":"Hello world!"}

ローカルからコマンドを実行して、実行ログを確認することができました。

終わりに

最後までご覧いただきありがとうございます。
この記事ではGAS(Google App Scripts)用の CLI ツール clasp からローカル環境でGASを実行してログを確認する手順について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。