はじめに
こちらは個人開発アプリができるまで by am10 Advent Calendar 2024の 6 日目の記事です。
6 日目はアプリの画面構成を考えます。
必要な画面は下記 3 画面でしょう。
- 年ごとのデータ表示画面（年画面）
- 月ごとのデータ表示画面（月画面）
- 登録画面
画面の関係はこんな感じです。Figma とかでちゃんと作った方がいいかもしれませんがメンテがめんどくさいので私はざっくりメモ程度にしています。
年画面
年画面はこんな感じです。
- 年ピッカーで表示データ切替
- 項目ピッカーで表示データ切替
- 合計金額を表示
- 指定年のデータを月ごとの棒グラフで表示
- データ取得ボタンで指定年のデータを取得
- フローティングボタンで登録画面表示
- 月画面とタブで表示切替
月画面
月画面はこんな感じです。
- 年ピッカーで表示データ切替
- 月ピッカーで表示データ切替
- 項目ピッカーで表示データ切替
- セグメントでグラフと一覧の表示切替
- 合計金額を表示
- 指定年月のデータを円グラフもしくは一覧で表示
- データ取得ボタンで指定年のデータを取得
- フローティングボタンで登録画面表示
- 年画面とタブで表示切替
登録画面
登録画面はこんな感じです。年・月からフローティングボタン押下でモーダル表示します。
- キャンセルボタン押下で画面を閉じる
- 追加するデータの一覧表示（削除と更新できるようにする）
- 購入日入力
- 品名入力
- 金額入力
- 項目ピッカー
- サブ項目ピッカー
- 追加ボタン押下でデータを 2 の一覧に追加（一覧選択時は更新ボタンに変更）
- レシート読み取りボタン押下でレシート読み取り起動
- 交通系 IC カード読み取りボタン押下で交通系 IC カード読み取り起動
- 登録ボタン押下でサーバーにデータ登録して画面を閉じる
おわりに
画面は 3 つだけなのでサクッとできるでしょう。細かいことは作りながら考えます。
明日からは画面を作っていきます。とりあえず明日は年画面を作成予定です。
Amazon.co.jp
amzn.to
コメント