Gluegent Blog

Gluegent Blog

GASのローカル環境開発 ~その3. GASとGCP連携とローカルからの実行

  • 技術
GASのローカル環境開発 ~その3. GASとGCP連携とローカルからの実行

こんにちは、せしょうです。

今回、研修中にGASを触る機会があり、せっかくなのでブログにまとめてみました!

本記事は第3回目の記事です。

3つの記事を通して、GASのコードをローカルで管理(実行、デプロイ)できるようにすることを目的とします。

3つの記事の構成は以下の通りです。

  1. コンテナでの環境開発
  2. GASプロジェクトとローカルでの連携
  3. GASとGCP連携とローカルからの実行 ⇦本記事

1. 概要

 今回でGASのローカル環境開発の最終章です。前回、ローカルとGASを連携することができました。なので、今回はローカルから実行するための方法について書いていきます。よろしくおねがいします。

2. 現在のディレクトリ構成

gas-tutorial
   |
   |- .devcontainer
   |       |- devcontainer.json
   |       |- node.dockerfile
   |- gas
   |   |- src
   |   |   |- sample.js
   |   |  
   |   |- .clasp.json
   |   |- .clasprc.json
   |   |- creds.json
   |  
   |- docker-compose.yml

3. 目標とするディレクトリ構成(今回完成)

gas-tutorial
   |
   |- .devcontainer
   |       |- devcontainer.json
   |       |- node.dockerfile
   |- gas
   |   |- src
   |   |   |- sample.js
   |   |  
   |   |- .clasp.json
   |   |- .clasprc.json
   |   |- creds.json
   |  
   |- docker-compose.yml

4. Google Cloud Platform(GCP)の作成

GASのコードをローカルで実行するには、GCPとGASの連携が必要なので、まずは以下のリンクからログインをして GCP Projectを作成します。

https://console.cloud.google.com

ログイン後、以下のような画面が出てくるので、プロジェクトの選択を選択します。

新しいプロジェクトを選択

今回は、gas-tutorial というプロジェクト名にします。

作成が完了すると、下記画像のように作成完了の通知が来ます。

5. OAuth同意画面の作成

次にOAuth同意画面の作成を行います。

今回のOAuth同意画面の役割としては、GASと連携した際に指定した機能を使うということを、認証するのに使用します。

今回は、最低限の設定だけを行います。

APIとサービス > OAuth同意画面 を選択します。すると以下のような画面が出てきます。

外部を選択して、作成を選択。

OAuth同意画面の設定

アプリ情報

 アプリ名: gas-tutorial
 ユーザーサポートメール: 自分のメールアドレス
 デベロッパーの連絡先情報: 自分のメールアドレス
保存して次へを選択

スコープ(何も指定しない)

保存して次へを選択

テストユーザー(何も指定しない)

保存して次へを選択

概要(何も指定しない)

設定した概要を確認してOKならば、ダッシュボードへ戻るを選択。

選択後以下のような画面が出てきます。

これで、OAuth同意画面の作成が完了です。

6. GASとGCPの連携

GCPのホーム画面へ移動します。

すると、Project 番号があるのでこれをコピーします。

GASプロジェクトに移って、プロジェクトの設定 > GCP プロジェクト > プロジェクトの変更を選択します。

先ほど、コピーしたプロジェクトを入力し、プロジェクト設定を選択します。

これで、GASとGCPが連携できました。

7. 認証情報の作成

GASとGCPが連携できたので、次にローカルからGASを実行するための認証情報をGCPで作成しましょう。

APIとサービス > 認証情報 に移動します。

次に、 認証情報の作成 > OAuthクライアントID > デスクトップアプリ を選択します。

名前を入力後(ここでは、gas-tutorial)作成を選択します。

作成後、クライアントIDとシークレットIDが作成されるので、JSONをダウンロードを選択します。

ダウンロードされたファイルは、 project名_xxxx.jsonというファイル名となります。

ここでは、長いファイル名を打ちたくないので、 creds.jsonへと変更します。(任意)

このjsonファイルを gas-tutorial/gas へ移動させます。すると以下のような、ディレクトリ構造になります。

gas-tutorial
   |
   |- .devcontainer
   |       |- devcontainer.json
   |       |- node.dockerfile
   |- gas
   |   |- src
   |   |   |- sample.js
   |   |  
   |   |- .clasp.json
   |   |- creds.json
   |  
   |- docker-compose.yml

