2023 ソフトウェア設計及び演習用の班Wiki - 23::gr01::各画面モジュール

23::gr01::各画面モジュール

archive mode

>>{23::gr01::モジュールの仕様書}{戻る}
!!! 概要
各画面のデザインを決定するモジュールです。
!! メイン画面
アプリの画面全体で統一性を持たせるために背景を見やすくシンプルなデザインにし、表示されるボタンや数値をそれに合わせてデフォルメしました。
!! グラフ表示画面
ヘッダーを作成し、一つ前の画面に遷移するバックボタンとメイン画面へ遷移するホームボタン（アプリタイトル）を設置した。グラフに関しては、3つのグラフをすべて異なる色で作成し、見やすいように同系色の背景色も追加した。コンテンツはすべて中央に配置し、両側に余白をつけることで視認性を高めた。

!! スタート画面
アプリ起動時に最初に表示される画面である．ヘッダーの左にログイン状態であればユーザーネームを表示する．右にログイン状態であれば「ログアウト」，ログアウト状態であれば「新規登録」「ログイン」の各ボタンを表示する．画面中央部にスタートボタンを設けた． 
各ボタンのクリックによる画面遷移を実装した．画面遷移の対応は以下の通りとなる． 
「新規登録」ボタン　→　新規会員登録画面 
「ログイン」ボタン　→　ログイン画面 
「スタート」ボタン　→　メイン画面

!! 新規会員登録画面
会員登録を行う画面である．画面中央に，上から順に「ユーザ名」，「メールアドレス」，「パスワード」の入力フォームを設けた．「登録」ボタンのクリックによって，入力した情報をもとにFirebaseのAuthentication機能によりユーザ登録を行う．ユーザ登録が成功すればスタート画面へ遷移する． 
その下にある「ソーシャルログインはこちら」ボタンでログイン画面へ遷移し，その画面内のソーシャルログインのところまで自動スクロールする． 
「もどる」ボタンでスタート画面へ遷移する．

!!ログイン画面
画面中央に，上から順に「メールアドレス」，「パスワード」の入力フォームを設けた．「ログイン」ボタンのクリックによって，入力した情報をもとにFirebaseのAuthentication機能によりユーザ認証を行う．ユーザ認証が成功すればスタート画面へ遷移する．
その下にある「Sign in with Google」，「Sign in with Facebook」，「Sin in with Github」の各ボタンで各プロバイダのポップアップウィンドウが開き，必要事項を入力してログインできる．認証が成功すればスタート画面へ遷移する．
その他のボタンに関してもクリックによる画面遷移を実装した．画面遷移の対応は以下の通りとなる． 
「新規登録」ボタン　→　新規会員登録画面 
「もどる」ボタン→スタート画面

!!設定画面
目標設定を行う画面である．画面中央に，上から順に「身長」，「期間」，「現在体重」，「目標体重」，「目標BMI」の入力フォームを設けた．「設定」ボタンのクリックによって，入力した情報をもとにFirebaseのCloud Firestore機能によりユーザデータのドキュメントに保存する．目標設定が成功すればメイン画面へ遷移する． 
BMIに関しては身長と体重から自動で算出しており，また，スライダーで調整可能となっている．BMIは初期値として，２２が入力された状態となっている．BMIの値によってピクトグラム？のような画像を変化させ，ユーザが設定を行うときの視覚的に補助する．
「設定中断」ボタンのクリックで，メイン画面へ遷移する．

!!データ入力画面
上から順に「体重」，「入力年月日」，「運動項目」，「運動時間」，「消費カロリー」，「食べ物」，「摂取カロリー」の入力フォームを設けた．「入力」ボタンのクリックによって，入力した情報をもとにFirebaseのCloud Firestore機能によりユーザドキュメントのコレクションに保存する．入力が成功すればメイン画面へ遷移する． 
入力フォームの間にある「消費カロリー算出」，「摂取カロリー検索」ボタンによって計算モジュールとデータベースに関するモジュールを呼び出すことで入力補完機能を実装した． 
「運動項目」，「運動時間」　→　「消費カロリー算出」ボタン　→　「消費カロリー」 
「食べたもの」　→　「摂取カロリー検索」ボタン　→　「摂取カロリー」 
一番下の「もどる」ボタンのクリックで，メイン画面へ遷移する． 
!!!(各画面名).jsで上記に示すモジュールを構成している．
*各画面のボタンクリック時の機能を実現するモジュールの呼び出しを行うモジュール
*画面読み込み時に必要な情報を取得するモジュールの呼び出しを行うモジュール

Tag:

Attachment

New: append-tag

(download: 61 bytes, at 2023/07/14 13:20:42 <frozen> )
(download: 126 bytes, at 2023/07/14 13:21:38 <frozen> )
(download: 153 bytes, at 2023/07/14 13:25:21 <frozen> )
(download: 174 bytes, at 2023/07/14 13:25:44 <frozen> )
(download: 358 bytes, at 2023/07/14 13:33:34 <frozen> )
(download: 356 bytes, at 2023/07/14 13:33:50 <frozen> )
(download: 374 bytes, at 2023/07/14 13:34:37 <frozen> )
(download: 372 bytes, at 2023/07/14 13:35:30 <frozen> )
(download: 378 bytes, at 2023/07/14 13:36:28 <frozen> )
(download: 811 bytes, at 2023/07/14 13:42:11 <frozen> )
(download: 804 bytes, at 2023/07/14 13:42:47 <frozen> )
(download: 2259 bytes, at 2023/07/27 16:16:43 <frozen> )
(download: 5022 bytes, at 2023/07/27 16:45:31 <frozen> )
(download: 5112 bytes, at 2023/07/27 16:46:36 <frozen> )
(download: 5124 bytes, at 2023/07/27 16:47:27 <frozen> )

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