2022 ソフトウェア設計及び演習用の班Wiki - 22::gr08::モジュール分け改

22::gr08::モジュール分け改

archive mode

>>{22::gr08}{班ページトップへ}

!!! このページについて
:中間前
::既存のモジュール分けに上書きするのが不安だったから,「改」という形にしました.
:中間後
::増えたモジュールを書き足しました.
::また,担当者も色々変わりました.

!!! outline
((outline))

!!!グローバルデータ
ページ最下部 Vuex項目を参照

!!!モジュール分け
!!1.メインスクリプトモジュール
:担当
::佐藤
:概要
::
@/src/router/((br))
@/src/store/((br))
使用するライブラリの初期化処理((br))
DBからユーザ情報,記録情報を取得してVuexにストアしておく.((br))
ルーティングを管理する.
:機能
::細やかな部分の処理を記述する.

!!2.ログインモジュール
:担当
::佐藤
:概要
::アカウントをすでに持っている人が,ログインを行う.
:機能
::ユーザの入力を受け付ける. 
*メールアドレス
*パスワード
::入力のバリデーションを行う.
::→ 例えば,メールアドレスの形式に当てはまっていなかったら,エラーメッセージを出す.
::「ログインボタン」が押されたらFirebaseと通信を行い,ユーザ認証をする.
::認証が通ったらユーザとしてログインする.
::認証が通らなかったら,その旨を伝える.
::「新規登録ボタン」が押されたら,新規登録画面に遷移する.

::>>{22::gr08::モジュール分け改::ログインモジュール}{ログインモジュール}

!!3.新規登録モジュール
:担当
::佐藤
:概要
::アカウントを新規作成する.
:機能
::ユーザの入力を受け付ける.
*ユーザ名 
*メールアドレス 
*パスワード 
::入力が正しいか確認する.
::正しくない場合はエラーメッセージを出す.
::「新規登録ボタン」が押されたら,入力情報をFirebaseに送り,認証が通ればアカウントを作成する.
::その後にDBにユーザ情報を新規登録する.

::>>{22::gr08::モジュール分け改::ログインモジュール}{ログインモジュール}

!!4.ホームレイアウトモジュール
:担当
::佐藤
:概要
::サイドバー,メイン画面のレイアウトを管理する.
:機能
::ホーム画面のレイアウトを定義する.

!!5.サイドバーモジュール
:担当
::佐藤
:概要
::各ページへ遷移するためのリンクを持ったグローバルメニューバー.
:機能
::
サイドバーを定義する.((br))
各ボタンを押すと対象ページへ遷移する．((br))
ちなみに伸縮できます．

::>>{22::gr08::モジュール分け改::サイドバーモジュール}{サイドバーモジュール}

!!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を適用→最後にバランスを見て微調整

Tag:

Attachment

New: append-tag

(download: 9632 bytes, at 2022/05/30 02:03:52 <frozen> )
(download: 9821 bytes, at 2022/06/10 14:34:56 <frozen> )
(download: 9931 bytes, at 2022/06/16 02:05:51 <frozen> )
(download: 11050 bytes, at 2022/06/16 03:09:59 <frozen> )
(download: 11177 bytes, at 2022/06/24 12:59:49 <frozen> )
(download: 11816 bytes, at 2022/07/28 15:29:41 <frozen> )
(download: 12448 bytes, at 2022/07/28 21:58:22 <frozen> )
(download: 13963 bytes, at 2022/07/28 22:30:50 <frozen> )
(download: 14088 bytes, at 2022/07/29 01:22:56 <frozen> )
(download: 14114 bytes, at 2022/07/29 04:41:52 <frozen> )
(download: 14302 bytes, at 2022/07/29 04:49:06 <frozen> )
(download: 14407 bytes, at 2022/07/29 04:51:53 <frozen> )
(download: 14332 bytes, at 2022/07/29 12:30:03 <frozen> )
(download: 13982 bytes, at 2022/07/29 12:32:31 <frozen> )
(download: 14504 bytes, at 2022/07/29 13:05:32 <frozen> )
(download: 14504 bytes, at 2022/07/29 13:18:05 <frozen> )
(download: 14513 bytes, at 2022/08/05 12:59:54 <frozen> )
(download: 14529 bytes, at 2022/08/05 13:00:35 <frozen> )

Edit

22::gr08::モジュール分け改

Attachment

Syntax Help

URL Link

Page Link

Image or Attachment

Text Decoration

Special Letter

Headline

Itemize

Enumerate

Table

Description

Quotation

Preformatted text