2022 ソフトウェア設計及び演習用の班Wiki

22::gr08::ものと操作

archive mode

!!! ページリンク
>>{22::gr08}{班ページトップへ}

!!! Index
* ページリンク
* Index
* 概要
* アプリのページ構造
* 各画面のものと操作
** ログイン
** サイドバー（メニューバー）
** タイマー
** 時計
** タイマーセット
** タイマー結果の記録用ポップアップ
** 記録管理（ダッシュボード）
** カレンダー

!!! ものと操作の洗い出し
このチームで作成するアプリケーションの全体像を把握する目的で，アプリを構成する「もの」とそれに係る「操作」を書き出しました．

機能とそれを実現するための画面遷移が多くなりそうなので，アプリのページ構造も一緒に載せてあります．

現時点で内容を理解できている部分もあれば，思いつきで挙げただけで具体的な内容が分かっていないことも正直あります．((br))
開発を進める中でに良くも悪くも内容に変化が生じていくと思うので，次回以降も継続的に更新していくつもり．

'''第5回以降更新予定の内容（忘れないように）'''
* 各画面のイメージ画像貼っつける（figmaでモック作成中）

!!! アプリのページ構造

* ログイン画面
* メイン画面：
** サイドバー（メニューバー）
** 主描画画面：
*** タイマー
**** タイマー設定ポップアップ
*** 時計
*** 記録管理（ダッシュボード）
**** （カレンダー）
**** （ランキング）

>> 図1，2：↓遷移イメージ（第5回以降デジタルレイアウトに起こします．==汚いからアップで写すな笑==）((br)) <<
<<{IMG_2077 (1) (2).jpeg}

<<{スクリーンショット 2022-05-07 21.32.33.png}

!!! 各画面のものと操作

!! ''''1. ログイン''''
* 背景：もの
** 専用画面
* メールアドレス入力欄：もの
** 新規登録及びログインに使用するメールアドレスを入力する：操作
* パスワード入力欄：もの
** 新規登録及びログインに使用するパスワードを入力する：操作
* 「新規登録はこちら」ボタン：もの
** アカウントが未登録の場合に新規登録画面に遷移する：操作
*** 新規登録画面では，メルアド・パスワードの他にユーザー名を入力し，3つ値をキーとしてアカウントを作成する：操作
* 「ログイン」ボタン：もの
** 入力された上の2つの値でdbを検索し，アカウントにログインする：操作
* ログイン完了後，元の画面に自動遷移する：操作

!! ''''2. サイドバー（メニューバー）''''
* 背景：もの
** 画面左にfixed，ボタンで開閉式にするかも：操作
* 各子ページへのリング（ボタン）：もの
** ボタンを押した時，対応するコンポーネントが描画される：操作
* ログイン画面へのリンク（ボタン）or ログアウトボタン：もの
** ボタンを押した時，未ログイン状態ならログイン画面へ遷移 or ログイン後ならログアウトする：操作

!! ''''3. タイマー''''
* タイマーの入力ボタン（計測設定画面への誘導ボタン）：もの
** ボタンクリックでタイマーセット用画面に遷移する（ポップアップ表示）：操作
* （作動中）スタート/ストップボタン：もの
** セットされたタイマーをクリックするとカウントダウン/停止する
* タイマー：もの
** （作動中）設定した時間についてカウントダウン表示：操作
** （作動中）カウントダウン完了でタイマー停止：操作
* 時計：もの
** タイマーとは独立して表示：操作
* アラーム：もの
** カウントダウン完了時にアラーム音を鳴らす
* 計測時間設定ボタン（歯車アイコン）：もの
** ボタンを押したら計測設定画面を表示する：操作
* start，stopボタン：もの
** 動作の状態に応じてタイマーをstat又はstopする：操作
* resetボタン：もの
** タイマーを終了し計測記録画面を表示する：操作

