スーパーの現場から！小売業担当者必見！ノーコードツールGlideでアプリ開発（フィルタ実装、検索実装のモバイル商品リストの作成）

## はじめに
無料で、手軽にカスタマイズできて<b>自分たちが欲しいと思える</b>便利ツールを短時間で簡単に作ろうと思ってやってみた。

自分の職場（スーパー勤務）で高頻度で皆使用するとっても重要な**売場展開計画書**ってのがあるんですが、
これが結構不満のタネでもありました。

🥴「わざわざPCの所に確認印刷するのは**手間**」
😟「印刷して無くしたりしないか**不安**」
😔「字を大きく印刷すると紙がすごく大きくなって**邪魔**」
😵‍💫「内容が更新されたり修正があるる度に**印刷しなおし**」

これが<b>スマホで簡単に閲覧できれば色々解決！！</b>と考えました。
最初は**Google sheets**にアップロードして共有する事も考えてみましたが、どうせなら**フィルタ機能**をつけたり、**検索をもっと楽に**できないかと思い、アプリ化に挑戦しました。

**売場展開計画書とは？**
入荷する **どんな商品** を **いつ、何処に陳列するか** が記載されている **「作業指示書」** です、売場作業者は毎日これを参考に陳列作業を行います。また商品の**価格**や**原価**、**いつのチラシ商品**であるのかも記載されており**重要な機密書類**でもあり、紛失したりしたらちょっと「事」になります。


## 対象
これからアプリを作っていきたい方、ノーコードツールに興味がある方は興味を持ってもらえるかも知れません。
出来たアプリは目的に特化したプロトタイプなので、皆様の何かのアイデアのきっかけになれば嬉しいです。
## 成果物（データはダミーです）

**↓↓↓↓↓↓↓作成したアプリが試しせます↓↓↓↓↓↓**

https://watery-attack-9551.glideapp.io/


トップページにその週の入荷商品の明細が表示される　**味気ない**んで写真でも追加しようか悩み中です😸😸😸
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/e8159257-a6c6-bd9c-501e-e71d369b074f.png)
商品名をタップすると、詳細画面に切り替わる　　 売場に出したら"完了"にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/872a4f48-757d-fbe5-64a6-5b577983e799.png)
下部のtabから入荷する曜日毎や
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/345feb40-570a-b923-d123-fc252aa8dfac.png)
展開予定の場所毎の表示ができる　Ｂ１とかは売場の名称です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/9fb68901-bfe6-2da4-6fbf-22264c4eb609.png)
検索機能もある、動きがスムーズ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/6952b165-255b-027a-7832-6601d2a5364b.png)


売場に品出ししていない商品だけリスト化できるので、作業の積み残しもビジュアルで確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/8921781c-682c-2763-bd30-a041d71d642b.png)

## 使用ツール　作成手順
使用ツール
[Glide](https://www.glideapps.com/)  ノーコードで楽々神ツール
[Googie sheets](https://www.google.com/intl/ja_jp/sheets/about/)　オンラインで編集できるスプレッドシート、様々なサービスに連携できる

手順
1　ログイン　Googleのアカウントを使用してログインするだけでGlideとGoogie sheetsを連携できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/e0ff8272-e15c-5230-b3eb-12c32e414b07.png)


2　トップページ
STYLE：List
CONTENT：表示したい項目を選択　
ACTIN：Show Detail～　を選択する　（商品名をタップすると詳細画面に移動するアクションを割り当ててくれます）
Option：Show seach barにチェックすると、ページに検索ツールが自動で組み込まれます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/bd719f8f-e549-ccde-c67d-24883f106fb2.png)


3　詳細画面
Basic Tableコンポーネントを使うと　表示が見やすいです
同じ行に異なる要素を表示できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/c750c08d-3d0e-2fd4-de35-14ae81b689ca.png)
4　各ページへのデータの紐づけ
Relation型のを作りそれぞれ紐づけを行う
Lookup型のセルで入荷明細シートより欲しい情報を持ってくる　
[データ仕分け、リレーションの組み方はぜひ参考サイトをご覧ください](#参考にしたサイト)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2617007/6f1c5781-5815-c3f2-3c58-6222e5b058c3.png)




## 使用感の感想など
👍「どこにいても**パッと確認できる**のが良い」
👍「商品明細を無くす**心配が無い**」
👍「検索機能が**便利**」
👎「一品毎に完了チェックを入れるのは**少し手間**」
と、使用感などの感想では概ね便利との評価をもらいました＼(^_^)／
データの更新もGoogle Sheetsの上書きで可能なので楽々。
特に商品明細は機密情報にあたるので、**紛失の危険性が減る**のと**フィルタ機能**や**検索機能**がとても**好評**だったのはとても嬉しいです。完了チェックは実際に微妙な効果なので対策を練ってます。
まだまだこれはプロトタイプとして、改善を重ねるためにPower Automate DesktopでGoogle sheetに**自動アップロード**、入荷商品の**価格表示POPの自動作成**などができるようしたいと思います。
## 参考にしたサイト
[ノーコード・ツール解説チャンネル](https://www.youtube.com/channel/UC8x9KswIlBnWiiB0RRGFu9A)　動画がコンパクトで知りたい技術別にサクッと見れて、めちゃくちゃわかりやすい

https://www.youtube.com/channel/UC8x9KswIlBnWiiB0RRGFu9A

[ノーコード自習室](https://www.youtube.com/channel/UCiutKl6Pk78gT1jOQFE984A)　操作一つ一つ全部が動画になっているのでとても親切

https://www.youtube.com/channel/UCiutKl6Pk78gT1jOQFE984A




## おわりに
ノーコードツールを使用したアプリ開発は最初はほんの少し戸惑いましたが、やってみれば簡単でした
もちろんプログラムをバンバン書いている人達から見れば、カスタマイズできる所が限られていたり、使用できるデータ量に制限があったりとしますが**プロトタイプの作成**や、**限られた機能を持たせること**を考えると十分に使えるアプリが出来ます。
これから同僚や仲間達に共有して現場の効率化をもっと図りたいと思いました。




読んでくれてありがとうございました！！