2024 ソフトウェア設計及び演習用の班Wiki

• title.html: タイトル文字、おすすめリンク、ボタン、画像などの画面表示
• title.css: テキスト、背景、ボタンのレイアウト
• wave.js: 画像のアニメーション

画面上部には筋トレのモチベーションが上がるようなリンクを配置
筋トレのモチベーションが上がるような写真をローテーションで表示
ログインボタンを押すとログイン画面へ、新規登録ボタンを押すと新規登録画面へ遷移

• entry.html: ボタンなどの画面表示と入力項目のチェック(KIM)
• entry.css: テキスト、背景、ボタンのレイアウト

必要項目を入力し、登録ボタンを押すとユーザのデータが登録され、メイン画面へ遷移
戻るボタンを押すとタイトル画面へ遷移

• login.html: タイトル文字、ボタンなどの画面表示と入力項目のチェック
• login.css: テキスト、背景、ボタンのレイアウト

必要項目を入力し、サインインボタンを押すとメイン画面へ遷移
戻るボタンを押すとタイトル画面へ遷移

• mainpro1.html: ボタンなどの画面表示、3Dキャラの描画
• select.css: テキスト、背景、ボタンのレイアウト

画面上部のタブ、ボタンをクリックすることでトレーニング記録画面、トレーニング入力画面、お手本プレイ画面、吉田の筋肉塾(筋トレを愛するメンバーの個人サイト)、退会画面へ遷移
3Dキャラはユーザの筋トレ記録により成長し、これを360度動かして見ることができる
3Dキャラの部屋はランダムで変化
矢印キーを押した方向にキャラクターが動く

• record.html: キャラのレベル、ボタン、メニュー、グラフ記録などの画面表示(鈴木)
• textrecord.html: ボタン、メニュー、数値記録などの画面表示(KIM)
• record.css: テキスト、背景、ボタンのレイアウト(鈴木)
• record.js: 画面遷移のアニメーション、レベル・経験値・グラフの表示、レベルと経験値の計算(鈴木、吉田)

画面上部には現在の筋トレ量に基づくEXPとキャラのLEVELを表示
タブをクリックすることで筋トレの部位別でボリューム(重量×回数)のグラフまで移動しこれを見ることができる
グラフ右下の⬆でページ先頭に移動する
戻るボタンを押すとメイン画面へ遷移

• textrecord.html: ボタン、メニュー、数値記録などの画面表示(KIM)
• textrecorddb.js: データベースから記録を受け取る(KIM)

タブをクリックすることで筋トレの部位別で日付、回数、重量が表示される

• input.html: ボタン、入力欄、画像などの画面表示と入力項目のチェック(畠山、吉田)
• input.css: テキスト、背景、ボタンのレイアウト(畠山)
• input.js: 入力欄の表示(吉田)

種目名、部位を選択、または入力し、その後重量と回数を入力する
＋と−ボタンを押すと入力欄を増やすことができる
完了ボタンを押すと入力内容が記録されメイン画面へ遷移
戻るボタンを押すとメイン画面へ遷移

• demolplay.html: ボタン、メニュー、動画などの画面表示(鈴木)
• demoplay.css: テキスト、背景、ボタンのレイアウト(鈴木、畠山)
• demoplay.js: 画面遷移のアニメーション(鈴木)

タブをクリックすることでメニューが表示される
種目を選択するとメンバー自作の筋トレお手本プレイ動画まで移動しこれを見ることができる
グラフ右下の⬆でページ先頭に移動する
戻るボタンを押すとメイン画面へ遷移

• retire.html: タイトル文字、おすすめリンク、ボタン、画像などの画面表示
• retire.css: テキスト、背景、ボタンのレイアウト
• retire.js: 画面遷移、ボタン、画像のアニメーション

退会する気がなくなるようにこのページだけ画面遷移の秒数を変え重い感じにしている
画面上部には筋トレのモチベーションを再燃させるようなリンクを配置
退会を躊躇させるような写真をローテーションで表示
どうしても退会したい場合は正しい退会ボタンを押すことでタイトル画面へ遷移
大部分を占める戻るボタンを押すとメイン画面へ遷移

• server.js: バックエンド全般(吉田(KIM))
• HTMLの<script>の中身:HTMLファイルとserver.jsのソケット通信(吉田)
• Firebase: ユーザのデータ管理など(横田)
  

• Blender: 3Dキャラの描画、トレーニング量に応じたキャラの数値変更など
• ユーザの条件によって出力するダンベルやキャラクターの作成
  

• ユーザのモチベーションが上がるような筋トレ動画の撮影
• 畠山、吉田自らジムに赴き撮影したことで説得力のある動画が完成した

新規登録画面とテキスト記録画面を担当しました。テキスト記録画面でサーバでデータのデータベースから取り出して実際に表現することでちょっと迷いましたがなんとか完成できたのが嬉しいです。テキスト記録画面で一番よくやったと感じたのはcontainerーboxでテキストボックスを分けて一度隠した後にボタンを押すと一つづつ呼び出して表示するものです。

班wikiの記載全て、トレーニング記録画面・お手本プレイ画面・退会画面の作成を担当した。単なるページ表示では面白味がないため多くの工夫を凝らした。経験値とレベルの実装方法、画面遷移やマウスオーバー時のアニメーションには特に力を入れた。wikiにもアプリにもユーザのことを考えたさまざまな機能があるので、アプリを実際に使ってこれを体感してほしい。

担当したのはメイン画面のhtmlとcss,とモデルパターン、矢印キーでモデルを動かすためにメインのjsを書き換えた部分で、ずっとメインをやっていました。力を入れたのはcssで、ライザップを参考にシンプルでありながら高級感のある色合いにすることで最低限の手間で、クオリティをあげた。既存の方法で同じコードで同じ拡張子のファイルで実行したら上手く動作しなかった原因だけ本当に謎だった。兎にも角にもお疲れ様でした。

自分は、各画面のcssに簡単に手を加えて画面の質を向上させる作業、お手本プレイ画面で使うトレーニングのお手本動画の撮影と実演、その他ほかのメンバーの作業の手伝いとして簡単な作業をしました。自分は知識やプログラミング技術などでほかのメンバーに劣るぶん、多くの部分で他のメンバーに助けてもらいました。感謝しかないです。みんなありがとう！감사합니다！

私が個人(1人)で行ったタスクは、タイトル画面やログイン画面の作成、データベースへのデータの保存と、3Dモデルの作成(パターン分けの簡単な作業のみ辻君に手伝って貰いました。)とそれをメイン画面へ出力(吉田君と協力)する。これらを実装しました。 上記の簡単な作業で作った3Dモデルファイルを読み込み、メイン画面に出力する際には、工夫としてその部屋をテクスチャマッピングで作成したり、経験値によって場合分けして、それぞれの場合で別の付属のキャラクターファイルを読み込んで出力するなどの動作を工夫しました。

私は、バックエンド全般(textrecord.htmlに関連する部分のみKIMさんにやってもらいました)を担当しました。バックエンドの仕事は基本的にデータベースとアプリ間でのデータの受け渡しを行うのであまり目立たないですが、フロントエンド担当の皆の間に入りデータを受け渡しは基本的にすべて自分一人でやっていたため、サッカーでいうとボランチをやってるみたいで楽しかったです。