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

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


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

---

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

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

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

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

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

---

## 🤖 以前作った「商品案内Bot（LINE × Make）」

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

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

https://qiita.com/Ryo-I/items/754fb98908c58c342d1f

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

---

## 🚫 課題：LINEは業務中に使えない！

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

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

---

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

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


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

<div style="display: flex; gap: 10px;">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/ff4e747d-7101-4b56-9b1e-9007a8e7dfdc.png" width="48%">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/eab36b82-5fe0-4b2e-9cb7-1a3848b9a443.png" width="48%">
</div>

</div>


商品名を入力して「SAVE」すると…
**商品名・売り場情報・目印・詳細リンク**が表示されます！

---

## ⚙ 使用した技術

- Google Sheets（商品データの管理）
- AppSheet（アプリの作成）

---

## 🧩 アプリの作成手順

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


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


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


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

 なお、商品名は表記ゆれを防ぐため、すべてひらがなにしてあります。
例(さくらえびは桜エビ、サクラエビだとヒットしなくなる)
<details>
<summary>▶ スクリーンショットを表示</summary>

![スプレッドシートの構成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/e0113837-133e-44a0-aef4-38b9d3510e3c.png)
</details>

---

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

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

<details>
<summary>▶ スクリーンショットを表示</summary>

![SearchInput作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/a7f07951-ba6e-4323-89d6-f9396131be9e.png)

</details>
---

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

- 左メニュー「📊 Data」→ `＋` → 新しいテーブルとして `SearchInput` を追加

<details>
<summary>▶ スクリーンショットを表示</summary>

![フォーム作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/eab5eadb-a575-4d53-9c57-84379c90323d.png)
</details>

---

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


- 左メニュー「📊 Data」→「Slices」→ `＋`

- 設定：
  - スライス名：`商品検索結果`
  - Source Table：`シート1`
  - Row filter condition：以下の関数をコピペ

```AppSheet
IF(
  ISNOTBLANK(
    LOOKUP(
      MAXROW("SearchInput", "_RowNumber"),
      "SearchInput",
      "_RowNumber",
      "商品名"
    )
  ),
  [商品名] = LOOKUP(
    MAXROW("SearchInput", "_RowNumber"),
    "SearchInput",
    "_RowNumber",
    "商品名"
  ),
  FALSE
)
```

<details>
<summary>▶ スクリーンショットを表示</summary>

![スライス作成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/f814db9e-a816-4e1e-8a78-f52578c5d173.png)

</details>
---

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


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

1. 左メニューの **「📱 UX」→「＋」ボタン** をクリック  
2. 以下のように設定します：

| 項目 | 内容 |
|------|------|
| View name | 検索結果ビュー（わかりやすい名前でOK） |
| For this data | 商品検索結果（作成したスライス） |
| View type | Detail（DeckやTableでもOK） |
| Position | middle（ナビゲーションの真ん中） |

<details>
<summary>▶ スクリーンショットを表示</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/9799a6b8-b49b-488b-9918-3bf335c5cf9e.png)

</details>
---

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

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

1. 左メニューの **「📱 UX」→「＋」ボタン** をクリック  
2. 以下のように設定します：

| 項目 | 内容 |
|------|------|
| View name | 商品を入力（など） |
| For this data | SearchInput |
| View type | Form |
| Position | first（ナビゲーションの先頭） |

<details>
<summary>▶ スクリーンショットを表示</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/6731e83d-38b9-4af0-bf4b-03c4b4fc705d.png)

</details>

---

## 🎉 アプリ完成！

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

### 使い方


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

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

---

## 🛒 作成のきっかけ その2


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


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/50d8399f-d086-4ad7-bffc-f0714d72c44d.png)

---

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

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

---

## 🧪 実際に使ってもらってみた（お野菜部門）

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

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

---

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

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

<details>
<summary>▶ スクリーンショットを表示</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/e9f66494-23a5-4a25-bbba-fe1aaae67961.png)

</details>

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

---

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

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

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

でも……


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

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

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

<details>
<summary>▶ スクリーンショットを表示</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/12d21645-94bc-4280-84b3-c4e01c55d9b0.png)

</details>

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

```AppSheet
IF(
  ISNOTBLANK(
    LOOKUP(
      MAXROW("SearchInput", "_RowNumber"),
      "SearchInput",
      "_RowNumber",
      "商品名"
    )
  ),
  [検索用商品名] = LOOKUP(
    MAXROW("SearchInput", "_RowNumber"),
    "SearchInput",
    "_RowNumber",
    "商品名"
  ),
  FALSE
)
```
これで商品名を選択するときは漢字、カタカナも交じり、わかりやすくなりました。

## おまけ

未登録の商品名を入力したときの**メッセージがそっけなかった**のでこちらも改善しました。

Googleスプレッドシートの`シート1`の一番下に、こんな1行を追加します👇

| 検索用商品名 | 表示用商品名 | 場所 | コーナー | 商品詳細情報 |
|--------------|--------------|------|----------|----------------|
| 該当なし     | ん           |      |          | 誰かに聞いてください🙇 |

表示用商品名の欄を空白にすると50音順が崩れてしまうので、邪魔にならないように"ん"と入力します。

続いて先ほどの検索用スライスの`Row filter condition`の式の`FALSE`を消し、以下を追加します。


```AppSheet
  OR(
    [検索用商品名] = LOOKUP(
      MAXROW("SearchInput", "_RowNumber"),
      "SearchInput",
      "_RowNumber",
      "商品名"
    ),
    [検索用商品名] = "該当なし"
  ),
  FALSE
)
```
これで完成です。

## 完成したものはこちら




https://x.com/ryo_i79094/status/1927302153166598595


Aさんもとりあえずは納得してくれたようです。

---

## 🧱 今後の課題

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

**商品登録の拡充はまだまだこれから。**  
本当の意味で役に立つものとなるまではまだまだ時間がかかりそうです。

---

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

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

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

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

---

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/05bd4e33-fcf9-4d8e-9947-fd7a7f175007.png)  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/a459f9c4-ccef-4f8d-a6d5-3458ff313d12.png)  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4049380/90b9f8bd-bff1-45db-b7be-d98c93aec911.png)

結局はプロンプトが悪かったのだと思います。
私が悪いのに人(？)のせいにして、ChatGPTさん、ごめんなさい🙇

---

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

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

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

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

---

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

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

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

---

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

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

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

---