画面遷移図を読んでサイト上の動きを考えてみよう
次に、画面遷移図の読解を進めていきます。サンプルソースフォルダ内にある「EC画面設計書.pdf」を開いてください。まずは、1ページ目の画面遷移図を見てみましょう。
この図は、どの画面からどの画面に、どこをクリックすることで遷移するのかを示したものです。今回構築するECサイトの場合、商品一覧画面（item_list.php）がトップページとなりますので、商品一覧画面から矢印を目で追い、ざっと目を通してください。
今回はこの画面遷移図のみを取り上げて説明をし、実際の制作段階で必要に応じて2ページ目以降の個別の画面機能にも目を通していく予定です。
それでは、今回制作対象となる各画面を見ていきましょう。
商品一覧画面（item_list.php）
商品を一覧で検索する画面です。初期表示時には、データベースの商品情報テーブルに入っている全商品が表示されます。画面左側に、［商品名］のテキストボックスと［カテゴリ］のチェックボックスがありますが、これらの入力フォームで入力後、［検索］ボタンを押すことで絞込み検索ができます。
検索結果の画面イメージは「1´（ダッシュ）」のイメージになります。
この左メニューにはさまざまなメニューがあり、それぞれのボタンをクリックすることで次の画面に遷移できます。また、この左メニューは全画面に共通で存在することに注意してください。
商品の画像をクリックすると、商品詳細画面に遷移します。
商品詳細画面（item_detail.php）
商品詳細画面では、商品の拡大画像、詳細説明、価格などの詳しい情報を閲覧できます。
［個数］のセレクトボックスがあり、個数を選択し［カートに入れる］をクリックするとショッピングカートに商品を入れ、カート画面に遷移します。
カート画面（cart.php）
カート画面はサイトにログイン前かログイン後かによって、表示が変わります。ログイン後の場合は、番号「3´」の画面のように、［注文確定］ボタンが表示されます。
「3」画面と「3´」画面は、別のPHPファイルを用意するわけではありません。cart.phpという同一のファイルの中で、条件分岐でログイン状態を判断し、ログイン後であればボタンを表示します。ここで［注文確定］ボタンを押す事で、データベースの注文履歴テーブル、注文履歴詳細テーブルにレコードを追加します。
会員登録画面（member.php）
会員登録画面には、各画面の左メニューの［会員登録］ボタンから遷移します。
この画面もカート画面と同じく、ログイン状態によって表示が変わります。未ログインの場合は番号「4」の会員登録（新規）画面のように、テキストボックスを空の状態で表示し、新規会員の登録を行います。
ログイン済みの場合は、番号「4´」のように以前登録した会員情報を既にテキストボックスに入力した状態で表示します。新規登録の場合は、会員情報テーブルにINSERT、更新の場合は会員情報テーブルをUPDATEします。
今後の開発の進め方
これまでの設計書の解読をふまえて、次回の記事からは実際にプログラムの作成（開発）を進めていきます。
HTMLだけでできた画面イメージは既に存在しますので、まずはそれをローカルPC上で動作させておきましょう。サンプルソースの「ec_html」フォルダをフォルダごと、「C:\xampp\htdocs」の下に置き、http://localhost/ec_html/item_list.phpにアクセスしてください。
「ec_html」フォルダ内のファイルをメモ帳などで開いてみてください。現段階ではHTMLのみで記述されています。これらのファイルにこれから少しずつPHPを埋め込んでいき、動的サイトに仕上げていきます。
プログラムの作成は、基礎編のような小規模なものであれば一気に作ることもできますが、今回のECサイトのように機能が豊富なサイトを制作する場合、一気にプログラムを作ってしまうと、次のような問題が発生しがちです。
- プログラムがうまく動作しなかった場合、どの機能でエラーが出ているのかを特定し辛い
- どの機能を作ってどの機能を作っていないのか、進み具合の把握に漏れが出やすい
一気に作ることをできるだけ避けた方が、頭の整理もしやすく、混乱することなく制作を進めることができます。この応用編では、画面の機能を小分けにして、ステップバイステップで作成を進めていきます。
まとめ
今回は、応用編ECサイトの設計書の理解を進めていきました。本来のサイト制作では、このような設計書より、さらに細かな資料を用意します。 設計書の段階で技術的に可能であることをきちんと検証していれば、プログラム作成の段階に入ってからの手戻りが少なく、主観や思い込みのない正確な理解をチームで共有することができます。
個別の画面に関しては、必要に応じて次回以降説明していきます。まずは画面遷移図やデータベース設計書に目を通し、ECサイトのイメージを掴んでおきましょう。
