リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: カスタムマッピング
ピンの定期レポート自動生成(サマリーダッシュボード)機能の追加
## 1. 目的
小規模チームがマップ全体の状況を一目で把握できるサマリーダッシュボードページを追加する。カテゴリ別・タグ別・評価別のピン集計をグラフと表で可視化し、チームの定例確認や報告資料作成に活用できるようにする。
## 2. 具体的な仕様
### 2-1. アクセス
- 既存のナビゲーションに「📊 ダッシュボード」リンクを追加(`dashboard.php`)
- 合言葉認証済みセッションでのみアクセス可(既存の認証ロジックを流用)
### 2-2. 表示内容(すべてPHP+MySQLで集計、外部APIなし)
#### サマリーカード(上部)
- 総ピン数
- 今月追加されたピン数(`created_at`で当月絞り込み)
- 平均星評価(全ピンの`rating`平均)
- 写真付きピン数
#### グラフ(Chart.jsをCDNで使用 ※APIキー不要)
1. **カテゴリ別ピン数**:ドーナツチャート。カテゴリの色設定をそのまま使用
2. **月別ピン追加推移**:過去6ヶ月の棒グラフ(`created_at`を月単位でGROUP BY)
3. **評価分布**:星1〜5の件数を横棒グラフ
#### タグ別ピン数テーブル
- タグ名 / ピン数 / 平均評価 の一覧表(降順ソート)
- テーブルの各行クリックで地図画面に遷移し、そのタグでフィルター適用済みの状態を開く(既存の検索URLパラメータを利用)
#### 最近の更新リスト
- 直近10件の編集履歴(ピン名・操作種別・日時)を表示
- ピン名クリックでそのピンの詳細へ遷移
### 2-3. 期間フィルター
- 「全期間 / 今月 / 先月 / 過去3ヶ月 / 過去6ヶ月」をセレクトボックスで切替
- GETパラメータ(`?period=3m`など)でURLを保持し、ブックマーク可能にする
- 切替時はページリロードでPHP側で再集計(Ajaxなし、シンプル実装)
### 2-4. HTMLエクスポート(印刷用)
- 「📄 印刷用に保存」ボタンを設置
- クリックするとJavaScriptの`window.print()`を呼び出し、グラフ・テーブルが印刷レイアウト(CSSの`@media print`)で出力される
- 別途ファイル生成は不要
## 3. 既存機能との整合
- `dashboard.php`を新規追加するのみで、既存ファイルへの変更は最小限(ナビゲーション部品のHTMLに1リンク追加のみ)
- DBへの書き込みは一切なく、SELECT集計クエリのみなので既存データを壊さない
- Chart.jsはCDN読み込みのため既存JS(Leafletなど)と競合しない
- 既存の言語設定(日本語/英語)に合わせてラベルを出し分ける(既存のi18n変数配列に項目を追記)
- スマホ対応:CSSグリッドでカード・グラフをレスポンシブ配置(1カラム→2カラム切替)
小規模チームがマップ全体の状況を一目で把握できるサマリーダッシュボードページを追加する。カテゴリ別・タグ別・評価別のピン集計をグラフと表で可視化し、チームの定例確認や報告資料作成に活用できるようにする。
## 2. 具体的な仕様
### 2-1. アクセス
- 既存のナビゲーションに「📊 ダッシュボード」リンクを追加(`dashboard.php`)
- 合言葉認証済みセッションでのみアクセス可(既存の認証ロジックを流用)
### 2-2. 表示内容(すべてPHP+MySQLで集計、外部APIなし)
#### サマリーカード(上部)
- 総ピン数
- 今月追加されたピン数(`created_at`で当月絞り込み)
- 平均星評価(全ピンの`rating`平均)
- 写真付きピン数
#### グラフ(Chart.jsをCDNで使用 ※APIキー不要)
1. **カテゴリ別ピン数**:ドーナツチャート。カテゴリの色設定をそのまま使用
2. **月別ピン追加推移**:過去6ヶ月の棒グラフ(`created_at`を月単位でGROUP BY)
3. **評価分布**:星1〜5の件数を横棒グラフ
#### タグ別ピン数テーブル
- タグ名 / ピン数 / 平均評価 の一覧表(降順ソート)
- テーブルの各行クリックで地図画面に遷移し、そのタグでフィルター適用済みの状態を開く(既存の検索URLパラメータを利用)
#### 最近の更新リスト
- 直近10件の編集履歴(ピン名・操作種別・日時)を表示
- ピン名クリックでそのピンの詳細へ遷移
### 2-3. 期間フィルター
- 「全期間 / 今月 / 先月 / 過去3ヶ月 / 過去6ヶ月」をセレクトボックスで切替
- GETパラメータ(`?period=3m`など)でURLを保持し、ブックマーク可能にする
- 切替時はページリロードでPHP側で再集計(Ajaxなし、シンプル実装)
### 2-4. HTMLエクスポート(印刷用)
- 「📄 印刷用に保存」ボタンを設置
- クリックするとJavaScriptの`window.print()`を呼び出し、グラフ・テーブルが印刷レイアウト(CSSの`@media print`)で出力される
- 別途ファイル生成は不要
## 3. 既存機能との整合
- `dashboard.php`を新規追加するのみで、既存ファイルへの変更は最小限(ナビゲーション部品のHTMLに1リンク追加のみ)
- DBへの書き込みは一切なく、SELECT集計クエリのみなので既存データを壊さない
- Chart.jsはCDN読み込みのため既存JS(Leafletなど)と競合しない
- 既存の言語設定(日本語/英語)に合わせてラベルを出し分ける(既存のi18n変数配列に項目を追記)
- スマホ対応:CSSグリッドでカード・グラフをレスポンシブ配置(1カラム→2カラム切替)
💬 返信 (3)
🛠 開発を開始しました (機能追加 (custom-mapping))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「カスタムマッピング」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=custom-mapping
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/custom-mapping/
ご利用ありがとうございます!
ご要望いただいた「カスタムマッピング」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=custom-mapping
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/custom-mapping/
ご利用ありがとうございます!
Echo
Iris