店舗スタッフが倉庫でタブレットを使い在庫を確認している様子
MVP DEMO for HaruTaro1234様 ご提案用

地図で探す、在庫がすぐわかる。
店舗別在庫検索サービス「ハルタロナビ」

利用者は地図上で「在庫のある店舗」だけを絞り込んで探せる。店舗スタッフはスマホのカメラでバーコードを読み取るだけで在庫を即時更新。小規模な試験運用から将来の店舗数・商品数拡大まで見据えたMVP構成です。

CORE FEATURES

ご依頼の8つの機能、すべてデモに実装

「地図連動型の店舗別在庫検索サービスのMVP開発」でご希望いただいた機能を、実際に動く形で確認いただけます。

01

地図上に店舗を表示

OpenStreetMap + Leaflet.jsで店舗の位置をピン表示。APIキー不要・運用コストを抑えた構成です。

02

在庫のある店舗を絞り込み

スイッチひとつで「在庫あり」の店舗のみ地図とリストに表示。該当なしの店舗は自動的に非表示に。

03

店舗別の商品・在庫数一覧

店舗を選ぶとその場で商品一覧と在庫数を表示。商品画像付きで視認性も確保しています。

04

スタッフがスマホで在庫更新

店頭スタッフがスマホ画面から数量を直接編入。専用端末は不要、普段使いの端末で運用できます。

05

カメラでバーコード/JAN読取

html5-qrcode等のOSSライブラリでスマホカメラからJANコードを読取、商品を即座に呼び出し。

06

利用者側へ即時反映

Supabase等のリアルタイムDBを想定し、更新内容を利用者向けサイトへ数秒以内に反映します。

07

商品名・商品コード検索

フリーワード検索で商品名・JANコードの両方から該当店舗を即座に絞り込めます。

08

最終更新日時の表示

在庫データの鮮度が一目でわかるよう、更新日時を商品ごとに明記。安心して使える在庫情報に。

WHY HARUTARO NAVI

小規模な試験運用から、無理なく始められる設計

将来の店舗数・商品数の拡大、他の開発者への引き継ぎまで見据えた、シンプルで拡張しやすい構成です。

低コストなOSS構成

Google Maps APIのような高額課金サービスに依存せず、OpenStreetMapと主要OSSで構築。試験運用に適したコスト設計です。

引き継ぎやすい実コード

ノーコードツールに依存せず、構造化された実コードで開発。他の開発者へスムーズに引き継げます。

拡張を見据えた設計

店舗数・商品数が増えても耐えられるデータ構造を想定。将来の機能拡張にも柔軟に対応できます。

まずは地図検索の動きをご覧ください

東京都内5店舗のモックデータで、利用者側の地図検索から店舗スタッフの在庫更新までの一連の流れを体験いただけます。

地図で在庫検索を試す