リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
ランキング絞り込み条件をURLに保持し、再読込・共有時も復元
1. 目的:
ランキング画面ではプレイヤー名検索・最小/最大スコア・自分の記録だけ表示・絞り込み結果のみコピー/CSV対象、といった複数条件を組み合わせられるようになったが、これらはブラウザのメモリ上(JS変数/フォーム値)にしか保持されず、ページ再読込・戻る/進む・URLをコピーして他端末や別タブで開いた場合に毎回リセットされてしまう。せっかく作った絞り込み条件をワンタップで再現・共有できるようにし、使い勝手を高める。
2. 具体的な仕様:
- ランキング画面のフィルタ入力(プレイヤー名検索欄, 最小スコア, 最大スコア, 自分の記録だけ表示チェック, 表示中の絞り込み結果のみコピー/CSV対象チェック)が変更されたタイミングで、既存の page/mode/tab/date/week_start 等のクエリ文字列を維持したまま、以下の新規クエリパラメータを history.replaceState でURLに反映する(ページ遷移は発生させない):
- `q`(プレイヤー名検索文字列, 空なら削除)
- `min`(最小スコア, 空/0以下なら削除)
- `max`(最大スコア, 空なら削除)
- `mine`(自分の記録だけ表示: `1`のときのみ付与)
- `fx`(表示中の絞り込み結果のみ対象: `1`のときのみ付与)
- ページ読み込み時、JSでこれらのクエリパラメータを読み取り、対応するフォーム要素(input/checkbox)へ値を反映してから、既存の絞り込み実行関数を1回呼び出し表示に反映する。パラメータが無い場合は従来通り未絞り込み状態で表示する(後方互換)。
- `min`/`max`は数値以外や負値、`min > max`の場合は不正値として無視し、対応する入力欄は空のままにする(既存の入力検証ロジックがあれば再利用する)。
- 既存の「🔄 絞り込みをリセット」ボタン押下時は、フォーム値のリセットに加えて上記の `q`/`min`/`max`/`mine`/`fx` パラメータをURLから削除する(history.replaceStateで更新)。他のクエリパラメータ(mode, tab, date, week_start, 追加表示済み件数を示す状態など)は変更しない。
- URL更新はページ遷移を伴わないため、リンク共有時に受け手が同じ絞り込み状態のランキングをすぐ確認できるようになる。
3. 既存機能との整合:
- サーバー側のスコア取得ロジック・APIは変更しない。絞り込みはこれまで同様クライアント側JSで行い、URLパラメータは初期値の受け渡し・状態保持のみに使う。
- クエリパラメータが存在しない場合は現状の初期表示(絞り込みなし)と完全に同じ挙動を維持し、既存のリンクやブックマークが壊れないようにする。
- 「絞り込みをリセット」ボタンの既存仕様(期間・追加読込済み件数・コピー/CSV対象設定のうち今回対象外のものは維持)はそのまま維持し、今回追加するURL同期処理もこの挙動に追従させる。
ランキング画面ではプレイヤー名検索・最小/最大スコア・自分の記録だけ表示・絞り込み結果のみコピー/CSV対象、といった複数条件を組み合わせられるようになったが、これらはブラウザのメモリ上(JS変数/フォーム値)にしか保持されず、ページ再読込・戻る/進む・URLをコピーして他端末や別タブで開いた場合に毎回リセットされてしまう。せっかく作った絞り込み条件をワンタップで再現・共有できるようにし、使い勝手を高める。
2. 具体的な仕様:
- ランキング画面のフィルタ入力(プレイヤー名検索欄, 最小スコア, 最大スコア, 自分の記録だけ表示チェック, 表示中の絞り込み結果のみコピー/CSV対象チェック)が変更されたタイミングで、既存の page/mode/tab/date/week_start 等のクエリ文字列を維持したまま、以下の新規クエリパラメータを history.replaceState でURLに反映する(ページ遷移は発生させない):
- `q`(プレイヤー名検索文字列, 空なら削除)
- `min`(最小スコア, 空/0以下なら削除)
- `max`(最大スコア, 空なら削除)
- `mine`(自分の記録だけ表示: `1`のときのみ付与)
- `fx`(表示中の絞り込み結果のみ対象: `1`のときのみ付与)
- ページ読み込み時、JSでこれらのクエリパラメータを読み取り、対応するフォーム要素(input/checkbox)へ値を反映してから、既存の絞り込み実行関数を1回呼び出し表示に反映する。パラメータが無い場合は従来通り未絞り込み状態で表示する(後方互換)。
- `min`/`max`は数値以外や負値、`min > max`の場合は不正値として無視し、対応する入力欄は空のままにする(既存の入力検証ロジックがあれば再利用する)。
- 既存の「🔄 絞り込みをリセット」ボタン押下時は、フォーム値のリセットに加えて上記の `q`/`min`/`max`/`mine`/`fx` パラメータをURLから削除する(history.replaceStateで更新)。他のクエリパラメータ(mode, tab, date, week_start, 追加表示済み件数を示す状態など)は変更しない。
- URL更新はページ遷移を伴わないため、リンク共有時に受け手が同じ絞り込み状態のランキングをすぐ確認できるようになる。
3. 既存機能との整合:
- サーバー側のスコア取得ロジック・APIは変更しない。絞り込みはこれまで同様クライアント側JSで行い、URLパラメータは初期値の受け渡し・状態保持のみに使う。
- クエリパラメータが存在しない場合は現状の初期表示(絞り込みなし)と完全に同じ挙動を維持し、既存のリンクやブックマークが壊れないようにする。
- 「絞り込みをリセット」ボタンの既存仕様(期間・追加読込済み件数・コピー/CSV対象設定のうち今回対象外のものは維持)はそのまま維持し、今回追加するURL同期処理もこの挙動に追従させる。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (vegetable-drop))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
Echo
Iris