【AppSheet】顧客台帳のシートから、アプリはどう作る？ ‣ はてなベース株式会社

スプレッドシートを1シート1表で用意し、顧客IDの列を文字列にしておけば、アプリの骨組みは「拡張機能」のメニューからすぐに作れます。手を入れるのはそのあとです。残りのシートを表として足し、キーとラベルを選んだら、列の型を見直して、顧客IDを参照の型にして顧客の表につなぎます。最後にビューを足して、右側のプレビューで動きを確かめます。プログラムは1行も書きません。
この記事の要約

顧客の一覧と詳細を並べた画面。別に作ったデモ版で、この記事で作るものより表と項目が多い（データはすべて架空）

経理3年目の世戸田さんは、自分が所属する税理士事務所で、所長からひとつ頼まれごとをしました。「顧客の台帳、外出先でスマホから見られるようにならないかな」。台帳はスプレッドシートにあり、打合せの予定と議事録は別のファイルに散らばっていました。

そこで調べてみると、AppSheet という Google の道具で、スプレッドシートからそのままアプリが作れるとわかりました。ただ、世戸田さんは AppSheet を開いたこともありません。なので、どの画面で何を押せばいいのか、そこから手探りでした。

作り始める前に、世戸田さんは紙に3つの箱を描きました。顧客、予定、議事録です。どの箱にも顧客IDを書き込み、線でつなぐと、作りたいものの形が見えてきました。

この記事では、世戸田さんが顧客・予定・議事録を顧客IDでつなぐ小さなアプリを作るまでを、画面の順に追います。場面と人物、顧客の名前はすべて架空で、撮影用に新しく作ったシートとアプリを使っています。なお、AppSheet のエディタ（アプリを作る画面）は、撮影した環境では英語の表示でした。本文ではボタンや欄の名前を日本語で書き、初めて出るところに画面の英語の表記を括弧で添えます。

シートは1シート1表で作り、顧客IDを文字列にする

最初にやるのは、アプリの元になるスプレッドシートを整えることです。というのも、AppSheet は表の列を読んで画面を作るので、シートの形がそのままアプリの形になるからです。

世戸田さんが作ったのは「顧客」「予定」「議事録」の3枚のシートです。手順は次のとおりです。

新しいスプレッドシートを作り、名前を付ける（今回は「【記事用デモ】顧客ポータル」）
1枚目のシートの名前を「顧客」にし、1行目に見出し（顧客ID、顧客名、区分、決算月、担当者、電話番号）を入れる（画像の1）
下の「＋」でシートを足し、「予定」（予定ID、顧客ID、日付、件名、種別）と「議事録」（議事録ID、顧客ID、日付、タイトル、要点）を作る（画像の2）
2行目から下に、架空のデータを数行ずつ入れる

ポイントは、予定と議事録にも同じ「顧客ID」の列を置くことです。この列が、あとで3つの表をつなぐ鍵になります。

最初は、顧客の行の右側に「予定1」「予定2」と列を足していきたくなるかもしれません。世戸田さんも、はじめはそう考えました。しかし、1社に何件の予定が入るかは前もって決められません。なので、予定は予定で別の表にし、1件1行で下へ足していく形にします。議事録も同じです。また、セルの結合や、1枚のシートに表を2つ並べる形も避けておきます。AppSheet のヘルプは、1行目に見出しを置き、残りの行はデータだけにし、空の行と列は消しておくよう勧めています。途中に空の行が並び、その下に何か書かれていると、新しい行はいちばん下に足されてしまうからです。

つまずきやすいのは、顧客IDの頭の0です。たとえば「0001」と打つと、スプレッドシートは数字と見なして「1」にしてしまいます。そこで、データを入れる前に顧客IDの列を文字として扱う設定にしておきます。

列の見出し「A」をクリックして、列ごと選ぶ（画像の1）
メニューの「表示形式」から「数字」を開く（画像の2）
「書式なしテキスト」を押す（画像の3）

予定と議事録のシートでも、予定ID・議事録IDと顧客IDの列に同じ設定をします。世戸田さんは一度、顧客の列だけ設定して予定のシートを忘れ、「0002」が「2」に化けたところで気づきました。番号の列は、シートを作るたびにまとめて設定しておくのが確実です。

日付の列も、ここで書式をそろえておきます。なぜなら、AppSheet が列の見出しの言葉から型を推し量る仕組みは、ヘルプによればいまのところ英語の見出しだけに働くからです。一方で、ヘルプはセルの書式から型を推し量るとも書いています。そのため、「日付」のような日本語の見出しの列は、セルに日付として入れ、列全体を同じ書式にそろえておくのが安全です。

「拡張機能」のメニューから、アプリの骨組みを作る

シートが整ったら、いよいよアプリを作ります。といっても、メニューを3回たどるだけです。その前に、「顧客」のシートがいちばん左（1枚目）にあることを確かめておきます。というのも、ヘルプによれば、作られたアプリが最初に使うのはスプレッドシートの1枚目のシートだけだからです。

メニューの「拡張機能」を押す（画像の1）
「AppSheet」にカーソルを合わせる（画像の2）
「アプリを作成」を押す（画像の3）

