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

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

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

!!ログイン画面

!!設定画面

!!データ入力画面