User Mobile

エンドユーザー向けモバイルアプリケーション（user-mobile）について説明します。

概要

user-mobileは、Bazbiiの位置情報ベースのソーシャルフィードアプリケーションです。ユーザーが現在地周辺の情報を閲覧し、投稿を共有することができます。

技術スタック

フレームワーク: React Native (Expo)
言語: TypeScript
状態管理: 未定（予定: Zustand または React Context）
ナビゲーション: React Navigation
地図: react-native-maps（H3インデックス統合）

主要機能

位置情報ベースフィード: 現在地周辺の投稿を表示
タイムライン: フォローしているユーザーの投稿を表示
投稿作成: 位置情報とテキストを含む投稿を作成
チェックイン: 店頭のQRコードを読み込んで訪問履歴を記録
ヒートマップ: エリアの雰囲気（Vibes）を可視化
パートナー情報: 公式アカウントの詳細情報を表示
マイログ: チェックイン履歴と活動履歴の表示
設定: アカウント設定、プライバシー設定

UIモック

以下のモックは、user-mobileアプリの主要な画面を表現しています。

近くの「いま」

H3 r=1 内

友だちオーバーレイ

周辺の雰囲気ふつう 6220分前・27票（H3集計）

※店舗個別ではなく近隣セルの集合値

カフェ・トワイライト

公式

120m ・ 8分前

High

空席

空きあり（公式）

本日ケーキ100円引き（17:00まで）

友だち2

8分前

麺房あさひ

230m ・ 5分前

Med

混雑

それなりに待つ（推定）

替え玉無料（終日まで）

友だち1

5分前

焼き鳥とんぼ

310m ・ 21分前

Low

売切

レバー売切れ（観測Low）

友だち0

21分前

パン屋コムサ

450m ・ 15分前

Med

空席

午後も営業中

友だち0

15分前

居酒屋よし

公式

520m ・ 32分前

High

混雑

満席に近い（公式）

本日お得セット（20:00まで）

友だち3

32分前

コンビニエンスストア

180m ・ 45分前

Low

空席

普通（観測Low）

友だち0

45分前

主要画面

1. フィード画面

位置情報ベースのフィードとタイムラインを表示します。

機能:

近傍フィード: H3インデックスを使用して現在地周辺の投稿を表示
ソーシャルタイムライン: フォローしているユーザーの投稿を表示
エリアの雰囲気（Vibes）: 周辺エリアの雰囲気スコアを表示
投稿カード: 投稿内容、位置情報、信頼度バッジ、リアクション数を表示

UI要素:

タブ切り替え（近傍 / ソーシャル）
フィルターチップ（距離、時間、カテゴリ）
無限スクロール
プルダウンリフレッシュ

2. 投稿作成画面

新しい投稿を作成する画面です。

機能:

テキスト入力: 最大120文字（カテゴリなしの場合）
位置情報: 現在地の自動取得、手動調整可能
カテゴリ選択: 店舗、イベント、その他
画像添付: オプション（最大3枚）

UI要素:

テキストエリア
位置情報プレビュー
カテゴリ選択ボタン
投稿ボタン

3. チェックイン画面

店頭に設置されたQRコードを読み込んでチェックインを行う画面です。

機能:

QRコードスキャン: カメラでQRコードを読み込む
チェックイン記録: チェックイン情報をサーバーに送信
パートナー情報表示: チェックイン先のパートナー情報を表示
チェックイン履歴: 過去のチェックイン履歴を確認

動作フロー:

QRコードスキャン画面を開く（ナビゲーションバーから）
カメラが起動し、QRコードを読み込む
QRコードからパートナーIDを取得
現在地と時刻を取得
チェックイン情報をサーバーに送信
チェックイン成功メッセージを表示
パートナー詳細画面に遷移（オプション）

チェックイン情報:

パートナーID（QRコードから取得）
チェックイン日時
位置情報（GPS座標、H3インデックス）
デバイス情報

UI要素:

