!!! このページについて :中間前 ::既存のモジュール分けに上書きするのが不安だったから,「改」という形にしました. :中間後 ::増えたモジュールを書き足しました. ::また,担当者も色々変わりました. !!! outline ((outline)) !!!グローバルデータ *ユーザ情報オブジェクト **認証トークン(トークン自体は"firebase.auth()"に保持) ***ユーザ名 ***メルアド ***パスワード **設定 ***プリセットデータ *記録データオブジェクト **各回の計測結果情報 ***集中時間 ***休憩時間 ***繰り返し回数 ***タグID ***メモ ***記録開始日時 ***ユーザ名 !!!モジュール分け !!1.メインスクリプトモジュール :担当 ::佐藤 :概要 ::DBからユーザ情報,記録情報を取得してVuexにストアしておく. ::ルーティングを管理する. :機能 ::細やかな部分の処理を記述する. !!2.ログインモジュール :担当 ::佐藤 :概要 ::アカウントをすでに持っている人が,ログインを行う. :機能 ::ユーザの入力を受け付ける. *メールアドレス *パスワード ::入力のバリデーションを行う. ::→ 例えば,メールアドレスの形式に当てはまっていなかったら,エラーメッセージを出す. ::「ログインボタン」が押されたらFirebaseと通信を行い,ユーザ認証をする. ::認証が通ったらユーザとしてログインする. ::認証が通らなかったら,その旨を伝える. ::「新規登録ボタン」が押されたら,新規登録画面に遷移する. !!3.新規登録モジュール :担当 ::佐藤 :概要 ::アカウントを新規作成する. :機能 ::ユーザの入力を受け付ける. *ユーザ名 *メールアドレス *パスワード ::入力が正しいか確認する. ::正しくない場合はエラーメッセージを出す. ::「新規登録ボタン」が押されたら,入力情報をFirebaseに送り,認証が通ればアカウントを作成する. ::その後にDBにユーザ情報を新規登録する. !!4.ホームレイアウトモジュール :担当 ::佐藤 :概要 ::サイドバー,メイン画面のレイアウトを管理する. :機能 ::ホーム画面のレイアウトを定義する. !!5.サイドバーモジュール :担当 ::佐藤 :概要 ::各ページへ遷移するためのリンクを持ったグローバルメニューバー. :機能 ::サイドバーを定義する. !!6.メイン画面モジュール :担当 ::佐藤 :概要 ::メインで表示する画面の基盤 :機能 ::基盤 !!7.タイマー設定モジュール :担当 ::田頭 :概要 ::計測時間を設定する. ::設定したデータをタイマー画面へ渡して遷移する. :機能 ::計測時間を設定する. ::→ 計測設定オブジェクト *集中時間 *休憩時間 *繰り返し回数 ::「プリセットボタン」を押したら,設定済みのプリセットが適用される. ::ログイン前 ::システム規定のプリセットを表示する. ::ログイン後 ::ユーザデータからプリセット情報を取得して表示する. ::「決定ボタン」を押したら,タイマー画面モジュールに計測設定オブジェクトを送り遷移する. ::>>{22::gr08::タイマーセッティング}{タイマーセッティング} !! 8．タイマー画面モジュール :担当 ::田頭・佐藤 :概要 ::タイマーを実行・停止させる． ::計測が終了したら記録データを記録モジュールへ送る． :機能 ::受け取った計測設定オブジェクトのデータを元に，計測時間を表示する． ::「startボタン」が押されたら，計測を開始してサウンドモジュールにフラグ(”start”)を渡す． ::「stopボタン」が押されたら，計測を中断してサウンドモジュールにフラグ(”stop”)を渡す． ::「resetボタン」を表示する（中断中のみ）． ::→「resetボタン」が押されたら，すべての計測を終了してカウントを設定後の時間に戻す（5m-3m * 3とかだったら，05:00の表示にする）．サウンドモジュールにフラグ(”reset”)を渡す． ::「保存ボタン」を表示する（中断中のみ）． ::→「保存ボタン」が押されたら，計測を終了してそれまでの計測時間を算出し，計測結果オブジェクトを生成する．サウンドモジュール(”finish”)にフラグを渡す． ::集中・休憩のすべてのカウントが無事に終了したら，計測結果オブジェクトを生成して，サウンドエフェクトモジュールにフラグ(”finish”)を渡す． ::計測結果オブジェクトが生成されたら，タイマー記録画面へデータを渡して遷移する． ::→計測結果オブジェクト *集中時間 *休憩時間 *（繰り返し回数）←削る ::非計測中に「歯車ボタン（Ready状態でのみ表示）」が押されたら，タイマー設定画面に遷移する． :関数 ::>>{22::gr08::タイマースクリーン}{タイマースクリーン} !! 9．サウンドエフェクトモジュール :担当 ::三合堂・佐藤・品木 :概要 ::他モジュールから値を受け取って，受け取った値に応じてサウンドエフェクトを再生する． :機能 ::以下の条件が満たされて他モジュールからフラグを受け取った場合，それに対応するサウンドエフェクトを再生する． *集中，休憩でカウントが”0”になった場合 *cancel(仮)ボタンが押された場合 *startボタンが押されたとき *stopボタンが押されたとき *保存ボタンが押されたとき ::フラグ： ::”start”：スタート，リスタートの音を鳴らす． ::”stop”：ストップの音を鳴らす． ::“reset”：リセットの音を鳴らす． ::“finish”：（cancel仮ボタン）終了して保存の音を鳴らす． ::>>{22::gr08::三合堂恭平}{三合堂恭平} !! 10．タイマー記録モジュール :担当 ::品木・佐藤 :概要 ::計測記録を作成する． ::「保存ボタン」が押されたら，結果記録オブジェクトを生成し，DBへデータを渡す． ::その後タイマー画面へ遷移する（タイマー画面では元の設定が適用されている）． :機能 ::受け取ったデータから合計時間を算出して，表示する． ::計測結果をそのまま表示させて，編集を可能にする（処理が厳しそうなら各々の合計時間だけ表示させる）． ::形式：計測結果オブジェクトそのまま． `` 計測結果オブジェクト = { [ [0, 50, 00], [0, 10, 00] ], [ [0, 50, 00], [0, 08, 26] ], } `` ::計測結果に加えて，ユーザの入力を受け付ける． *タグID *記録メモ ::「保存ボタン」が押されたら，結果記録オブジェクトを作成する． ::その後データをDBに登録する． ::→結果記録オブジェクト *各集中時間 *各休憩時間 *（繰り返し回数）←削る *タグID *記録メモ *記録日時（計測時の日時情報を加工したもの） *2022/0521/2322/00：西暦/日付/時間/秒数 *ユーザID（一意に定まるもの） `` 結果記録オブジェクト = 20220521232200 { [ [0, 50, 00], [0, 10, 00] ], [ [0, 50, 00], [0, 08, 26] ], タグID: red, 記録メモ: "memo", ユーザID: "132425694", } `` ::DBに登録が完了したら，タイマー画面に自動遷移する． ::結果記録オブジェクトを元に初期設定情報を取得し，タイマー画面に渡す． ::記録を保存する前に他のアクションがあった場合，何かしらの方法で警告を発する． :関数 ::>>{22::gr08::モジュール分け改::タイマー記録モジュール}{タイマー記録モジュール} !! 11．ダッシュボード（全体） :担当 ::田頭・品木・佐藤 :概要 ::ダッシュボードの仕様の管理 !! 11-1．ダッシュボード-データモジュール :担当 ::品木・田頭 :概要 ::ダッシュボード内で使用するデータをデータベースから取得する :機能 ::firebaseから必要なデータを持ってくる ::データを使いやすいように処理する ::子モジュールに配る ::処理したデータをDBなどに書き込む ::>>{22::gr08::モジュール分け改::ダッシュボードデータモジュール}{ダッシュボーデータモジュール} !! 11-2．ダッシュボード-グラフモジュール :担当 ::三合堂・佐藤・品木 :概要 ::今週分の記録を棒グラフにして表示する ::縦軸は分、横軸は日付で表示を行う :機能 ::別モジュールから日付と勉強時間の情報を受け取る ::受け取ったデータを処理して棒グラフとして描画する *グラフのデータは以下のような形式で受け渡しを行う `` [ [20220612, [2,5,10]], [20220613, [2,5,10]], [20220614, [2,5,10]], [20220615, [2,5,10]], [20220616, [2,5,10]], [20220617, [2,5,10]], [20220618, [2,5,10]], ] `` ::この時、リストの８桁の数字は日付データ、３つの数字のリストは勉強時間であり、[時,分,秒]で示される ::情報を月日、分単位の勉強時間に変更する ::"20220612"ならば日付は"06/12" ::"[2,5,10]"ならば2*60+15=135より135分の勉強時間 !! 11-3．ダッシュボード-プリセット設定モジュール :担当 ::田頭 :概要 ::タイマー設定で使用するプリセットの設定を確認・変更する :機能 ::共有データから現在のプリセット設定を受け取り表示する ::プリセットの内容を変更する ::変更したデータを共有データおよびデータベースに送信する ::>>{22::gr08::ダッシュボードエディットプリセット}{ダッシュボードエディットプリセット} !! 11-4．ダッシュボード-記録表示モジュール :担当 ::品木・田頭 :概要 ::過去の記録の表示 :機能 ::今日の合計及び1週間の合計を算出して表示する ::ダッシュボードのカードモジュールにデータを渡す ::データを選択したときに編集画面を呼び出す ::>>{22::gr08::モジュール分け改::ダッシュボードディスプタイムモジュール}{ダッシュボードディスプタイムモジュール} !! 11-5．ダッシュボード-記録編集モジュール :担当 ::品木・田頭 :概要 ::記録内容の編集を行える :機能 ::記録のカラータグ・メモなどの内容を変更できる ::記録を消去する ::編集したデータを共有データおよびデータベースに送信する ::>>{22::gr08::モジュール分け改::ダッシュボードエディットタイムモジュール}{ダッシュボードエディットプリセットモジュール} !! 11-6．ダッシュボード-サムタイムモジュール :担当 ::品木・田頭 :概要 ::今日の合計時間、1週間の合計時間を表示 :機能 ::今日の合計及び1週間の合計を算出して表示する ::>>{22::gr08::モジュール分け改::ダッシュボードサムタイムモジュール}{ダッシュボードサムタイムモジュール} !! 11-7．ダッシュボード-タイムライン表示モジュール :担当 ::田頭 :概要 ::1回分の記録を表示 :機能 ::今日の合計及び1週間の合計を算出して表示する ::>>{22::gr08::ダッシュボードタイムライン表示用コンポーネント}{ダッシュボードタイムライン表示用コンポーネント} !! 12-1．時計モジュール（データ加工） :担当 ::三合堂・佐藤 :概要 ::現在時刻を取得して，表示可能な形に加工して出力する． :機能 ::Date()オブジェクトを用いて現在時刻を取得して，一定秒ごとに時間を更新する． ::持っているデータを時間表示モジュールに渡す． ::>>{22::gr08::三合堂恭平}{三合堂恭平} !! 12-2．時計モジュール（データ表示） :担当 ::三合堂・佐藤 :概要 ::受け取った値を表示する． :機能 ::受け取った値を任意の形式で描画する． ::>>{22::gr08::三合堂恭平}{三合堂恭平} !!13-1.タイマー表示用コンポーネント :担当 ::田頭 :概要 ::タイマーの時間を表示する :機能 ::受け取った値を任意の形式で描画する． ::>>{22::gr08::タイマー表示用コンポーネント}{タイマー表示用コンポーネント} !!13-1.タイマー編集用コンポーネント :担当 ::田頭 :概要 ::タイマーの時間をセレクトで表示して,任意に変更する :機能 ::タイマーの時間をセレクトで表示して,任意に変更する． ::>>{22::gr08::タイマー編集用コンポーネント}{タイマー編集用コンポーネント} !!14.Vuex(Store, getter, mutation, action) :担当 ::佐藤　品木 :概要 ::グローバル変数とその管理に関わる関数 :機能 ::グローバル変数とその管理に関わる関数 ::>>{22::gr08::モジュール分け改::store}{store} !!14.Router :担当 ::佐藤 :概要 ::画面ルーティング :機能 ::画面ルーティング ::>>{22::gr08::モジュール分け改::router}{router} !!15.デザイン :担当 :: Figmaでベースデザイン作成：佐藤 :: 各モジュールのcss適用：各担当者 :: 最終調整：佐藤，田頭 :概要 ::Figmaでデザインを作成→各モジュール担当者がcssを適用→最後にバランスを見て微調整