ゲームセンターを探すとき、最も近い店舗が必ず最初の候補になるわけではない。遊びたいゲームが決まっていれば、少し遠くてもそのゲームがある場所から調べるだろう。友人と会う地域も決まっているなら、距離順の一覧だけでは比較する項目がまだ多い。

Betaでは店舗が150か所を超え、毎回一覧を読み比べる方法では探しにくくなってきた。ゲームと地域で候補を絞り、よく使う選択を次回も利用できるよう、フィルターとホーム設定を用意した。

ゲームと地域による候補の選択

フィルターは、全体の一覧から条件に合う項目を選び出す機能である。Alphaのゲーム選択もこの目的で使っていた。遊びたいゲームを先に選べば、それがある店舗同士の距離を比較できる。Betaでは一覧の拡大に合わせ、訪れる地域も選択に使う必要があった。

利用者には、どの条件が適用されているか分かることが重要だ。結果が少なくても、店舗データがないとは限らない。選んだゲームや地域によって候補が除かれているなら、その条件を確認して変更できる必要がある。

Alphaのゲーム選択画面。2023-06-17のコードを合成サンプルデータで再現。Betaでは選択条件を次のアクセスにも保存するよう拡張した。 韓国語の原画面。当時のAlphaは韓国語のみ対応。

flowchart TD
    accTitle: 増えた一覧から候補を絞る
    accDescr: 距離を比べる前にゲームと地域で訪問候補を選ぶ。
    A["店舗一覧"] --> B
    B["ゲームと地域を選択"] --> C
    C["条件に合う候補"]

繰り返し使うフィルター設定

よく遊ぶゲームや訪れる地域は、サイトを開くたびに変わるものではない。毎回初期状態に戻れば、すでに決めた選択を入力し直すことになる。設定の保存は、この繰り返しを減らすために用意した。

フィルターとホーム一覧の表示設定は、使用中のブラウザーへ保存する。アカウントに結び付ける方式より対象は限られるが、同じブラウザーで再訪する場合には必要な選択をそのまま呼び出せる。

flowchart TD
    accTitle: フィルターを記憶する流れ
    accDescr: 選択をブラウザーに保存し、次のアクセスで復元する。
    A["フィルターを選択"] --> B
    B["ブラウザーに保存"] --> C
    C["次のアクセスで選択を復元"]

ブラウザー保存と複数タブの動作

ブラウザーを閉じた後も小さな値を保持できる機能がlocalStorageである。ゲームフィルターは選択一覧をここへ保存し、次に開いた際にチェック状態を復元する。追加や解除を行えば、保存値も更新する。

例えば二つのタブで同じサイトを開くと、一方の選択を変えても他方に古い条件が残ることがある。別のタブの保存値変更を知らせるstorageイベントを受けて、選択を更新するようにした。保存するのは利用者の条件であり、実際の設置ゲームはサービスの店舗データから取得する。

2023-12-25のBetaコードを合成サンプルデータで再現。選択ゲームのある店舗だけが残る。 韓国語の原画面。当時のBetaは韓国語のみ対応。

flowchart TD
    accTitle: 複数タブの状態更新
    accDescr: 保存値の変更イベントを受け、開いているタブの選択を更新する。
    A["別タブでフィルター変更"] --> B
    B["保存値の変更イベント"] --> C
    C["開いたタブの選択を更新"]

設定保存の活用と制約

同じ条件で再訪したとき、ゲームと地域を最初から選び直す手間を減らせる。ホーム一覧の表示も調整できるため、店舗が増えても慣れた方法で候補を調べられる。

ただし、保存値はブラウザーに属する。データを消した場合や別の端末では、再選択が必要になることがある。現地の情報が誤っていれば結果にも影響するため、情報提供と更新は引き続き必要だ。保存機能が再訪にどの程度影響するかは、実際の利用状況から別に確かめる必要がある。

参考：Musecatの開発記録。

関連アップデート

• Musecat δ6 アップデート