初めて行く店舗では、住所が分かっていても建物の前で迷うことがある。入口や内部の姿を文章だけで思い浮かべるのは難しい。同じゲームがある二つの店舗を比べる場合も、写真があれば空間を理解しやすくなる。

Betaではメールで写真を受け付け、運営者が確認して手作業で登録する。登録した写真は、店舗詳細のギャラリーで見られるようにした。

訪問案内に使う写真

住所とゲーム一覧は、位置と設置内容を伝える。写真は、入口や内部配置のように長い文章でも説明しにくい姿を見せる。例えば複数の店舗が入る建物では、外観と入口の写真が訪問前の確認に役立つ。

ただし枚数が多ければ正確になるわけではない。別の場所の写真や、変更前の内装だけが残れば混乱を招く。運営者が対象店舗と場面を確認してから登録する過程を用意した。

メール提供と店舗別の写真登録

メールを受け取った運営者は、添付をダウンロードしてどの店舗の写真か確認する。管理者ツールで店舗を選び、ファイルをプレビューし、誤った選択を外して登録する。利用者がサイトへアップロードして直ちに公開する方式ではない。

写真は店舗IDへ結び付けた別のレコードで管理する。IDは名前が似た店舗も区別できる識別値である。複数のファイルをまとめれば、詳細画面でその店舗の写真を取得し、説明文を書き直さずに画像を管理できる。

2023-12-25のBetaコードを合成サンプルデータで再現。写真は当時のリポジトリに含まれたサンプル画像を使用。 韓国語の原画面。当時のBetaは韓国語のみ対応。

flowchart TD
    accTitle: 店舗と写真のまとまりの接続
    accDescr: 店舗IDから写真レコードと複数ファイルを読み、名称や住所は別の場所情報として保つ。
    A[店舗ID] --> P[写真レコード]
    P --> I1[写真ファイル1]
    P --> I2[写真ファイル2]
    A --> T[名称・住所などの場所情報]

アップロードとギャラリーの取得

管理者アップローダーはWebP形式とファイル容量を制限する。選択後のプレビューはブラウザーで確認するためのもので、登録時には実ファイルと店舗IDをPocketBase SDKで送る。そのため管理者がブラウザーを閉じても、サーバーのファイルを取得できる。

詳細画面は写真レコードを読み、レコードIDとファイル名から画像アドレスを作る。写真がなければギャラリーは表示しない。複数枚を横方向に見て、必要な一枚だけを拡大することで、一覧と細部の確認を続けて行えるようにした。

店舗別管理者アップローダーのドラッグ領域とアップロード操作。同じBeta原本コードで再現。 韓国語の原画面。当時のBetaは韓国語のみ対応。

sequenceDiagram
    accTitle: 写真登録と詳細取得
    accDescr: 運営者が確認して登録したファイルを、詳細画面が店舗IDで取得してギャラリーに表示する。
    participant U as 提供者
    participant M as メール
    participant O as 運営者
    participant S as 写真ストレージ
    participant V as 店舗詳細
    U->>M: 店舗写真を提供
    M->>O: 添付の確認とダウンロード
    O->>O: 店舗の確認とファイルのプレビュー
    O->>S: 店舗IDと写真を登録
    V->>S: 対象店舗の写真を取得
    S-->>V: レコードIDとファイル一覧
    V->>S: 表示するファイルを要求
    S-->>V: 写真

写真の表示と画像の運用

拡大表示には店舗名も示す。閉じるボタン、背景の選択、Escapeで戻れるため、写真を確認した後も同じ店舗の情報を読める。入口の写真を見てから料金やゲーム一覧へ戻る場面を想定できる。

画像は文章より保存容量と通信量を使う。形式と容量の制限で一枚を小さくしても、全体の枚数の増加までは解決しない。入口を識別できる画質とファイル容量の釣り合いを取り、看板や内装が変わったら写真も確認し直す必要がある。

ギャラリーの写真を選ぶと店舗名と一緒に拡大できる。架空の店舗に写真を関連付けた例。 韓国語の原画面。当時のBetaは韓国語のみ対応。

flowchart LR
    accTitle: 写真の二つの表示と運用費用
    accDescr: 横方向のギャラリーから写真を拡大し、枚数と画質が保存容量や通信量に影響する。
    G[横方向のギャラリー] -->|写真を選択| F[一枚を拡大表示]
    F -->|閉じる| G
    Q[登録写真の枚数と画質] --> C[保存容量と通信量]

関連アップデート

• Musecat³ 4月12日 第5次アップデート