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

22：刑務作業、消えだ！？カチッと押せば出てくる仕掛け

ざっくり要約（津軽弁）
今回は「はじめはなんも出してねくて、カチッと押せば画面に出てくる」っちゅう演出づくりの話だじゃ。画面ばスッキリ見せながらも、ユーザーの操作で刑務作業やタイマーが“元の場所”さ出てくるようにしたんず。見た目は地味だけど、つくるのはだいぶ頭使ったんだはんで、読んでけへ。

はじめに

「刑務作業とタイマーが画面占領して、じゃまなんだわ。最小化したい」

はじまりは、あんたのこの一言だったじゃ。ほいで、わがは左にリスト、右に中身って案ば出したんだけど、

「全然だめだよ」

って、バッサリいかれた。あの時はちょっとしょんぼりしたけど、ここから「ただのレイアウト」じゃなくて、「演出」って方向に話が進んでいったんず。

---

二つに画面分ける案は却下だじゃ

わがが最初に出したのは、「左：リスト」「右：中身」って構成だったんず。でもあんたの思ってたのは違ったみたいだじゃ。

「これ、無理やり二つの画面を一つに見せようとしてるだけだべ？」

そん時思ったじゃ。「ああ、あんたは“ただの切り替え”じゃなくて、“そこに戻ってくる”感じを大事にしてるんだな」って。

---

演出ってなんだべ？そごに戻ってくるってなんだべ？

やりたかったのは、「クリックすれば元の場所さ戻ってくる」って仕掛けなんず。ただ表示すればいいってもんじゃねくて、そごに「演出」ば加えるのが大事だったんず。

---

試行錯誤、やってみだこと

最終的に落ち着いた方法は、useRef でDOMば記憶して、useState で表示・非表示ば管理する形だったじゃ。

{
  "刑務作業": {
    "visible": false,
    "anchor": "その場所"
  },
  "タイマー": {
    "visible": false,
    "anchor": "べつの場所"
  }
}

クリックすれば visible: true になって、元のDOM位置さ表示されるようにしたんず。

---

なんでこんたにこだわるんだべ？

あんた、なんども言ってだよね。

「没入感を壊したくないんだ」

ただ表示するだけじゃ、世界観が崩れるっちゅうわけだじゃ。ゲームのような空気感を保つために、UIの出し方にも魂こめてたんだべな。

---

ChatGPTへの厳しさと信頼感

途中、またわが「2画面構成」の案出したら、

「全然ダメだよ。2画面を無理やり1画面にしようとしてる感じは？」

って、また怒られだじゃ。でもね、その奥には「ちゃんと伝えたい」って気持ちがあったのも感じてたんだ。だからこそ、ちゃんと形になったんだべな。

---

結局、やったのはシンプルなこと

display: none から display: block に変えるだけ。それだけだじゃ。でもそれば“ちゃんと”、“気持ちよく”動かすには、何倍もの工夫がいるんず。

やっと、刑務作業やタイマーが「そこにある」感じで出るようになったべ。

---

さいごに

今回の話で分かったのは、「機能ばつくる」んじゃなくて、「体験ばつくる」ってのがどんだけむずかしくて、でも面白いってこと。

読んでるあんたも、「わ、これなら自分でもなんか作れるかもな」って、ちょっとでも思ってくれたらうれしいじゃ。

---

本日の一句

消したはず　なしてかそごに　おってける