「HTML5」カテゴリーアーカイブ

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の生成）

HTML5

26/02/12 めがね2/3 活動報告

コメントする

日誌担当者: 鎌田あるん

チームの活動内容

  • スライドの修正
  • 動画撮影

投稿担当者の作業内容

  • 動画撮影

残タスク・次回の作業内容

  • スライドの修正
  • 作品ポスターの作成
  • 動画編集

 

みんなせっさんつよかった…

HTML5

ＨＴＭＬ５

コメントする

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

作業内容

MIRABA の MAP（REQUEST）画面について、
REQUESTを「探す・出す・保存する・再利用する」一連の流れを
UI設計として整理・確定し、将来の実装を見据えた完成度まで引き上げた。

■ 作業目的

・MAP（REQUEST）画面において、
　REQUESTの一連の利用フロー
　（探す／出す／保存する／再利用する）をUI設計として整理する
・卒業研究として、
　画面構成・遷移・思想を説明可能な設計状態にする

■ 今日の作業

1．MAP画面 全体構成の確定

・MAP画面を 左右2カラム構成 に固定
　左：REQUESTを探す／一覧表示
　右：REQUESTを出す／保存REQUEST管理
・既存のサイドバー構造および
　data-page による画面遷移方式は維持

2．REQUEST一覧UIの完成

・今後、多数のREQUESTが表示されることを前提に一覧フィールドを設計
・同時表示件数は 約4人分＋α を基準とした
・半透明シルバー基調の枠を採用し、
　一覧専用のスクロールバーを実装
・REQUESTカードの表示要素を以下で確定
　ユーザアイコン
　ユーザ名
　日付
　確認するボタン
・「確認する」操作から
　map-detail.html へ遷移する設計を維持

3．REQUESTを出すフォームUI完成

・REQUEST作成フォームを完成レベルまで設計
・入力項目を以下に整理
　日時（開始・終了）
　住所（郵便番号検索前提）
　REQUEST内容
　概要
　連絡事項
・「REQUESTを探す」枠と同一思想のデザインで統一
・スクロール前提とし、
　高級感と操作性を両立したUIに調整

4．思想メッセージの配置整理

・思想分においてrequest依頼者・受注者ともに不安要素防止を見越して呼び掛ける
・REQUESTを出すボタンの配置
・操作と思想が同時に視認できるUXに変更

5．保存REQUEST機能のUI設計確定

・保存REQUEST用の 専用枠 を新規設計
・配置は右カラム（map-right）内、
　REQUEST作成フォームの下に配置
・枠仕様を以下で確定
　横幅：REQUESTを出すフォームと同一
　高さ：左側REQUEST一覧の下端と揃える
・表示内容
　タイトル：「保存したREQUEST」
　保存されたREQUESTをカード形式で表示
・表示形式はREQUEST一覧（request-item）と完全共通とし、
　ユーザアイコン、ユーザ名、サイズ、色を統一

6．保存 → 再利用の画面遷移フロー確定

以下の画面遷移フローを確定した。

MAP.html（REQUEST一覧）
→ 確認
MAP-detail.html（REQUEST詳細＋保存）
→ 保存
MAP.html（保存REQUEST一覧）
→ クリック
MAP-detail.html（REQUEST詳細 再表示）

・保存REQUEST専用の新UIは作成せず、
　既存のREQUESTカードを再利用
・壊れにくく、拡張可能な設計として整理

■ 本日時点の到達点

・MAP画面UI：完成レベル
・REQUEST関連画面の役割分担および遷移仕様：確定
・保存REQUEST機能：UI設計完了（実装は次工程）

■ 次回作業予定

・実マップとの連携
・ユーザ情報（名前・アイコン）との連携
・全体の動作テスト

HTML5

26/02/10 めがね2/3 活動報告

コメントする

日誌担当者: 藤原創太

チームの活動内容

  • スライドの修正
  • リハーサル

投稿担当者の作業内容

  • スライドの修正
  • リハーサル

残タスク・次回の作業内容

  • スライドの修正
  • 作品ポスターの作成

 

今日はガーデンノーム対決で負けてしまいました