Trial and Error

深瀬 鮎美のあたまの中身...

製作中のあたまの中の取り止めの無いぐるぐるした思考を、時系列に羅列してみました。

お正月、snsに投稿する年賀状を兼ねたpython使用のアプリを作ってみたい!

Python学習の一環で、何か「動くもの」を作ってみたい 時期的に年賀状を兼ねたsnsに投稿できるものにしよう! スマホで触ると、ただの「点」が「馬のシルエット」や「自分だけの言葉」に変わるとか? バラの花が降ってきて、その組み合わせで運勢が決まるとか 勉強を兼ねているけど 遊んでくれた人がちゃんと楽しいようにしたい おみくじよりもう少しだけ面白い作りたい 直感で選ぶと結果が変わる「運命分岐型」で、受け取る人を物語へ引き込むか 日付で種が芽吹く「成長する年賀状」で、時間差の演出に挑むか project_rootの下にapp.py、templates、staticを配置する「ブレない土台」を作る Viewportを固定し、PC用ではなくスマートフォン操作を最優先にする 小さなモチーフがパラパラと、ランダムな位置に落ちてくる演出の指示 ドラッグ中は指に追従し、離した位置で止まる「しっとり」した手応えの実装 同じ色同士を近づけたとき、物理的に結合せず「別の画像に入れ替える」という動きを作りたい ふわっと吸い寄せられて合体した後のモチーフに、 小さなふよふよとした命を吹き込めたら良いな それが3つ揃った瞬間に、画面中央の定位置へスッと移動していくフェーズ2の設計 合体した順番をPythonが受け取り、その人だけのメッセージを出力する連携 バラの花が降ってきて、その組み合わせで運勢が決まる…… Pythonを使って、バックエンドのロジックを組む練習をしよう! Antigravityに渡すプロンプトをどれだけ詳細に、正確に書けるかが大事だな 要件定義をしっかり伝えて、自分の意図した通りのコードを引き出す練習にしよう バラの色は赤・黄・紫の3種類。5個キャッチするとして 単純に計算すると3の5乗で243通り!? 全部の結果を書くのは現実的じゃないな 「最初・最後・一番多い色」の3要素に絞れば、3×3×3で27通りに集約できる このロジックをPythonの「辞書型」でスマートにしよう コードは書けた。 次はデザインをつめる バラが溜まっていく感覚を「しっとり」させたい ずっとくるくるまわっている 物理演算の摩擦係数を調整 高級感のある動きを目指す Renderにデプロイしてみたけど……スマホで触ると反応が悪い? タップしてからバラが反応するまで一瞬遅れる。 ストレスがある 原因を調べて、touch-action: none や e.preventDefault() を導入 スマホの「長押し判定」をスキップさせて、指に吸い付くような操作感に修正! 最後の「もう一度遊ぶ」ボタンが、スマホでだけ押せなくなった さっき入れた誤作動防止の設定がボタンの邪魔をしてるのか 特定のエリアだけ除外するコードを追加して解決 これでPCでもスマホでも、完璧に動くプロダクトになった 「作りたいもの」を「形にする」練習ができた! もっと色々できるようになりそう