2023年12月25日
首都圏のゲームセンター路線図
首都圏ゲームセンター路線図のウェブ閲覧と版別ダウンロードに対応。
導入
検索とマップ
#ゲームセンター検索
eric

電車で店舗を訪れるなら、直線距離で近い場所より、乗り換えなしで行ける場所の方が便利なことがある。例えば同じ路線で二店舗を回る計画なら、距離順の一覧より駅と店舗を一緒に見る方が順番を考えやすい。

Musecat Betaには、この探索に向けて首都圏の音楽ゲーム店舗路線図を接続した。個別の住所の確認に加え、鉄道網に沿って候補を選ぶ方法を用意したものだ。

鉄道網を利用した店舗探し

距離順の一覧は現在位置の周辺を探すのに向いている。同じ路線の候補や乗り換えを比べるには、駅と店舗の位置を別に照合する必要がある。複数店舗を訪れるなら、その確認も繰り返すことになる。

首都圏の音楽ゲーム店舗路線図は、広域鉄道の近隣店舗と営業状況を整理する別のプロジェクトである。路線図で調べる駅や地域を選び、詳しい店舗情報はMusecatの文書で確認する流れを作った。

外部の地図制作者との協業

路線図は、Musecatの開発者ではない外部の協力者をクライアントとした最初のシステムでもある。ここでのクライアントは、地図を作り、その成果をどう表示して配布したいか要望する人だ。自分で必要な画面を決める仕事とは出発点が異なる。

制作者は駅、店舗、記号を配置した地図を提供する。Web上で編集し直す道具より、読みやすい表示と必要な版のダウンロードが要望に合っていた。テーマ別表示、拡大、凡例、版の説明は、その利用を支える機能である。

地図の修正は制作者、受け取った版の公開はサービスが担当する。新しいファイルを受け取った際、Web表示と配布ファイルが同じ版か確認することも協業に含まれる。

路線図の掲載基準と記号

一枚へ情報を詰め込めば、店舗名や路線が読みにくくなる。掲載には駅からのアクセス距離と音楽ゲームの稼働状況を使う。一駅に複数店舗がある場合は名前の優先順位と複数店舗の表示を決め、対応ネットワークを記号で区別した。

路線は掲載店舗の近くを中心に簡略化するため、凡例が必要になる。画面で路線色と記号を説明し、別の案内で掲載基準を示す。地図へ名前を載せる規則と、個別店舗の詳細をそれぞれ確認できる構成だ。

2023-12-25のBetaコードによる再現。当時のバンドルに含まれていた首都圏路線図を使用した。 韓国語の原画面。当時のBetaは韓国語のみ対応。

Mermaid
flowchart TD
    accTitle: 場所の情報を鉄道路線の視点で整理
    accDescr: 駅と店舗の関係を掲載基準で整理し、地図の名前や記号で訪問する地域を選べるようにする。
    A[駅と周辺の店舗] --> B[掲載基準と表記の優先順位]
    B --> C[駅名・店舗名・記号を配置]
    C --> D[路線沿いの訪問候補を探す]

Web地図とダウンロード版

Web画面はライトとダークのテーマに合うSVGを表示する。SVGは拡大しても線や文字を保ちやすいベクター形式である。拡大と移動を組み合わせ、モバイルの初期倍率を高めて小さな画面でも区間を調べられるようにした。凡例は地図のメニューで確認できる。

ダウンロード画面は別に保存した版の一覧から、版名、発表日、説明、プレビュー、リンクを読む。作成時刻順で最新版を区別する。表示用SVGと配布ファイルは更新経路が異なるため、運営者が版を合わせて公開する必要がある。

Mermaid
flowchart LR
    accTitle: 表示用地図と配布文書の二つの経路
    accDescr: Web画面はテーマ別SVGを表示し、ダウンロード画面は版のメタデータとファイルリンクを取得する。両方の更新は運営者が合わせる。
    O[地図の制作と更新] --> S[テーマ別の静的SVG]
    O --> V[版の情報とファイルリンク]
    S --> W[拡大・移動できるWeb地図]
    V --> D[プレビューとダウンロード]

訪問計画と版の更新

路線沿いの候補を比較したり、ファイルを事前に読んだり、店舗へ印刷して置いたりできる。特注印刷用の版を依頼する窓口も案内し、同じ地図をWeb以外で使う方法につないだ。

地図は店舗や路線の変化に合わせて作り直す編集物である。列車の運行情報や経路案内をリアルタイムに提供せず、営業情報が訪問当日と同じとも限らない。候補を選んだら最新の店舗情報を確認し、制作物と公開版を継続してそろえる必要がある。

Mermaid
flowchart TD
    accTitle: 路線図から訪問候補へ
    accDescr: 路線図と凡例で候補地域を選び、店舗の最新情報を確認する。制作者は店舗や路線の変更を次の版へ反映する。
    M[路線図と凡例] --> C[訪問候補を選択]
    C --> A[店舗の詳細情報を確認]
    E[店舗と路線の変化] --> U[次の地図の版を更新]
Musecat
ゲームセンターのすべて