これで、ローカルからGASを実行する準備が整いました。

8. GASプロジェクトをデプロイする

UI

右上のデプロイ > 新しいデプロイ を選択後 ⚙マークから、実行可能APIをを選択します。

アクセスできるユーザーは、ここでは「Googleアカウントを持つ全員」に設定します。

以上の設定後、デプロイを選択。以上で、デプロイが完了します。

デプロイした情報は、以下のようにappsscript.jsonに自動的に追加されます。

"executionApi": {
    "access": "ANYONE"
}

コマンド

clasp コマンドでは、UIでのデプロイ方法とは逆に、appsscript.jsonにデプロイする際の情報を先に記述します。

"executionApi": {
    "access": "ANYONE"
}

上記を記述後、以下のコマンドを使用してデプロイする。

node → ~/gas-tutorial/gas $ clasp deploy

成功すると以下のように出力されます。

Created version 18.
- AKfycbwnCx1ADMIW8GIMetuwXHAW8PJqHnMnPgjudBs4yRA4yrsFKkt04YTzDOfiJR0tBEI @1.

clasp コマンドを確認したい場合は、以下のサイトを参考にしてください。

https://github.com/google/clasp#deploy

9. 認証情報を使ってログインをする。

使用するGoogleアカウントにログイン

node → ~/gas-tutorial/gas $ clasp login

上記ログイン後、認証情報を使ってログイン

node → ~/gas-tutorial/gas $ clasp login -creds creds.json
Authorization successful.
Local credentials saved to: /home/node/gas-tutorial/gas/.clasprc.json.

と出れば成功です。 ここで、.clasprc.jsonが作成され、目標としているディレクトリの構成になります。

10. 実行

node → ~/gas-tutorial/gas $ clasp run
? Select a function // ← pushTestと入力 or Enter
> pushTest

No response. と返ってきました。 return してないので、 sample.js のpushTestにreturn "hello"を追加して、pushしましょう。

sample.js

function pushTest(){
    console.log("hello world!");
    return "hello"
}

push

node → ~/gas-tutorial/gas $ clasp push

再度実行 (runのあとに、実行したい関数名を入力して実行も可能)

node → ~/gas-tutorial/gas $ clasp run pushTest

hello worldsと出力され、実行が出来ました。

おめでとうございます。これでローカルからGASを管理・実行できる環境ができました。

10. Google アプリとの連携

GASを使う主なメリットとしては、SpreadsheetやGoogle Calendarなど様々なGoogle アプリと連携できる点だと思います。

GCPに連携する前であれば、Spreadsheet操作など問題なく出来ていたと思います。

ですが、GCPと連携後では、SpreadsheetApp.openById([スプレッドシートのID])のように、スプレッドシートを操作する処理を実行すると以下のようなエラーが出てきます。

エラー内容としては権限エラーとのことなので、appsscriptのoauthsScopesに指定されたscopeを追加する必要があります。

appsscript.js

"oauthScopes": [
    "https://www.googleapis.com/auth/spreadsheets"
]

これが前回の記事でお話した、oauthScopesの役割です。

他にも使用したいアプリ等がある場合は、このようにして、Scopeに追加していく必要があるので注意してください。

11. サーバーレスって便利

GASについて、色々と書かせていただきました。この記事を見てGASは分かったけど実際に何に使ってるの?と思う方もいらっしゃるかもしれませんので、GAS使った例とサーバーレスって便利なんだよってお話をしたいと思います。

使っている事例

  • スケジュール管理(Slackと連携)
  • Gleugent内の朝礼BOT
  • アラート管理
  • チケット管理 

などなど

GASやLambdaは基本的にお金がかからず ある程度制限はあるものの欲しいときにだけ立ち上がってくれます。定期実行したり、時間のかからない処理をする際にとても便利です。サーバーレス最高!!

13. まとめ

3つの記事を通してみて 初めて外に技術を発信するという貴重な経験をさせていただきました。Gluegentのみなさん、ありがとうございます。

 今回はGASについてでしたが、他にも仕事をして学んだことをどんどん発信していきたいと思っています。本記事を読んでくださりありがとうございます!これからもよろしくおねがいします。 

また次の記事でお会いしましょう!!