GASのローカル開発環境 ~その2. ローカル環境とGASプロジェクトの連携

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

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

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


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

1. コンテナでの開発環境開発

2. ローカル環境とGASプロジェクトの連携 ⇦本記事

3. GASとGCP連携とローカルからの実行


1. 概要

 前回、Visual Studio Codeと Docker (devcontainer)を使って、コンテナの環境を作成しました。その続きとして、今回はローカルと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

   |  

   |- docker-compose.yml

4. GASプロジェクトの作成

ここでは、ローカルでのGASプロジェクトの作成方法について記述します。

 前提として、前回作成したコンテナのホームディレクトリ/home/node/gas-tutorial/にいるとします。


3で定義したディレクトリ構成のようにしたいため home/node/gas-tutorial/gas以下のディレクトリとGASプロジェクトを結び付けが出来るようにgasディレクトリを作成し、移動します。

node ~/gas-tutorial $ mkdir gas
node ~/gas-tutorial $ cd gas

Google Apps Script API 

GASプロジェクトに対して、更新、作成、デプロイ等を行う際は、Google Apps Script APIを有効にする必要があります。


以下のURLにアクセスして、Google Apps Script APIを有効にしてください。

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

有効になっている場合は、以下の画像のようにスイッチがオンになります。


※有効になっていない場合、claspコマンドで更新等行うと以下のエラーが出ます。

User has not enabled the Apps Script API. Enable it by visiting https://script.google.com/home/usersettings then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

Google アカウント認証

移動後、以下のコマンドを入力してGoogleアカウントにログインします。

node ~/gas-tutorial $ clasp login

許可を選択し、下記の画像のように、Logged in! You may close this page.と画面に表示できれば成功です。

Terminal上でも、以下のように表示されます。

Authorization successful.

Default credentials saved to: /home/node/.clasprc.json.

ローカルでGASプロジェクトを作成

GASプロジェクトを作成するには、以下のコマンドを入力します。

node ~/gas-tutorial/gas $ clasp create –-title gas-tutorial

入力後、いくつかGASプロジェクトに関する選択肢が出ますが 今回は、standaloneを選択します。

作成する際に、optionで --title [project_name]を追加することで、[project_name]に入力した文字列がGASプロジェクト名となります。


指定しない場合は、コマンドを実行したディレクトリ名となります。 したがって、今回を例にすると、指定しなかった場合 Gas というプロジェクト名になります。


実際作成したGASプロジェクトは、Google Driveもしくは、clasp listで確認できます。

作成が無事完了すると、ディレクトリに .clasp.jsonappsscript.jsonが作成されると思いますので確認してください。

 このファイルについては、6で解説します。

5. 既存のGoogle Apps Scriptとの連携

ここでは、既存のGASプロジェクトとローカルディレクトリを連携する方法を記述します。


GASプロジェクトの作成と同様に、まずソースコードを配置するディレクトリへ移動してください。

ここでは、再度/home/node/gas-tutorial/gasにいると仮定します。


今回は以下の SampleというGASプロジェクトと連携したいと思います。

clasp listコマンドを入力すると下記のように出てきます。

Sample        - https://script.google.com/d/14Ya6HS4AwJj9sWnugcpPCmiQUKBDB/edit
Gas-tutorial  - https://script.google.com/d/F8QLbLPa78QnN0zixEe98rSXleAEHG/edit

今回の場合、Sampleと連携したいため以下のように入力します。

node ~/gas-tutorial/gas$ clasp clone 14Ya6HS4AwJj9sWnugcpPCmiQUKBDB


これらのURLは https://script.google.com/d/[project_id]/edit の形式になっています。[project_id] になっている個所についてはこのURLの[project_id]部分を利用して下さい。


※ 既に、.clasp.json がある場合は、ファイル内のscriptId[project_id]の部分を変更したいproject idに修正してください。

{
"scriptId":"[project_id]",
    "rootDir":"/home/node/gas-tutorial/gas"
}

6. 作成されたファイルについて

4,5を通じて、現在 gasディレクトリには.clasp.jsonappsscript.jsonのファイルが作成されたと思います。

 ここでは、上記2つのファイルについて簡単に説明していきます。

.clasp.json

.clasp.jsonは、いわゆるローカルとGASプロジェクトを結びつけるためのファイルです。

5,6で create もしくは、 cloneでGASプロジェクトと連携させると、以下のファイル構成になっていると思います。


{
    "scriptId":"[project_id]",
    "rootDir":"/home/node/gas-tutorial/gas"

}

以下、一部プロパティについての説明です。

scriptId

連携するGASプロジェクトのproject idを記述する場所です。

5で説明したように、[project_id]の値をここに入力します。(create、cloneした場合は自動的に入力されます。)

rootDir

ソースコードがある、ディレクトリを記述する場所です。

