商品マスタを編集して商品をカスタマイズする
この時間でやること
今回は、アプリに表示される商品を、自分のイベント用に変更します。
コードはほとんど触りません。
編集する場所は、スプレッドシートの中にある
商品マスタ
です。
ここを変えると、アプリの商品名・価格・在庫数が変わります。
今日のゴール
この時間のゴールは、これです。
商品名を変える
価格を変える
在庫数を変える
商品カテゴリを変える
Webアプリ画面で反映を確認する
ここまでできると、アプリが一気に「自分の企画用」になります。
1. スプレッドシートを開く
まず、前回まで使っていたスプレッドシートを開きます。
https://docs.google.com/spreadsheets/
ファイル名は、授業では次の名前にしています。
イベントグッズ販売POS
開けたらOKです。
2. 商品マスタを開く
スプレッドシートの下のタブを見ます。
その中から、
商品マスタ
をクリックします。
このシートが、商品の情報を管理している場所です。
3. 商品マスタの列を確認する
商品マスタには、次のような列があります。
| 列 | 内容 |
|---|---|
| 商品ID | 商品を区別する番号 |
| 商品名 | アプリに表示される商品名 |
| カテゴリ | アパレル・雑貨など |
| 画像URL | 商品画像のURL |
| 価格 | 商品の値段 |
| 初期在庫 | 最初に用意した在庫数 |
| 現在庫 | 今残っている在庫数 |
| 販売状態 | 販売中・売切 |
| 表示順 | 商品を表示する順番 |
| 備考 | メモ |
最初は、サンプル商品が入っています。
学校祭Tシャツ
オリジナルトートバッグ
アクリルキーホルダー
ステッカーセット
4. まずは商品名を変える
最初に、商品名を変えてみましょう。
商品名 の列を編集します。
例です。
| 変更前 | 変更後 |
|---|---|
| 学校祭Tシャツ | クラス限定Tシャツ |
| オリジナルトートバッグ | 推し活トートバッグ |
| アクリルキーホルダー | 部活アクリルキーホルダー |
| ステッカーセット | 学祭ステッカーセット |
文字を変えるだけでOKです。
コードは触りません。
5. 価格を変える
次に、価格 の列を変えます。
価格は数字だけで入力します。
OK：2500
NG：¥2500
NG：2,500円
例です。
| 商品名 | 価格 |
|---|---|
| クラス限定Tシャツ | 2500 |
| 推し活トートバッグ | 1800 |
| 部活アクリルキーホルダー | 800 |
| 学祭ステッカーセット | 500 |
ポイントは、円マークを入れないことです。
アプリ側で自動的に ¥2,500 のように表示してくれます。
6. 在庫数を変える
次に、在庫数を変えます。
使う列はこの2つです。
初期在庫
現在庫
最初の設定では、基本的に同じ数字にしておくと分かりやすいです。
例です。
| 商品名 | 初期在庫 | 現在庫 |
|---|---|---|
| クラス限定Tシャツ | 30 | 30 |
| 推し活トートバッグ | 20 | 20 |
| 部活アクリルキーホルダー | 50 | 50 |
| 学祭ステッカーセット | 80 | 80 |
現在庫 は、商品が売れると自動で減ります。
現在庫 = 今残っている数
ここだけ覚えればOKです。
7. カテゴリを変える
次に、カテゴリを変えます。
カテゴリは、商品をグループ分けするための名前です。
例です。
| 商品名 | カテゴリ |
|---|---|
| クラス限定Tシャツ | アパレル |
| 推し活トートバッグ | バッグ |
| 部活アクリルキーホルダー | 雑貨 |
| 学祭ステッカーセット | 雑貨 |
カテゴリは自由に決めてOKです。
たとえば、こんな分け方もできます。
食品
アパレル
文房具
記念品
推し活
部活グッズ
8. 販売状態を確認する
販売状態 の列には、基本的に次のどちらかを入れます。
販売中
売切
普通に売る商品は、
販売中
にします。
まだ売りたくない商品や、売り切れた商品は、
売切
にします。
売切 にすると、アプリ上で販売できない状態になります。
9. 表示順を変える
表示順 の列は、商品を並べる順番です。
数字が小さい商品から順番に表示されます。
| 表示順 | 表示位置 |
|---|---|
| 1 | 最初に表示 |
| 2 | 2番目 |
| 3 | 3番目 |
おすすめ商品を上に出したい場合は、表示順を 1 にします。
10. Webアプリで確認する
商品マスタを編集したら、WebアプリURLを開きます。
すでに開いている場合は、ページを再読み込みします。
Windows：Ctrl + R
Mac：Command + R
すると、商品名や価格が変わっているはずです。
確認する場所は次の3つです。
商品カードの商品名
商品価格
在庫表示
反映されていれば成功です。
注意：反映されないとき
商品を変えたのに画面に出ない場合は、次を確認してください。
| 状況 | 確認すること |
|---|---|
| 商品名が変わらない | Webアプリを再読み込みする |
| 価格がおかしい | 円マークやカンマを入れていないか |
| 商品が表示されない | 商品IDが空になっていないか |
| カートに入れられない | 販売状態が 売切 になっていないか |
| 売切になる | 現在庫が 0 になっていないか |
特に大事なのはこれです。
商品IDは空にしない
価格は数字だけ
現在庫は0以上
販売状態は販売中
商品を1つ追加したい場合
新しい商品を追加したい場合は、商品マスタの一番下に1行追加します。
例です。
| 商品ID | 商品名 | カテゴリ | 画像URL | 価格 | 初期在庫 | 現在庫 | 販売状態 | 表示順 | 備考 |
|---|---|---|---|---|---|---|---|---|---|
| P005 | 限定缶バッジ | 雑貨 | https://placehold.co/600x400?text=Badge | 600 | 60 | 60 | 販売中 | 5 | 追加商品 |
商品IDは、他の商品と同じにしないでください。
P001
P002
P003
P004
P005
のように、順番に増やすと分かりやすいです。
今日のおすすめカスタマイズ例
迷った人は、この内容に変えてみましょう。
| 商品ID | 商品名 | カテゴリ | 価格 | 初期在庫 | 現在庫 | 販売状態 | 表示順 |
|---|---|---|---|---|---|---|---|
| P001 | クラス限定Tシャツ | アパレル | 2500 | 30 | 30 | 販売中 | 1 |
| P002 | 推し活トートバッグ | バッグ | 1800 | 20 | 20 | 販売中 | 2 |
| P003 | 部活アクリルキーホルダー | 雑貨 | 800 | 50 | 50 | 販売中 | 3 |
| P004 | 学祭ステッカーセット | 雑貨 | 500 | 80 | 80 | 販売中 | 4 |
これだけでも、かなり自分のアプリ感が出ます。
ここまでできたかチェック
□ 商品マスタを開いた
□ 商品名を変更した
□ 価格を変更した
□ 初期在庫を変更した
□ 現在庫を変更した
□ 販売状態が「販売中」になっている
□ Webアプリを再読み込みした
□ 商品名・価格・在庫が反映された
全部できていれば成功です。
ミニ確認
Q1. アプリの商品名は、どこを変えると変わりますか？
回答
商品マスタ シートの 商品名 を変えると変わります。
Q2. 価格を入力するとき、円マークは必要ですか？
回答
必要ありません。
数字だけで入力します。
Q3. 商品が売れると、自動で減る列はどこですか？
回答
現在庫 です。
Q4. 商品を売れる状態にするには、販売状態を何にしますか？
回答
販売中 にします。
今日のひとこと
ここまで来ると、アプリはもうサンプルではありません。
商品名、価格、在庫を変えるだけで、自分のイベント用のレジアプリになります。
プログラミングは、全部を一から作るだけではありません。
完成したものを理解する
↓
自分用にカスタマイズする
↓
実際に使える形にする
これも、とても大事な力です。
まとめ
今回は、商品マスタを編集して、商品をカスタマイズしました。
やったことはこれです。
商品名を変えた
価格を変えた
在庫数を変えた
カテゴリを変えた
販売状態を確認した
Webアプリで反映を確認した
次は、画面タイトルやボタンの文字を変えて、アプリの見た目や雰囲気をさらに自分用にしていきます。