書籍管理アプリをAppSheetで作る - バージョン1
aromariousはじめてのAppSheet
AppSheet（Googleのノーコード開発）を使ってみたくなった。ただいま自室の書籍を絶賛整頓中なので、これを題材にする。
- バージョン1…書籍情報のCRUD
- バージョン2…メルカリに出すものをピックアップできるようにする
- バージョン3…メルカリへの出品ワークフローを追えるようにする
要件
- バーコードを読み取って書籍情報を自動取得したい
- データをスプレッドシートで見たい
- AppSheetで完結しない場合、GASで連携可能な範囲でおさめる
- 自分ひとりで使えればよい
- iPhoneで利用する
AppSheetで何ができるのかおおまかに調べる
- データソースの種類
- Googleスプレッドシート
- Excel
- ASDB(AppSheet DB) ※このDBは外部（GASなど）から操作できないとのこと
- MySQL, SQLServerなどDBサーバ
- 無料で利用可能な範囲
- できること
- アプリ作成とモバイルアプリケーション利用
- 各種データソース、UI、イベント、プロセスなどの利用
- GAS呼び出し、バーコードスキャンもOK
- できないこと
- デプロイ
- サインイン
- メール送信、通知など
- できること
DBスキーマを用意すれば、UIのあれこれはよきにはからってくれる雰囲気。業務ロジックを書くのはBotのProcess内になるようだ。もちろん直接コードを書くことはできない。WebhookまたはGASの関数呼び出しで処理する模様。
やりたいことはできそう。Processに直接GAS呼び出しを書けるし、UI要素にバーコードスキャンを設定できるのは便利だ。
次はGASで書誌情報の取得のスクリプトを書けるか調べる。
aromarious書誌情報取得調査
これを調べようとしたところ、同じくAppSheetで似たアプリを作っている記事が引っかかった。
助かる！ バージョン1はできたようなものだ。
バージョン1開発手順
この開発は動かしたことのないものが多い（AppSheet、書誌API）。未確認の要素をひとつずつ動作確認しながら作っていく。
AppSheetを作成し、GASを呼び出す部分
まずAppSheetを新規作成し、作ったAppSheetからGASを呼び出す部分を実装。
【手順】
- GoogleSheetsに書籍DBに使用するスプレッドシートを作成する
テーブルは1つ、スキーマはさきほどの記事を参考に作成 - そのシートからAppSheetを新規作成する
作成したAppSheetのDataのスキーマをチェックし、修正する - AppSheetのBot（EventやProcess）を作成する
まずEvent→Processが動作する簡単なBotを作って動作確認する - 書誌情報取得のGAS関数を呼び出して動作確認する
書誌情報を取得するGASスクリプトを書く
書誌APIも初めて使う。GASには慣れているのでいつもの手順を使う。
- Google Books API を使う。取得できない書籍がけっこうあるという情報を見たが、別のAPIを追加できるようにだけしておき、どこまで実装するかは運用に入ってから考える
- GASは普段、手元で
asideを使い、TypeScriptで書いてトランスパイルしてからpushしている。今回もその方法で開発する
【手順】
- APIリクエストを送信するツールで Google Books API を呼び出し、想定した動作かどうか確認する
- GASの関数からAPIを呼び出して結果を返すコードを書き、動作確認する
aromariousバージョン1実装ログ
AppSheetからGASを呼び出す
- GoogleSheetにスキーマを作り、そこからAppSheetを作成した
- Dataのスキーマを修正した
- AppSheetのBot（Event, Process）の動作確認をした
わかりやすい動作をするTask（Taskを複数組み合わせてProcessを作る）がない。今までのGASプロジェクトで既に動作しているコードから、Discordにpostする部分を持ってきて使うことにした。手軽に確認できるデバッグ出力として使う。
Event: 新しいレコードを作成した時
Process: GASの関数を呼び出す
aromarious書誌情報を取得するGASスクリプトを実装
- APIリクエストを送信するツールで Google Books API を呼び出し、想定した動作かどうか確認する
VSCode の ThunderClient でAPIリクエストを発行し、レスポンスをチェックする
-
asideでプロジェクトを作る - ISBNを引数にして書誌情報APIを叩く関数を書く
いつもやっていることは簡単。書いて動作確認できた
AppSheetからGASを呼び出す部分を実装
参考にした記事ではGASがスプレッドシートに直接書誌データを記入しているが、ここのロジックはAppSheet側の責務だと思うのでそう書くことにした。
【動作フロー】
- AppSheet: 新規書籍の登録をトリガーに、GASをコールする。引数はISBN
- GAS: 書誌情報取得APIを呼び出して、その情報をAppSheetに返す。
- AppSheet: GASの戻り値を受け取って、列を埋める
【実装手順】
- GASで簡単なオブジェクト（リテラルで書く）を返す関数を作る
- AppSheet側で呼び出して、戻り値を受け取るための設定を試す
- AppSheet側で列を埋める設定を試す
"Run a data action" というステップで "Set row values" をすればよいらしい - 書誌情報取得の関数で同じことをする
まで終わったところのスクショ。
イベントの設定。Data Change Type は実際は Adds のみに設定
GASの書誌情報の戻り値はオブジェクト。それを受け取る時の AppSheet での型を指定する
取得した書誌情報でカラムを埋める設定
これでバージョン0はできた。少し調整したいところがある。できるかどうか調べる。
aromariousバージョン1 課題
入力項目を非表示にしたい
書誌情報をセットするために、各列を editable にしてある。しかしそうするとUIの新規作成や編集画面で各項目の入力欄が表示されてしまう。使えなくはないが、編集できないようにしたい。
→ 自動的に生成された Books_Form（新規作成と編集の入力フォーム）で、表示する/しないが選べた。
編集ボタンをなくしたい
書籍の情報はISBNを使って新規作成するだけで、編集することはない。削除はするかもしれないが、編集は不要。デフォルトでは編集画面に遷移するパーツや操作が各所に仕込まれている。これをなくしたい。
→ なくせた。
他の仕事と並行して、リアルタイムで記録しながら作っている。最初だから少し手こずったが、慣れればさっさと作れそう。
動く様子↓
次▶️ AppSheetのアーキテクチャを整頓した