しばらく待つと、新しいタブで AppSheet が開き、「app is ready!」という画面が出ます。スマホの枠の中には、顧客の一覧がもう並んでいます。

「え、もう完成ですか」。世戸田さんは思わず声に出しました。とはいえ、これはまだ骨組みです。というのも、このときアプリが読み込んでいるのは、1枚目の「顧客」のシートだけで、予定と議事録はまだ入っていないからです。

右上の「×」で案内を閉じると、エディタの画面になります。

左の縦に並んだアイコンが作業の場所です。この記事で使うのは、表と列を扱う「データ（Data）」（画像の1）と、画面を扱う「ビュー（Views）」（画像の2）の2つです。右側はプレビュー（画像の3）で、設定を変えるとその場で見た目が変わります。

残りのシートを表として足し、キーとラベルを決める

次は、アプリに予定と議事録を読み込ませます。その前に、顧客の表の「キー」と「ラベル」を確かめておきます。

キーとラベルは、学校のクラスにたとえると分かりやすいと思います。キーは出席番号です。同じ番号の人は2人いないので、番号を言えば誰のことか必ず1人に決まります。ラベルは名札です。番号だけ呼ばれてもピンと来ませんが、名札の名前なら一目で分かります。アプリでも同じで、キーは行ごとに違う値が入る列（ここでは顧客ID）、ラベルは一覧や選択肢に名前として出す列（ここでは顧客名）にします。左の「データ」を押し、「顧客」の表を開くと、列ごとに「キー（KEY?）」と「ラベル（LABEL?）」のチェックが並んでいます。

世戸田さんのアプリでは、顧客IDにキーとラベルの両方のチェックが付いていました（画像の1）。キーはこのままで構いません。一方で、ラベルは別の表から参照するときの表示に使われます。そのため、ラベルが顧客IDのままだと、あとで予定に顧客を選ぶとき「0001」「0002」と番号が並びます。そこで、顧客名のラベルにチェックを付け、顧客IDのチェックを外しました（画像の2）。

続いて、予定と議事録の表を足します。

「データ」の見出しの横にある「＋」を押す（画像の1）
「表を追加（Add Table "予定"）」を押す（画像の2）
次の画面で「アプリに追加（Add to app）」を押す

議事録も同じ手順で足します。予定と議事録でも、ラベルは番号ではなく件名とタイトルに付け替えておくと、一覧が読みやすくなります。

列の「型」を直し、顧客IDで表どうしをつなぐ

表がそろったら、列の型を見直します。この記事でいちばん大事な節です。

そもそも型とは何か。列ごとに「ここには何を入れるか」を決めた約束です。文字を入れる列、数字を入れる列、日付を入れる列、といった具合です。型が日付になっていれば、入力のときにカレンダーから日にちを選べますし、カレンダーの画面にも並びます。逆に、日付の列が文字の型のままだと、アプリにとってはただの文字列なので、日付としては扱われません。AppSheet は列の中身から型を推し量って自動で決めます。ヘルプによれば判定は多くの場合に合っていますが、外れることもあります。

実際、世戸田さんの予定の表では、日付の列が「テキスト（Text）」と判定されていました。このままだと、入力のときに日付を選ぶ画面が出ず、カレンダーにも並びません。ほかの型でも同じことが起きます。姉妹記事のAppSheetで業務基盤を作り直した記事では、決算月が日付に、ファイル名がファイルの型に判定されたつまずきを紹介しています。表を足したら、保存の前に全部の列の型を上から眺めます。これを習慣にしておくと安心です。

外部の専門家として相談に乗っている銭形さんがよく勧めるのは、型の見直しを表を足した直後、データが数行しかないうちに済ませることです。使い始めてから型を変えると、それまでに入った値が新しい型に合うかを1件ずつ確かめることになり、手間が増えるからです。

では、顧客IDはどうするか。ここで使うのが「参照（Ref）」という型です。

参照の型は、その列の値を「別の表の、どの行のことか」を指す目印にする型です。たとえば予定の表に「月次の面談」という行があり、顧客IDの欄に「0001」と入っているとします。顧客IDを参照の型にして、参照先を顧客の表にすると、アプリはこの「0001」を、顧客の表の0001の行、つまり「サンプル商事株式会社」のことだと理解します。Excel の VLOOKUP で、番号から別の表の名前を引いてくるのに近い動きです。

こうしておくと、予定を開けば顧客名が出て、顧客を開けばその顧客の予定が並びます。手順は次のとおりです。

予定の表で、顧客IDの型（TYPE）を「参照（Ref）」に変える。列の設定画面が開く
赤く表示された「参照先の表（Source table）」で、参照先の表「顧客」を選ぶ
「完了（Done）」を押して設定画面を閉じる
日付の型を「日付（Date）」に変える
議事録の表でも、顧客IDを参照の型（参照先は顧客）に、日付を日付の型にする

予定の顧客IDの型を参照（Ref）にすると列の設定画面が開き、参照先の表が赤く表示される

参照先の表を選ぶまでは、欄が赤く表示されたままです。そのため、赤い欄が消えたことを確かめてから「完了」を押します。

