!!! ページリンク >>{23::gr07}{班ページトップへ} !!! ものと操作の洗い出し 時間とお金の管理アプリにおけるものと操作について班員とあらかたまとめた。 !!! アプリのページ構造 * ログイン画面 * ホーム画面: ** 給料確認ウィンドウ ** カレンダースクロールボタン ** 予定追加ボタン ** 内容部分 * 予定追加(編集)ページ *設定ページ !!! 各画面のものと操作 !! ''''1. ホーム画面'''' * 背景:もの ** 専用画面 * メールアドレス入力欄:もの ** 新規登録及びログインに使用するメールアドレスを入力する:操作 * パスワード入力欄:もの ** 新規登録及びログインに使用するパスワードを入力する:操作 * 「新規登録はこちら」ボタン:もの ** アカウントが未登録の場合に新規登録画面に遷移する:操作 *** 新規登録画面では,メルアド・パスワードの他にユーザー名を入力し,3つ値をキーとしてアカウントを作成する:操作 * 「ログイン」ボタン:もの ** 入力された上の2つの値でdbを検索し,アカウントにログインする:操作 * ログイン完了後,元の画面に自動遷移する:操作 !! ''''2. サイドバー(メニューバー)'''' * 背景:もの ** 画面左にfixed,ボタンで開閉式にするかも:操作 * 各子ページへのリング(ボタン):もの ** ボタンを押した時,対応するコンポーネントが描画される:操作 * ログイン画面へのリンク(ボタン)or ログアウトボタン:もの ** ボタンを押した時,未ログイン状態ならログイン画面へ遷移 or ログイン後ならログアウトする:操作 !! ''''3. タイマー'''' * タイマーの入力ボタン(計測設定画面への誘導ボタン):もの ** ボタンクリックでタイマーセット用画面に遷移する(ポップアップ表示):操作 * (作動中)スタート/ストップボタン:もの ** セットされたタイマーをクリックするとカウントダウン/停止する * タイマー:もの ** (作動中)設定した時間についてカウントダウン表示:操作 ** (作動中)カウントダウン完了でタイマー停止:操作 * 時計:もの ** タイマーとは独立して表示:操作 * アラーム:もの ** カウントダウン完了時にアラーム音を鳴らす * 計測時間設定ボタン(歯車アイコン):もの ** ボタンを押したら計測設定画面を表示する:操作 * start,stopボタン:もの ** 動作の状態に応じてタイマーをstat又はstopする:操作 * resetボタン:もの ** タイマーを終了し計測記録画面を表示する:操作 !! ''''4. タイマーセット'''' * 背景:もの ** ポップアップ表示:操作 * プリセット(アプリ側が用意):もの ** 選択した時間がセット時間に反映:操作 ** 別の時間を選択する or 時間を編集したら上書き:操作 * カスタムプリセット(アカウントに紐づけられた履歴):もの ** ログイン済みならカスタムプリセット内容を表示する:操作 * セット(周回,ユーザーが指定):もの *** 周回を行うかどうかの詳細設定を行う:操作 *** プルダウン式で値を入力:操作 *** アカウントにカスタムとしてセット内容を記録:操作 * 決定ボタン:もの ** ボタンを押すと設定をタイマー画面に反映しこのポップアップを閉じる:操作 !! ''''5. タイマー結果の記録用ポップアップ'''' * 計測時間:もの ** タイマーコンポーネントから実施時間のpropsを受け取って表示する:操作 * 計測内容(属性)の識別用カラータグのプリセット:もの ** プリセットのカラー(ラジオボタン形式)を選択する:操作 * コメント入力欄:もの ** 記録内容に関するコメントを入力する:操作 * 記録決定ボタン:もの ** dbに記録データを送信する+元の画面に戻す:操作 !! ''''6. 記録管理(ダッシュボード)'''' * 背景:もの ** 表示する * ユーザーの記録データ:もの ** タイムラインタブにて時系列に並べて一覧表示する:操作 ** クリックで記録を編集する(→編集画面ポップアップ) * 計測時間チャート:もの ** 過去の計測時間を視覚的に表示する:操作 !! ''''7. カレンダー'''' * 1ヶ月単位のカレンダー表示:もの * 表示単位の移動ボタン(先月,来週,etc):もの ** クリックで表示するものを移動させる:操作 * 日に対応する欄に過去に記録されたものを表示:もの ** クリックで過去の記録内容を表示する:操作 (作成途中)