カメラビュー（QRコードスキャン）
スキャンガイド（中央の枠線）
チェックイン履歴一覧
手動チェックイン（パートナー検索からのチェックイン、将来実装）

4. ヒートマップ画面

エリアの雰囲気を可視化するヒートマップです。

機能:

H3セル表示: 六角形セルでエリアを表示
雰囲気スコア: 各セルの雰囲気スコアを色で表現
密度表示: 投稿密度を明度で表現
タップで詳細: セルタップで詳細情報を表示

UI要素:

地図ビュー
H3セルオーバーレイ
凡例
ズーム/パン操作

5. パートナー詳細画面

公式アカウント（パートナー）の詳細情報を表示します。

機能:

公式バッジ: 公式アカウントのバッジ表示
基本情報: 店舗名、所在地、営業時間
投稿一覧: パートナーの投稿一覧
統計情報: 投稿数、閲覧数、エンゲージメント率

UI要素:

ヘッダー画像
基本情報カード
投稿リスト
統計グラフ

6. マイログ画面

ユーザー自身の活動履歴を表示します。チェックイン履歴をベースに訪問記録を管理します。

機能:

訪問履歴: チェックイン記録を基にした訪問店舗・場所のリスト
- チェックイン日時
- パートナー情報（店舗名、所在地、カテゴリ）
- 訪問回数（同じ店舗へのチェックイン回数）
- 最終訪問日時
投稿履歴: 過去の投稿一覧
ヒートマップ: チェックインした場所のヒートマップ表示
統計情報:
- 総チェックイン数
- 訪問店舗数（ユニークパートナー数）
- 投稿数
- エンゲージメント数
思い出アーカイブ: チェックイン時に撮影した写真やメモを保存（将来実装）

チェックイン履歴の表示:

リスト形式: 時系列で表示（最新順）
グループ化: パートナーごとにグループ化して表示（同じ店舗の複数回訪問）
フィルター:
- 期間フィルター（今日、今週、今月、カスタム期間）
- パートナーカテゴリフィルター
- 場所フィルター（エリア別）

UI要素:

タブ切り替え（訪問履歴 / 投稿履歴 / 思い出、将来実装）
リスト表示（チェックイン履歴）
ヒートマップビュー（訪問場所の可視化）
統計カード
フィルターボタン

主要機能の詳細

位置情報ベースフィード

H3インデックスによる検索

アプリは、ユーザーの現在地に基づいてH3インデックスを使用し、近隣の投稿を検索します。

動作:

ユーザーの現在地を取得（GPS）
現在地のH3インデックスを計算（解像度R9）
近傍セル（同じセル + 周辺セル）の投稿を取得
距離順または時間順でソート
フィードに表示

パフォーマンス:

H3インデックスを使用することで、地理空間検索が高速化
データベースの空間インデックスと組み合わせて最適化

エリアの雰囲気（Vibes）

エリア全体の雰囲気を集計して表示します。

スコア計算:

H3セル単位で投稿の雰囲気スコアを集計
投票数に基づいて信頼度を計算
70以上: 元気、50-70: ふつう、30-50: ややだる、30未満: だるい

表示:

バッジ表示: 雰囲気ラベルとスコア
ヒートマップ: 色と明度で表現
更新頻度: リアルタイム更新（新規投稿時に再計算）

投稿の信頼度

各投稿には信頼度バッジが表示されます。

信頼度レベル:

High: 公式アカウント、または信頼度の高いユーザー
Med: 通常のユーザー、標準的な信頼度
Low: 新規ユーザー、または信頼度が低い投稿

信頼度の判定基準:

アカウント作成からの経過時間
投稿履歴
リアクション数
不適切なコンテンツの報告数

リアクション機能

投稿に対してリアクションを付けることができます。

リアクションタイプ:

👍 いいね
💬 コメント（将来実装）
🔄 シェア（将来実装）

リアクションの表示:

リアクション数が投稿カードに表示
タップでリアクション追加/削除

