PHPを独学で勉強しだして4ヶ月。。
そろそろポートフォリオがてらWebアプリケーションを作成してみようと動き出しました。
作っていくのは【晩御飯ルーレット】です。
今日の晩御飯を決めてくれるありがちなやつです笑（発想力が欲しいです。。）
アプリ開発の流れ
今回は初めてのアプリ開発なのでしっかり流れに沿ってやっていきたいと思います。
- 要件定義
- 設計
- 制作
- テスト
- 公開
◇環境
- Mac
- VS Code（エディタ）
- MAMP（ローカル環境）
- Xサーバー
要件定義
まずはアプリの**要件定義（要望と実現方法を定義）**から始めます。
◇アプリの概要
- 今日の夜ご飯の献立を決めてくれる
- カテゴリごとに絞り込める
- 食材でも絞り込める
◇アプリの目的
今晩の夜ご飯に悩まないように
ポートフォリオ制作として
設計
次にアプリを作る上でのフローチャートやアプリの設計、データベース設計をまとめます。
◇アプリの流れ
- （前準備）データベースにメニューデータを蓄積
- ボタンをクリックされたらランダムにデータベースから取得
- 絞り込みがあったら該当するものからランダムに取得
◇データベース設計
- メニューID
- メニュー名
- カテゴリ1（メインor副菜or作り置き）
- カテゴリ2（肉料理/魚料理/一品料理/デザート）
- 食材
- レシピ（作り方）
◇必要なページ
- トップページのみ
◇構成
- ルーレットスタートボタン
- カテゴリ絞り込みボタン
- 食材絞り込み用入力ボックス
- 晩御飯表示場所
- データベースから条件に合うものを取得
制作
◇実際のコーディング作業
- HTMLで構造を作成（1.5時間）
- CSSでデザイン/レスポンシブ対応（1.5時間）
- PHPで機能を実現（1時間）
- SQLでデータベースと連携取得（1時間）
- データベースにデータ蓄積（ここが一番大変…）（∞時間）
本当ならPhotoshopとかfigmaでデザインカンプ作ってからのが早いんだろうけどスキルがまだないのでコーディングしながらレイアウトを考えるためHTML/CSSにやけに時間がかかってしまいました。
苦戦したところ
- SQLで複数の条件（入力で変化する）の指定
- 複数の条件に合致＋ランダムで抜き出す
テスト
とりあえず最初に必要な機能を実装し、ローカル環境でテスト稼働してみました。
色々と予期せぬ挙動や不具合が出てきたので潰していきます。
- 複数条件を全て指定されなかった場合の処理
- ルーレット後の2回目の条件の保持
- UX（ユーザーエクスペリエンス）の向上
ついでにエスケープ処理をもろもろ施していきます。
- 入力値に悪意あるコードが埋め込まれた時
- 空白を入力された時
これらはhtmlspecialcher関数やPDOなどで実装しました。
公開
そして実際にできたWebアプリケーションをレンタルサーバーにアップロードして公開してみました。
まだ機能的には全て実装できていませんがゆくゆく追加していきたいと思います。
◇ゆくゆく実装したい機能
- レシピ（作り方）の表示
- 1週間分の献立も表示
- ルーレットのエフェクト
- セキュリティ面の向上？
- メニューをユーザーが登録できるように
- ユーザーが登録したメニューからルーレット開始
まだまだ勉強中ですのでおかしなところがあったら教えてもらえると嬉しいです！
ご覧いただきありがとうございました。