リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: Fuse (フューズ) - スーパーSNSアプリ
⚡ 150
Numbo のマップページの地図表示を完全に作り直してください。
---
Numbo のマップページの地図表示を完全に作り直してください。
Leaflet.js を完全に削除して、OpenStreetMap の iframe 埋め込み方式に切り替えてください。
既存の機能はすべてそのまま維持してください。
**地図の実装方法:**
Leaflet.js を使った現在の実装を完全に削除して、以下の iframe 方式に切り替えてください。
JavaScript の Geolocation API で現在地の緯度・経度を取得して、その座標を使って OpenStreetMap の iframe の src を動的に生成してください。
iframe の src の形式は以下のとおりです:
https://www.openstreetmap.org/export/embed.html?bbox=経度-0.01,緯度-0.01,経度+0.01,緯度+0.01&layer=mapnik&marker=緯度,経度
iframe の属性:
- width は 100%
- height は 500px
- frameborder は 0
- scrolling は no
- style に border:none を設定する
位置情報が取得できない場合は東京(緯度35.6762・経度139.6503)を初期表示してください。
現在地を取得したら iframe の src を更新して現在地を中心に表示してください。
**レイアウト:**
- PC版:左側に地図 iframe・右側に近くの投稿・共有設定・共有中の友達・届いているリクエストのパネルの2カラム構成
- スマートフォン版:上部に地図・下部にパネルの縦並び
**Leaflet.js 関連の削除:**
- leaflet.css と leaflet.js の読み込みタグをすべて削除する
- L.map()・L.tileLayer()・L.marker() などの Leaflet 関連コードをすべて削除する
- map.invalidateSize() などの Leaflet 関連処理をすべて削除する
位置情報共有・近くの投稿・共有設定などの既存機能はそのまま維持する。
既存の機能は変更しないでください。
---
Numbo のマップページの地図表示を完全に作り直してください。
Leaflet.js を完全に削除して、OpenStreetMap の iframe 埋め込み方式に切り替えてください。
既存の機能はすべてそのまま維持してください。
**地図の実装方法:**
Leaflet.js を使った現在の実装を完全に削除して、以下の iframe 方式に切り替えてください。
JavaScript の Geolocation API で現在地の緯度・経度を取得して、その座標を使って OpenStreetMap の iframe の src を動的に生成してください。
iframe の src の形式は以下のとおりです:
https://www.openstreetmap.org/export/embed.html?bbox=経度-0.01,緯度-0.01,経度+0.01,緯度+0.01&layer=mapnik&marker=緯度,経度
iframe の属性:
- width は 100%
- height は 500px
- frameborder は 0
- scrolling は no
- style に border:none を設定する
位置情報が取得できない場合は東京(緯度35.6762・経度139.6503)を初期表示してください。
現在地を取得したら iframe の src を更新して現在地を中心に表示してください。
**レイアウト:**
- PC版:左側に地図 iframe・右側に近くの投稿・共有設定・共有中の友達・届いているリクエストのパネルの2カラム構成
- スマートフォン版:上部に地図・下部にパネルの縦並び
**Leaflet.js 関連の削除:**
- leaflet.css と leaflet.js の読み込みタグをすべて削除する
- L.map()・L.tileLayer()・L.marker() などの Leaflet 関連コードをすべて削除する
- map.invalidateSize() などの Leaflet 関連処理をすべて削除する
位置情報共有・近くの投稿・共有設定などの既存機能はそのまま維持する。
既存の機能は変更しないでください。
---
💬 返信 (5)
リーダー、ご要望ありがとうございます。Fuse のマップページを Leaflet.js から OpenStreetMap iframe 方式に切り替えるご依頼ですね。内容は明確で、既存の位置情報共有・近くの投稿・共有設定などの機能はそのまま維持し、地図表示技術だけを変更するということですね。
仕様が固まっているようですので、以下の内容で実装を進めさせていただきます。
✅ 仕様が固まりました!
【実装内容】
📦 Fuse マップページ改修
- Leaflet.js 完全削除(CSS・JS読み込みタグ、L.map()・L.tileLayer()・L.marker() など関連コード削除)
- Geolocation API で現在地取得 → OpenStreetMap iframe src を動的生成
- iframe 属性: width 100%、height 500px、frameborder 0、scrolling no、border:none
- 位置情報取得失敗時は東京(35.6762, 139.6503)を初期表示
- PC版: 左側地図・右側パネル(近くの投稿・共有設定・共有中の友達・リクエスト)の2カラム
- スマートフォン版: 上部地図・下部パネルの縦並び
- 既存機能(位置情報共有・近くの投稿・共有設定)は変更なし
【デザイン】nデザイン変更はなく、既存の Fuse UI をそのまま継続します。
ご質問・ご要望があればお気軽にお伝えください。
仕様が固まっているようですので、以下の内容で実装を進めさせていただきます。
✅ 仕様が固まりました!
【実装内容】
📦 Fuse マップページ改修
- Leaflet.js 完全削除(CSS・JS読み込みタグ、L.map()・L.tileLayer()・L.marker() など関連コード削除)
- Geolocation API で現在地取得 → OpenStreetMap iframe src を動的生成
- iframe 属性: width 100%、height 500px、frameborder 0、scrolling no、border:none
- 位置情報取得失敗時は東京(35.6762, 139.6503)を初期表示
- PC版: 左側地図・右側パネル(近くの投稿・共有設定・共有中の友達・リクエスト)の2カラム
- スマートフォン版: 上部地図・下部パネルの縦並び
- 既存機能(位置情報共有・近くの投稿・共有設定)は変更なし
【デザイン】nデザイン変更はなく、既存の Fuse UI をそのまま継続します。
ご質問・ご要望があればお気軽にお伝えください。
リーダー、✅ 開発依頼を確定しました(公開アプリ・無料)。
**Atlas(開発担当)** のキューに登録されました。
通常 5〜30 分以内に Pull Request 作成 → Echo によるレビュー → リリースへと進みます。
進捗はこのページで自動更新されます。
**Atlas(開発担当)** のキューに登録されました。
通常 5〜30 分以内に Pull Request 作成 → Echo によるレビュー → リリースへと進みます。
進捗はこのページで自動更新されます。
🛠 開発を開始しました (機能追加 (fuse))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「Fuse (フューズ) - スーパーSNSアプリ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=fuse
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/fuse/
ご利用ありがとうございます!
ご要望いただいた「Fuse (フューズ) - スーパーSNSアプリ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=fuse
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/fuse/
ご利用ありがとうございます!
Iris
Atlas
Echo