そんな今日この頃の技術ネタ

本家側に書くほどでもない小ネタ用

claspでGoogle Apps Scriptの開発環境を整える

Google Apps Scriptを使わざるを得ない案件があって調べていじっている今日この頃。

f:id:blue1st:20180924175114p:plain:w500

Apps Script – Google Apps Script

Web上の機能もなかなか良くできていて簡単なものを作るだけならさほど不便は無いのだけど、流石に数百行ものコードをES5のシンタックスで記述・運用していくのは辛みがある。それに、他のシステムとの連携を考えてもローカルでコードを管理したいところ。

で、当然世の中にもそんな需要はあるわけで昔から何個かツールが作られたりしたようだけれど、一番最新はgoogle公式で出してるclaspっぽい。gitライクな操作感で管理・デプロイできる。

github.com

(他の古い手段だとpushはできてもpullはできなかったりと片手落ちだったんだよね。)

そんなわけでひとまずclaspで簡単なものを作ってみるところまで。


インストール

node.js製のツールなので何はともあれnpmでインストール。

$ sudo npm i @google/clasp -g


loginコマンドでブラウザが起動するので、アカウントにログインする。

$ clasp login
No credentials given, continuing with default...
🔑  Authorize clasp by visiting this url:
https://accounts.google.com/o/oauth2/v2/auth?…


また、実際に作業を始める前にAPIの使用を許可しておく必要がある。

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

f:id:blue1st:20180924184115p:plain:w100

f:id:blue1st:20180924184120p:plain:w400


新規プロジェクトのcreate・既存プロジェクトのclone

新規にプロジェクトを作成する場合は作業ディレクトリの下でcreateコマンドで作成できる。

$ mkdir gas-sandbox
$ cd gas-sandbox/
$ clasp create sample
Created new script: https://script.google.com/d/.../edit
Cloned 1 file.
└─ appsscript.json

Web画面上でも空のプロジェクトが作成されたことが確認できる。

f:id:blue1st:20180924185216p:plain:w400

ちなみにclasp openコマンドでブラウザで開くこともできる。


既に作られたプロジェクトをcloneしてくることもできる。

メニューの「プロジェクトのプロパティ」からスクリプトIDを確認。

f:id:blue1st:20180924190427p:plain:w300

f:id:blue1st:20180924190435p:plain:w400

先程のスクリプトIDをclasp cloneコマンドで指定することで作業ディレクトリ下に取得できる。

$ clasp clone [スクリプトID]

git cloneと異なりディレクトリが作られずそのまま降ってくるのでちょっと注意。


編集したコードのpush/pull

例えば以下のような文字列を出力するスクリプトCode.jsをローカルで作成してみる。

# Code.js
function echoMessage(msg) {
  Logger.log(msg)
}

function main() {
  ["hello", "world", "!"].forEach(function (msg) {
    echoMessage(msg);
  })
}


これを動作環境に持っていくにはclasp pushを用いる。

$ clasp push
└─ Code.js
└─ appsscript.json
Pushed 2 files.

Web画面を更新すると先程の記述したコードが*.gsファイルとして上がり、実行してログを表示すると意図したメッセージが表示されることを確認できる。

f:id:blue1st:20180924200452p:plain:w500


逆にWeb画面上でworldGASに書き換えた上で保存しclasp pullすると・・・

f:id:blue1st:20180924200826p:plain:w300

更新されたファイルが*.jsとして降ってくる。

$ cat Code.js
function echoMessage(msg) {
  Logger.log(msg)
}

function main() {
  ["hello", "GAS", "!"].forEach(function (msg) {
    echoMessage(msg);
  })
}

ただ、この動作はgit pullと異なり単にファイルをダウンロードして上書きする動作なので、Webとローカルの双方で編集するような運用は避けるべきである。


ちなみにclaspはv1.5からTypeScriptにも対応していて、ローカルで以下のようなTypeScript形式でスクリプトを記述&ファイルの拡張子を.tsにし、

function echoMessage(public msg: string) {
  Logger.log(msg)
}

function main() {
  ["hello", "GAS", "!"].forEach((msg) => {
    echoMessage(msg);
  })
}

pushすると

$ clasp push
└─ Code.ts
└─ appsscript.json
Pushed 2 files.

変換した形で上がってくれる。

f:id:blue1st:20180924201856p:plain:w300

ただ、このままだとpullすると変換後の*.js共々降ってきて次にpushする時に邪魔だったりと諸々都合がよろしくなかったりするので、TypeScriptでの運用については別途記事を上げたいと思う。


バージョン管理

GASにはバージョンを管理する機能が備わっており、ライブラリとして外部公開する際なんかにも利用したりするのだが、

f:id:blue1st:20180924202753p:plain:w200

f:id:blue1st:20180924202800p:plain:w300

これもclaspで操作することができる。


clasp deployでデプロイするとことでバージョンとして登録される。バージョンは1からインクリメント。

$ clasp deploy
Created version 1.

詳しい説明は割愛するが、versionsで確認しredeployundeployで上書きや削除を行うことができる。



そんなこんなでclaspを使うことでgitライクにスクリプトを管理できた。(logsとかrunとかもあるんだけど、現状では挙動が微妙なので端折った。)

ただ、いかにgitライクといえどもいわゆるバージョン管理とは意味合いが異なるし、ウェブ画面上での操作ミスで消し飛ぶ可能性も無いとは言えないため、あくまでローカルでのみ開発・ウェブ上でデバッグする感じにして、別途コードはリポジトリに上げる形が良いのではないかと思う。

TypeScriptで開発するための諸々は別記事で書いていきたい。

Google Apps Script Webアプリ開発 超入門

Google Apps Script Webアプリ開発 超入門

業務で使うにあたって参考書の類が欲しかったんだけど、出版時期が微妙なのばっかりだったんだよね。↑これが最新というかこれから出るやつだけど、僕はJavascriptに入門したいわけでもウェブアプリを作りたいわけでもないし・・・