0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

第4回:iPadでサクサク動かすには?【デバッグ&チューニング編】

Posted at

こんにちは、藤田です。
アプリが「一応動く」段階になったので、ここからが本番。
バグ取り&チューニング地獄です。
個人の思い付きでコードをただ書いただけだったので地獄でした。

🐞見つかったバグたち

開発中に出会ったバグたち、一部をご紹介。

  • 賞味期限が1970年になる問題
    → DatePickerの初期値が空っぽのとき、Unixの0秒扱いに。
     1970年賞味期限の食品はさすがに想像もしたくない。

  • タップ判定がずれる現象
    → iPadの解像度とレイアウトがズレてて、ボタンが押しにくく。
     MAUIのFlexLayoutいじって調整。

  • 食材一覧が表示されない日がある
    → SQLiteのクエリで WHERE ExpirationDate >= DateTime.Today としてたが、タイムゾーンのズレで見えない項目が発生。

⚡パフォーマンス改善Tips

地味な改善が積み重なると、操作感がガラッと変わりました。

  • 画像サイズの最適化
    → UIに表示するアイコン画像を全部WebP形式+リサイズ済みに。読み込みが爆速に。

  • DBアクセスを非同期化
    → 表示が一瞬止まることがあったので、SQLite操作はすべて async/await に変更。

  • 不要な再描画の排除
    → 食材を追加・削除するたびに一覧を丸ごと再描画してたのを、差分だけ更新するように修正。
    (普通に考えたらやらないはずがなにも考えずに再描画しているのが仕事との違いですね…)

👆タッチUIへのこだわり

iPad前提のアプリだからこそ、指で操作しやすいUIにはこだわりました。

  • ボタンサイズは少し大きめに(最低44px以上)
  • タップ領域を広めに確保(アイコン+テキスト両方押せるように)
  • 「消す」ボタンは赤で強調、でも誤タップ防止にワンテンポ置く演出あり

🎨 想像で作ったUIイメージ

冷蔵庫アプリの画面構成を、以下のようにイメージしてみました👇
※これは仮イメージですが、コンセプトはそのまんまです。

UI design for a frid.png

説明🧾

  • 上部ナビバー:アプリ名と+ボタン(新規追加)
  • 一覧表示:食材カード表示、賞味期限で色分け
  • カテゴリフィルター:肉・野菜・乳製品・その他
  • 下部通知領域:賞味期限が近いアイテムのアラート

次回の第5回:振り返りでは、冷蔵庫アプリを実際に使ってみた感想と、今後のアップデート構想について語っていきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?