AppSheet初心者向け｜経費精算アプリをゼロから構築する手順まとめ①

AppSheet初心者向け｜経費精算アプリをゼロから構築する手順まとめ

目次を表示／非表示

• 背景と目的
• Step1｜スプレッドシートの準備
• Step2｜AppSheetの起動方法
• Step3｜カラム設定とREFの定義
• Step4｜UX設計（フォームと表示）
• Step5｜動作確認とテスト登録
• まとめ

背景と目的

前回の記事「まずはサクッと経費登録アプリを作ってみた」では、AppSheetで設計した2テーブル構成の概要を紹介しました。

今回はその“続編”として、実際にどのような手順でAppSheetアプリを構築したのか、初心者向けにステップバイステップでまとめました。完全ノーコードで構築できるため、ぜひ参考にしてみてください！

Step1｜スプレッドシートの準備

まずはアプリの元となるスプレッドシートを準備します。2つのシートを以下のように作成してください。

まずはGoogleホーム画面の右上

●×9のGoogle　アプリを選択

スプレッドシートを選択

空白のスプレッドシートを選択

経費登録シート（例：経費登録）

1行目にカラム名称を入力

※シート名＝ファイル名称がわかりやすくておすすめ。

• ID経費登録（主キー）
• 発生日 / 面会者 / 面会要件 / メモ など

画面イメージ

経費詳細シート（例：経費明細）

• ID経費明細（主キー）
• ID経費登録（親のREF先）
• 領収書 / 金額 / 勘定科目 / OCRテキスト など

同様に1行目にカラム名を入力。空白の状態で保存します。

画面イメージ

Step2｜AppSheetへの接続方法

スプレッドシート上部のメニュー「拡張機能」→「AppSheet」→「アプリを作成」を選択します。

🔺注意： 初めて使う方は「AppSheet」が出てこないことがあります。その場合は AppSheet公式サイト にアクセスし、「新しいアプリを作成」→「Google Sheetsから開始」で手動作成できます。

作成出来たら、もう一つのスプレッドシート:経費登録を追加しましょう。
※スプレッドシートから拡張機能にて作成した対象のみ初回取り込まれています。

New Tableでもう一つを追加しましょう。

こうなっていればOKです。

ちょっと長くなってしまったので一旦この辺で。
次はStep3から！！

次回の内容を軽く説明すると・・・

Step3｜カラム設定とREFの定義

AppSheetでのデータ型の設定を紹介していきます！

これにより、フォーム上でテーブルの紐付けや、フォーム画面で写真を登録したりなどができるようになります。

Step4｜UX設計（フォームと表示）

AppSheetエディタの「UX」タブから、表示用のビュー（フォーム／一覧／詳細など）を設定します。

これによって フォームやデータ一覧などの見え方を設定できます。

Step5｜動作確認とテスト登録

プレビュー画面またはスマホ実機でアプリを開き、試しに1件登録してみます。

まとめ

今回はAppSheetを使って、2つのテーブルを連携させた経費精算アプリの構築手順を解説しました。ちょっと長くなりすぎたので、後編は後程。