自動販売機を作ってみよう part1 - 要件定義と基本設計

デザイナーからエンジニアになろうと奮闘しています3○歳です。
備忘録かつ復習用として初めてQiita投稿します。

自分について

web UI/UXデザイナーとしてやってます。
web業界かれこれ6年以上にもかかわらず、デザインができるということが強みというか仇というかになり、コーディングは別のエンジニアが担当してくれる会社にばかりおりました。
コーディングをやらずにかれこれ7年以上…いにしえの知識のままここに居て、単価も上がらず細々とやっています。
単価あげたい！ということで、デザインもできるエンジニアを目指そうとしている次第。
B先生の指導の下、半年間で現場に出ることを目指して。

要件定義

課題として「自動販売機をつくる」事が目的です。
実際にお客さんがいる想定で制作していきます。

想定するお客さんとの会話

自販機の要件を以下から読み取り機能を洗い出す
飲料形の物流会社。
何十年の昔からやってる会社

A社部長
A社課長

課長
「要件を言うとWEBブラウザ（クローム）を使って
デザインはいいから自動販売機システムがほしいんだよね」

部長
「自動販売機と同じようにボタンを押すとジュースが出てくるみたいなやつだよわかる？」

課長
「ボタン押したらページが切り替わって何が出てきたかを表示してくれるといいな」

部長
「とにかく自動販売機と同じ感じで！」

課長
「あ、あとお客さんみたいに買えるのだけだとつまらないから、補充もできるようにしておいてさ、自動販売機ってどういうものかをブラウザでできるといいですよね！部長」

部長
「お、いいねそれ！冴えてるな課長。それを使えばECサイトみたいなこともできるな！」

課長
「さすが部長！っていうことでまずは自販機のシステムをお願いします。」

やっていく

システムに必要な機能を洗い出していきます。

自動販売機にある機能ってなんだったっけ？を思い出しながら仕様をリストアップ

• お金を入れる
• おつりを出す
• 商品一覧を表示
• 売り切れることがある　売り切れの場合はボタンが押せない（表示もする）
• 飲料の種類によっては「冷たい」「あったかい」の二種類から選べる
• 缶とペットボトルがある
• 連続して購入が可能か（機能としてもりこむ？）
• 商品を購入できる(缶もしくはペットボトルを排出する)
• 価格が設定できる
• 商品を補充できる
• 商品在庫を確認できる
• 売り上げ額を確認できる
• 価格が設定できる
• 商品を補充できる
• 商品在庫を確認できる
• 売り上げ額を確認できる

リストアップした仕様を整理

より細かく機能を分解する。
カテゴリに分ける。
使う人をわける。

• ユーザ

  • お金関連
    • お金を入れる
      • 入れた額を表示
      • 入れる口が別れてる（そもそもお札って対応するの？）
    • おつりを出す(お金を返却できる)
      • おつりを排出する
        • 小銭の変換機能（100円が釣り銭切れ等）
  • 商品選択
    • 商品一覧を表示　ユーザに選択させるため
    • 売り切れることがある　売り切れの場合はボタンが押せない（表示もする）
    • 飲料の種類によっては「冷たい」「あったかい」の二種類から選べる
    • 缶とペットボトルがある
    • 連続して購入が可能か（機能としてもりこむ？）
  • 商品排出
    • 商品を購入できる(缶もしくはペットボトルを排出する)
      

• 管理者

  • 管理機能
    • 価格が設定できる
    • 商品を補充できる
    • 商品在庫を確認できる
    • 売り上げ額を確認できる

お客さんに質問する

リストアップする中で湧いた疑問質問を聞いていきます。
仕様が曖昧なままではシステムは作れない。疑問質問はすべて細かくお客さんにぶつけて明確にしましょう。

Q1. お札対応ってするんですか？
最初の段階は小銭だけでOKですが、後々は対応したいです。

Q2. 連続購入ってどうします？
標準機能が揃ってからつけましょう

Q3. つめたいあったかい選択できるようにしますか？
選択できるようにしましょう

Q4. 缶がメインだと思っていますが、ペットボトルや紙パック等は対応しますか？
缶とペットボトルでOKです

Q5. ソフトドリンクだけですか？
ソフトドリンクだけです

Q6. 1缶から購入するようにできますか？（まとめうり専用じゃないか）
ECは後ほど考えるのでドリンクの自動販売機の定番の機能をお客さんに提供したい

Q7. WEB上で売り出すものか、機械に内蔵するものなのか
Chromeのブラウザでまずは使用できればOKです。
後はすべてのブラウザに対応させたいと思っています。
IE、Firefox、Chrome
機械につけることは考えていません。

