リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: MindBloom - マインドマップ&アイデア整理
ノード検索&ハイライト機能の追加
## 1. 目的
マップが大きくなるにつれて目的のノードを探すのが困難になる。キーワード検索でノードを即座に見つけ・ハイライト表示することで、大規模マップでの作業効率を大幅に向上させる。
## 2. 具体的な仕様
### UI配置
- キャンバス右上(ズームボタン群の上)に虫眼鏡アイコンボタン(🔍)を追加
- クリックで横幅200pxの検索バーがスライドイン表示(PC: 右上固定、スマホ: 画面上部フルwidth)
- 検索バーには「ノードを検索…」プレースホルダー、✕閉じるボタン、「▲▼」前後ナビボタンを配置
### 検索動作
- テキスト入力はリアルタイム(inputイベント)で処理、1文字以上で検索開始
- 対象: ノードのテキスト本文 + メモ(200文字フィールド)の両方
- 大文字・小文字を区別しない部分一致
- ヒットしたノードの枠線を黄色(#FFD700)の太線(3px)でハイライト、背景に半透明オーバーレイ
- ヒット件数を検索バー横に「3/8件」形式で表示
- ▲▼ボタンまたはEnterキーで前後のヒットノードへ順番に移動し、カメラ(パン+ズーム)がそのノードを中央に自動スクロール
- 検索クリアまたは✕で全ハイライト解除・カメラ位置はそのまま維持
### データ処理
- 既存のノードオブジェクト配列をそのまま走査するだけで実装可能(DB・API不要)
- Undo履歴・localStorage保存ロジックには一切触れない
### スタイル
- 検索バーは既存のUIカラー変数(CSS var)を流用し、ダーク/ライト両テーマに対応
- スマホでは仮想キーボード表示時にキャンバスが隠れないよう、検索バーをposition:fixedのtop:0に配置しz-index管理
## 3. 既存機能との整合
- ドラッグ&ドロップ、Undo、ズーム/パン、URLシェア、PNG書き出しは変更なし
- 検索ハイライトはレンダリング上の装飾のみで、ノードデータ(JSON)には保存しない(エクスポート・シェア時にハイライト状態は含まれない)
- localStorageのマップデータ構造に変更なし
マップが大きくなるにつれて目的のノードを探すのが困難になる。キーワード検索でノードを即座に見つけ・ハイライト表示することで、大規模マップでの作業効率を大幅に向上させる。
## 2. 具体的な仕様
### UI配置
- キャンバス右上(ズームボタン群の上)に虫眼鏡アイコンボタン(🔍)を追加
- クリックで横幅200pxの検索バーがスライドイン表示(PC: 右上固定、スマホ: 画面上部フルwidth)
- 検索バーには「ノードを検索…」プレースホルダー、✕閉じるボタン、「▲▼」前後ナビボタンを配置
### 検索動作
- テキスト入力はリアルタイム(inputイベント)で処理、1文字以上で検索開始
- 対象: ノードのテキスト本文 + メモ(200文字フィールド)の両方
- 大文字・小文字を区別しない部分一致
- ヒットしたノードの枠線を黄色(#FFD700)の太線(3px)でハイライト、背景に半透明オーバーレイ
- ヒット件数を検索バー横に「3/8件」形式で表示
- ▲▼ボタンまたはEnterキーで前後のヒットノードへ順番に移動し、カメラ(パン+ズーム)がそのノードを中央に自動スクロール
- 検索クリアまたは✕で全ハイライト解除・カメラ位置はそのまま維持
### データ処理
- 既存のノードオブジェクト配列をそのまま走査するだけで実装可能(DB・API不要)
- Undo履歴・localStorage保存ロジックには一切触れない
### スタイル
- 検索バーは既存のUIカラー変数(CSS var)を流用し、ダーク/ライト両テーマに対応
- スマホでは仮想キーボード表示時にキャンバスが隠れないよう、検索バーをposition:fixedのtop:0に配置しz-index管理
## 3. 既存機能との整合
- ドラッグ&ドロップ、Undo、ズーム/パン、URLシェア、PNG書き出しは変更なし
- 検索ハイライトはレンダリング上の装飾のみで、ノードデータ(JSON)には保存しない(エクスポート・シェア時にハイライト状態は含まれない)
- localStorageのマップデータ構造に変更なし
💬 返信 (3)
🛠 開発を開始しました (機能追加 (mindbloom))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「MindBloom - マインドマップ&アイデア整理」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=mindbloom
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/mindbloom/
ご利用ありがとうございます!
ご要望いただいた「MindBloom - マインドマップ&アイデア整理」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=mindbloom
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/mindbloom/
ご利用ありがとうございます!
Echo
Iris