実践編 / 開発実践演習 / Step1
Step 1 / 7

【実践演習】スマホでバーコードが読める!
「備品管理アプリ」を作ってみよう

いよいよ実践編です。 この章では、実際に手を動かしながら 会社の備品を管理するアプリ をゼロから作っていきます。 まずこのページでは、すべての土台になる データの準備AppSheetの起動までを完了させます。

Tutorial Mission

ステップ1:アプリの土台作り(データの準備と立ち上げ)

AppSheetでは、アプリは何もないところから始まるのではなく、 表データから始まります。 ここで作るスプレッドシートが、あとでアプリの入力項目や一覧画面の元になります。

このページのゴール
  • 備品管理用のスプレッドシートを作る
  • 必要な列を正しく並べる
  • 拡張機能からAppSheetを起動する
  • 初期アプリが自動生成されるところまで確認する

ステップ1-1:Google スプレッドシートで備品リストを作る

まずは Google スプレッドシートを開き、備品情報を管理するための列を作成します。 AppSheetはこの列名を見て、「これは写真」「これは日付」と判断するため、 最初の列設計がとても重要です。

今回作る列
備品ID
あとでバーコード読み取りの対象にする
備品名
例:ノートPC、脚立、プロジェクター
カテゴリ
PC / 文具 / 工具など
写真
備品の画像を管理する列
購入日
購入タイミングを記録する
ステータス
使用中 / 貸出中 / 保管中など
ポイント

列名はあとから変更できますが、最初からわかりやすい名前にしておくと、 AppSheetが推測しやすく、後の設定もスムーズです。

Visual

イメージ:備品リストの表

備品ID
備品名
カテゴリ
写真
購入日
ステータス
EQ-001
ノートPC
PC
pc.jpg
2025/04/01
使用中
EQ-002
脚立
工具
ladder.jpg
2024/11/13
保管中
EQ-003
プロジェクター
AV機器
pj.jpg
2023/09/20
貸出中
この表が、そのままアプリの入力項目や一覧表示の元になります。

ステップ1-2:拡張機能から AppSheet を起動する

スプレッドシートの準備ができたら、次は AppSheet を起動します。 手順はとてもシンプルで、 Google スプレッドシートのメニューから呼び出すだけ です。

1
スプレッドシート上部のメニューを開く
「拡張機能」をクリックします。
2
AppSheet を選ぶ
メニュー内の「AppSheet」を選択します。
3
「アプリを作成」をクリック
AppSheet がこの表を読み取り、初期アプリを自動生成してくれます。
ここが AppSheet の気持ちいいところ

「アプリを作成」を押した瞬間に、表の列構成をもとに画面が自動で立ち上がります。 まずは “もう動くものができた” という体験を味わってください。

Capture Mock

図解 / 画面キャプチャイメージ

Google スプレッドシート
ファイル 編集 表示 挿入 形式 データ ツール 拡張機能 ここをクリック ヘルプ
アドオン
AppSheet
アプリを作成
操作イメージ
「拡張機能」→「AppSheet」→「アプリを作成」の順にクリックします。

実際の画面キャプチャを入れる場合は、この構図に沿って クリック箇所を矢印や吹き出しで強調 すると、初学者にも伝わりやすくなります。

ここまでできたら成功です

AppSheet が立ち上がり、備品名やカテゴリなどの列をもとに、 一覧画面や入力フォームのようなものが見えていればOKです。 まだ細かい設定は不要です。 この時点では 「表からアプリができる」体験をつかむこと が大切です。

Equipment List
ノートPC
カテゴリ: PC
脚立
カテゴリ: 工具
プロジェクター
カテゴリ: AV機器
こんな一覧が自動生成されていれば順調です
Checklist
ステップ1 振り返りチェック