!! ''''4. タイマーセット''''
* 背景：もの
** ポップアップ表示：操作
* プリセット（アプリ側が用意）：もの
** 選択した時間がセット時間に反映：操作
** 別の時間を選択する or 時間を編集したら上書き：操作
* カスタムプリセット（アカウントに紐づけられた履歴）：もの
** ログイン済みならカスタムプリセット内容を表示する：操作
* セット（周回，ユーザーが指定）：もの
*** 周回を行うかどうかの詳細設定を行う：操作
*** プルダウン式で値を入力：操作
*** アカウントにカスタムとしてセット内容を記録：操作
* 決定ボタン：もの
** ボタンを押すと設定をタイマー画面に反映しこのポップアップを閉じる：操作

!! ''''5. タイマー結果の記録用ポップアップ''''
* 計測時間：もの
** タイマーコンポーネントから実施時間のpropsを受け取って表示する：操作
* 計測内容（属性）の識別用カラータグのプリセット：もの
** プリセットのカラー（ラジオボタン形式）を選択する：操作
* コメント入力欄：もの
** 記録内容に関するコメントを入力する：操作
* 記録決定ボタン：もの
** dbに記録データを送信する＋元の画面に戻す：操作

!! ''''6. 記録管理（ダッシュボード）''''
* 背景：もの
** 表示する
* ユーザーの記録データ：もの
** タイムラインタブにて時系列に並べて一覧表示する：操作
** クリックで記録を編集する（→編集画面ポップアップ）
* 計測時間チャート：もの
** 過去の計測時間を視覚的に表示する：操作

!! ''''7. カレンダー''''
* 1ヶ月単位のカレンダー表示：もの
* 表示単位の移動ボタン（先月，来週，etc）：もの
** クリックで表示するものを移動させる：操作
* 日に対応する欄に過去に記録されたものを表示：もの
** クリックで過去の記録内容を表示する：操作

（作成途中）

Tag:

Attachment

New: append-tag

(download: 798013 bytes, at 2022/05/13 23:30:08 )
(download: 41531 bytes, at 2022/05/13 23:43:56 )
(download: 287853 bytes, at 2022/05/13 23:47:10 )
(download: 458450 bytes, at 2022/05/13 23:43:00 )
(download: 1443047 bytes, at 2022/05/13 23:41:32 )
(download: 238 bytes, at 2022/05/06 18:00:55 <frozen> )
(download: 390 bytes, at 2022/05/07 21:32:47 <frozen> )
(download: 453 bytes, at 2022/05/07 21:47:36 <frozen> )
(download: 1313 bytes, at 2022/05/07 22:25:48 <frozen> )
(download: 4218 bytes, at 2022/05/07 23:08:35 <frozen> )
(download: 4294 bytes, at 2022/05/07 23:10:51 <frozen> )
(download: 5721 bytes, at 2022/05/08 00:36:32 <frozen> )
(download: 5842 bytes, at 2022/05/08 00:40:57 <frozen> )
(download: 6526 bytes, at 2022/05/14 00:20:19 <frozen> )
(download: 19685 bytes, at 2022/05/07 21:33:16 )

Syntax Help

URL Link

[text|http://example.com//] http://example.com/to{text}

Page Link

[[PageName]] [[text|PageName]] >>{PageName} >>{PageName}{text}

Image or Attachment

<<{filename} <<{filename}{text}

Text Decoration

'' Italic '' ''' Bold ''' '''' Large-font '''' `` Typewriter `` `?` Preformatted `?` __ Underline __ == Strike == == DEL =={ INS } ((br)) line feed

Special Letter

((amp)) & ((bq)) ` ((lt)) < ((gt)) > ((lp)) ( ((rp)) ) ((lb)) [ ((rb)) ] ((ll)) (( ((rr)) ))

Headline

!!!! site-name !!! section-name !! subsection-name ! subsubsectino-name << section-name >> <<< subsection-name >>> <<<< subsubsection-name >>>> >> Centering and Large-font <<

Itemize

* item1 ** item1-1 ** item1-2

Enumerate

+ item1 + item2 ++ item2-1

Table

|| 1-1 | 1-2 | 1-3 || 2-1 | 2-2 | 2-3

Description

:item ::description

Quotation

6< quotation >9

Preformatted text

8< preformatted-text >8

Edit