【個人開発】オフラインでも地図と現在地をすぐ確認できる、待ち合わせアプリを作りました【React x TypeScript x Service Worker】

はじめに

慣れていない土地で電波が悪く地図アプリが重くて、なかなか友達や家族と合流できないなんてことはありませんでしょうか？

私はディズニーランドなどの人が多いテーマパークでそんな経験が多くありました。

そこで電波が悪い状況でも自分の位置と目的地をすぐに把握できるよう、オフライン待ち合わせアプリを個人開発しました。

■アプリはこちら
https://meeting-map-c3ac8.web.app/

開発の背景

「迷ったらここに集合しよう！」「今ここにいるよ！」——そんなやりとりを電話や文字ではなく、地図上のピン一つで伝えられたら一番シンプルだと思いました。

ただ、共有したい相手は友人や家族など、スマホ操作に慣れていない人も少なくありません。そういった方でも直感的に使えるようなシンプルなアプリを作りたいと思い開発しました。

コンセプト

このアプリのコンセプトは次の通りです。

オンラインのうちに準備しておけば、オフラインでも地図と目的地がシンプルに確認できる

• オンラインのうちに地図と目的地を準備しておけば、電波がなくても迷わない
• 用意されている地図をタップするだけで端末にダウンロードできる
• 事前に目的地をマーキングして共有しておくことができる
• ダウンロード済みの地図と目的地は、オフラインでもそのまま閲覧できる

アーキテクチャ図

実際の画面

ホーム画面

• 現在は東京ディズニーランドの地図を用意しています
• ボタンをクリックすれば自動で地図データを保存します（地図データサイズは約800kb）

地図画面

• 東京ディズニーランド全体を見ることができます
• 地図をタップすればテキスト付で目的地をマーキングできます

全体

ズームイン

利用想定

• 電波が悪いエリアでもストレスなく地図を確認したい
• 迷った時にすぐ合流できる仕組みがほしい
• スマホ操作が苦手な人にも簡単に目的地を共有したい

学び/気づき

MVPのクリア判定は「実際に使える機能かどうか」で考える

今回次のようなMVPを切りました。

1. オンラインで取得した地図を、オフラインで表示する
2. オフラインで地図上に自分の位置を表示する
3. 目的地をマーキングし、第三者へ共有できる

しかし、各MVPのクリア判定が甘かったと感じています。
たとえばMVP1では、「オンラインで取得した地図をオフラインで表示できた」という事実だけをもってクリアとしました。ところが実際には、地図の取得に失敗すると画面が真っ白になる、地図データを最新化しても反映されないといった問題が次々と発覚。スケジュールは大きく巻き戻る形になりました。

保守・テストしやすい設計を意識する

ドメイン駆動設計とクリーンアーキテクチャの考え方を反映できるように、フォルダ構成はfeature-basedとlayer-basedを組み合わせた以下のようにしました。

気を付けたことは、最初に1ファイルへすべて書き切ってから、フォルダ別に分割すると進めたことです。フォルダ構成にまだ不慣れなため、最初から「このフォルダにはこのファイルを…」と設計に頭を使うことで開発効率が落ちてしまう、という本末転倒を避けるためです。

オフラインにするために必要なこと

オフライン機能を実装するにあたり、まずService Workerの仕組みをゼロから理解することから始めました。キャッシュ戦略の選定やHTTPリクエストのライフサイクルなど、本業では浅くしか触れてこなかった領域まで調べ直し、「なぜそう動くのか」を腹落ちさせながら実装を進めました。単に動けばいいという実装ではなく、オフライン時にどのリソースをどのタイミングでキャッシュすべきかを意識して設計できたことで、知識として定着したと感じています。

オフライン表示のために実施した地図データの用意から実装までの概要

こちらの記事に概要をまとめました！
https://qiita.com/shun123/items/eb9c24b9dd97796de3c3

今後の展望

• ログイン機能を作り、ユーザー別に地図情報の共有をできるようにする
• ダウンロード可能なエリアを拡充する（他のテーマパークや観光地など）
• ダウンロードサイズを可視化できるようにする
• 目的地に画像を添付できるようにする
• 目的地から現在地までのルート案内機能を追加する
• 任意のエリアを自分でダウンロードできるようにする

使用技術

• React
• TypeScript
• Vite
• Vitest
• Tailwind CSS
• PWA（Service Worker）
• Supabase
• Firebase

終わりに

「電波が悪いせいで待ち合わせがうまくいかない」そのイライラと時間の無駄をなくしたい。シンプルな操作で、どんな場所でもスムーズに合流できる体験を、より多くのシーンに広げることを目標に開発しています。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