Restaurant-Chain-Mockup-Extension

🌱概要

入力フォーム付きのレストランチェーン企業のモックアップページ

🏠URL

https://restaurant-chain-mockup-extension.aki158-website.blog

✨デモ

📝説明

このモックアップページは、レストランチェーン企業の一覧が見れるサイトです。

モックアップは、実際のソフトウェア製品の開発前にWebエンジニアやWebデザイナーなどのコンテンツクリエイターが使用し、サイトのレイアウト、フォント、コンテンツの配置などを確認します。

デザインのプロトタイピングやコンセプト確認のための重要なツールであり、デザインの品質向上や効率的なプロジェクト遂行に貢献します。

このモックアップページでは、レストランチェーン企業の一覧が見れるサイトをコンテンツクリエイターが開発することを想定して作成しました。

基本的な機能として、入力フォームによるオプションの選択/モックアップデータの生成/モックアップページの表示ができます。

入力フォームでは、下記項目をカスタマイズして設定することができます。

機能の詳細は、機能一覧を確認してください。

Number of Employees:
salary:
Number of RestaurantLocations:
Minimum postal code:
Maximum postal code:
Download Format:

また、このサービスは、下記プロジェクトで作成したモックアップページの拡張版になります。

Restaurant-Chain-Mockup

補足

説明で登場する用語について補足します。

用語の意味がわからない時は、下記表を確認してください。

用語	意味
モックアップ	Webサイトやアプリケーションのデザインの外観を表現するための試作品のことです。
プロトタイピング	製品開発の過程で、初期のアイデアやコンセプトを具体的な形（プロトタイプ）に変換するプロセスです。

🚀使用方法

URLにアクセスする
入力フォームからオプションをカスタマイズして設定する
Generate ボタンをクリックする
モックアップページを確認する

🙋使用例

一通りの手順のイメージはデモを参考にしてください。

URLにアクセスする
入力フォームからオプションをカスタマイズして下記のように設定する
- Number of Employees: 4
- salary: $2,000 〜 $2,999
- Number of RestaurantLocations: 3
- Minimum postal code: 123-4567
- Maximum postal code: 234-5678
- Download Format: HTML
Generate ボタンをクリックする。
Download Format: でHTML以外を選択すると、モックアップデータは、ダウンロードされます。
モックアップページを確認する。
オプションで設定した入力情報をもとに、モックアップページが表示されます。

💾使用技術

カテゴリ	技術スタック
フロントエンド	HTML
	CSS
	フレームワーク : Bootstrap
バックエンド	PHP
インフラ	Amazon EC2
	Nginx
	Ubuntu
	VirtualBox
その他	Git
	Github
	SSL/TLS証明書取得、更新、暗号化 : Certbot

👀機能一覧

入力フォームページ

機能	内容
Number of Employees:	レストランチェーンが持つ従業員の数を入力できます。
salary:	従業員の給与範囲を下記のいづれかから選択できます。・$1,000 〜 $1,999 ・$2,000 〜 $2,999 ・$3,000 〜 $3,999 ・$4,000 〜 $4,999
Number of RestaurantLocations:	場所の数を入力できます。
Minimum postal code:	場所の郵便番号の範囲を設定できます。郵便番号の下限値を入力できます。
Maximum postal code:	場所の郵便番号の範囲を設定できます。郵便番号の上限値を入力できます。
Download Format:	生成したいファイル形式を下記のいづれかから選択できます。・HTML ・Markdown ・JSON ・Text
Generate	ボタンをクリックすると、ファイルを生成できます。 Download Format:で選択した内容によって生成されるファイルが変わります。・HTML:モックアップページに遷移します。・HTML以外:生成したファイルをユーザーのPCにダウンロードします。　ファイルのイメージは下記ファイル形式をクリックすると、確認できます。　・Markdown 　・JSON 　・Text

モックアップページ

機能	内容
モックアップページの表示	入力フォームページのDownload Format:でHTMLを選択してGenerate ボタンをクリックすると、モックアップページに遷移して表示されます。
アコーディオン	Restaurant Chain Information内のレストラン名をクリックすると、アコーディオンの開閉ができます。

📜作成の経緯

⭐️後で記載する!!!

作成した理由を記載する。

⭐️こだわった点

⭐️後で記載する!!!

テキストや参考にした記事などを再度読み返して技術の理解を深めてから書く。

ここがエンジニアに一番読んでもらいたい箇所なのでできるだけ詳細に書く。

【使えるかもしれない素材】

オブジェクト指向の動的ウェブアプリケーションの開発方法を理解するためのプロジェクトです。

このプロジェクトでは、入力フォームから送信された POST リクエストを処理する必要があります。

クライアント側からリクエストを受け取った後は、データの検証を行い適切なデータを受け取ったかを最初に確認します。

データが適切だった場合は、そのデータをInputとしてレストランチェーン企業に関係する情報を出力します。

これは、入力フォームで選択する　Download Format:　により生成されるファイルの種類が異なります。

4つのファイルのタイプがあり、それぞれのファイルをうまく出力させるためにファイルへの理解も必要になります。

入力フォームや生成されたファイルはoutputでサンプルを確認できます。

このプロジェクトでは、下記のレストランチェーン企業のモックアップページをユーザーがフォームを入力できるように拡張しました。

拡張する際に、既存のプロジェクトに対してどこを変更し拡張させるかを考えて作成しました。

aki158 / restaurant-chain-mockup-extension Goto Github PK