3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

これってどこにあるの?にすぐ答えたい!AppSheetで社内用「商品案内アプリ」を作ってみた

Posted at

📱 AppSheetで社内用「商品案内アプリ」を作ってみた話

こんにちは。
私は昨夏オープンしたばかりの新しい食品スーパーで副店長をしている、とうすけと申します。


💬 きっかけ:商品案内の現場で感じた課題

スーパーの店員の仕事のひとつに、商品案内があります。

「すみません、○○ってどこにありますか?」

こんなふうにお客様に尋ねられることは、日常茶飯事。
知っている商品ならスムーズにご案内できますが、知らない商品や別の部門のものだと、案内に手間取ってしまうことも…。

そこで、デジタルの力を使ってこの業務をもっとラクに、正確にできないか?と考えたのがきっかけでした。


🤖 以前作った「商品案内Bot(LINE × Make)」

私は以前、LINE BotとMakeを使って商品案内Botを作成しました。

👇過去の取り組みはこちら

ただ、ここでひとつ問題が…。


🚫 課題:LINEは業務中に使えない!

実は、私の職場では個人スマホの持ち込みが禁止されており、せっかく作ったLINE Botも業務中には使えないんです。

ですが、各部門には会社支給の業務用スマホが配布されています。
しかし、お店のアカウントでLINEは使えないようになっています。
それなら──
この会社スマホで使えるアプリを作ればいい!


🛠 今回はAppSheetで「商品案内アプリ」を作成!

というわけで、
Googleのノーコードツール、AppSheetを使って、商品検索&案内アプリを作成しました。

🎬 完成したアプリはこちら

商品名を入力して「SAVE」すると…

image.png

検索結果

商品名・売り場情報・目印・詳細リンクが表示されます!


⚙ 使用した技術

  • Google Sheets(商品データの管理)
  • AppSheet(アプリの作成)

🧩 アプリの作成手順

✅ ステップ①:Googleスプレッドシートを準備

まず、商品情報を管理するスプレッドシートを用意します。

商品名 場所 コーナー・目印 商品詳細情報
サンプル商品 ○○通路 △△ 商品ページのURL

商品詳細情報は各商品のWebページURLなどを貼ってください。

なお、商品名は表記ゆれを防ぐため、すべてひらがなにしてあります。
例(さくらえびは桜エビ、サクラエビだとヒットしなくなる)

スプレッドシートの構成

✅ ステップ②:SearchInputシートの作成

  1. 新しいシートを追加し、名前を SearchInput に変更
  2. A1 セルに「商品名」と入力(他のセルは空白)
  3. 拡張機能 → AppSheet → アプリを作成 を選択

SearchInput作成


✅ ステップ③:フォーム画面の作成

  • 左メニュー「📊 Data」→ → 新しいテーブルとして SearchInput を追加
    フォーム作成

✅ ステップ④:検索結果スライスの作成

  • 左メニュー「📊 Data」→「Slices」→

  • 設定:

    • スライス名:商品検索結果
    • Source Table:シート1
    • Row filter condition:以下の関数をコピペ
IF(
  ISNOTBLANK(
    LOOKUP(
      MAXROW("SearchInput", "_RowNumber"),
      "SearchInput",
      "_RowNumber",
      "商品名"
    )
  ),
  [商品名] = LOOKUP(
    MAXROW("SearchInput", "_RowNumber"),
    "SearchInput",
    "_RowNumber",
    "商品名"
  ),
  FALSE
)

スライス作成

✅ ステップ⑤:検索結果ビューを作成

先ほど作成した「商品検索結果」スライスを表示する画面を作ります。

  1. 左メニューの 「📱 UX」→「+」ボタン をクリック
  2. 以下のように設定します:
項目 内容
View name 検索結果ビュー(わかりやすい名前でOK)
For this data 商品検索結果(作成したスライス)
View type Detail(DeckやTableでもOK)
Position middle(ナビゲーションの真ん中)

image.png

✅ ステップ⑥:入力フォームビューを作成

続いて、商品名を入力するフォーム画面を作ります。

  1. 左メニューの 「📱 UX」→「+」ボタン をクリック
  2. 以下のように設定します:
項目 内容
View name 商品を入力(など)
For this data SearchInput
View type Form
Position first(ナビゲーションの先頭)

