Comments
Description
Transcript
書籍管理システム 外部設計書 第2版 第二部 ユーザーインターフェース
書籍管理システム 外部設計書 第2版 第二部 ユーザーインターフェース Spring Soft. 平成 27 年 11 月 18 日 目次 1 画面レイアウト 1.1 1.2 トップ画面 (Top01) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ログイン . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2.1 1.2.2 1.2.3 アカウント作成完了 (Log03) . . . . . . . . . . . . . . . . . . . . . . . . . . 4 5 6 1.3 1.2.4 ログイン画面 (Log04) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . メイン画面 (Man01) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 8 1.4 書籍管理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 9 12 1.5 書籍管理トップ画面 (Bom01) . . . . . . . . . . . . . . . . . . . . . . . . . 1.4.3 1.4.4 所有書籍検索結果一覧 (Bom03) . . . . . . . . . . . . . . . . . . . . . . . . 1.4.5 1.4.6 1.4.7 書籍追加完了 (Bom08) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.4.8 1.4.9 書籍貸出編集 (Bom07) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.8 書籍追加 (Bom04) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 書籍情報編集 (Bom05) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 書籍情報編集完了 (Bom09) . . . . . . . . . . . . . . . . . . . . . . . . . . 書籍情報削除確認 (Bom06) . . . . . . . . . . . . . . . . . . . . . . . . . . 13 14 15 16 17 18 19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 公開リストトップ画面 (Opn01) . . . . . . . . . . . . . . . . . . . . . . . . 公開リスト詳細検索 (Opn02) . . . . . . . . . . . . . . . . . . . . . . . . . 20 20 22 公開リスト検索結果一覧 (Opn03) . . . . . . . . . . . . . . . . . . . . . . . 新規メール作成 (Opn04) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 24 1.5.5 メール送信完了 (Mal03o) . . . . . . . . . . . . . . . . . . . . . . . . . . . メール . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.6.1 受信メール一覧 (Mal01) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 26 26 送信メール一覧 (Mal04) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 返信メール作成 (Mal02) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 29 1.6.4 メール送信完了 (Mal03m) . . . . . . . . . . . . . . . . . . . . . . . . . . . アカウント . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.7.1 アカウント情報確認 (Acc01) . . . . . . . . . . . . . . . . . . . . . . . . . . 30 31 31 1.7.2 アカウント情報編集 (Acc02) . . . . . . . . . . . . . . . . . . . . . . . . . . 問い合わせ (Hel01) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 33 1.6.2 1.6.3 1.7 所有書籍詳細検索 (Bom02) . . . . . . . . . . . . . . . . . . . . . . . . . . 公開リスト 1.5.3 1.5.4 1.6 利用規約 (Log02) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.4.1 1.4.2 1.5.1 1.5.2 2 アカウント新規作成 (Log01) . . . . . . . . . . . . . . . . . . . . . . . . . . 2 2 4 画面遷移 34 1 1 1.1 画面レイアウト トップ画面 (Top01) 画面説明 本 Web システムにアクセスして最初に表示される画面である。 この画面では、本システムの機能詳細説明、システムへのログイン、アカウントの新規作成 を行う。 ボタンと対応する画面遷移 1 番 (Login) ボタンを押すと、ログイン画面へ遷移する。2 番 (新規作成) ボタンを押すと、ア カウント作成画面へ遷移する。 図 1: トップ画面 2 図 2: トップ画面 機能説明 3 1.2 1.2.1 ログイン アカウント新規作成 (Log01) 画面説明 まだアカウントを所持していないユーザが、新規にアカウントを作成する画面である。 ユーザは「アカウント名」に任意の全半角文字 1∼16 字を入力し、「アカウント ID」「パス ワード」に初期設定された半角英数字を 8∼16 字入力する。 ボタンと対応する画面遷移 入力完了後、3 番 (利用規約) に同意する欄にチェックを入れ、4 番 (作成) ボタンを押すと、 アカウント作成完了画面へ遷移する。 アカウント所持者は、1 番ボタンを押すとログイン画面へ遷移する。 図 3: アカウント新規作成画面 4 1.2.2 利用規約 (Log02) 画面説明 本システムにおける規約を表示する画面である。 ボタンと対応する画面遷移 5 番 (戻る) ボタンを押すと、アカウント作成画面へ遷移する。 図 4: 利用規約画面 5 1.2.3 アカウント作成完了 (Log03) 画面説明 新規にアカウント作成が完了したことを確認する画面である。 作成したアカウントの「アカウント ID」「ユーザ名」を表示する。 ボタンと対応する画面遷移 6 番 (確認) ボタンを押すと、ログイン画面へ遷移する。 図 5: アカウント作成完了画面 6 1.2.4 ログイン画面 (Log04) 画面説明 事前に作成されたアカウントにログインする画面である。 ボタンと対応する画面遷移 ログインには「アカウント ID」と「パスワード」を入力して、7 番 (Login) ボタンを押す。 2 番ボタンを押すと、アカウント新規作成画面へ遷移する。 図 6: ログイン画面 7 1.3 メイン画面 (Man01) 画面説明 ログイン後、最初に表示されるメインの画面である。 ボタンと対応する画面遷移 10 番 (書籍管理)、11 番 (公開リスト)、12 番 (メール)、13 番 (アカウント)、14 番 (問い合わ せ) ボタンを押すと、それぞれの対応する機能のページへ遷移する。 ログイン後は、8 番 (システムロゴ) ボタンを押すとメイン画面へ遷移する。9 番 (ログアウ ト) ボタンを押すと本システムからログアウトし、トップ画面へ遷移する。 またメニューバーの 10 番から 14 番ボタンおよび 9 番ボタンは、ほかのページにおいても同 様の遷移を行う。 図 7: メイン画面 8 1.4 1.4.1 書籍管理 書籍管理トップ画面 (Bom01) 画面説明 所有書籍の情報一覧を表示する画面である。 表示する書籍の情報は、「タイトル」と「著者名」とする。16 番 (書籍) を選択すると、図 9 のようにその書籍の詳細情報を表示する。表示される詳細情報は、ユーザが登録した書籍の 情報とする。 22 番 (並び替え) ボタンを押すとソート方式の一覧がプルダウン表示され、任意のソート方 式を選択するとそれに対応した順に書籍が並び替わる。 20 番 (詳細検索)、21 番 (ジャンル) 選択および 22 番 (並び替え) 選択は、検索後も同様に行 なうことができる。 ボタンと対応する画面遷移 15 番 (書籍検索) ボタンを押すと、未入力時に表示されている枠内灰色文字に対応した検索 を行い、対応した検索結果画面へ遷移する。 17 番 (貸出) ボタンを押すと、図 10 のようにその書籍の貸出状態の詳細が表示され、表示さ れた詳細内の編集ボタンを押すと貸出編集画面へ遷移する。18 番 (削除) ボタンを押すと、削 除確認画面へ遷移する。19 番 (追加) ボタンを押すと書籍追加画面へ遷移する。 20 番ボタンを押すと、詳細検索の画面が表示される。検索項目は、「書籍名」「著者」「出版 社」 「ジャンル」 「不要」 「所蔵場所」 「貸出状態」 「貸出相手」であり、検索を押すと書籍検索 結果画面に遷移する。21 番ボタンを押すとジャンルの種類が表示され、任意の種類を押すと 書籍検索結果画面に遷移する。 図 9 の 23 番 (× ) ボタンを押すと詳細情報が閉じ、24 番 (編集) ボタンを押すと書籍情報編 集画面へ遷移する。図 10 の 25 番 (× ) ボタンを押すと貸出状態詳細情報が閉じ、26 番 (編 集) ボタンを押すと貸出編集画面へ遷移する。 9 図 8: 書籍管理トップ画面 図 9: 書籍情報詳細表示画面 10 図 10: 貸出情報詳細表示画面 11 1.4.2 所有書籍詳細検索 (Bom02) 画面説明 所有する書籍に対しての詳細検索を行う画面である。 ボタンと対応する画面遷移 27 番 (× ) ボタンを押すと詳細検索画面が閉じ、所有書籍一覧画面へ遷移する。 28 番 (検索) ボタンを押すと検索が行われ、所有書籍検索結果一覧画面へ遷移する。 図 11: 所有書籍詳細検索画面 12 1.4.3 所有書籍検索結果一覧 (Bom03) 画面説明 検索項目に該当した書籍を表示する画面である。 検索項目には検索した条件を保持した状態とする。再び検索すると書籍検索結果が新たに更 新される。 用いられる機能は書籍管理トップ画面と同様である。 図 12: 書籍情報検索結果一覧画面 13 1.4.4 書籍追加 (Bom04) 画面説明 登録したい書籍の情報を登録する画面である。 登録項目は、 「タイトル」 「著者」 「出版社」 「ジャンル」 「不要」 「所蔵場所」 「ISBN」とする。 ボタンと対応する画面遷移 ISBN を入力し 29 番 (情報の取得) ボタンを押すと、書籍情報が入力される。30 番 (登録) を 押すと、入力した書籍の情報が追加され、書籍追加完了画面へ遷移する。31 番 (BACK) ボ タンを押すと、書籍管理画面へ遷移する。 図 13: 書籍追加画面 14 1.4.5 書籍追加完了 (Bom08) 画面説明 書籍の追加が完了したことを知らせる画面である。 ボタンと対応する画面遷移 32 番 (修正) ボタンを押すと編集画面へ遷移する。33 番 (完了) ボタンを押すと書籍管理トッ プへ遷移する。34 番 (続けて追加) ボタンを押すと書籍追加画面へ遷移する。 図 14: 書籍追加完了画面 15 1.4.6 書籍情報編集 (Bom05) 画面説明 登録書籍の情報を編集する画面である。 編集項目は、「タイトル」「著者」「出版社」「ジャンル」「要不要」「所蔵場所」「ISBN」とす る。ISBN を入力し 29 番ボタンを押すと書籍情報が入力される。 ボタンと対応する画面遷移 35 番 (情報の変更) ボタンを押すと編集完了画面へ遷移する。31 番ボタンを押すと書籍管理 画面へ遷移する。 図 15: 書籍情報編集画面 16 1.4.7 書籍情報編集完了 (Bom09) 画面説明 書籍情報の編集が完了したことを知らせる画面である。 ボタンと対応する画面遷移 36 番 (修正) ボタンを押すと書籍情報編集画面へ遷移する。33 番ボタンを押すと書籍管理画 面へ遷移する。 図 16: 書籍情報編集完了画面 17 1.4.8 書籍貸出編集 (Bom07) 画面説明 書籍の貸出に関する情報を編集する画面である。 入力できる項目は、貸出日と貸出相手である。 ボタンと対応する画面遷移 38 番 (決定) ボタンを押すと入力内容が反映され、37 番 (× ) ボタンを押すと内容が変更され ないまま、貸出編集前の画面である書籍管理トップ画面または検索結果一覧画面へ遷移する。 図 17: 書籍貸出編集画面 18 1.4.9 書籍情報削除確認 (Bom06) 画面説明 登録書籍の情報を削除を行う画面である。 ボタンと対応する画面遷移 40 番 (削除) ボタンを押すと、登録情報が削除されて書籍管理画面へ遷移する。39 番 (× ) ボ タンを押すと、登録情報を削除せずに書籍管理画面へ遷移する。 図 18: 書籍情報削除確認画面 19 1.5 1.5.1 公開リスト 公開リストトップ画面 (Opn01) 画面説明 公開リストに登録されている書籍の表示と検索を行う画面である。 41 番 (書籍) ボタンを選択すると、その下に書籍情報の詳細が表示される。 ボタンと対応する画面遷移 図 20 の 43 番 (アカウント名) ボタンを押すと、そのアカウントに対して連絡をとるための、 新規メール作成画面へ遷移する。42 番 (× ) ボタンを押すと、詳細画面を閉じる。 44 番 (詳細検索) ボタンを押すと、公開リスト詳細検索画面へ遷移する。 図 19: 公開リストトップ画面 20 図 20: 書籍情報詳細表示画面 21 1.5.2 公開リスト詳細検索 (Opn02) 画面説明 公開リストに登録されている書籍の検索を行う画面である。検索項目は、「書籍のタイトル」 「著者名」「ジャンル」である。 ボタンと対応する画面遷移 「タイトル」 「著者名」での検索では、検索したい言葉を入力して 46 番 (検索) ボタンを押す と、公開リス検索結果画面へ遷移する。 45 番 (× ) ボタンを押すと、詳細検索画面を閉じて、一つ前の画面である公開リストトップ 画面または検索結果一覧が画面へ遷移する。 図 21: 公開リスト詳細検索画面 22 1.5.3 公開リスト検索結果一覧 (Opn03) 画面説明 検索した情報に該当する書籍の一覧を表示する画面である。 書籍情報の該当部分に、検索した言葉やジャンルを含む書籍を一覧で表示する。 ボタンと対応する画面遷移 この画面における操作と画面遷移は、公開リストトップ画面と同様である。 図 22: 検索結果一覧画面 23 1.5.4 新規メール作成 (Opn04) 画面説明 書籍所有者宛ての新規メールを作成する画面である。 宛先は自動入力され、編集することはできない。 「件名 (任意)」 「本文」を入力し 48 番 (送信) ボタンを押すと、入力画面を閉じてメールが送信され、公開リスト検索結果一覧の詳細情報 表示画面へ遷移する。 ボタンと対応する画面遷移 47 番 (× ) ボタンを押すと作成途中のメールが削除され、公開リスト検索結果一覧の詳細情 報表示画面へ遷移する。 図 23: 新規メール作成画面 24 1.5.5 メール送信完了 (Mal03o) 画面説明 メールを送信完了したことを確認表示する画面である。 ボタンと対応する画面遷移 49 番 (確認) ボタンを押すとポップアップが閉じ、公開リスト書籍一覧の詳細情報画面へ遷 移する。 図 24: メール送信完了画面 25 1.6 1.6.1 メール 受信メール一覧 (Mal01) 画面説明 受信したメールの一覧を表示する画面である。 受信メール一覧から 50 番 (閲覧したいメール) を選択すると、メッセージ詳細が表示される。 ボタンと対応する画面遷移 51 番 (送信メール) ボタンを押すと送信メール一覧画面へ遷移する。図 26 の本文中の 52 番 (返信) ボタンを押すと、返信メール作成画面へ遷移する。 図 25: 受信メール一覧画面 26 図 26: 受信メール詳細表示画面 27 1.6.2 送信メール一覧 (Mal04) 画面説明 送信したメールの一覧を表示する画面である。 送信メール一覧から 50 番を選択すると、メッセージ詳細が表示される。 ボタンと対応する画面遷移 53 番 (受信メール) ボタンを押すと、受信メール一覧画面へ遷移する。 図 27: 送信メール一覧画面 28 1.6.3 返信メール作成 (Mal02) 画面説明 受信したメールへの返信を作成する画面である。 宛先は自動入力され、編集することはできない。「件名 (任意)」「本文」を入力し 48 番ボタ ンを押すと、入力画面が閉じて返信メールが送信される。 ボタンと対応する画面遷移 54 番 (× ) ボタンを押すと、作成途中のメールが削除されて受信メール一覧画面へ遷移する。 図 28: 返信メール作成画面 29 1.6.4 メール送信完了 (Mal03m) 画面説明 メールを送信完了したことを確認表示する画面である。 ボタンと対応する画面遷移 49 番ボタンを押すとポップアップが閉じ、送信メール一覧へ遷移する。 図 29: メール送信完了画面 30 1.7 1.7.1 アカウント アカウント情報確認 (Acc01) 画面説明 使用しているアカウントの情報を表示する画面である。 「アカウント ID」「アカウント名」を確認することができる。 ボタンと対応する画面遷移 55 番 (変更) ボタンを押すと、アカウント情報編集画面へ遷移する。 図 30: アカウント情報確認画面 31 1.7.2 アカウント情報編集 (Acc02) 画面説明 登録しているアカウントの情報を編集する画面である。 アカウント名を変更する場合は、任意のアカウント名に変更して 56 番 (変更) ボタンを押す。 パスワードを変更する場合は、「現在のパスワード」「新規パスワード」「新規パスワード再 入力」に半角英数字を 8∼16 字を入力し、57 番 (変更) ボタンを押す。 ボタンと対応する画面遷移 58 番 (登録) ボタンを押し、編集を完了させるとアカウント情報確認画面へ遷移する。 図 31: アカウント情報編集画面 32 1.8 問い合わせ (Hel01) 画面説明 SpringSoft. への問い合わせ先を表示させる画面である。 図 32: アカウント情報編集画面 33 2 画面遷移 前節に掲載した画面レイアウト画像を用い、画面遷移を図 33 に示す。また、画面名と画面 ID を以下の表 1 に示す。 図 33: 画面遷移 34 画面 ID 画面名 Top01 トップ Log01 Log02 Log03 アカウント新規作成 Man01 メイン Acc01 Acc02 アカウント確認 Bom01 Bom02 Bom03 書籍管理トップ Bom04 Bom05 Bom06 書籍追加 Bom07 Bom08 貸出編集 Bom09 編集完了 Opn01 Opn02 公開リストトップ Opn03 opn04 不要書籍検索結果 Mal01 受信メール一覧 Mal02 Mal03 返信メール作成 Mal04 送信メール一覧 Hel01 問い合わせ 利用規約 ログイン アカウント編集 詳細検索 検索結果 書籍編集 削除確認 追加完了 不要書籍詳細検索 メール新規作成 送信完了 35