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

23::gr05::発表

ページ概要

プロジェクト名

healthy me

プロジェクト説明

健康管理アプリ

主な機能
食事画面からの摂取カロリー入力、運動画面からの消費カロリー計算に基づき、
その日のカロリー計算を行う
また、(アカウント登録によってデーターベース上に日々の記録を残すことで)
カレンダー上から記録を確認することもできる

中間発表からの変更点

  • local_apiの機能改善
  • 食事画面にサジェスト機能を追加
  • カレンダーから日付を選択し、その日の記録を可視化する機能を追加
  • BGM・SEを追加
  • ホーム画面に猫のキャラクターを追加
  • その他軽微なバグの修正・UIの微調整
バグの修正
バグの修正

モジュール分けと詳細説明

タイトル画面(担当:村上隆信)

ユーザー登録が済んでいない場合はサインアップ、済んでいる場合は
サインインボタンを押しページ遷移する 1-0.タイトル画面.jpg

サインアップ画面(担当:村上隆信)

メールアドレス、パスワードを登録してアカウントを作成する
入力されたデータはlocal_api内に書き込まれる
2-0.サインアップ画面.jpg

サインイン画面(担当:村上隆信)

登録したメールアドレス、パスワードを入力してログインする
3-0.サインイン画面.jpg

ホーム画面(担当:山下祐輝)

食事, 運動, 記録の各機能画面に遷移することができる
既にその日のデータを入力済みの場合、画面下部より
猫のキャラクターが摂取カロリーと消費カロリーを教えてくれる 2-0.ホーム画面.jpg

設定画面(担当:山下祐輝, 佐藤彰太朗)

各ページの右上にある歯車マークを押すとポップアップが表示される
ログアウト機能に加え、SE, BGMの音量調整も可能
(BGMは思わぬ事故を防ぐため初期値は0にしてある) 設定画面.jpg

食事入力画面(担当:最上達春, 佐藤彰太朗)

食べ物を入力することで何を食べたか記録する
入力欄にはサジェスト機能を搭載し、予め設定してある食べ物の場合カロリーの入力は不要
一覧にない食べ物の場合は手動で食べ物の名前とカロリーを入力することで記録が可能 5-0.食事画面.jpg

運動入力画面(担当:藤原樹, 三浦綺乃)

METs表を参考にし、運動強度を表すMETsと運動時間から消費カロリーを計算
予め登録してあるユーザー情報のひとつである体重から基礎代謝も算出し計算に組み込んでいる 運動画面.jpg

データ閲覧画面(担当:三浦綺乃)

カレンダーから記録を確認する日付をクリックすると該当日の記録が表示される カレンダー.jpg

ソースコード解説

全画面共通

  • script_sound.js BGM・SEの設定
    ページ遷移時、ring()によりSEを鳴らし、home()やsyokuji(), undou()の関数によって
    効果音が鳴り終わるまで遅延させた後にページ遷移させている
  • style_setting.css 画面右上の歯車マークを押したときの設定のcss
  • style_basic.css ロゴや背景色など、画面全般に共通して使用する箇所のcss

タイトル画面

  • 01index.html
  • 01style_index.css

サインイン画面

  • 02signin.html
  • 02script_signin.js local_apiを呼び出し、登録されたIDとパスワードが入力されたかを判定する
  • 02style_signin.css
  • usersPass.csv このcsvファイルにユーザーのメールアドレス, パスワードが入っている

サインアップ画面

  • 03signup.html
  • 03style_signup.css

ホーム画面

  • 04home.html Math.floor(Math.random() * msg.length)
    →画面下部のコメント文をランダムで出力する
  • 04style_home.css

運動入力画面

  • 05undou.html
  • 05script_undo.js update()で基礎代謝を含む消費カロリーを計算、出力
  • 05style_undou.css
  • usersInfo.csv このcsvファイルにユーザーの体重等の情報が入っている

食事入力画面

  • 06syokuji.html
  • 06script_sagest.js
  • 06script_syokuji.js update()で食べ物とカロリー、摂取時間を記録
  • 06style_syokuji.css
  • foods.csv このcsvファイルに食べ物のカロリー等の情報が入っている

カレンダー画面

  • 07calender.html
  • 07calender.js
  • 07style_calender.css

記録確認画面

  • kiroku.html
  • script_kiroku.js
  • style_kiroku.css


最終更新日:2023/07/28 13:37:54