Google Apps Scriptのローカル開発には「clasp」導入がオススメ

Google Apps Scriptってご存知ですか？
その名の通り、Googleが提供しているプログラミング言語のことです。
略してGAS(「ガス」)といいます。

Google Apps Scriptは無料で利用することができ、
Googleのアカウントさえあればすぐに書き始めて、プログラムを実行することができます。
環境構築も必要なく、非常に手軽なので、初心者向けのプログラミング言語だと言えます。

初心者向けとはいえ、Googleの他のサービス、
たとえばGmailやGoogleカレンダー等をプログラミングで操作することができるので、
手軽に作業を自動化することも可能です。

Google Apps Scriptを書いてみる

試しに簡単なプログラムを作成してみましょう。
下記のリンクから「新規スクリプト」をクリックします。

Google Apps Script

すると、下記のような画面が表示されます。

とりあえず、Hello worldをしてみましょう。
下記のようなコードを記載してください。

function myFunction() {
  Logger.log("Hello World");
}

メニューの「実行」から「関数を実行」を選択すると「myFuunction」が表示されているはずなのでクリックします。
（実行前に保存するようにメッセージが表示されるので保存します）

メニューの「表示」からログを選択すると、「Hello world」が表示されているはずです。

Google Apps Scriptをローカル環境で開発する

claspを準備

このまま、上記のようにブラウザ上のエディタで開発してもいいのですが、
ある程度、コードの記載量が増えていくと、使い慣れたエディタで開発したくなります。
そこで利用するのが「clasp」です。
claspはGoogleが公開しているツールで、claspを使用することでローカルで開発したコードを
簡単にブラウザ上のエディタにpushすることができます。

では、claspを導入してみましょう。

npmでインストールします。

$ npm install @google/clasp -g

claspと入力してヘルプが表示されたら無事にインストールできています。

$ clasp
Usage: clasp <command> [options]

clasp - The Apps Script CLI

Options:
  -v, --version
  -h, --help                                  output usage information

Commands:
  login [options]                             Log in to script.google.com
  logout                                      Log out
  create [options]                            Create a script
  clone [options] [scriptId] [versionNumber]  Clone a project
  pull [options]                              Fetch a remote project
  push [options]                              Update the remote project
  status [options]                            Lists files that will be pushed by clasp
  open [options] [scriptId]                   Open a script
  deployments                                 List deployment ids of a script
  deploy [options]                            Deploy a project
  undeploy [options] [deploymentId]           Undeploy a deployment of a project
  version [description]                       Creates an immutable version of the script
  versions                                    List versions of a script
  list                                        List App Scripts projects
  logs [options]                              Shows the StackDriver logs
  run [options] [functionName]                Run a function in your Apps Scripts project
  apis [options]                              List, enable, or disable APIs
    list
    enable <api>
    disable <api>
  help                                        Display help
  setting|settings [settingKey] [newValue]    Update <settingKey> in .clasp.json
  *                                           Any other command is not supported

ユーザー認証が必要なので下記コマンドを入力します。
ブラウザが起動するので、ログインします。

$ clasp login
Warning: You seem to already be logged in *globally*. You have a ~/.clasprc.json
Logging in globally...
🔑 Authorize clasp by visiting this url:

認証が成功すると下記のメッセージが表示されます。

Authorization successful.

Default credentials saved to: ~/.clasprc.json.

新規スクリプトを作成する

新規スクリプトを作成します。

# 作業用のディレクトリを作成します。
$ mkdir sample
$ cd sample
# 新規スクリプトを作成する
$ clasp create sample

はじめて上記のコマンドを入力すると、下記のようなメッセージが表示されるかもしれません。

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.

その時は、メッセージにもありますが、https://script.google.com/home/usersettingsにアクセスして、Google Apps Script APIをオンにします。

作成が成功すると下記のメッセージが表示され、カレントディレクトリ「.clasp.json」と「appscript.json」が作成されます。

Clone which script? については、「standalone」を選択しておきましょう。

Created new standalone script: https://script.google.com/d/<省略>/edit
Cloned 1 file.
└─ appsscript.json

作成したら下記のコマンドで、ブラウザ上のスクリプトエディタを起動することができます。

$ clasp open

スクリプトエディタを起動すると「Code.gs」が作成されているのが確認できます。

この「Code.gs」にコードを書いていくわけですが、ローカルには「Code.gs」は作成されていないので、pullしてくる必要があります。

$ clasp pull

そうすると、カレントディレクトリに「Code.gs」が「Code.js」に変換されて取得できます。

では、Code.jsにコードを追加してみましょう。

function myFunction() {
    Logger.log('Hello clasp');
}

編集が終わったら、ブラウザ上のスクリプトエディタにpushしてみましょう。

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

clasp openしてみると、編集結果が反映されていることが確認できます。

Gitでバージョン管理してみる

せっかくなので、Gitでバージョン管理してみましょう。

作業ディレクトリで下記のコマンドを入力します。

Gitをインストールしていない場合は下記の記事を参考にしてみてください。

Gitのインストール

$ git init

では、Gitにファーストコミットしてみましょう。

その前に、スクリプトIDが記載されている「.clasp.json」はGitの管理外にしたいので、「.gitignore」ファイルに追加しておきます

$ vi .gitignore

.clasp.json

では、ファーストコミットしてみます。

$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    .gitignore
    Code.js
    appsscript.json

nothing added to commit but untracked files present (use "git add" to track)

$ git add -A
$ git status
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

    new file:   .gitignore
    new file:   Code.js
    new file:   appsscript.json

git commit -m 'first commit'
[master (root-commit) de544af] first commit
 3 files changed, 10 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 Code.js
 create mode 100644 appsscript.json

これでGitでバージョン管理もできるようになりました。

続いて、Gitでバージョン管理を行った後に、clasp pushするときに注意点があります。
clasp pushコマンドはカレントディレクトリにあるファイルをすべて、ブラウザ上のスクリプトエディタにpushしてしまう仕様なのですが、
カレントディレクトリにある「.gitディレクトリ」や「.gitignore」はpushしたくありません。

そこで、clasp pushの対象から特定のファイルを除外するために「.claspignore」というファイルを用意します。

pushしたいのは、jsファイルとappsscript.jsonなので、下記のように記載します。

**/**
!*.js
!appsscript.json

長くなりましたので、今回はここまでにします。
次回は、Typescriptを使ったGoogle Apps Scriptの開発にして記事にしたいと思います。