<<ページリンク>> >>{22::gr08}{班ページトップへ} !!! アプリ構成 * ログイン画面 * メイン画面： ** サイドバー（メニューバー） ** 主描画画面： *** タイマー **** タイマー設定ポップアップ *** 時計 *** 記録管理（ダッシュボード） **** （カレンダー） **** （ランキング） <<{スクリーンショット 2022-05-07 21.32.33.png} !!! 各画面のものと操作 !! ''''1. ログイン'''' * 背景：もの ** 専用画面 * メールアドレス入力欄：もの ** 新規登録及びログインに使用するメールアドレスを入力する：操作 * パスワード入力欄：もの ** 新規登録及びログインに使用するパスワードを入力する：操作 * ユーザー名入力欄：もの ** 新規登録に使用するパスワードを入力する：操作 * 新規登録ボタン：もの ** アカウントが未登録の場合に新規登録を実行する：操作 ** 入力された上の3つ値をキーにアカウントを作成する * ログインボタン：もの ** 入力された上の2つの値でdbを検索し，アカウントにログインする：操作 * ログイン完了後，元の画面に自動遷移する：操作 !! ''''2. サイドバー（メニューバー）'''' * 背景：もの ** 画面左にfixed，ボタンで開閉式にするかも：操作 * 各子ページへのリング（ボタン）：もの ** ボタンを押した時，対応するコンポーネントが描画される：操作 * ログイン画面へのリンク（ボタン）or ログアウトボタン：もの ** ボタンを押した時，未ログイン状態ならログイン画面へ遷移 or ログイン後ならログアウトする：操作 !! ''''3. タイマー'''' * タイマーの入力ボタン（計測設定画面への誘導ボタン）：もの ** ボタンクリックでタイマーセット用画面に遷移する（ポップアップ表示）：操作 * （作動中）スタート/ストップボタン：もの ** セットされたタイマーをクリックするとカウントダウン/停止する * タイマー：もの ** （作動中）設定した時間についてカウントダウン表示：操作 ** （作動中）カウントダウン完了でタイマー停止：操作 * 時計：もの ** タイマーとは独立して表示：操作 * アラーム：もの ** カウントダウン完了時にアラーム音を鳴らす * 記録管理画面へのリンク（ボタン） !! ''''4. タイマーセット'''' * 背景：もの ** ポップアップ表示：操作 * プリセット（アプリ側が用意）：もの ** 選択した時間がセット時間に反映：操作 ** 別の時間を選択する or 時間を編集したら上書き：操作 * カスタムプリセット（アカウントに紐づけられた履歴）：もの ** ログイン済みならカスタムプリセット内容を表示する：操作 * セット（周回，ユーザーが指定）：もの *** 周回を行うかどうかの詳細設定を行う：操作 *** プルダウン式で値を入力：操作 *** アカウントにカスタムとしてセット内容を記録：操作 !! ''''5. タイマー結果の記録用ポップアップ'''' * 計測時間：もの ** タイマーコンポーネントから実施時間のpropsを受け取って表示する：操作 * 計測内容（属性）の識別用カラータグのプリセット：もの ** プリセットのカラー（ラジオボタン形式）を選択する：操作 * コメント入力欄：もの ** 記録内容に関するコメントを入力する：操作 * 記録決定ボタン：もの ** dbに記録データを送信する＋元の画面に戻す：操作 !! ''''6. 記録管理（ダッシュボード）'''' * 背景：もの ** 表示する * ユーザーの記録データ：もの ** 時系列に並べて一覧表示する：操作 ** クリックで記録を編集する（→編集画面ポップアップ） * 計測時間チャート：もの ** 過去の計測時間を視覚的に表示する：操作 （作成途中）