6< ページ概要 >9 ((outline)) !!!プロジェクト名 ::'''healthy me''' !!!プロジェクト説明 ::健康管理アプリ((br))((br)) '''主な機能'''((br)) 食事画面からの摂取カロリー入力、運動画面からの消費カロリー計算に基づき、((br))その日のカロリー計算を行う((br)) また、(アカウント登録によってデーターベース上に日々の記録を残すことで)((br))カレンダー上から記録を確認することもできる !!!中間発表からの変更点 *local_apiの機能改善 *食事画面にサジェスト機能を追加 *カレンダーから日付を選択し、その日の記録を可視化する機能を追加 *BGM・SEを追加 *ホーム画面に猫のキャラクターを追加 *その他軽微なバグの修正・UIの微調整 :バグの修正 ::バグの修正 !!!モジュール分けと詳細説明 !!タイトル画面(担当:村上隆信) ::ユーザー登録が済んでいない場合はサインアップ、済んでいる場合は ::サインインボタンを押しページ遷移する !!サインアップ画面(担当:村上隆信) ::メールアドレス、パスワードを登録してアカウントを作成する ::入力されたデータはlocal_api内に書き込まれる !!サインイン画面(担当:村上隆信) ::登録したメールアドレス、パスワードを入力してログインする !!ホーム画面(担当:山下祐輝) ::食事, 運動, 記録の各機能画面に遷移することができる ::既にその日のデータを入力済みの場合、画面下部より ::猫のキャラクターが摂取カロリーと消費カロリーを教えてくれる <<{2-0ホーム画面.jpg} !!設定画面(担当:山下祐輝, 佐藤彰太朗) ::各ページの右上にある歯車マークを押すとポップアップが表示される ::ログアウト機能に加え、SE, BGMの音量調整も可能 ::(BGMは思わぬ事故を防ぐため初期値は0にしてある) !!食事入力画面(担当:最上達春, 佐藤彰太朗) ::食べ物を入力することで何を食べたか記録する ::入力欄にはサジェスト機能を搭載し、予め設定してある食べ物の場合カロリーの入力は不要 ::一覧にない食べ物の場合は手動で食べ物の名前とカロリーを入力することで記録が可能 !!運動入力画面(担当:藤原樹, 三浦綺乃) ::METs表を参考にし、運動強度を表すMETsと運動時間から消費カロリーを計算 ::予め登録してあるユーザー情報のひとつである体重から基礎代謝も算出し計算に組み込んでいる !!データ閲覧画面(担当:三浦綺乃) ::カレンダーから記録を確認する日付をクリックすると該当日の記録が表示される !!!ソースコード解説 !!全画面共通 *script_sound.js BGM・SEの設定((br)) ページ遷移時、ring()によりSEを鳴らし、home()やsyokuji(), undou()の関数によって((br)) 効果音が鳴り終わるまで遅延させた後にページ遷移させている *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)((br)) →画面下部のコメント文をランダムで出力する *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