image.png


🎉 アプリ完成!

ここまで設定できたら、アプリを実行して動作を確認してみましょう!

使い方

  1. アプリ起動後、「商品を入力」ビューを開く
  2. 入力欄に商品名を入力し、「SAVE」ボタンを押す
  3. 自動的に「検索結果ビュー」に遷移し、該当商品の情報(1件のみ)が表示されます!

✅ 商品の詳細情報URLをタップすると、Webサイトの商品ページにもジャンプできます。


🛒 作成のきっかけ その2

ある日、当店のお野菜部門でこんなものを見つけてしまいました。

image.png


なんてアナログなんでしょう……!

「これはいかん」と思い立ち、すぐに実用化できる商品案内アプリを開発しようと決意したのです。


🧪 実際に使ってもらってみた(お野菜部門)

さっそく、お野菜部門の皆さんに試してもらいました!

担当者 感想
お野菜主任 めちゃめちゃ便利ですね!
パートAさん 入力がめんどくさい……
パートBさん 「すりごま」って聞かれて入力したけど出てこない(「ごま」でしか登録してない)
パートCさん 登録されてる商品が少ないですね

🔧 改善①:入力がめんどくさい

パートAさんの「入力がめんどくさい」に応えて、以下のように新しいビューを作り選択式のボタンに対応しました。

image.png

担当者 感想
パートAさん 入力しなくてよくなったけど……探すのがめんどくさい……

🔧 改善②:探すのがめんどくさい

はい、先ほどの商品一覧ビューの設定を以下のようにして50音順に並べました!

項目 内容
Sort by 商品名を選択
Sort order Ascending(昇順)

でも……

担当者 感想
パートAさん ひらがなばっかりで読みにくい……!

🔧 改善③:ひらがなばっかりで読みにくい

はい、こちらも修正しました。
スプレッドシートに表示用商品名の列を以下のように挿入、ひらがなばかりのほうは検索用商品名に名前を変更し、

image.png

検索用スライスのRow filter conditionを以下のように変更し

IF(
  ISNOTBLANK(
    LOOKUP(
      MAXROW("SearchInput", "_RowNumber"),
      "SearchInput",
      "_RowNumber",
      "商品名"
    )
  ),
  [検索用商品名] = LOOKUP(
    MAXROW("SearchInput", "_RowNumber"),
    "SearchInput",
    "_RowNumber",
    "商品名"
  ),
  FALSE
)

完成したものがこちらになります。

まだ完成してからAさんとは会っていませんがこれで納得してくれるはずです。


🧱 今後の課題

  • 「すりごましろ」「いりごまくろ」など具体的表現で登録するか?
  • 「ごま」だけのような抽象的な表現にするか?

商品登録の拡充はまだまだこれから。
改善点は山積みです!


📝 おわりに:地味だけど、めちゃくちゃ苦労しました

このアプリ、一見シンプルに見えるかもしれませんが……

実はめちゃくちゃ苦労しました。

相変わらず、ChatGPTさんに助けられながらの作業。
でも、うまくいかないことだらけで、エラーに次ぐエラー。


そのときの私の様子がこちらです👇

image.png

image.png
image.png


🔐 セキュリティの壁にもぶち当たる

今回のAppSheetアプリは、
「個人スマホ持ち込み禁止」でも、会社支給スマホで使えるように設計したのですが……

実際には、会社アカウントのセキュリティ設定が厳しすぎて使えない……!

  • アプリのダウンロードはできた
  • でも権限が制限されていて使用不可
  • いろいろ考えて、ようやく「使える裏技(企業秘密)」を発見!
  • しかし!アプリの使える部門もあれば制限がかかって使えない部門もある

😢 作ったのに、一部の部門しか使えないかもしれない。

せっかく作ったアプリ。
たくさん工夫して、現場の声を聞いて、エラーにも耐えて、
使ってみてほしいという気持ちでいっぱいです。

でも、セキュリティの壁は本当に高かった。
現場完全導入の難しさを痛感しています。


🙏 最後まで読んでいただきありがとうございます!

AppSheetは慣れれば本当に便利なツールです。
実際、会社スマホで使える環境さえ整えば、現場の困りごとがグッと減ると実感しています。

今後も、
「現場の困った!」をAppSheetで解決していく予定です!


3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?