Gluegent Blog

Gluegent Blog

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

  • 技術
x facebook Line url copyコピーしました
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/にいるとします。

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

node → ~/gas-tutorial $ mkdir gasnode → ~/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.jsonとappsscript.jsonが作成されると思いますので確認してください。

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

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

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

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

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

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

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

Sample - https://script.google.com/d/14Ya6HS4AwJj9sWnugcpPCmiQUKBDB/editGas-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. 作成されたファイルについて

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

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

.clasp.json

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

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

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


}

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

scriptId

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

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

rootDir

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

５，６で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のローカル環境構築最終回です。楽しみに待っていてください。それでは、また次回の記事でお会いしましょう。