GoogleAppScriptをローカルで開発・ローカルから実行してみた

去年はdokkuを試したが、今年はGASを試してみた。
GAS自体は触ったことあるけど、クラウドだからちょっとめんどくさい・・・ってイメージで、
ローカルでやったらまた違って便利かも？と思いついたのでやってみた。

ライブラリをインストールしてログイン

npm i @google/clasp -g
clasp login

自動でブラウザが立ち上がって認証リクエストが出てきた

ちょっと権限多くてびっくり・・・。
認証すればログイン完了

$ clasp login
Logging in globally...
🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?xxxxxxxxxxxxx

Authorization successful.

Default credentials saved to: ~/.clasprc.json (/Users/xxxxx/.clasprc.json).

ファイル作成

$ clasp create projectName
? Create which script? 
  standalone 
  docs 
❯ sheets 
  slides 
  forms 
  webapp 
  api 

そしたら怒られた。

Created new Google Sheet: https://drive.google.com/open?id=xxxxx
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.

どうやら別途権限が必要らしい。

指定されたURL ( https://script.google.com/home/usersettings )を見てみると確かにオフになってたので、オンに変更

再度チャレンジ

$ clasp create projectName
? Create which script? sheets
  standalone 
  docs 
❯ sheets 
  slides 
  forms 
  webapp 
  api 

Created new Google Sheet: https://drive.google.com/open?id=xxxxxx
Created new Google Sheets Add-on script: https://script.google.com/d/xxxxx/edit
Warning: files in subfolder are not accounted for unless you set a '.claspignore' file.
Cloned 1 file.
└─ appsscript.json

とりあえず作成成功。
作成されたGoogle SheetとGoogle Sheet Add-onのURLにアクセスしてもちゃんとアクセスできた。

とりあえず、spreadsheetのA１セルをカウントアップするプログラムを書いてみる。

index.js

global.updateA1Cell = () => {
  const spreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  const sheet = spreadsheet.getSheets()[0];
  const cell = sheet.getRange('A1');
  let count = parseInt(cell.getValue());
  count++;
  console.log(count);
  cell.setValue(count);

}

GASのサーバーへ送信する。上書きする？とだけ聞かれた

clasp push
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ appsscript.json
└─ index.js
Pushed 2 files.

ファイルがアップロードされてGASのページでも見れる

実行ボタンを押すと認証求められたのでポチポチと対応。

カウントできた！

ちなみに、typescriptで書きたいなーと思ってやってみたら、コンパイラが自動で入ってclasp pushしたときに変換してくれるっぽい。すごい

実行もGASを開かずに行う

実行もclaspからできるけど、そのためにがGCPのプロジェクト作ってoauthの認証して〜で急に難しくなる

まず、GCPのプロジェクトを作る必要がある
https://console.cloud.google.com/projectcreate?

そして、OAuth同意画面を追加して、
https://console.cloud.google.com/apis/credentials?

認証情報を作成ボタンから、OAuthのキーを作成

作成が完了したら、右側のDLボタンからファイルをダウンロードして、そのファイルを指定して再ログインする

$ clasp login --creds client_secret_xxxxxxx.apps.googleusercontent.com.json 
Logging in locally...

Authorizing with the following scopes:
https://www.googleapis.com/auth/script.webapp.deploy

  NOTE: The full list of scopes your project may need can be found at script.google.com under:
  File > Project Properties > Scopes
  
Using credentials located here:
https://console.developers.google.com/apis/credentials?project=xxxxxx

🔑 Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?xxxxxxx

Authorization successful.

Local credentials saved to: ./.clasprc.json.
*Be sure to never commit this file!* It's basically a password.
Open this link: https://script.google.com/d/xxxxxxxx/edit

Go to *Resource > Cloud Platform Project...* and copy your projectId
(including "project-id-")

? What is your GCP projectId? body-control-gas

途中でGCPのプロジェクトIDを聞かれるので、ダッシュボードで確認して答えたら完了。
https://console.cloud.google.com/home/dashboard

appsscript.jsonにアクセス権の情報を入力。

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "executionApi": {                    //ここからの3行を追加
    "access": "ANYONE"
  },
}

色々情報が変わってるのでpushしてから実行

$ clasp push
? Manifest file has been updated. Do you want to push and overwrite? Yes
└─ appsscript.json
└─ src/index.ts
Pushed 2 files.

$ clasp run updateA1Cell
Running in dev mode.
Error: Permission denied. Be sure that you have:
- Added the necessary scopes needed for the API.
- Enabled the Apps Script API.
- Enable required APIs for project.
$ 

あれ、怒られた

GAS側で、GCPのプロジェクトを紐付ける必要があるらしい。

GASのCloudPlatformプロジェクトを選択して

プロジェクトIDを入力。

そして実行！

$ clasp run updateA1Cell
Running in dev mode.
Exception: ScriptError Exception: You do not have permission to call SpreadsheetApp.getActiveSpreadsheet. Required permissions: (https://www.googleapis.com/auth/spreadsheets.currentonly || https://www.googleapis.com/auth/spreadsheets) [ { function: 'updateA1Cell', lineNumber: 3 } ]

今度は実行できた！が、途中でエラー

どうやら実行するための権限と、spreadsheetにアクセスするための権限は別の模様。

appsscript.jsonにスコープを記載

appsscript.json

{
  "timeZone": "Asia/Tokyo",
  "dependencies": {
  },
  "exceptionLogging": "STACKDRIVER",
  "runtimeVersion": "V8",
  "executionApi": {
    "access": "ANYONE"
  },
  "oauthScopes": [                                         //ここのスコープを追加
    "https://www.googleapis.com/auth/spreadsheets.currentonly",
    "https://www.googleapis.com/auth/spreadsheets"
  ]
}

認証を取り直すのでログインし直して

clasp login --creds client_secret_xxxxxxx.apps.googleusercontent.com.json 

実行！

$ clasp login 

$ clasp run updateA1Cell
Running in dev mode.
No response.

できた！