comop_概要

マスクが購入できるショッピングサイトの概要
（使用スキル:Java/JavaScript/SQL/ Tailwind CSS Tomcat 形式:GitHub）

Transcript

1. 1 1 comop
2. 2 目次 1 プロジェクト概要 ............................................................................................................................................... 3 1.1 スケジュール ............................................................................................................................................... 3 1.2 環境 ............................................................................................................................................................. 3 2 アプリケーションの概要 .................................................................................................................................... 4 2.1 アプリケーション名 .................................................................................................................................... 4 2.2 アプリケーションコンセプト ..................................................................................................................... 4 2.3 機能一覧 ...................................................................................................................................................... 4 ・ログインしていない状態でできること .......................................................................................................... 4 ・ログイン状態でのみできること ....................................................................................................................... 5 ・管理者機能 ........................................................................................................................................................ 5 2.4 機能説明 ...................................................................................................................................................... 6 3 参考サイト等 .................................................................................................................................................... 21 3.1 参考サイト ................................................................................................................................................ 21 3.2 使用したプラグイン .................................................................................................................................. 21 3.3 参考文献 .................................................................................................................................................... 22 改善点 ............................................................................................................................................................... 22
3. 3 1 プロジェクト概要 1.2 スケジュール 開発期間は３ヵ月ほど 1.3 環境 開発環境 − OS: Windows10 pro − 言語: Java 8, HTML, CSS, JavaScript − データベース: MySQL 8.0.20 − サーバー: Tomcat 8.5.45 動作環境 − ブラウザ：Google Chrome64 以上 − 携帯端末からの利用は、想定しない。 − Web ブラウザのバージョンによる動作の違いは、特に考慮しない。
4. 4 2 アプリケーションの概要 2.1 アプリケーション名 − comop 2.2 アプリケーションコンセプト − テーマ： マスク通販 − 詳細 ： マスクをオンラインで販売しているサイト。 2.3 機能一覧 ・ログインしていない状態でできること – トップページの閲覧（おすすめ 5 件、ランキング 5 件） − 商品の閲覧（全件）、絞り込み表示 – 商品詳細の閲覧 – ログイン − アカウント作成
5. 5 ・ログイン状態でのみできること – トップページの閲覧（おすすめ 5 件、ランキング 5 件） − 商品の閲覧（全件）、絞り込み表示 – 商品詳細の閲覧 – 商品の購入 – 登録情報（閲覧、編集） – 購入履歴、発送状況の閲覧 – ログアウト – 退会 – お気に入りの登録 – お気に入り登録商品の閲覧 – ショッピングカートに追加 – ショッピングカートの閲覧 – ポイント交換商品の閲覧、購入 ・管理者機能 − ユーザー管理（削除、一覧表示） − カラー管理（登録、削除、一覧表示） – 商品管理（登録、編集、削除、一覧表示） – ポイント交換商品管理（登録、編集、削除、一覧表示） – ログアウト
6. 6 2.4 機能説明 − TOP 画面（ログイン前） 「ログイン」ボタンからログイン画面に進む − ログイン画面 アカウントがない場合、「はじめてご利用の方」から新規会員登録ができる。 アカウントを持っている方はメールアドレスとパスワードを入力してログイン。
7. 7 − 新規登録画面 ユーザー名とメールアドレスとパスワードを入力して、「会員登録する」を押すと 会員登録ができる。 会員登録が完了すると、「会員登録が完了しました」と表示される。
8. 8 − TOP 画面（ログイン後） ログインが完了すると、「ログイン」ボタンがなくなり「〇〇様」ボタン、お気に入り（♡）、カ ート、三本バーのアイコンが表示されるようになる。
9. 9 − 商品一覧画面 左上の検索窓から商品のキーワード検索ができる。 画面左側の条件指定でマスクを探すことができる。 − 商品検索後の画面
10. 10 − ポイント交換商品一覧画面 − ポイント交換商品交換画面 交換ボタンをクリックすると、確認画面が表示されて、交換できる。
11. 11 − 商品詳細画面 カートに入れるボタンで、カートに追加ができる。 ♡をクリックするとお気に入りに追加でき、お気に入りページ/TOP 画面から確認でき る。
12. 12 − カート画面 カートに追加すると、画面右側の「レジへ進む」ボタンで購入画面へ。 「ショッピングを続ける」ボタンでショッピングを再開できる。
13. 13 − 購入手続き画面 お届け先、配送方法、お支払い方法を入力する。 支払い方法はクレジットカードのみで、カード情報を入力すると、確認画面が出てき て、そのまま進むと購入完了となる。
14. 14 − 注文確認画面 送信ボタンを押すと商品を購入できる。 − 〇〇様（マイページ） 登録情報の編集、注文履歴・発送状況の確認、ログアウトができる。
15. 15 会員登録情報をクリックすると登録情報の編集ができる。 ポイント交換商品の発送状況を確認できる。
16. 16 退会前の確認事項にチェックをつけ、退会ができる。 − 登録内容の編集画面 基本情報（メールアドレス、電話番号、郵便番号、住所）の変更ができる。
17. 17 現在のパスワードと新しいパスワードを入力し、パスワードの変更ができる。 − お気に入り一覧画面 お気に入りに登録した商品を閲覧、お気に入りからの削除ができる。
18. 18 − 購入履歴画面 過去に購入した商品一覧を閲覧できる。 − 商品画面一覧（管理者） 上部のタブから商品の一覧表示と削除、商品の追加、商品の編集ができる。
19. 19 − 商品画面一覧（管理者） 上部のタブからポイント交換商品の一覧表示と削除、ポイント交換商品の追加、ポ イント交換商品の編集ができる。 − ユーザー一覧画面（管理者） 登録されているユーザー情報の一覧表示画面。パスワードは管理者画面からでも 確認できなくなっている。
20. 20 − カラー一覧画面（管理者） 上部のタブから色の一覧表示と削除、色の追加できる。 – ログアウト（管理者） 管理者画面からログアウトし、ログイン画面に戻る。
21. 21 3 参考サイト等 3.1 参考サイト − ZOZOTOWN https://zozo.jp/ − CSS https://tailwindcss.com/docs/installation − UI https://daisyui.com/components/button/ − Java Scrip https://alpinejs.dev/directives/data − カウントアップ（アニメーション） https://qiita.com/nishinoshake/items/b91236c77b1987036656 − 文字の置き換え https://b.0218.jp/20140616215208.html − HTML の共通部分インポート https://qumeru.com/magazine/7 − JSON データの取り込み https://www.i-ryo.com/entry/2020/06/05/192657 3.2 使用したプラグイン − 郵便番号から住所入力 http://zipcloud.ibsnet.co.jp/ − 名前入力時の自動カナ入力 https://github.com/ryo-utsunomiya/vanilla-autokana
22. 22 3.3 参考文献 − 授業テキスト • 改善点 − レスポンシブしない。 − 画面のデザインがイマイチ。