Google Spread Sheetでライフゲームを作った

これは Spreadsheets/Excel Advent Calendar 2018 の５日目の記事です．

はじめに

Google Apps Script(GAS)という技術がある． Microsoft Officeで言うところのVBAにあたる，Googleが提供するサービスだ．

claspというツールが登場したことによってGoogle Apps Script(GAS)の開発が大変便利になった．今回は，Google Spread Sheetにライフゲームを召喚しつつ，スプレッドシート x GASによる比較的新しい開発フローを紹介したい．

ちょっとITエンジニア寄りの話になってしまって申し訳ない．

前提

本記事では前提として

Node.jsがインストールされているPC
Googlのアカウントを持っている　
GASのことを多少理解している

を想定する

Claspとは

ClaspとはGoogleが提供する，GASをローカルで書けるツールである．ローカル，つまり自分のPCで書くことによって様々な恩恵を受けることができる．

例えば，ソースコードをGitHubで管理できたりするわけだ.

今回はclaspのversion2を対象にする．ちなみに，version2は記事執筆時点でリリースされていないので，リリースまで待つ必要がある．

待てない人はGitHub上のソースコードからインストールする必要がある．

$ git clone https://github.com/google/clasp
$ cd clasp
$ npm i
$ npm run build-fresh

ライフゲームとは

以下を参照してください

ライフゲーム - Wikipedia

ソースコード

今回は，ソースコードの解説はしない．

github.com

興味ある方はこちらから確認していただきたい．

開発の流れ

実際に開発する流れを説明していく

Clasp によるプロジェクトの作成

Claspではブラウザを開かずともGASの作成が可能である．プロジェクトのディレクトリを作成，そこをカレントディレクトリとして以下のコマンドを実行する．

$ npm init
$ clasp create --type sheets --rootDir ./src

そうすると

Created new Google Sheet: https://drive.google.com/open?id=XXXXXXXXX
Created new Google Sheets Add-on script: https://script.google.com/d/YYYYYYYYY/edit
Cloned 1 file.
└─ appsscript.json

と表示される．このコマンドだけで，スプレッドシートとそれに紐付いたGASが作成される．

URLが２つ表示されるが，上記がスプレッドシート，下記がGASのものである．

ソースコードを記述する

カレントディレクトリに, src というディレクトリがあると思う．この中でソースコードを書いていくことになる．

凄いことにClaspによる開発ではTypeScriptが使用できる．そのためには以下のコマンドで追加でパッケージを追加する必要がある．

$ npm i typescript --save-dev
$ npm i @types/google-apps-script --save-dev

今回は，ライフゲームのソースコードを用意したのでそれを使用する．以下にソースコードがあるので，そのまま src ディレクトリにコピーすることで動くものは使えるようになるはずだ．( appsscript.json はコピーしなくていい )

github.com

プロジェクトへプッシュする

次に，記述したソースコードをプッシュする．手元のソースコードをGoogleさまのサーバへ送る訳だ．

以下のコマンドを実行する

$ clasp push

これだけ，たったこれだけでソースコードが送信される．試しに以下のコマンドでソースコードが作成されたか確認してみる．

$ clasp open

そうするとブラウザが開きソースコードが記入されていることが確認できるはずだ．

トリガーの設定

さて，ライフゲームを実装したわけだが動かす手段がない．プログラムとしては update という名前の，スプレッドシートの内容を１段階進める処理があるのみだ．

今回は，スプレッドシートを適当に編集することでその処理が呼ばれるようにしていこうと思う．(我ながら強引だ)

ブラウザに表示されている，時計みたいなアイコンをクリックする．

そうすると以下のような画面が開かれる．

そこで，右下の「トリガーを追加」で表示される画面で以下のように設定する．

これは「スプレッドシートを変更したらUpdateを実行する」といったトリガーだ．

動作確認する

さて，最初の clasp create した際に表示された2つのURLから前者(スプレッドシート)を開く．で，スプレッドシートを適当に正方形サイズにしてやり，以下のように塗りつぶす．ちなみにこの塗りつぶしパターンについては　「ライフゲーム　グライダー」で調べると詳しく知ることができる．

この画面で適当に編集をしてみよう．

無事に動いているのが確認できたと思います

おわりに

以上． ClaspとかGASに少しでも興味を持っていただけたのなら幸いである．

しかし，なんでこんな無意味なものを作ってしまったのか．３時間前の僕に詰問したい．本当に無意味なエントリを書いてしまって，全国のSpreadsheets / Excelファンの方々にはお詫びをしたい．

~~次は◯◯さんです~~ って誰も登録してないのか...

明後日はyone-yamaさんの「aikoを讃えるSpreadsheet + GAS」，名前からして絶対面白い．楽しみにしています．

P.S. 駅のホームでブログを書いている．寒すぎて指が死んできた．涙が出てきた．こんな極限状態でブログを書いたのは初めてだ．二度とやらん．

takanakahiko’s blog

多分三日坊主で辞めます。