- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- 会議室予約システム/スパイラル1 へ行く。
- 1 (2015-09-28 (月) 21:36:33)
- 2 (2015-09-28 (月) 23:09:18)
- 3 (2015-09-30 (水) 12:00:40)
- 4 (2015-09-30 (水) 17:13:17)
- 5 (2015-10-01 (木) 12:03:34)
- 6 (2015-10-01 (木) 20:31:21)
- 7 (2015-10-02 (金) 09:23:44)
- 8 (2015-10-03 (土) 07:31:02)
- 9 (2015-10-03 (土) 18:12:46)
- 10 (2015-10-09 (金) 17:48:31)
- 11 (2015-10-10 (土) 12:17:48)
スパイラル1は最初のとっかかりを作る。 ここでも、きちんと要求分析、システム分析、設計、実装、テストの工程を実行する。
企画書 †
- データベースのテーブルの作成
- 予約テーブルを具体的に設計する。
- そのテーブルにphpMyAdminを使ってサンプルデータを入れる。
- データベース内容の表示
- 指定した年月と会議室の予約データだけを取り出して返す。
- カレンダー表示部にそのデータを一覧形式で表示する。
画面イメージ †
要求分析 †
要求分析とは「何を作るのか？」を明確にする工程である。
自分がこれから作ろうとしているソフトウェアがどんなものであるか、明確に定義することが目的となる。
要求分析は、以下の3つの手順からなる。
- ユースケース図の作成
- ユースケース記述の作成
- シナリオの作成
ユースケース図の作成 †
このシステムで登場するユースケースは2つである。 また、登場するアクターはユーザとデータベースの2つである。
&ref(): File not found: "ud1.png" at page "会議室予約システム/スパイラル1";
ユーザは両方のユースケースに関係する。 一方、データベースは片方のユースケースだけに関係する。
ユースケース記述の作成 †
予約を閲覧する †
- 能動アクター：ユーザ
- 受動アクター：データベース
- メインフロー：
- ユーザは年と月と会議室を指定して表示ボタンを押す。
- 表示ボタンが押されたことが制御パネルに通知される。
- 制御パネルは必要な情報を取り出し、システム管理者に通知する。
- システム管理者はデータベース管理者に指定した年月と会議室の予約リストを取り出すよう指示する。
- システム管理者はカレンダー管理者に予約リストを渡す。
- カレンダー管理者は予約リストをカレンダーに表示する。
- 例外フロー：
- データベースアクセスにおいてエラーが発生した場合は、その旨のアラートを表示し、処理を中断する。
起動する †
- 能動アクター：ユーザ
- 受動アクター：なし
- メインフロー：
- ユーザは会議室予約システムのページにアクセスする。
- システム管理者、データベース管理者、カレンダー管理者、制御パネルが生成される。
- 制御パネルはデータベース管理者に問い合わせて会議室リストを得る。
- 制御パネルは選択項目として会議室リストの会議室と全会議室を設定する。
- 制御パネルは現在の年と月を設定する。
- システム管理者に表示ボタンが押された通知を行う。→カレンダーに今月の予定が表示される。
- 例外フロー：
- 例外は発生しない。
シナリオの作成 †
予約を閲覧する †
太郎君は2015年8月の会議室Cの予約を閲覧するため、年に2015を、月に8を、会議室名に会議室Cを入力して表示ボタンを押した。制御パネルはボタンが押されたことをシステム管理者に通知した。システム管理者は受け取った年月と会議室名をデータベース管理者に渡し、データベースから予約リストを取り出した。システム管理者は取り出された予約リストをカレンダー管理者に渡した。カレンダー管理者は渡された予約リストを基にしてカレンダーを更新した。
起動する †
太郎君は会議室の予約状況を確認するために会議室予約システムのページを開いた。システムが起動し、システム管理者、データベース管理者、カレンダー管理者、制御パネルが生成された。制御パネルはデータベース管理者から会議室のリストを取り出し、自分の選択項目に全会議室と共に追加した。さらに、現在の年と月が取り出され制御パネルに設定した。制御パネルはその年と月を自身の入力欄に設定し、システム管理者に対して年月と全会議室の予定を表示するように通知した。全会議室の今月の予約状況が表示された。
システム分析 †
システム分析では、要求分析で明確化したシステム要求を設計につなげるための橋渡しを行う。 具体的には、
- オブジェクトの抽出
- シーケンス図の作成
- 初期クラス図の作成
を行う。
オブジェクトの抽出 †
オブジェクト指向開発においては、システムに登場する「もの」がオブジェクトである。 が、どれが「もの」なのか？、を決めることはなかなか難しい。
システム中に登場する「もの」を決めるには、システム全体を見渡して完成イメージを固めつつ、これまでの経験や勘を動員して行う必要がある。 かなり経験豊富な開発者でも、最初の段階から「もの」を見分けることは難しいし、そもそも「もの」にするのかしないのか、どちらでもよい場合もあるからである。
例えば、「登録」、「編集」、「削除」、「表示」という4つのボタンを持つシステムがあったとしよう。 これら4つのボタンをそれぞれ別な「もの」として分析を進めることもできるし、4つとも同じボタンでラベルが違うだけだ、と見ることもできる。
したがって、スパイラルが進むにつれてオブジェクトが変更になることもありうる。
しかし「もの」を決める方針はある。
それは要求分析の最後に書いたシナリオである。
シナリオは、各ユースケースが実行されるときの様子を具体的に記述した文章であるから、その文章の中にシステムに登場する「もの」がかかれていることが多い。特に名詞や名詞句はその候補となる。
そこで、もう一度シナリオを名詞と名詞句に着目して見なおしてみる。
予約を閲覧する †
太郎君は2015年8月の会議室Cの予約を閲覧するため、年に2015を、月に8を、会議室名に会議室Cを入力して表示ボタンを押した。制御パネルはボタンが押されたことをシステム管理者に通知した。システム管理者は受け取った年月と会議室名をデータベース管理者に渡し、データベースから予約リストを取り出した。システム管理者は取り出された予約リストをカレンダー管理者に渡した。カレンダー管理者は渡された予約リストを基にしてカレンダーを更新した。
起動する †
太郎君は会議室の予約状況を確認するために会議室予約システムのページを開いた。システムが起動し、システム管理者、データベース管理者、カレンダー管理者、制御パネルが生成された。制御パネルはデータベース管理者から会議室リストを取り出し、自分の選択項目に全会議室と共に追加した。さらに、現在の年と月が取り出され制御パネルに設定した。制御パネルはその年と月を自身の入力欄に設定し、システム管理者に対して年月と全会議室の予定を表示するように通知した。全会議室の今月の予約状況が表示された。
この中で、今回のシステムでオブジェクトとして抽出するのは以下の4つである。
- システム管理者
- データベース管理者
- カレンダー管理者
- 制御パネル
このシステムにおいて、ボタンは押されたことを通知するためだけに使用されるので、わざわざオブジェクトにしなくても良いと考えられる。 また、リストはJavaScriptでは標準でサポートされるオブジェクト（ここでいう「もの」ではない）があるので、これもわざわざオブジェクト（＝もの）として抽出しなくても良いと考えられる。（C++やJavaなどの一般的な言語ならオブジェクトして抽出するかもしれない）
シーケンス図の作成 †
シーケンス図とは、ユースケースごとにメッセージの流れを時間を追って記述した図である。 したがって、ユースケース記述を図で表現したものとなる。 この図を描くことにより、オブジェクト間のメッセージ関係がはっきりするので、クラス図を描く基になる。
予約を閲覧する †
予約の閲覧はユーザが表示ボタンを押したタイミングで開始される。 ここでは、表示ボタンが押された通知は直接的には制御パネルに伝えられ、制御パネルが必要な情報（年、月、会議室名）を取り出して、システム管理者にその情報を渡す。 それを受け取ったシステム管理者は、データベース管理者に情報を渡してデータベースから予約リストを取り出してもらう。 取り出した予約リストをカレンダー管理者に渡し、表示が更新される。
起動する †
起動時の処理はページが読み込まれた時に開始される。 ここでの最初のオブジェクトは、このシステムそのものである。つまり、ページである。 ここでは各オブジェクトの生成処理が行われるが、その順序が重要である。 なぜなら、オブジェクトAがオブジェクトBを知っている必要がある場合、先にBを生成し、その後Bを与えてAを生成する方が楽だからである。 もしAとBが相互に知っていなければならないオブジェクトである場合は、Aを先に作り、Aを与えてBを作り、その後にAにBを教えてあげる必要がある。 今の場合、「予約を閲覧する」のシーケンス図から、制御パネルはシステム管理者を知っており、システム管理者はデータベース管理者とカレンダー管理者を知っている、という関係がわかり、このシーケンス図から制御パネルはデータベース管理者を知っていることがわかるので、生成順序が決定する。
初期クラス図の作成 †
上記のシーケンス図より各クラスの関係がわかるので、初期クラス図は以下のようになる。
なお、ここではオブジェクト＝クラスとして扱っているが、必ずしもそうはならない場合もあるので、初期クラス図を作成する前にはクラスについての検討が必要である。
設計 †
設計工程では、そのままプログラムコードのスケルトンを生成できるような詳細クラス図を作成することを目標とする。
そのため、以下の手順を行う。
- クラス名の変更
- 詳細シーケンス図の作成
- 詳細クラス図の作成
クラス名の変更 †
クラス名や変数名は日本語でも扱えるが、カナ漢字変換が面倒なので英語化しておく方が良い。
- システム管理者 : SystemManager
- データベース管理者 : DBManager
- カレンダー管理者 : CalendarManager
- 制御パネル : ControlPanel
詳細シーケンス図の作成 †
詳細シーケンス図の作成では、クラス名を英語に変えるとともに、メソッド名と引数も決定する。また、Ajax通信を使用する部分では、非同期に呼び出しが行われるので、メッセージの戻り値として描いていた初期シーケンス図と違い、非同期メッセージ通信として描く必要がある。
予約を閲覧する †
データベースへの問い合わせにAjaxを使用している。 このため、この部分の処理は実際には非同期に行われるため、予約リストの獲得は戻り値ではなくメッセージ通信によって行われる。 したがって、メソッド呼び出しと戻り値の形で描いていたgetReservation()メッセージは、非同期メッセージとして書き直してある。
起動する †
こちらも同様にAjaxを使用している部分については非同期メッセージに書き直した。 さらに、上記のシーケンス図とこのシーケンス図から、データベース管理者はシステム管理者と制御パネルを知っている必要があることがわかるので、その設定のためのメッセージを追加している。
詳細クラス図の作成 †
以上の考察をもとにして詳細クラス図を描くと次のようになる。
このクラス図にはすべてのクラスについて、持つべきメンバ変数とメソッドが記入されている。
PHPコードについて †
この設計において2つのPHPコードを使用している。
1つは予約リストを得るためのもの、もう1つは会議室リストを得るためのものである。
それぞれのPHPファイル名は、getReservationList.phpとgetRoomList.phpである。
- getReservationList.php
- 年、月、会議室を与えると、該当する予約リストを返す。
- 与える引数リストは以下の通り。
- year:年
- month:月
- room:会議室名
- ただし、会議室名として"全会議室"という文字列を与えるとすべての会議室の予約リストを返す。
- getRoomList.php
- 引数なしで呼び出すと、登録してある会議室のリストを返す。
画面の設計 †
画面の構成はHTMLとCSSにより行う。
最初に示した画面構成を実現するには、次のような構造が考えられる。
ここでは、画面全体を3つの領域に分け、上にタイトルを、2段目に制御パネルを、残りの部分が予約表示部である。
実装 †
HTML5による開発を行う際は、ソースコードとして実装すべきコードの種類は次の5種類である。
- SQLによるデータベース作成と準備 (3つのテーブル users,rooms,reservations)
- PHPによるデータベース操作 (getReservationList.php, getRoomList.php)
- HTMLによるページ構造 (index.html)
- CSSによる見た目 (my.css)
- JavaScriptによる処理 (my.js)
以下で、それぞれについて実装していく。
SQLコード †
phpMyAdminにアクセスし、自分のデータベースを選択したら、以下のSQLを実行し3つのテーブルを作成する。
PHPコード †
PHPによるデータベースアクセス処理は、処理目的ごとに作られる。 ここでは2種類作成する。
