1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2022-05-06

はじめに

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

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

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

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

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

対象

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

成果物(データはダミーです)

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

トップページにその週の入荷商品の明細が表示される 味気ないんで写真でも追加しようか悩み中です😸😸😸
image.png
商品名をタップすると、詳細画面に切り替わる   売場に出したら"完了"にチェック
image.png
下部のtabから入荷する曜日毎や
image.png
展開予定の場所毎の表示ができる B1とかは売場の名称です
image.png
検索機能もある、動きがスムーズ!
image.png

売場に品出ししていない商品だけリスト化できるので、作業の積み残しもビジュアルで確認できる
image.png

使用ツール 作成手順

使用ツール
Glide ノーコードで楽々神ツール
Googie sheets オンラインで編集できるスプレッドシート、様々なサービスに連携できる

手順
1 ログイン Googleのアカウントを使用してログインするだけでGlideとGoogie sheetsを連携できる
image.png

2 トップページ
STYLE:List
CONTENT:表示したい項目を選択 
ACTIN:Show Detail~ を選択する (商品名をタップすると詳細画面に移動するアクションを割り当ててくれます)
Option:Show seach barにチェックすると、ページに検索ツールが自動で組み込まれます
image.png

3 詳細画面
Basic Tableコンポーネントを使うと 表示が見やすいです
同じ行に異なる要素を表示できます
image.png
4 各ページへのデータの紐づけ
Relation型のを作りそれぞれ紐づけを行う
Lookup型のセルで入荷明細シートより欲しい情報を持ってくる 
データ仕分け、リレーションの組み方はぜひ参考サイトをご覧ください
image.png

使用感の感想など

👍「どこにいてもパッと確認できるのが良い」
👍「商品明細を無くす心配が無い
👍「検索機能が便利
👎「一品毎に完了チェックを入れるのは少し手間
と、使用感などの感想では概ね便利との評価をもらいました\(^_^)/
データの更新もGoogle Sheetsの上書きで可能なので楽々。
特に商品明細は機密情報にあたるので、紛失の危険性が減るのとフィルタ機能検索機能がとても好評だったのはとても嬉しいです。完了チェックは実際に微妙な効果なので対策を練ってます。
まだまだこれはプロトタイプとして、改善を重ねるためにPower Automate DesktopでGoogle sheetに自動アップロード、入荷商品の価格表示POPの自動作成などができるようしたいと思います。

参考にしたサイト

ノーコード・ツール解説チャンネル 動画がコンパクトで知りたい技術別にサクッと見れて、めちゃくちゃわかりやすい

ノーコード自習室 操作一つ一つ全部が動画になっているのでとても親切

おわりに

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

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

1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?