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

24::gr09::中間発表

プロジェクト名

have a sense of crisis

プロジェクト説明

プロジェクト概要

interview.png
https://prtimes.jp/main/html/rd/p/000000067.000033607.html

皆さんは日々、筋トレに取り組んでいますか?
z世代に特化したクイックリサーチサービスの調査によると、現役大学生の5人に2人が筋トレを行っています。また、定期的にプロテインを飲んでいる大学生の割合は14%であり、大学生にとって筋トレが身近な習慣になっていることが伺えます。
中にはガチの筋トレに限らず、体型維持を目的とし、危機感を持ってこれに取り組んでいる方もいるでしょう。
私達は、このような筋トレ市場をターゲットとしたアプリを開発し、特に大学生の健康的なキャンパスライフに貢献します。

アプリ概要

このアプリは

  • 自分のトレーニングが3Dの自キャラに反映され、視覚的にモチベーションを保つ
  • 部位ごとに3Dキャラが成長することでどこを重点的に筋トレしているか分かる
  • 筋トレのお手本プレイ動画を見ることができる
  • アカウント登録により長期的にトレーニングの記録が保持される

などの点で、単なるトレーニング記録よりも優れています。
また、筋トレのメニューごとにレベルが設定してあり、これに応じて自キャラと一緒に成長を実感できる、某ウマ娘のような育成×筋トレ系アプリです。

ものと操作の洗い出し結果

モジュール分けの結果

プロトタイプ

プログラムの動き

1.jpg 2.jpg

タイトル画面

  • ログインボタンを押すとログイン画面に遷移
  • 新規登録ボタンを押すと新規登録画面に遷移
  • タイトル画面のイメージは数秒感覚で切り替わる
  • ページ上部にはトレーニングのモチベーションを向上させるようなリンクを多数用意
  • 今後はcssによる画面の質向上
    title.png

新規登録画面

  • 必要項目を入力→登録ボタンを押すと入力データがデータベースに送信される
  • 登録ボタンを押すとタイトル画面に遷移
  • 戻るボタンを押すとタイトル画面に遷移
  • 今後はcssによる画面の質向上
    entry.png

ログイン画面

  • 必要項目を入力→サインインボタンを押すと入力データがデータベースに送信される
  • 登録データがあるときメイン画面に遷移
  • 戻るボタンを押すとタイトル画面に遷移
  • 今後はcssによる画面の質向上
    login.png

メイン画面

  • トレーニング入力画面のタブを押すとトレーニング入力画面に遷移
  • トレーニング記録画面のタブを押すとトレーニング記録画面に遷移
  • お手本プレイ画面のタブを押すとお手本プレイ画面に遷移
  • 吉田の筋肉塾のタブを押すと吉田の筋肉塾に遷移
  • 筋トレ具合に応じて3Dキャラが部位ごとに成長(未完成)
  • 今後はcssによる画面の質向上、3Dキャラの実装、データベースとの紐付け
    main.png

トレーニング入力画面

  • 種目名、部位を選択し、重量、回数を入力する
  • 2段目では種目名を自分で入力することもできる
  • 複数のトレーニングを行った場合、addやadd_otherで入力欄を追加できる
  • okボタンを押すと入力データがデータベースに送信される(未完成)
  • 戻るボタンを押すとメイン画面に遷移
  • 今後はcssによる画面の質向上、入力データの送信
    input.png

トレーニング記録画面

  • 未完成

お手本プレイ画面

  • ドロップダウンメニューで筋トレの部位、レベルからメニューを選択するとそのトレーニングのお手本プレイが視聴できる
  • 自作の筋トレ映像を撮影し使用(未完成)
  • 戻るボタンを押すとメイン画面に遷移
  • 今後はcssによる画面の質向上、動画撮影
    demoplay.png

退会画面

  • 戻るボタンを押すとメイン画面に遷移(推奨)
  • 退会ボタンを押すとタイトル画面に遷移
  • ページ上部には退会を躊躇させるためのリンクを多数用意
  • 今後はcssによる画面の質向上、退会ボタンを押したときのデータの削除
    retire.png

Gitlab

デモ用プロトタイププログラムのファイルは全て2024_g09_test_projectの中に置きました。
<各ディレクトリの概要>

  • demoplay: お手本プレイ画面のhtml, js, css
  • entry: 新規登録画面のhtml, css
  • img: 各画面で使う画像
  • input: トレーニング入力画面のhtml, js, css
  • login: ログイン画面のhtml, css
  • retire: 退会画面のhtml, js, css
  • server: 新規登録画面、ログイン画面のjs
  • testmain: メイン画面のhtml, css
  • title: タイトル画面のhtml, js, css
  • video: お手本プレイ画面で使う動画
  • work: 予備


拡張機能Live ServerがインストールされているVSCodeでtitle/title.htmlを開き、右下のGoLiveをクリックすることでアプリの流れを確認できます。
現時点で完成している画面とその遷移は以下の通りです。

タイトル画面 ←→ 新規登録画面 タイトル画面 → ログイン画面 → メイン画面
メイン画面 ←→ お手本プレイ画面
メイン画面 ←→ トレーニング入力画面
メイン画面 ←→ 退会画面 → タイトル画面

https://gitlab.cis.iwate-u.ac.jp/2024_gr09/test_project


最終更新日:2024/06/14 13:36:47