<<プロジェクト名>>
'''' ''' 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))
<<アプリ概要>>
このアプリはただの筋トレ記録アプリではありません。私達トレーニーが入力した筋トレ記録は3Dキャラに反映され、共に成長することでモチベーションが維持される、他に類を見ない最高の筋トレアプリです。((br))

私達とこの筋トレアプリを使って、残り少ない大学生活をより充実させていきましょう！((br))

((br))
<<モジュール分けと詳細説明>>
!!○フロントエンド
!! タイトル画面(横田)
* title.html: タイトル文字、おすすめリンク、ボタン、画像などの画面表示
* title.css: テキスト、背景、ボタンのレイアウト
* wave.js: 画像のアニメーション

画面上部には筋トレのモチベーションが上がるようなリンクを配置((br))
筋トレのモチベーションが上がるような写真をローテーションで表示((br))
ログインボタンを押すとログイン画面へ、新規登録ボタンを押すと新規登録画面へ遷移((br))
((br))
<<{title.png}

!! 新規登録画面(KIM)
* entry.html: ボタンなどの画面表示と入力項目のチェック(KIM)
* 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))
((br))
<<{main.png}

!! トレーニング記録画面(鈴木、吉田、KIM)
* record.html: キャラのレベル、ボタン、メニュー、グラフ記録などの画面表示(鈴木)
* textrecord.html: ボタン、メニュー、数値記録などの画面表示(KIM)
* record.css: テキスト、背景、ボタンのレイアウト(鈴木)
* record.js: 画面遷移のアニメーション、レベル・経験値・グラフの表示、レベルと経験値の計算(鈴木、吉田)

画面上部には現在の筋トレ量に基づくEXPとキャラのLEVELを表示((br))
タブをクリックすることで筋トレの部位別でボリューム(重量×回数)のグラフまで移動しこれを見ることができる((br))
グラフ右下の⬆でページ先頭に移動する((br))
戻るボタンを押すとメイン画面へ遷移((br))
((br))
<<{record1.png}
<<{record2.png}((br))

* textrecord.html: ボタン、メニュー、数値記録などの画面表示(KIM)
* textrecorddb.js: データベースから記録を受け取る(KIM)

タブをクリックすることで筋トレの部位別で日付、回数、重量が表示される((br))
((br))
<<{textrecord.png}((br))

!! トレーニング入力画面(畠山、吉田)
* input.html: ボタン、入力欄、画像などの画面表示と入力項目のチェック(畠山、吉田)
* input.css: テキスト、背景、ボタンのレイアウト(畠山)
* input.js: 入力欄の表示(吉田)

種目名、部位を選択、または入力し、その後重量と回数を入力する((br))
＋と−ボタンを押すと入力欄を増やすことができる((br))
完了ボタンを押すと入力内容が記録されメイン画面へ遷移((br))
戻るボタンを押すとメイン画面へ遷移((br))
((br))
<<{input(1).png}

!! お手本プレイ画面(鈴木、畠山)
* demolplay.html: ボタン、メニュー、動画などの画面表示(鈴木)
* demoplay.css: テキスト、背景、ボタンのレイアウト(鈴木、畠山)
* demoplay.js: 画面遷移のアニメーション(鈴木)

タブをクリックすることでメニューが表示される((br))
種目を選択するとメンバー自作の筋トレお手本プレイ動画まで移動しこれを見ることができる((br))
グラフ右下の⬆でページ先頭に移動する((br))
戻るボタンを押すとメイン画面へ遷移((br))
((br))
<<{demolpay.png}

!! 退会画面(鈴木)
* retire.html: タイトル文字、おすすめリンク、ボタン、画像などの画面表示
* retire.css: テキスト、背景、ボタンのレイアウト
* retire.js: 画面遷移、ボタン、画像のアニメーション

退会する気がなくなるようにこのページだけ画面遷移の秒数を変え重い感じにしている((br))
画面上部には筋トレのモチベーションを再燃させるようなリンクを配置((br))
退会を躊躇させるような写真をローテーションで表示((br))
どうしても退会したい場合は正しい退会ボタンを押すことでタイトル画面へ遷移((br))
大部分を占める戻るボタンを押すとメイン画面へ遷移((br))
((br))
<<{retire.png}

