目的・役割
ランキング1件の詳細を表示し、状態に応じて「投票へ進む」「結果を見る」「結果ロック」「クイズゲート」を分岐させる中枢画面。
UI 構成
| 要素 | 種類 | 説明 |
|---|
| RankingHeaderView | カスタムView | タイトル・タグ・投票数ティア・期間表示 |
| 選択肢プレビュー | List | 各 Choice の label / image / shortLabel |
| 「投票する」ボタン | Button | 状態に応じて表示・遷移先変化 |
| 「結果を見る」ボタン | Button | 投票済 or 閲覧権限ありで表示 |
| 選択肢申請ボタン | Button | 未追加の選択肢を提案できる |
| 通報ボタン | Toolbar | ReportSheetを起動 |
| シェアボタン | Toolbar | ShareImageService経由でシェア |
状態（accessPolicy で分岐）
| 条件 | 表示内容 |
|---|
| 開始前 | 「○月○日 ○時開始」カウントダウン |
| 受付中・未投票・quiz無 | 投票ボタン → VoteView/ThreePointVoteView |
| 受付中・未投票・quiz有 | 投票ボタン → QuizGateView |
| 受付中・投票済 | 結果を見るボタン → ResultView |
| 終了・投票済 | 結果のみ表示 → ResultView |
| 終了・未投票・閲覧不可 | ResultLockedView |
| 削除済み | 「このランキングは削除されました」 |
遷移
| 操作 | 遷移先 |
|---|
| 「投票する」（quiz無, single） | VoteView |
| 「投票する」（quiz無, threePoint） | ThreePointVoteView |
| 「投票する」（quiz有） | QuizGateView |
| 「結果を見る」 | ResultView |
| 選択肢申請 | ChoiceRequestSheet |
| 通報 | ReportSheet |
使用するデータモデル
RankingDetailViewModel {
var ranking: Ranking
var choices: [Choice]
var hasVoted: Bool
var hasVotedOptimistically: Bool // 楽観UI
var nextVoteNumber: Int // 1=初投票, 2=revote1, 3=revote2
var accessPolicy: RankingAccessPolicy
}
実装メモ
- RankingAccessPolicy で accessPolicy を判定（権限ロジック分離）
- 楽観UI: 投票直後に hasVotedOptimistically=true で即時UI更新
- RankUpCelebrationView: 投票数達成時にお祝い表示
- isThreePointReady で TOP3 投票の選択完了判定
関連
変更履歴
| バージョン | 日付 | 変更内容 |
|---|
| 1.0 | 2026-05-09 | 初版作成 |