AR日本橋ライブマップ 利用マニュアル

ユーザー向け機能仕様・操作説明 — マニュアル作成参考資料

1

イベント一覧ページ

サービスのトップページ(/)。ユーザー登録なしで閲覧できる。

デスクトップ
イベント一覧ページ(デスクトップ)
スマートフォン
イベント一覧ページ(スマートフォン)

サービス説明

ページ上部にサービスの概要が表示される。AR日本橋が提供するサービスであること、AR日本橋以外のイベントでも利用可能なこと、地図の閲覧・参加にユーザー登録が不要なことが記載されている。

イベントカード

登録されているイベントが以下の3グループに分かれて表示される。

グループ条件
現在開催中本日が開催期間内
今後のイベント開催日が未来
過去のイベント終了済み

各カードに表示される情報:

項目内容
イベント名管理者が設定した名前
開催日開始日〜終了日
開催地管理者が設定した場所
説明管理者が設定した説明文(設定がある場合のみ表示)
「地図を見る」ボタン地図ページへ移動
「イベント参加」ボタン参加セットアップページへ移動

言語切り替え

右上の旗アイコン(🇯🇵/🇬🇧)で日本語・英語を切り替えられる。選択した言語はブラウザに記憶され、次回以降も維持される。イベント名・説明などは管理者が翻訳を登録している場合のみ切り替わる。

イベント作成CTAブロック(下部)

ページ下部に「自分でイベントを作りたい方」向けの案内ブロックがある。「イベントを作成する」ボタンを押すと登録・作成フローに進む(ユーザー登録が必要)。

2

参加セットアップページ

位置情報送信アプリの設定手順を案内するページ(/join/{イベントslug})。ユーザー登録は不要。

デスクトップ
参加セットアップページ
スマートフォン
参加セットアップページ(スマートフォン)

手順の流れ

  1. アプリを選ぶ

    OwnTracks(推奨)または Traccar Client を選択する。以降の手順が選んだアプリに切り替わる。

  2. アプリをインストールする

    App Store / Google Play へのリンクからアプリをインストールする。

  3. 表示名を入力して「設定表示」を押す

    地図上に表示される名前(最大40文字)を入力する。利用規約と位置情報公開の両方にチェックを入れないとボタンは押せない。

  4. QRコードまたはURLをアプリに読み込む

    OwnTracks: QRを読み込むか「設定をOwnTracksで開く」をタップ。Traccar: QRを読み込むかURLをコピーしてアプリに貼り付ける。

  5. 位置情報の権限を「常に許可」にする

    アプリがバックグラウンドで位置情報を送信できるよう設定する。

フォーム部分

参加フォーム部分

表示名の入力、利用規約の確認、位置情報公開への同意

ボタンの有効化条件:「利用規約に同意します」と「位置情報と表示名が公開されることに同意します」の両方にチェックが入るまで「設定表示」ボタンはグレーアウトされ押せない。

利用規約(参加者向け)の主な内容

3

地図ページ

参加者の現在地をリアルタイムで表示するメインページ(/e/{イベントslug})。

デスクトップ — ルートとPOI・標高グラフが表示された状態
地図ページ全体(デスクトップ)

ルートと距離マーカー・標高グラフが表示された状態。右上に参加者パネル。

スマートフォン
地図ページ(スマートフォン)
参加者が表示された状態
参加者マーカーが表示された地図

参加者のマーカーが地図上に表示されている。右上パネルに参加者数と一覧。

ツールバー

地図ページの左上に固定表示されるボタン群。

ボタン動作
↻(リロード)全参加者の位置情報を即座に再取得する。取得中はボタンが無効化されアニメーションが表示される。
🔴(フィードバック)バグ報告・機能要望を送信するダイアログを開く。
3D3D地図ページを開く。
🇯🇵/🇬🇧(言語)表示言語を日本語・英語で切り替える。

自動更新

位置情報は30秒ごとに自動で更新される。リロードボタンを押すと即座に手動更新できる。

イベント名の表示:画面下部中央にイベント名が常に表示される。
👥

参加者パネル

画面右上に表示される参加者一覧と絞り込みコントロール。

参加者パネル

参加者が2名いる状態。ヘッダー・フィルタ・参加者リストの構成。

ヘッダー行

要素内容
参加者数バッジ現在表示中の参加者数を数字で表示する
−/+ ボタンパネルを折りたたむ・展開する(状態はブラウザに記憶される)

フィルタ行

コントロール内容
ソート順ドロップダウン参加者の並び順を変更する(後述)
「選択のみ」チェックボックスチェックすると選択中の参加者のみを地図・グラフに表示する
All ボタン全参加者を選択状態にする
None ボタン全参加者を非選択にする

ソート順

選択肢並び順
距離の長い順(デフォルト)ルート上の走行距離が長い参加者が上
距離の短い順走行距離が短い参加者が上
最近更新順最後に位置情報を受信した時刻が新しい参加者が上
名前の順表示名のアルファベット順
自分自身は常にリスト先頭に表示される。自分の個人ページ(/p/...)を一度開いたことがあるブラウザでは、ソート順の設定や音信不通・停止中の状態に関わらず、自分の行が一覧の一番上に固定される。
音信不通の参加者は常にリスト末尾に移動する(60分以上更新なし)。ソート順の設定に関わらず末尾に固定される(自分自身を除く)。

参加者リストの表示内容

各参加者の行に以下の情報が表示される。