Q8. 価格設定って最初に管理者の部分を作らないのであればいくらにします？
缶は120円　ペットボトルは160円としてください。

基本設計

必要なテーブル及びURL、画面の洗い出しを行います。

ページと機能を洗い出す

まずは必要なページと、ページに含まれる機能をリストアップします。

• ページ

  • 自分の所持金設定ページ
    • 所持金入力テキストボックス
      • 9999円以上は設定ができないようにする
      • マイナスの値を許容しない
      • 文字列も受け付けない
      • 半角数字のみ受付
      • 小数点もNG
      • 10進数のみを受け取る
    • 確定ボタン（リンク）
      • 上記の内容に宛はまった場合は何がだめだったか赤文字で出力してこの画面に戻る
      • 金額を入れるページへ遷移
  • 金額を入れるページ
    • 所持金表示
      • マイナスの値ではない
      • 文字列として数字が表示されていること
    • 料金を入力するテキストボックス
      • 文字列を受け付けない(stringで通じます)
      • 半角数字のみ受付
      • 小数点NG(floatって呼んだりします)
      • 10進数のみを受け取る
      • 所持金以上は入力できない
      • マイナスを受け付けない(integer マイナスの値を含めないものをunsigned integer)
    • 入れるボタン
      • いくら入ったか表示する
    • 確定ボタン
      • 上記の内容に宛はまった場合は何がだめだったか赤文字で出力してこの画面に戻る
    • 金額を入れるページへ遷移
  • 商品選択画面
    • 入れた料金が表示されています
    • 商品すべて一覧で出てきます
      • 商品名　包装種別　温度種別　金額　表示
    • 買える商品だけリンクがついています（選択できます）
      • 買えない商品はリンクを外す
      • 売切の商品は赤文字で出力する
      • リンクを押すと商品排出ページへ遷移
    • 戻るボタン（金額を入れるページに戻る）
      • 金額を保持したまま金額を入れるページへ遷移
  • 商品排出画面
    • 購入した商品の表示
      • 商品名　金額　包装種別　温度種別　個数　表示
    • 無事買えました！！っていう表示をして、金額設定画面に戻れるボタン（リンク）を用意する

URLを決める

ページ毎にControllerが必要になります。（場合にもよる）
4ページ分必要。
URLは機能ごとに設計されることが多い。

http://haishutu.com/shojikin/index　表示
viewにデータは渡されない
エラー内容があったらviewへ渡す

http://haishutu.com/shojikin/execute　チェックしかしてない
入力されたデータのチェック
チェックがNGだったらshojikin/indexへリダイレクト
その時にエラーの内容をindexへ渡す
問題なければshohin_select/indexへリダイレクト

http://haishutu.com/shouhin_select/index
http://haishutu.com/shouhin_select/execute

controller

Class shojikin
function index
function execute

MVCについて

model
view
controller

• controller
  Viewからデータを受け取ってModelにデータを受け渡し、Modelから返却されたデータをViewに渡す

• model
  controllerから受け取った値を使ってDBの操作及び計算等ビジネスロジックで処理を行い、Viewに必要なデータを作成する

• view
  html css post get を使ってcontrollerへデータを渡す

DB設計

データとして必要な物をリストアップしていく。

• 物理的
  • 商品
• 概念的
  • 商品種別(缶・ペットボトル)
  • 商品種別(あったかい・つめたい)
  • 商品価格設定

上記必要な物にデータを付与していく

• 物理的
  • 商品 - もともとデータとして入っていてほしいもの(master)
    • id: integer 主キー
    • display_value: string 商品名

id	display_value
1	コーラ
2	オレンジジュース

• 概念的
  • 商品種別(缶・ペットボトル)- もともとデータとして入っていてほしいもの(master)
    • id: integer 主キー
    • code: string 英字で書かれた缶もしくはペットボトル
    • display_value: string 実際ブラウザに表示する名称

id	code	display_value
1	can	缶
2	pet	ペットボトル

• 商品種別(あったかい・つめたい)
  • id: integer 主キー
  • code: string 英字で書かれた温度
  • display_value: string 実際ブラウザに表示する名称

id	money_amount	display_value
1	cold	つめたい
2	hot	あったか〜い

• 商品価格設定
  • id: INT 主キー
  • money_amount: INT 金額
  • display_value: VARCHAR(255)

id	money_amount	display_value
1	100	100円
2	120	120円
2	150	150円

データとして新たに投入するべきもの

• 売上履歴
  • 商品
    • いくら投入したか
    • いくらおつりを出したか
    • いつ買ったか
    • 在庫管理