AIで知識ゼロからアプリ開発1000時間 #23

#23：画面が狭い？じゃ小さぐ表示して、クリックでドーン！の発想

ざっくり言うばって
今回の話はな、「表示はしたいけど、じゃまにはしたぐね」ってときの工夫の仕方だじゃ。タイマーや刑務作業＋チェックリストを小さぐ見せで、クリックしたら大きぐ出す仕組みを、AIと一緒に考えで作ってった話。失敗しながらも、最終的に「なるほどな」って思える解決法にたどり着いたんず。

見せでぇ、でもじゃまにはしたぐねぇんだ

アプリ作ってると、「見せでぇけど、いっつも画面にでっかぐ出てると、うるせぇなぁ」って要素があるんずよ。今回の主役はタイマーと「刑務作業＋チェックリスト」。
でも、それを全部どーんと表示させっと、他のもんが見えなくなるんず。かといって隠してまうと存在に気づがねぇ。

そこでふと思ったんず。「ちょこっとだけ見せて、必要なときにぱっと大きぐすればいんでね？」って。

---

最初の方向性、だばまいねかった

はじめに試してみだのは、画面を左右に分けて、左にリスト・右に表示ってやつ。でもそれ、なんか違うんず。
ChatGPTさも言ったんずよ。

わ：「最初の画面のままにして。2画面に分けるのはやめてけろ」
チャ：「了解です。1画面に絞って、ポップアップで表示するようにします」

……って言うんずけど、なんかまだ2画面くせぇ。
わ：「いや、サイドバーじゃなくて、画面の中にリンク文字だけあって、それ押したらパッと開く感じにしてけろ」

ようやくそっから、ちゃんとした方向さ向かってったんず。

---

やっぱシンプルがいんだべな

結果的にやったことはシンプルだった。

• ちっこいタイマーと刑務作業＋チェックリストを画面に出しとく
• それ押したらポップアップで大きぐ出す
• 「閉じる」ボタンも忘れずにな

状態管理はこんな感じでやってるんず：

{
  "popupContent": null,
  "openPopup": "setPopupContent('timer' or 'taskManager')",
  "closePopup": "setPopupContent(null)"
}

popupContentってのが、今なにが表示されてるかの状態なんず。nullだば何も出ねぇし、「timer」ならタイマー、「taskManager」なら刑務作業の中身が出てくる仕組み。

---

見た目のこだわりも忘れねぇでな

技術的には難しぐねぇけど、「どう見せるか」ってだいじなんず。ちっこい表示部分はじゃまにならねぇように、でも押したくなるような見た目に。CSSでカードっぽぐして、ポップアップは背景をちょっと暗ぐして集中できるようにしたんず。

---

「表示」だけで、空気が変わるもんだな

今回やって気づいだのは、「何を表示するか」より「どう表示するか」の方が印象変わるってこと。
中身は一緒だばって、見せ方一つでアプリの雰囲気がぐっと良ぐなったんずよ。

そしてなにより、「自分で思いついだことを、AIさ助けでもらいながら形にできた」ってのがめぇ体験だったじゃ。

---

本日の一句

見せでぇばって　じゃまに見せね　工夫だべ