6<
ページ概要
>9
((outline))

!!!プロジェクト名
::'''healthy me'''

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


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

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

!!タイトル画面(担当：村上隆信)
::ユーザー登録が済んでいない場合はサインアップ、済んでいる場合は
::サインインボタンを押しページ遷移する

!!サインアップ画面(担当：村上隆信)
::メールアドレス、パスワードを登録してアカウントを作成する
::入力されたデータはlocal_api内に書き込まれる

!!サインイン画面(担当：村上隆信)
::登録したメールアドレス、パスワードを入力してログインする

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

!!設定画面(担当：山下祐輝, 佐藤彰太朗)
::各ページの右上にある歯車マークを押すとポップアップが表示される
::ログアウト機能に加え、SE, BGMの音量調整も可能
::(BGMは思わぬ事故を防ぐため初期値は０にしてある)

!!食事入力画面(担当：最上達春, 佐藤彰太朗)
::食べ物を入力することで何を食べたか記録する
::入力欄にはサジェスト機能を搭載し、予め設定してある食べ物の場合カロリーの入力は不要
::一覧にない食べ物の場合は手動で食べ物の名前とカロリーを入力することで記録が可能

!!運動入力画面(担当：藤原樹, 三浦綺乃)
::METs表を参考にし、運動強度を表すMETsと運動時間から消費カロリーを計算
::予め登録してあるユーザー情報のひとつである体重から基礎代謝も算出し計算に組み込んでいる

!!データ閲覧画面(担当：三浦綺乃)
::カレンダーから記録を確認する日付をクリックすると該当日の記録が表示される

村上隆信
最上達春
佐藤彰太朗
藤原樹
三浦綺乃
山下祐輝


!!!デモのスクショ
**タイトル画面
<<{1-0タイトル画面.jpg}((br))
***サインインクリック→ログイン画面((br))
<<{1-1ログイン画面.jpg}((br))
***サインアップクリック→メールアドレス入力画面
<<{1-2メールアドレス入力画面.jpg}((br))
**サインアップ画面
***メールアドレス入力
***送信ボタンクリック→メールアドレスに認証メールがとぶ
**ログイン画面
***ログインクリック→ホーム画面
***初期ログインの場合は情報入力画面
**初期情報登録および変更画面
***身長、体重、性別入力
**ホーム画面
<<{2-0ホーム画面.jpg}
***食事、運動、記録ボタンクリック→対応する画面
**設定画面((br))
<<{5-0設定画面.jpeg}
***登録情報の変更クリック→変更画面
***SEの大きさをバーで変更
***BGMの大きさをバーで変更 
***ログアウトボタンクリック→タイトル画面 
**食事入力画面
***食べたもの表示画面
****編集ボタン→食べ物入力画面
****表示順序設定 (時系列順、カロリー昇順/降順にソート可能)
****戻るボタン→メイン画面
****設定ボタン→設定画面 
***食べたもの入力画面操作((br))
<<{2-1食事入力(検索)画面.jpg}
****食べ物入力欄→食べ物の名前を入力 
****検索ボタン→入力から予想される食べ物をカロリーとともに数個表示 
****追加ボタン→食べたもの表示画面に選んだ食べ物を追加
**運動入力画面
<<{3-0運動入力画面.jpg}
***カテゴリを選択
***METsは表から調べ入力
***時間を入力
***計算をクリック→消費カロリーの表示
***記録をクリック→記録((br))
<<{3-1消費カロリー表示画面.jpg}
**データ閲覧画面
<<{4-0カレンダー.jpg}
***カレンダーで記録を表示

!!!ソースコード解説

!!全画面共通
*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