架空の配達サービスHAKOBIのスマホアプリデモの解説ページです。店舗・料理・配達員はすべて架空です。

デモを抜ける

HAKOBI — スマホアプリデモ

ブラウザの中で、アプリと同じところまでやる

店舗を選んで注文し、決済を通して、地図の上を動く配達員を追うところまで、 ひと通り触れます。インストールも会員登録も要りません。 はじめて開いた人でも空の画面にならないよう、注文履歴が入った状態から始まります。

できること

  1. 01

    ブラウザで動くのに、アプリとして配れる

    ホーム画面に追加すると、アドレスバーの無い状態で起動します。アイコンからの起動・全画面表示・起動時のスプラッシュまで、ストアのアプリと同じ体験になります。

    審査を待たずに公開でき、更新も即座に反映されます。まずこの形で出して、反応を見てからストア版に進む進め方も取れます。

    使用技術:PWA(Web App Manifest / Service Worker)

  2. 02

    実際の地図の上を、配達員が動く

    OpenStreetMap の本物の渋谷を表示し、店舗から配達先までの経路を配達員のアイコンが進みます。絵で描いた架空の地図ではありません。

    配達・訪問・送迎など「今どこにいるか」を見せる画面は、これと同じ作りで実装できます。

    使用技術:Leaflet + OpenStreetMap(APIキー・利用料なし)

  3. 03

    閉じて開き直しても、続きから見える

    配達員の位置と進行段階は、注文した時刻からの経過時間だけで決めています。途中経過を保存していないので、再読み込みしてもタブを閉じても、正しい位置から再開します。

    通信が切れても状態がずれません。同じ考え方は、予約の残り時間や作業の進捗表示にも使えます。

    使用技術:経過時間からの決定的な算出

  4. 04

    注文から決済までが最後まで通る

    店舗選び・オプション選択・カート・クーポン適用・最低注文金額の判定・支払い方法の選択・注文確定までが、途中で止まらずに通ります。

    画面の見本ではなく、実際に触れる状態で仕様を確認できます。作る前に「この操作でいいか」を判断できます。

    使用技術:React(状態管理・入力検証)

  5. 05

    指で触ることを前提に組んである

    押せるものはすべて44px以上、下から出るシート、押した瞬間に縮む反応、下タブでの画面切り替え。スマホ用に作った画面と、パソコン用の画面を縮めたものは別物です。

    「スマホでも見られる」ではなく「スマホで使う」ための設計です。片手で完結する導線になっています。

    使用技術:セーフエリア対応・ネイティブ準拠のUI

このデモで止めていること

作れないのではなく、公開しているデモなので意図的に止めています。 とくに端末の許可を求めるもの(通知・位置情報・カメラ)は、ダイアログを1つも出さない方針で作っています。 触りに来た人の最初の操作が「許可するかどうかの判断」になるのを避けるためです。

端末の通知
配達の進行に合わせてアプリ内にバナーを出していますが、端末の通知機能は使っていません。使うと「通知を許可しますか?」のダイアログが出て、デモを開いた人の最初の操作が許可の判断になってしまうためです。本番では Web Push / FCM を使い、アプリを閉じていても通知が届きます。
位置情報
現在地の取得も同じ理由で使っていません。配達先は架空の住所に固定しています。本番では端末のGPSで現在地を取得し、配達員のアプリから送られる実際の座標を地図に描きます。
決済
カード番号の入力欄を置いていません。公開しているデモにカード情報を打ち込ませるべきではないためです。本番では Stripe / PAY.JP のカード入力欄が入り、カード番号は自社サーバーを経由せず決済代行会社へ直接送られます。Apple Pay・Google Pay・コンビニ払いにも対応できます。
データの保存先
注文はこの端末のブラウザにだけ保存しています。サーバーには何も送っていません。本番では注文をデータベースに保存し、店舗の端末・配達員のアプリ・利用者のアプリが同じデータを見る形になります。
配達時間
到着までを180秒に早回ししています。商談の場で30分待てないためで、画面に出る到着予定時刻は実時間のままにしています。
リアルタイム配信
配達員の位置はブラウザの中で計算しています。本番では配達員のアプリから送られる座標を WebSocket / SSE でサーバーから配信し、複数の画面が同時に同じ位置を見る形になります。

スマホアプリにするか、Webのままにするか、から相談できます。

通知を送りたいだけならPWAで足りることも多く、ストア公開が必要かどうかは 作りたい機能によって変わります。要件をお聞きして、 必要のない開発をしない形をご提案します。