チェックイン機能

店頭に設置されたQRコードを読み込むことで、訪問履歴を記録する機能です。

チェックインの仕組み

QRコードの配置:

パートナー（店舗）が店頭にQRコードを設置
QRコードにはパートナーIDがエンコードされている
ユニークなQRコードで、パートナーごとに異なる

チェックインの処理フロー:

QRコード読み込み: カメラでQRコードをスキャン
情報取得: QRコードからパートナーIDを抽出
位置情報取得: GPSで現在地を取得（位置情報の整合性チェック）
サーバー送信: チェックイン情報をAPI経由でサーバーに送信
- パートナーID
- チェックイン日時
- 位置情報（緯度経度、H3インデックス）
- デバイス情報
履歴保存: サーバーでチェックイン履歴を保存
マイログ更新: マイログ画面の訪問履歴が自動更新

位置情報の整合性チェック:

QRコード読み込み時の位置情報と、パートナーの登録位置情報を比較
一定範囲内（例：半径100m）であればチェックイン成功
範囲外の場合は警告を表示（誤スキャン防止）

チェックイン履歴のデータ:

チェックインID: ユニークなチェックイン記録ID
パートナーID: チェックインしたパートナー
チェックイン日時: 正確な日時
位置情報: 緯度経度、H3インデックス（解像度R9）
デバイス情報: デバイスID、アプリバージョン

マイログとの連携

マイログ画面の訪問履歴は、チェックイン記録をベースに表示されます。

表示される情報:

チェックイン日時
パートナー情報（店舗名、所在地、カテゴリ、プロフィール画像）
訪問回数（同一パートナーへの累計チェックイン数）
最終訪問日時
チェックイン時の位置情報（表示用）

ヒートマップとの連携:

チェックインした場所をH3セル単位で可視化
訪問頻度の高いエリアを強調表示
訪問履歴に基づいたパーソナライズされた地図表示

将来の機能拡張

レビュー機能（将来実装）:

チェックイン後にレビューを投稿可能
チェックイン履歴から直接レビュー作成画面へ遷移
レビューはパートナーの評価として集計
他のユーザーのレビューを閲覧可能

思い出アーカイブ機能（将来実装）:

チェックイン時に写真を撮影・保存
メモやタグを追加可能
チェックイン履歴に紐づけて思い出として管理
タイムライン形式で思い出を振り返り可能
検索・フィルター機能（期間、場所、タグなど）

予約・通知機能（将来実装）:

チェックイン履歴を基にしたパーソナライズされた通知
よく訪問する店舗の新着情報通知
特別なイベントやプロモーションの通知

ナビゲーション構造

タブ構成

フィード: メインのフィード表示（近傍 / ソーシャル）
作成: 投稿作成画面（ボタンで表示されるシート）
チェックイン: QRコードスキャンとチェックイン履歴
ヒートマップ: エリアの雰囲気を可視化
マイログ: ユーザーの活動履歴（チェックイン記録をベース）
設定: アカウント設定、プライバシー設定

状態管理

グローバル状態

認証状態: ユーザーのログイン状態、JWTトークン
位置情報: 現在地、位置情報の取得状態
設定: アプリ設定、プライバシー設定

ローカル状態

フィード: 投稿リスト、フィルター状態
投稿作成: 入力中のテキスト、位置情報、画像
ナビゲーション: 現在の画面、履歴

API連携

主要エンドポイント

フィード取得: GET /v1/feed/local-feed - 位置情報ベースフィード
タイムライン取得: GET /v1/feed/timeline - ソーシャルタイムライン
投稿作成: POST /v1/posts - 新規投稿
チェックイン: POST /v1/checkins - チェックイン記録の作成
チェックイン履歴: GET /v1/checkins - チェックイン履歴の取得
ヒートマップ: GET /v1/feed/heatmap - エリアの雰囲気データ
認証: POST /v1/auth/provision - 初回認証

詳細はAPI仕様を参照してください。

