2022 ソフトウェア設計及び演習用の班Wiki
22::gr08::モジュール分け改
outline
- 22::gr08::モジュール分け改
- このページについて
- outline
- グローバルデータ
- モジュール分け
- 1.メインスクリプトモジュール
- 2.ログインモジュール
- 3.新規登録モジュール
- 4.ホームレイアウトモジュール
- 5.サイドバーモジュール
- 6.メイン画面モジュール
- 7.タイマー設定モジュール
- 8．タイマー画面モジュール
- 9．サウンドエフェクトモジュール
- 10．タイマー記録モジュール
- 11．ダッシュボード（全体）
- 11-1．ダッシュボード-データモジュール
- 11-2．ダッシュボード-グラフモジュール
- 11-3．ダッシュボード-プリセット設定モジュール
- 11-4．ダッシュボード-記録表示モジュール
- 11-5．ダッシュボード-記録編集モジュール
- 11-6．ダッシュボード-サムタイムモジュール
- 11-7．ダッシュボード-タイムライン表示モジュール
- 12-1．時計モジュール（データ加工）
- 12-2．時計モジュール（データ表示）
- 13-1.タイマー表示用コンポーネント
- 13-1.タイマー編集用コンポーネント
- 14.Vuex(Store, getter, mutation, action)
- 14.Router
- 15.デザイン
モジュール分け
1.メインスクリプトモジュール
- 担当
- 佐藤
- 概要
-
@/src/router/
@/src/store/
使用するライブラリの初期化処理
DBからユーザ情報,記録情報を取得してVuexにストアしておく.
ルーティングを管理する. - 機能
- 細やかな部分の処理を記述する.
2.ログインモジュール
- 担当
- 佐藤
- 概要
- アカウントをすでに持っている人が,ログインを行う.
- 機能
- ユーザの入力を受け付ける.
- メールアドレス
- パスワード
- 入力のバリデーションを行う.
- → 例えば,メールアドレスの形式に当てはまっていなかったら,エラーメッセージを出す.
- 「ログインボタン」が押されたらFirebaseと通信を行い,ユーザ認証をする.
- 認証が通ったらユーザとしてログインする.
- 認証が通らなかったら,その旨を伝える.
- 「新規登録ボタン」が押されたら,新規登録画面に遷移する.
3.新規登録モジュール
- 担当
- 佐藤
- 概要
- アカウントを新規作成する.
- 機能
- ユーザの入力を受け付ける.
- ユーザ名
- メールアドレス
- パスワード
- 入力が正しいか確認する.
- 正しくない場合はエラーメッセージを出す.
- 「新規登録ボタン」が押されたら,入力情報をFirebaseに送り,認証が通ればアカウントを作成する.
- その後にDBにユーザ情報を新規登録する.
5.サイドバーモジュール
- 担当
- 佐藤
- 概要
- 各ページへ遷移するためのリンクを持ったグローバルメニューバー.
- 機能
-
サイドバーを定義する.
各ボタンを押すと対象ページへ遷移する．
ちなみに伸縮できます．
7.タイマー設定モジュール
- 担当
- 田頭
- 概要
- 計測時間を設定する.
- 設定したデータをタイマー画面へ渡して遷移する.
- 機能
- 計測時間を設定する.
- → 計測設定オブジェクト
- 集中時間
- 休憩時間
- 繰り返し回数
- 「プリセットボタン」を押したら,設定済みのプリセットが適用される.
- ログイン前
- システム規定のプリセットを表示する.
- ログイン後
- ユーザデータからプリセット情報を取得して表示する.
- 「決定ボタン」を押したら,タイマー画面モジュールに計測設定オブジェクトを送り遷移する.
8．タイマー画面モジュール
- 担当
- 田頭・佐藤
- 概要
- タイマーを実行・停止させる．
- 計測が終了したら記録データを記録モジュールへ送る．
- 機能
- 受け取った計測設定オブジェクトのデータを元に，計測時間を表示する．
- 「startボタン」が押されたら，計測を開始してサウンドモジュールにフラグ(”start”)を渡す．
- 「stopボタン」が押されたら，計測を中断してサウンドモジュールにフラグ(”stop”)を渡す．
- 「resetボタン」を表示する（中断中のみ）．
- →「resetボタン」が押されたら，すべての計測を終了してカウントを設定後の時間に戻す（5m-3m * 3とかだったら，05:00の表示にする）．サウンドモジュールにフラグ(”reset”)を渡す．
- 「保存ボタン」を表示する（中断中のみ）．
- →「保存ボタン」が押されたら，計測を終了してそれまでの計測時間を算出し，計測結果オブジェクトを生成する．サウンドモジュール(”finish”)にフラグを渡す．
- 集中・休憩のすべてのカウントが無事に終了したら，計測結果オブジェクトを生成して，サウンドエフェクトモジュールにフラグ(”finish”)を渡す．
- 計測結果オブジェクトが生成されたら，タイマー記録画面へデータを渡して遷移する．
- →計測結果オブジェクト
- 集中時間
- 休憩時間
- （繰り返し回数）←削る
- 非計測中に「歯車ボタン（Ready状態でのみ表示）」が押されたら，タイマー設定画面に遷移する．
- 関数
9．サウンドエフェクトモジュール
- 担当
- 三合堂・佐藤・品木
- 概要
- 他モジュールから値を受け取って，受け取った値に応じてサウンドエフェクトを再生する．
- 機能
- 以下の条件が満たされて他モジュールからフラグを受け取った場合，それに対応するサウンドエフェクトを再生する．
- 集中，休憩でカウントが”0”になった場合
- cancel(仮)ボタンが押された場合
- startボタンが押されたとき
- stopボタンが押されたとき
- 保存ボタンが押されたとき
- フラグ：
- ”start”：スタート，リスタートの音を鳴らす．
- ”stop”：ストップの音を鳴らす．
- “reset”：リセットの音を鳴らす．
- “finish”：（cancel仮ボタン）終了して保存の音を鳴らす．
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に登録が完了したら，タイマー画面に自動遷移する．
- 結果記録オブジェクトを元に初期設定情報を取得し，タイマー画面に渡す．
- 記録を保存する前に他のアクションがあった場合，何かしらの方法で警告を発する．
- 関数
11-1．ダッシュボード-データモジュール
- 担当
- 品木・田頭
- 概要
- ダッシュボード内で使用するデータをデータベースから取得する
- 機能
- firebaseから必要なデータを持ってくる
- データを使いやすいように処理する
- 子モジュールに配る
- 処理したデータをDBなどに書き込む
- ダッシュボーデータモジュール
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．ダッシュボード-プリセット設定モジュール
- 担当
- 田頭
- 概要
- タイマー設定で使用するプリセットの設定を確認・変更する
- 機能
- 共有データから現在のプリセット設定を受け取り表示する
- プリセットの内容を変更する
- 変更したデータを共有データおよびデータベースに送信する
11-4．ダッシュボード-記録表示モジュール
- 担当
- 品木・田頭
- 概要
- 過去の記録の表示
- 機能
- 今日の合計及び1週間の合計を算出して表示する
- ダッシュボードのカードモジュールにデータを渡す
- データを選択したときに編集画面を呼び出す
- ダッシュボードディスプタイムモジュール
11-5．ダッシュボード-記録編集モジュール
- 担当
- 品木・田頭
- 概要
- 記録内容の編集を行える
- 機能
- 記録のカラータグ・メモなどの内容を変更できる
- 記録を消去する
- 編集したデータを共有データおよびデータベースに送信する
- ダッシュボードエディットプリセットモジュール
11-6．ダッシュボード-サムタイムモジュール
- 担当
- 品木・田頭
- 概要
- 今日の合計時間、1週間の合計時間を表示
- 機能
- 今日の合計及び1週間の合計を算出して表示する
- ダッシュボードサムタイムモジュール
11-7．ダッシュボード-タイムライン表示モジュール
- 担当
- 田頭
- 概要
- 1回分の記録を表示
- 機能
- 今日の合計及び1週間の合計を算出して表示する
- ダッシュボードタイムライン表示用コンポーネント
12-1．時計モジュール（データ加工）
- 担当
- 三合堂・佐藤
- 概要
- 現在時刻を取得して，表示可能な形に加工して出力する．
- 機能
- Date()オブジェクトを用いて現在時刻を取得して，一定秒ごとに時間を更新する．
- 持っているデータを時間表示モジュールに渡す．
12-2．時計モジュール（データ表示）
- 担当
- 三合堂・佐藤
- 概要
- 受け取った値を表示する．
- 機能
- 受け取った値を任意の形式で描画する．
- 三合堂恭平
13-1.タイマー表示用コンポーネント
- 担当
- 田頭
- 概要
- タイマーの時間を表示する
- 機能
- 受け取った値を任意の形式で描画する．
- タイマー表示用コンポーネント
13-1.タイマー編集用コンポーネント
- 担当
- 田頭
- 概要
- タイマーの時間をセレクトで表示して,任意に変更する
- 機能
- タイマーの時間をセレクトで表示して,任意に変更する．
- タイマー編集用コンポーネント
14.Vuex(Store, getter, mutation, action)
- 担当
- 佐藤 品木
- 概要
- グローバル変数とその管理に関わる関数
- 機能
- グローバル変数とその管理に関わる関数
- store
14.Router
- 担当
- 佐藤
- 概要
- 画面ルーティング
- 機能
- 画面ルーティング
- router
最終更新日：2022/08/05 13:00:55
