HTML5

HTML5

コメントする

作業担当者：鈴木　祥護
作業日　　：2026年2月13日

作業内容

MAP（REQUEST詳細）画面において、
詳細カードに記載された住所を自動検索し、正しい位置へマップを初期表示させる処理の精度向上を行った。

併せて、今後の実運用を見据えた住所データ構造の再設計検討を実施した。

■ 作業目的

・REQUEST詳細画面表示時に、
　対象住所へ正確にマップを初期表示させる

・ジオコーディングの曖昧性を排除し、
　卒業研究提出レベルの安定設計へ引き上げる

・将来的な本番運用を想定し、
　住所データ構造の見直しを行う

■ 作業内容

① ジオコーディング精度向上対応

OpenStreetMap（Nominatim API）を利用し、
REQUEST住所から緯度経度を取得する仕組みは実装済み。

今回の修正内容：

・countrycodes=jp を追加（日本限定検索）
・住所ログ出力によるデバッグ強化
・段階的フォールバック検索の実装

【検索方針】

  1. 「都道府県＋市区町村＋番地」で検索

  2. 失敗時は番地を除外して再検索

  3. それでも失敗した場合はフォールバック座標を使用

→ 精度向上と安定性の両立

②住所データ構造の再設計検討

【現行保存構造】

prefecture
city
detailAddress

【問題点】

・政令指定都市の「区」情報が不安定
・市区町村の粒度が不統一
・曖昧検索を誘発する構造

③今後の正しい設計方針

将来拡張を見据えた理想構造：

prefecture（都道府県）
city（例：札幌市）
ward（例：北区）
town（例：あいの里三条）
block（例：1丁目13番3号）
lat
lng

■ 技術的整理

【現在の状態】

・マップ表示自体は正常
・ジオコーディングAPIは正常応答
・誤座標の原因は住所の曖昧性

【解決策方向性】

・保存時の住所正規化
・市区町村の完全保持
・検索時の段階的照合
・lat/lng 初回保存キャッシュ化（再検索防止）

■ 今後の課題

・REQUEST保存時に市区町村を完全保持する設計変更
・郵便番号検索との統合精度向上
・ジオコーディング失敗時のUI表示改善
・lat/lng保存処理の確実化
・DB構造の最終確定（localStorage → IndexedDB 連携安定化）

HTML5

ＨＴＭＬ５

コメントする

作業担当者：鈴木　祥護
作業日　　：2026年2月12日

作業内容

MAP（REQUEST）機能の完成度向上を目的とし、
以下3点を確定仕様として安定動作させる段階まで到達させた。

・都道府県フィルターの正式実装
・保存ボタンのトグル仕様化
・REQUEST詳細画面での住所連動MAP表示（自動ジオコーディング）

■ 作業目的

MAP（REQUEST）機能について、
UI設計段階から一歩進み、
実運用を想定した安定仕様へ引き上げることを目的とした。

■ 作業内容詳細

① REQUEST保存ボタン仕様の再設計

【従来仕様】
・1クリック保存のみ

【修正後】
・トグル式（保存 ⇄ 保存解除）へ変更

【実装内容】
・localStorage（miraba_saved_requests）で配列管理
・保存済み判定によりボタンUIを動的切替
・「保存済み」表示＋クラス付与
・自分のREQUESTは保存不可仕様

【確定判断】
UX向上および実運用を想定した仕様として正式確定

② MAPフィルター機能の完成

（方面 → 都道府県 連動設計）

【地域データ設計】
北海道方面／東北／関東／中部／近畿／中国／四国／九州
47都道府県を完全網羅

【動作仕様確定】

・「方面から選択」モード採用
・方面選択 → 該当方面の県を動的生成
・県未選択時：方面全体でフィルタ
・県選択時：都道府県単位でフィルタ

【設計思想】
ユーザーの柔軟性を阻害しないフィルタ設計

・「関東ならどこでも探したい」
・「東京都だけ探したい」

双方に対応可能な構造とした。

③ MAP詳細画面：住所自動検索 → 初期値自動設定

【従来問題点】
・常に東京駅が初期表示
・REQUESTごとの住所が反映されない

【改善仕様】

① 緯度経度が保存済みなら即表示
② 未保存ならNominatimで住所ジオコーディング
③ 成功時：lat / lng を保存
④ 失敗時のみ東京駅をfallback

・完全非同期処理で再設計
・map生成は1回のみ

【到達点】
REQUESTごとに異なる住所へ自動センタリングを実現

④ UI調整

・REQUESTカード高さ調整
・フィルタ枠の拡張
・「REQUESTを取り下げる」ボタンを
　淡い紅色＋丸みデザインへ変更
・終了済みラベルの視認性を維持

■ 現在の到達点

MAP機能は以下が完成状態：

✓ REQUEST投稿
✓ REQUEST一覧表示
✓ 保存／解除トグル
✓ 自分のREQUEST管理
✓ 終了処理（論理削除）
✓ 方面・都道府県フィルタ
✓ 住所自動検索
✓ 詳細MAP連動表示

MAP（REQUEST）機能はUI・基本機能ともに完成段階へ到達。

■ 次工程

・近くフィルタ（現在地連動）
・MAPピン実装
・MAP右パネルUI微調整
・API制限対策（ジオコーディングキャッシュ強化）
・全画面間でのユーザ情報連携（取得IDの生成）

For Fujie Lab Members