ここまで直したら、右上の「保存（SAVE）」を押して保存します。

参照の型にした効果は、プレビューを開くとすぐにわかります。顧客の詳細画面に、その顧客の予定と議事録が自動で並ぶようになるからです。台帳はスプレッドシートのまま、画面の上で3つの表がつながったわけです。

ここで、さっきのキーとラベルが効いてきます。参照の型の列に実際に入っているのは、参照先のキー、つまり出席番号にあたる「0001」です。ところが画面には、参照先のラベル、つまり名札にあたる顧客名が出ます。キーとラベルを先に決めておいたのは、このためでした。

さらに、参照の型の列を1つ作ると、AppSheet は逆向きのつながりも自動で作ります。予定の側から「この予定はどの顧客のものか」が分かるなら、顧客の側から「この顧客の予定はどれか」も分かる、という理屈です。画面には英語で「Related 予定s」（関連する予定の一覧）と表示されます。顧客の詳細画面に予定の一覧が出るのは、この逆向きのつながりのおかげです。

画面はどう足して、どこで試す？

答えは、左の「ビュー」でビューを足し、右側のプレビューで試すことです。は、アプリの下に並ぶタブの1つ1つに当たります。

世戸田さんのアプリには、顧客と予定のタブが自動でできていました。議事録はタブがなかったので、新しく足しました。

左の「ビュー」を押し、「メインのナビゲーション（PRIMARY NAVIGATION）」の横の「＋」を押す（画像の1）
「新しいビューを作る（Create a new view）」を押す（画像の2）
ビューの名前（View name）に「議事録一覧」と入れる
「対象のデータ（For this data）」で「議事録」を選び、ビューの種類（View type）で「デッキ（deck）」を選ぶ
位置（Position）で「最後（last）」を選び、タブのいちばん右に置く

デッキは1件ずつをカードのように縦に並べる一覧で、件名と日付をひと目で追うのに向いています。表のまま横に並べたいときはテーブル（table）を選びます。

予定のタブは、同じ画面でビューの種類を「カレンダー（calendar）」に変えると、カレンダーの形になります。ビューの設定（View Options）では、開始（Start date）と終了（End date）の両方を指定します。ヘルプによれば、日付の列が1つしかないときは、その列を開始と終了の両方に選びます。下は、別に作ったデモ版のアプリ（今回より表と項目が多い）を、パソコンのブラウザで開いたときの画面です。

正直なところ、今回の撮影用のアプリでは、カレンダーに予定が表示されませんでした。終了の日付を指定していなかったことと、シートの日付が文字として入っていたことの、どちらか（または両方）が原因と見ていますが、特定はできていません。予定が出ないときは、開始と終了の指定と、シートの日付の書式を順に確かめてみてください。

試すのは、右側のプレビューで十分です。ただし、プレビューで足したり直したりしたデータは、本物のスプレッドシートにそのまま保存されます。なので、使っている台帳ではなく、架空のデータを入れた練習用のシートで作るのが安全です。

顧客のタブで1社を押し、下へ送ると、参照の型でつないだ予定と議事録が並んでいます。

議事録のタブで右下の「＋」を押すと、入力フォームが開きます。顧客IDの欄を押すと、番号ではなく顧客名の一覧から選べました。ラベルを顧客名に付け替えておいた効果です。

プレビューの上にあるアイコンで、スマホ・タブレット・パソコンの見え方も切り替えられます。自分のスマホで触りたいときは、App Store か Google Play で AppSheet のアプリを入れ、サインインして開きます。ヘルプも、作成者は自分で使わないアプリでもスマホに AppSheet を入れておくよう勧めています。

料金も気になるところですよね。AppSheet のヘルプは、試作とテスト、そして個人の利用を無料としていて、テストできるのは作成者を含めて10人までです。事務所の業務として本番で使い始めるなら、ライセンスを確かめます。Google Workspace の多くのエディションには AppSheet Core のライセンスが追加料金なしで含まれていますが、使えるかどうかはエディションと管理者の設定で変わります。まずは自分の事務所の契約と設定を見るのが近道です。ほかの人に使ってもらう共有の設定は、そのあとで考えれば十分です。

骨組みはメニューで作り、型と参照は手で直す

「スマホで台帳を見られるようにならないか」。所長の頼みに、世戸田さんは自分で答えを出しました。シートを1シート1表で整え、顧客IDを文字列にしておけば、アプリの骨組みはメニューからすぐに作れます。手で直すのは、キーとラベル、列の型、顧客IDの参照の型の3つで、どれも画面の上の設定だけで済みました。

とはいえ、これは小さな版です。誰がどの顧客を見られるかの設定も、予定を入れたらカレンダーに登録するような自動の処理も、まだ入っていません。そのあたりを AppSheet と別の仕組みでどう分けるかは、AppSheetで業務基盤を作り直した記事で整理しています。スプレッドシートの台帳を業務に使うときの統制の考え方はExcelの集計やCSV連携の統制の記事、現金の日報を AppSheet に移した例は店舗の現金管理をAppSheetに移すときの線引きの記事にまとめました。