<<プロジェクト名>> '''' ''' have a sense of crisis ''' '''' ((br)) <<プロジェクト説明>> 皆さんは日々、筋トレに取り組んでいますか？((br)) z世代に特化したクイックリサーチサービスの調査によると、現役大学生の5人に2人が筋トレを行っています。((br)) 　　　　<<{筋トレの割合.png}((br)) 　　　　https://prtimes.jp/main/html/rd/p/000000067.000033607.html((br)) また、大学生の筋トレには以下のように大きく5つのメリットがあります。特に3年生の夏というこの大事な時期、2や4などに当てはまる人は多いのではないでしょうか。((br)) 　　　　<<{筋トレのメリット.png}((br)) 　　　　https://dainii-blog.com/college-students-muscle-training/((br)) したがって、私達大学生が充実したキャンパスライフを送ること対して、筋トレをすることは必要条件であることが証明できました。((br)) 私達は、このような筋トレ市場をターゲットとしたアプリを開発し、皆さんのキャンパスライフに貢献します。((br)) ((br)) <<モジュール分けと詳細説明>> !! タイトル画面(横田) * title.html: タイトル文字、おすすめリンク、ボタン、画像などの画面表示 * title.css: テキスト、背景、ボタンのレイアウト * wave.js: 画像のアニメーション 画面上部には筋トレのモチベーションが上がるようなリンクを配置((br)) 筋トレのモチベーションが上がるような写真をローテーションで表示((br)) ログインボタンを押すとログイン画面へ、新規登録ボタンを押すと新規登録画面へ遷移((br)) ((br)) <<{title.png} !! 新規登録画面(KIM) * entry.html: ボタンなどの画面表示と入力項目のチェック * entry.css: テキスト、背景、ボタンのレイアウト 必要項目を入力し、登録ボタンを押すとユーザのデータが登録され、メイン画面へ遷移((br)) 戻るボタンを押すとタイトル画面へ遷移((br)) ((br)) <<{entry.png} !! ログイン画面(横田) * login.html: タイトル文字、ボタンなどの画面表示と入力項目のチェック * login.css: テキスト、背景、ボタンのレイアウト 必要項目を入力し、サインインボタンを押すとメイン画面へ遷移((br)) 戻るボタンを押すとタイトル画面へ遷移((br)) ((br)) <<{login.png} !! メイン画面(辻、横田) * mainpro1.html: ボタンなどの画面表示、3Dキャラの描画 * select.css: テキスト、背景、ボタンのレイアウト 画面上部のタブ、ボタンをクリックすることでトレーニング記録画面、トレーニング入力画面、お手本プレイ画面、吉田の筋肉塾(筋トレを愛するメンバーの個人サイト)、退会画面へ遷移((br)) 3Dキャラはユーザの筋トレ記録により成長し、これを360度動かして見ることができる((br)) 3Dキャラの背景はランダムで変化((br)) ((br)) <<{main.png} !! トレーニング記録画面(鈴木、吉田) * record.html: キャラのレベル、ボタン、メニュー、グラフ記録などの画面表示 * textrecord.html: ボタン、メニュー、数値記録などの画面表示 * record.css: テキスト、背景、ボタンのレイアウト * record.js: 画面遷移のアニメーション、グラフの表示 画面上部には現在の筋トレEXPとキャラのLEVELを表示((br)) タブをクリックすることで筋トレの部位別でボリューム(重量×回数)のグラフまで移動しこれを見ることができる((br)) グラフ右下の⬆でページ先頭に移動する((br)) 戻るボタンを押すとメイン画面へ遷移((br)) ((br)) <<{record1.png} <<{record2.png} !! トレーニング入力画面(畠山、吉田) * input.html: ボタン、入力欄、画像などの画面表示と入力項目のチェック * input.css: テキスト、背景、ボタンのレイアウト * input.js: 入力欄の表示 種目名、部位を選択、または入力し、その後重量と回数を入力する((br)) ＋と−ボタンを押すと入力欄を増やすことができる((br)) 完了ボタンを押すと入力内容が記録されメイン画面へ遷移((br)) 戻るボタンを押すとメイン画面へ遷移((br)) ((br)) ここにinputの写真 !! お手本プレイ画面(鈴木、畠山) * demolplay.html: ボタン、メニュー、動画などの画面表示 * demoplay.css: テキスト、背景、ボタンのレイアウト * demoplay.js: 画面遷移のアニメーション タブをクリックすることでメニューが表示される((br)) 種目を選択するとメンバー自作の筋トレお手本プレイ動画まで移動しこれを見ることができる((br)) グラフ右下の⬆でページ先頭に移動する((br)) 戻るボタンを押すとメイン画面へ遷移((br)) ((br)) <<{demolpay.png} !! 退会画面(鈴木) * retire.html: タイトル文字、おすすめリンク、ボタン、画像などの画面表示 * retire.css: テキスト、背景、ボタンのレイアウト * retire.js: 画面遷移、ボタン、画像のアニメーション 画面上部には筋トレのモチベーションを再燃させるようなリンクを配置((br)) 退会を躊躇させるような写真をローテーションで表示((br)) どうしても退会したい場合は正しい退会ボタンを押すことでタイトル画面へ遷移((br)) 大部分を占める戻るボタンを押すとメイン画面へ遷移((br)) ((br)) <<{retire.png} !! データベース(吉田、横田、KIM) * server.js: バックエンド全般 * Firebase: ユーザのデータ管理など ((br)) !! 3Dキャラ(辻、横田) * Blender: 3Dキャラの描画、トレーニング量に応じたキャラの数値変更など ((br)) <<{Blender.png} ((br)) <> https://gitlab.cis.iwate-u.ac.jp/2024_gr09/test_project/-/tree/master/crisis_app((br)) node.jsをインストール後、crisis_app上でnode.sever.jsを実行すると、実際にアプリを使用することができます。