機能追加！！ 在庫いくらなの？すぐ調べるツールを試作してみました。

おはよう・こんにちは・こんばんは。某小売店デリカ部門で働くyukiyoriです。デジタルも学び始め、１か月半にもなるんですが、いろいろなツールと少しずつ仲良くなれてきたかな？と思うようになりました。
前回投稿した在庫を調べるツールに機能を少し追加したので、ここで紹介させていただきます。本当に少しだけの追加なので期待せずに見てください(・。・;

まずは前回の記事

https://qiita.com/yukiyori/items/7ba714bae149f03cf091
こちらは前回投稿した内容です。ここから機能を追加しました。

追加した機能

今回追加した機能は、商品ごとに写真を載せられるという機能になります。

なぜ入れようと思ったか

この機能を入れようと思ったのは、一緒にデジタルを学んでいるメンバーの方のアプリに写真が入っており、『あったら見やすい！』と思ったので、入れようと思いました。

使用したツール

・Googleスプレッドシート
・ChatGPT
・AppSheet
前回と同じく、以上の３つを使いました。作成する流れも前回と同様にChatGPTにガイドしてもらいながらGoogleスプレッドシートとAppSheetを作り上げていく感じで作成しています。

作成手順

1．ChatGPTに手順を聞く。

↑　まずはこのようにChatGPTへ質問してみました。

ChatGPTからの回答はこちら

うん、AppSheetでは 商品ごとに写真を表示する ことができるよ！

以下の手順で、スプレッドシートに商品画像を設定してアプリに表示しよう！

1. スプレッドシートに「画像URL」列を追加

まず、Googleスプレッドシートに 「画像URL」 という列を追加するよ。

例：

商品コード 商品名 単価（円） 棚卸数量 棚卸金額 画像URL

A001 商品A 500 10 5000 https://～.jpg

A002 商品B 800 5 4000 https://～.png

• 「画像URL」には、Googleドライブやオンラインにある画像のリンクを入れる

• Googleドライブの画像を使う場合は、「共有設定」で「リンクを知っている全員が閲覧可」にする

1. AppSheetで「画像URL」列のデータ型を変更

2. AppSheetの「Data」タブを開く

3. 「画像URL」列の「TYPE」をクリック

4. 「Image」に変更（画像として認識される）

5. 「Save」ボタンを押す

6. 商品リストに画像を表示

7. 「UX」タブ → 「Views」を開く

8. 「Table」または「Deck」ビューを選択（商品リストを表示する画面）

9. 「Image」フィールドに 「画像URL」 を設定

10. 「Save」ボタンを押す

11. アプリで画像を確認

スマホやPCでアプリを開くと、商品ごとに画像が表示されるようになるよ！

• Tableビュー → 商品リストに小さな画像が表示される

• Deckビュー → 商品ごとに大きめの画像が表示される

もし Googleドライブの画像が表示されない場合は、「公開URL」に変換する必要がある から、そのときはまた教えてね！ 😊

最後には絵文字も付けて送ってくれました。
ここで、一つ疑問が浮かびました。
それは この設定だとパソコン上からしか写真を貼ることができず、スマホで撮影した写真はすぐに載せられないのでは？ ということです。

そこで続けてこんな質問もしてみました。

それに対するChatGPTからの回答

うん、スマホのアプリ画面から 直接写真を撮影してアップロードすること もできるよ！

商品ごとに写真を撮影＆保存できるようにする設定 をやってみよう！

📸 スマホで撮影した画像をアプリに保存する方法

1. スプレッドシートに「画像」列を追加

スプレッドシートに 「画像」 という新しい列を追加して、商品ごとに画像を保存できるようにするよ。

商品コード

商品名

単価（円）

棚卸数量

棚卸金額

画像

A001

商品A

500

10

5000

（ここに画像が入る）

A002

商品B

800

5

4000

（ここに画像が入る）

1. AppSheetで「画像」列を設定

2. 「Data」タブを開く

3. 「画像」列の「TYPE」を「Image」に変更

4. 「Save」ボタンを押す

5. スマホで撮影＆アップロードできるようにする

6. 「UX」タブ → 「Views」を開く

7. 商品詳細ページ（Formビュー）を選択

8. 「画像」フィールドを追加

9. 「Save」ボタンを押す

📌 これで、スマホのアプリから 「画像」フィールドをタップすると、カメラが起動して直接撮影できる！

1. スマホで撮影＆保存の流れ

2. スマホのアプリを開く

3. 商品を選択

4. 「画像」フィールドをタップすると、カメラが起動する

5. 写真を撮影して保存

6. 自動でスプレッドシートに画像が保存される 🎉

📌 注意点

• Googleドライブのストレージを使用する（無料版では保存制限あり）

• 撮影した画像の保存先を確認（AppSheetのストレージ設定で変更可能）

• オフラインでも撮影＆保存できるが、ネット接続後に同期される

これで、スマホで商品を撮影して、そのままアプリに登録できるようになるよ！

試してみて、うまくいかないところがあったら教えてね 😊

できるとのことでした！それにしてもすぐに答えが返ってきて凄いですね！！！

2．Googleスプレッドシートの編集

ChatGPTの指示通りまずはGoogleスプレッドシートを編集していきます。

新たに画像を入れるところを追加した感じです。

3．AppSheetの編集

続けてAppSheetも編集します。

緑色で囲ったところを画像のように変更しまして、これで設定は完了です。
実際の編集操作は単純なもので、分かる人にとっては、ChatGPTに聞くまでもないことだとは思いました。

4．実際に写真を撮ってみた

一通り完成したので、実際に写真を撮ってうまく反映されるのか実験しました。一発で反映して一安心。
https://x.com/i/status/1892073990228713958
※今回はアプリが設定どおり動くかの試験ですので、商品名と撮影した写真には何も繋がりはありません。ちなみに使った写真は私が趣味でやっているチューバという楽器のケースです（笑）。

作ってみた感想

今回は、アプリに画像を入れられるようにするという事をやってきました。やる事が単純だったのもあると思うが、特に躓くことなく進められたかなと思います。
こうしてアプリを作っていくうえで私の中でポイントだなと思うことがありました。

納得がいくまでChatGPTとやりとりをする

１度だけChatGPTに聞いて、アプリの編集をしようとするとChatGPTの回答になかった画面が出たりしたとき躓きます。編集を途中までやって、再び聞き直したりすると『どこまでやったっけ？』となって後戻りも大変だなと思いました。
なので、自分自身で回答に納得がいくまでChatGPTとはやりとりして、アプリの編集に取りかかれば編集はすんなりできると感じました。どんなにくだらない質問しても怒ったりしませんし（笑）

読んでいただきありがとうございました！