要素内容
チェックボックス参加者の選択状態(オンで地図に表示)。状態はブラウザに記憶される。
カラードット参加者の識別色(固定色)。音信不通時はグレーになる。
表示名参加者が設定した名前
走行距離ルート上のスタートからの距離。音信不通の場合は「音信不通」と表示。
速度現在速度(km/h)
更新時刻最後に位置情報を受信してからの経過時間と時刻(例:「5分前(12:34)」)
Google Mapsリンク位置情報がある場合のみ表示。タップするとGoogle Mapsで現在地を開く。

マーカークリック時のポップアップ

地図上のマーカーをクリック・タップすると詳細ポップアップが開く。

参加者ポップアップ

マーカークリック時のポップアップ

ポップアップ表示中の地図

ポップアップが開いた状態

項目内容備考
表示名参加者名ポップアップ上部に大きく表示
距離ルート上の走行距離ルートがない場合は「-」
速度現在速度(km/h)停止中・未取得は「-」
方向進行方向(矢印+角度)heading情報がない場合は非表示
高度現在地の標高(m)
電池スマートフォンの電池残量(%)
更新サーバーが位置情報を受信した時刻「N分前(HH:MM)」形式
GPS端末がGPSを取得した時刻「更新」と異なる場合のみ意味がある
通過通過済みPC・チェックポイントの名前と時刻通過記録がある場合のみ表示
Google マップ現在地をGoogle マップで開くリンク別タブで開く
「更新」と「GPS」の違い:「GPS」は端末が位置情報を取得した時刻、「更新」はそのデータがサーバーに届いた時刻。電波が悪い場所では両者にタイムラグが生じることがある。

参加者マーカーと状態変化

最後に位置情報を受信してからの経過時間によって、マーカーの見た目が段階的に変化する。

マーカーの種類と見た目

通常
30分以内に更新あり
識別色の円形マーカー
古い情報
30〜60分更新なし
グレーの円形マーカー
?
音信不通
60分以上更新なし
グレー・「?」表示
P
ペースメーカー
仮想参加者
五角形マーカー

経過時間による状態変化まとめ

経過時間マーカーパネルの位置走行距離欄
0〜30分 通常(識別色) ソート順通り 距離を表示
30〜60分 グレー(薄い影) ソート順通り 距離を表示
60分以上 グレー「?」 リスト末尾に移動 「音信不通」と表示
音信不通になっても、速度・標高・電池などの数値は最後に受信した値が残り続ける(更新されない)。

ペースメーカー

管理者が設定すると、仮想参加者として地図上に表示される。設定された速度と開始時刻から現在の想定位置を自動計算し、リアルタイムで移動する。実際の参加者と同様にポップアップで詳細を確認できる。

🗺

ルート・距離マーカー・POI

ルート

管理者がGPXファイルを登録するとルートが地図上に表示される。

距離マーカー

ルート上の一定間隔ごとに距離ラベルが表示される。ズームレベルに応じて間隔が自動的に変わる

ズーム間隔
16以上(最大拡大)1 km
152 km
13〜144 km
11〜128 km
9〜1020 km
8以下(最大縮小)40 km

POI(チェックポイント・給食所など)

ルート上のポイントを色分けされたピンマーカーで表示する。マーカーをクリックすると名前・説明のポップアップが開く。

C
コントロール / CP
F
給食所
シャワー
R
休憩所
i
案内・情報
S
スタート
G
ゴール
📈

標高グラフ

GPXに標高データが含まれている場合のみ、画面下部に折れ線グラフが表示される。

🗾

地図タイルの切り替え

地図右下のレイヤーコントロールから背景地図を切り替えられる。選択はイベントごとにブラウザに記憶される。

選択肢内容
OpenStreetMapデフォルト。一般的な地図タイル
国土地理院日本の詳細な地形図(明るい配色)
国土地理院(濃色)日本の地形図(暗い配色)

地図の操作

操作内容
ドラッグ / スワイプ地図を移動する
ホイール / ピンチズームイン・アウト
初回読み込み時全参加者が収まるよう自動フィットする
手動で地図を動かした後自動フィットは行われなくなる
6

3D地図ページ

地形を3Dで表示する地図(/e/{イベントslug}/3d)。通常の地図ページから「3D」ボタンで移動できる。

デスクトップ
3D地図ページ

ルートが3D地形上に表示されている。右上に参加者パネル、左に操作スライダー。

スマートフォン
3D地図(スマートフォン)

操作コントロール

コントロール内容
傾きスライダー(0°〜85°)カメラの仰角を調整する
高さスライダー(1×〜10×)地形の高さ方向の誇張倍率を調整する(スマートフォンでは非表示)
位置リセットボタンカメラを初期位置・角度に戻す
2D リンク(左上)通常の2D地図に戻る

参加者マーカーとルート表示は2D地図と同じ内容。ドラッグ・ピンチ操作でカメラを回転・移動できる。

7

URLパラメータ

パラメータ効果
?lang=jaja / en表示言語を指定する(通常はブラウザの言語設定が使われる)
?auto(値なし)自動表示モード。ナビゲーションUIを非表示にして地図のみを表示する
💾

ブラウザに記憶される設定

以下の設定はブラウザのローカルストレージに保存され、ページをリロードしても・次回アクセスしても維持される。

設定項目スコープ
表示言語サービス全体
参加者の並び順サービス全体
「選択のみ」フィルタの状態サービス全体
参加者パネルの折りたたみ状態サービス全体
標高グラフの折りたたみ状態サービス全体
選択中の参加者イベントごと
地図タイルの種類イベントごと
ブラウザのキャッシュ・ストレージを削除するとこれらの設定がリセットされ、デフォルト値に戻る。