本記事では、Struts2を用いて開発した掲示板システムにおけるユーザー向け画面の遷移フローと各画面の役割について詳しく解説します。
Vol.13では、全体のフロー図を示しましたが、本記事ではその中から「ユーザーが操作する範囲」に絞って、具体的な画面構成と遷移を説明します。
👤 ユーザーが利用可能な主な機能
ユーザーは、以下の操作を行うことができます：
-
掲示板の閲覧
-
スレッドの作成・閲覧・編集（※自身が作成したスレッドのみ）
-
投稿の作成・編集・削除（※自身の投稿のみ）
-
自分のスレッドや投稿の一覧確認
🔄 画面遷移図（ユーザー側）
以下は、ユーザーが利用する主な画面と遷移の関係を表した図です。
[1. ログイン画面]
↓
[2. 利用者ポータル画面]
├─ 掲示板一覧（全ユーザー共通）
│ └─→ [3. 掲示板詳細画面]
│ ├─→ [4. スレッド作成画面]
│ └─→ [5. スレッド詳細画面]
│ ├─→ [6. スレッド編集画面]（※作成者のみ）
│ ├─→ [7. 投稿作成セクション]
│ └─→ [8. 投稿編集／削除画面]（※投稿者のみ）
│
├─ スレッド一覧（全ユーザー共通）
│ └─→ [5. スレッド詳細画面]
│ ├─→ [6. スレッド編集画面]
│ ├─→ [7. 投稿作成セクション]
│ └─→ [8. 投稿編集／削除画面]
│
├─ ユーザー個別スレッド一覧
│ └─→ [9. ユーザー個別スレッド詳細画面]
│ ├─→ [6. スレッド編集画面]
│ ├─→ [7. 投稿作成セクション]
│ └─→ [8. 投稿編集／削除画面]
│
└─ ユーザー個別投稿一覧
└─→ [10. ユーザー個別投稿が紐づくスレッド詳細画面]
├─→ [6. スレッド編集画面]
├─→ [7. 投稿作成セクション]
└─→ [8. 投稿編集／削除画面]
🔢 各画面の詳細説明
[1. ログイン画面]
-
ユーザーと管理者共通のログイン画面。
-
正しい認証情報を入力すると[2. 利用者ポータル画面]へ遷移。
[2. 利用者ポータル画面]
-
ログインユーザーに応じた情報を集約したメイン画面。
-
以下の機能へのリンクあり：
-
掲示板一覧
-
スレッド一覧
-
自分のスレッド一覧
-
自分の投稿一覧
-
[3. 掲示板詳細画面]
-
選択された掲示板に含まれるスレッド一覧を表示。
-
「スレッド作成」ボタンから[4]へ遷移可能。
-
各スレッドのタイトルクリックで[5]へ遷移。
[4. スレッド作成画面]
-
掲示板内に新しいスレッドを作成。
-
タイトルとスレッド本文を入力して投稿。
[5. スレッド詳細画面]
-
スレッドの詳細内容と投稿一覧を表示。
-
「投稿フォーム」セクションから[7]で新規投稿が可能。
-
自身が作成したスレッドの場合は[6]へ遷移可能。
-
自身の投稿には[8]から編集・削除が可能。
[6. スレッド編集画面]
-
ユーザー自身が作成したスレッドのみ編集可能。
-
タイトルや本文の更新を行う。
[7. 投稿作成セクション]
-
スレッド詳細画面内に埋め込まれた投稿フォーム。
-
新しい投稿を行うことが可能。
-
入力後、同じスレッド詳細画面が再読み込みされ、投稿一覧が更新される。
[8. 投稿編集／削除画面]
-
自身が投稿したコメントに限り編集・削除が可能。
-
投稿エリア右側の「編集」「削除」ボタンから操作。
[9. ユーザー個別スレッド詳細画面]
-
ログインユーザーが作成したスレッドのみを絞り込んだ詳細画面。
-
内容は[5]と同じ構成。
[10. ユーザー個別投稿が紐づくスレッド詳細画面]
-
ユーザー自身の投稿が含まれるスレッドを一覧表示し、そこから詳細へ遷移。
-
投稿対象のスレッド内での位置づけ確認や再編集が可能。
🧩 まとめ
本記事では、ユーザー側の操作に関する 画面遷移フローとその詳細 を解説しました。
ユーザーがスムーズにスレッドや投稿を扱えるよう、遷移の流れを整理することで、開発時のUI設計・テスト仕様作成にも役立ちます。