パフォーマンス最適化

画像最適化

リサイズ: アップロード前に画像をリサイズ
フォーマット: WebP形式を使用
遅延読み込み: スクロール時に画像を読み込み

リスト最適化

仮想化: 長いリストを仮想化（FlatList使用）
ページネーション: 無限スクロールでページネーション
キャッシュ: 取得したデータをローカルにキャッシュ

位置情報最適化

バッチ取得: 複数の位置情報リクエストをバッチ処理
キャッシュ: 過去に取得した位置情報をキャッシュ
更新頻度: 位置情報の更新頻度を調整

セキュリティとプライバシー

位置情報の保護

ユーザー同意: 位置情報の使用には明示的な同意が必要
設定可能: 位置情報の共有レベルを設定可能
暗号化: 位置情報の送信時はHTTPSを使用

認証

JWT認証: Bearer Tokenを使用
自動リフレッシュ: トークンの自動更新
セキュアストレージ: トークンはセキュアストレージに保存

詳細はセキュリティを参照してください。

実装状況

Phase 1: MVP（完了予定）

⏳ 基本画面構成（フィード、投稿作成）
⏳ 位置情報ベースフィード
⏳ 基本的な投稿機能
⏳ エリアの雰囲気表示
⏳ チェックイン機能（QRコードスキャン）
⏳ マイログ画面（チェックイン履歴表示）

Phase 2: 機能拡張（予定）

⏳ タイムライン機能
⏳ ヒートマップ画面
⏳ パートナー詳細画面
⏳ マイログ画面の拡張（フィルター、ソート機能）
⏳ チェックイン履歴の詳細表示

Phase 3: 高度な機能（予定）

⏳ リアクション機能の拡張
⏳ コメント機能
⏳ シェア機能
⏳ プッシュ通知
⏳ レビュー機能: チェックインに基づくレビュー投稿
⏳ 思い出アーカイブ機能: チェックイン時の写真・メモ保存

概要​

技術スタック​

主要機能​

UIモック​

カフェ・トワイライト

麺房あさひ

焼き鳥とんぼ

パン屋コムサ

居酒屋よし

コンビニエンスストア

主要画面​

1. フィード画面​

2. 投稿作成画面​

3. チェックイン画面​

4. ヒートマップ画面​

5. パートナー詳細画面​

6. マイログ画面​

主要機能の詳細​

位置情報ベースフィード​

H3インデックスによる検索​

エリアの雰囲気（Vibes）​

投稿の信頼度​

リアクション機能​

チェックイン機能​

チェックインの仕組み​

マイログとの連携​

将来の機能拡張​

ナビゲーション構造​

タブ構成​

状態管理​

グローバル状態​

ローカル状態​

API連携​

主要エンドポイント​

パフォーマンス最適化​

画像最適化​

リスト最適化​

位置情報最適化​

セキュリティとプライバシー​

位置情報の保護​

認証​

実装状況​

Phase 1: MVP（完了予定）​

Phase 2: 機能拡張（予定）​

Phase 3: 高度な機能（予定）​

関連ドキュメント​

概要

技術スタック

主要機能

UIモック

主要画面

1. フィード画面

2. 投稿作成画面

3. チェックイン画面

4. ヒートマップ画面

5. パートナー詳細画面

6. マイログ画面

主要機能の詳細

位置情報ベースフィード

H3インデックスによる検索

エリアの雰囲気（Vibes）

投稿の信頼度

リアクション機能

チェックイン機能

チェックインの仕組み

マイログとの連携

将来の機能拡張

ナビゲーション構造

タブ構成

状態管理

グローバル状態

ローカル状態

API連携

主要エンドポイント

パフォーマンス最適化

画像最適化

リスト最適化

位置情報最適化

セキュリティとプライバシー

位置情報の保護

認証

実装状況

Phase 1: MVP（完了予定）

Phase 2: 機能拡張（予定）

Phase 3: 高度な機能（予定）

関連ドキュメント