!! ○バックエンド(吉田、横田、)
* server.js: バックエンド全般(吉田(KIM))
*HTMLの<script>の中身:HTMLファイルとserver.jsのソケット通信(吉田)
* Firebase: ユーザのデータ管理など(横田)
((br))

!! ○3Dキャラ(辻、横田)
* Blender: 3Dキャラの描画、トレーニング量に応じたキャラの数値変更など
* ユーザの条件によって出力するダンベルやキャラクターの作成
((br))
<<{Blender.png}

!! 動画撮影(畠山、吉田)
* ユーザのモチベーションが上がるような筋トレ動画の撮影
* 畠山、吉田自らジムに赴き撮影したことで説得力のある動画が完成した

((br))
<<Gitlab>>
https://gitlab.cis.iwate-u.ac.jp/2024_gr09/test_project/-/tree/master/crisis_app((br))

nodebrewからNode.jsをインストール後、VSCodeなどのエディタを開き、crisis_app上でnode.sever.jsを実行すると、出力としてURLが得られます。これをブラウザで開くことで、実際にアプリを使用することができます。

<<nodebrew>>
https://github.com/hokaccha/nodebrew((br))

<<コメント>>
!! s0619021 KIM MINJAE

新規登録画面とテキスト記録画面を担当しました。テキスト記録画面でサーバでデータのデータベースから取り足して実際に表現することでちょっと迷いましたがなんとか完成できたのが嬉しいです。テキスト記録画面で一番よくやったと感じたのはcontainerーboxでテキストボックスを分けて一度隠した後にボタンを押すと一つづつ呼び出して表示するものです。

!! s0622032 鈴木晴仁

班wikiの記載全て、トレーニング記録画面・お手本プレイ画面・退会画面の作成を担当した。単なるページ表示では面白味がないため多くの工夫を凝らした。経験値とレベルの実装方法、画面遷移やマウスオーバー時のアニメーションには特に力を入れた。wikiにもアプリにもユーザのことを考えたさまざまな機能があるので、アプリを実際に使ってこれを体感してほしい。

!! s0622044 辻龍
担当したのはメイン画面のhtmlとcss,とモデルパターン、矢印キーでモデルを動かすためにメインのjsを書き換えた部分で、ずっとメインをやっていました。力を入れたのはcssで、ライザップを参考にシンプルでありながら高級感のある色合いにすることで最低限の手間で、クオリティをあげた。既存の方法で同じコードで同じ拡張子のファイルで実行したら上手く動作しなかった原因だけ本当に謎だった。

!! s0622049 畠山悠李
自分は、各画面のcssに簡単に手を加えて画面の質を向上させる作業、お手本プレイ画面で使うトレーニングのお手本動画の撮影と実演、その他ほかのメンバーの作業の手伝いとして簡単な作業をしました。自分は知識やプログラミング技術などでほかのメンバーに劣るぶん、多くの部分で他のメンバーに助けてもらいました。感謝しかないです。みんなありがとう！감사합니다！

!! s0622060 横田信徒
私が個人(1人)で行ったタスクは、タイトル画面やログイン画面の作成、データベースへのデータの保存と、3Dモデルの作成(パターン分けの簡単な作業のみ辻君に手伝って貰いました。)とそれをメイン画面へ出力(吉田君と協力)する。これらを実装しました。 上記の簡単な作業で作った3Dモデルファイルを読み込み、メイン画面に出力する際には、工夫としてその部屋をテクスチャマッピングで作成したり、経験値によって場合分けして、それぞれの場合で別の付属のキャラクターファイルを読み込んで出力するなどの動作を工夫しました。

!! s0622061 吉田伊吹
私は、バックエンド全般(textrecord.htmlに関連する部分のみKIMさんにやってもらいました)を担当しました。バックエンドの仕事は基本的にデータベースとアプリ間でのデータの受け渡しを行うのであまり目立たないですが、フロントエンド担当の皆の間に入りデータを受け渡しは基本的にすべて自分一人でやっていたため、サッカーでいうとボランチをやってるみたいで楽しかったです。