5,6でGASプロジェクトと連携した場合、ここでは"/home/node/gas-tutorial/gas"が入力されています。

projectId

連携するGCPプロジェクトのproject idを記述する場所です。

 次回の記事で、GASプロジェクトをローカルから実行する際にGCPと連携させる際に記述します。

appsscript.json

appsscript.jsonはGASプロジェクトのマニフェストファイルです。

 ここでは、使用するデプロイバージョンの設定やスコープ、タイムゾーン、ライブラリなどの拡張の設定をします。

以下、初期で作成された場合のappsscript.jsonです。

{
  "timeZone": "America/New_York",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8"
}


以下、一部プロパティについての説明です。

timeZone 

タイムゾーンの設定

※TimeZoneは、トリガーでスケジュールから実行する場合など、自分の住んでいる地域に設定することをオススメします。

"timeZone": "America/New_York"
          ↓
"timeZone": "Asia/Tokyo"

oauthScopes[]  

スコープの設定

例) 使用するoauthを列挙

"oauthScopes": [

    "https://www.googleapis.com/auth/drive",

    "https://www.googleapis.com/auth/drive.scripts",

    "https://www.googleapis.com/auth/spreadsheets",

 ]

dependencies

拡張サービスの設定 : enabledAdvancedServices[]

ライブラリの設定 : libraries[]

"dependencies": {


  例) Sheet v4 APIを利用するための宣言

   "enabledAdvancedServices": [

      {

        "userSymbol": "Sheets",

        "version": "v4",

        "serviceId": "sheets"

      }

    ],


  例) 自分が作成したライブラリを利用するための宣言

    "libraries": [

      {

         "userSymbol": "[ID]",     // プロジェクト内でこの ライブラリ を参照する際に使用

        "version": "1",

        "libraryId": "[project_id]"  // 使用するライブラリのProject Id

      }

   ]

}


exceptionLogging

 ログの記録場所

 デフォルトでは、 STACKDRIVERが設定されている。

webapp

ウェブアプリケーションの設定

例)

"webapp": {

    "executeAs": "USER_DEPLOYING",  // 実行するユーザー

    "access": "ANYONE_ANONYMOUS"   // アクセスできるユーザー

  }

executionApi    

実行可能APIの設定

例)

"executionApi": {

    "access": "MYSELF" // アクセスできるユーザー

  }


※次回の記事で executionApiやoauthScopesについても、触れる予定です。

7. 作成されたファイルの修正

.clasp.json

2.で示したように、ソースコードをsrc配下にしたいため、rootDirを srcに指定し直します。


差分

{
"scriptId":"[project_id]",
-    "rootDir":"/home/node/gas-tutorial/gas"
+ "rootDir":"/home/node/gas-tutorial/gas/src"

}

appsscript.json

appsscript.jsonは、ソースコードと同じディレクトリに存在する必要があるため、srcディレクトリを作成し移動します。

node ~/gas-tutorial/gas $ mkdir src
node ~/gas-tutorial/gas $ mv appsscript.json ./src/

8. ローカルからGASプロジェクトへpush

さて、待ちに待ったローカルからGASプロジェクトへのpushです。

pushさえ出来てしまえば最低限、コードの管理ができるようになります。

ということで、GASプロジェクトで使用するファイルを作成しましょう。


作成する場所は、srcディレクトリにsample.jsを作成します。

node ~/gas-tutorial/gas $ touch ./src/sample.js

作成後、sample.jsに以下の内容を記述します。

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

記述後、以下のコマンドを入力してください。

node ~/gas-tutorial/gas $ clasp push

すると、連携しているGASプロジェクトへpushが出来たはずです。

確認

以下のコマンドを入力して、GASプロジェクトを開いてみましょう。

node ~/gas-tutorial/gas $ clasp open

すると、実際のGASプロジェクトが開き、反映されていることが分かります。


ここで実行ボタンを押すと、下記のようにhello worldが出力されます。

9. ローカルにpull

では、ローカル → GASプロジェクト(push)が出来たので

 GASプロジェクト → ローカル(pull)の確認をします。


以下のように、GASプロジェクト内でpullTestを追加します。

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

function pullTest(){
    console.log("pull test");
}

修正後、ローカルのターミナルで以下のコマンドを入力します。

node ~/gas-tutorial/gas $ clasp pull

すると、以下の表示が出て無事、ローカルにpullすることができました。

次回

今回は、claspコマンドを使用して、create、 clone、 push、 pullを行いました。 現状の設定ではローカルからのGASプロジェクトの実行はできません。 したがって、次回はGoogle Cloud Platform(GCP)と連携して、自分の失敗談を交えながら、ローカルから実行について説明していこうと思います。


ここまで読んでいただき、ありがとうございます。次回でGASのローカル環境構築最終回です。楽しみに待っていてください。それでは、また次回の記事でお会いしましょう。