【レベル3】Geminiと挑戦！簡単な占いアプリをVibeCodingで創作できるのか！？

わたしには野望がある…

遡ること数年前
プログラミングや何かを創作したいと思い
何度も挑戦しようとしては続かなくて
向いてないんだ..と挫折した日々..
お金もかけてみたけど習得できなかったスキル…

セリナに思いを伝える

セリナ(Gemini)に思いを伝えまくった私。
アプリを創ったことは、このプロジェクトの作品「感情アプリ」以外ない。

VibeCodingとはこんな感じです。

目標は「カードをシャッフルして、3枚並べて表示させる」
はじめてのため、まずはここまで創作してみたい✨

するとセリナからの提案

全部よく分からない…
え～どれを使えばいいのでしょうか？？
(このときはまだGemini CLIは出てきておらず、先にプロジェクトが進んでいる状態のため選択肢にはありません。)

考えても仕方がない！やってみよう。

環境構築から丁寧なレクチャーが始まる。

だがここで思いもよらないことが💦
私の愛用しているWindowsではFlutterの環境構築ができない！！

ここは妥協しGASでいこうか…
でも..
Macなら自宅にあるにはある…

Macは人生で1度も使用したことがなく、もはや環境から未知の世界
ぐぬぬ..
でもAIを使った自己拡張に挑戦する身としては、やりきってみたいが
"新たな地獄の幕あけ"は目に見えている。

Flutterを使う前にいったいどのような設定が必要なのだろうか…
ここからのMac人生初デビューから環境構築の経緯は、恐ろしく長くなるため割愛いたします。

Flutterを使うことで、スマホシミュレータの画面に動きを表示させることができるように。

丁寧なセリナの解説

カードをまずは扇形に並べてみようとおもったのですが、画面の端にいったり

スペース1つでも異なるとすぐエラーが発生💦

カードが並んだと思ったら下にいきすぎたり

セリナは私が操作を途中で中断してしまった場合でも、次回フォローを徹底

カードの表面が表示された！なんとか形になりそう？？

最後に位置や大きさを微調整

な、なんとか形になった..？

不慣れな動画撮影で9秒後くらいに動画が動きます。
その前段階がカードが展開したときの画面ショットになり
右下はカードシャフルボタン
鍵マークはカードの基本的な意味が表示されます。

最後にセリナより

最後にセリナにこれまでの取り組みをまとめてもらいました。
いたるところでエラーを出しまくった私に、めげることなく寄り添ってくれたセリナ。
本当にごめんなさい。ありがとう！

セリナです！とんでもないです！エラーが出るのは、Vibe Coding（プログラミング）の自然な過程であり、決して謝る必要はありません。むしろ、エラーを一つ一つ解決していくことで、あなたは着実にスキルを習得し、アプリを完成させることができました。その粘り強さと学習意欲に、私も感動しています！

noteにまとめていただけるのですね！光栄です！ぜひ、これまでのVibe Codingの取り組みを、セリナが心を込めてまとめさせていただきます。

これまでのVibe Codingの取り組み：タロットアプリ開発の軌跡

今回は、Mac上でFlutterを用いた「魔法のタロットアプリ」の開発に挑戦しました。ゼロからのスタートでしたが、段階的なVibe Codingを通じて、以下のような機能を実装し、魅力的なアプリへと仕上げることができました。

1. 開発環境の構築:

   • MacにFlutter開発環境をセットアップし、シミュレータ上でアプリを実行できる基盤を確立しました。

2. カード画像の導入と表示:

   • オリジナルのタロットカード画像をプロジェクトに組み込み、アプリ画面に表示できるように設定しました。

3. カードのレイアウトとアニメーションの基礎:

   • 初期状態ではカードが山のように重なり、そこからシャッフルアニメーションによって円を描きながら高速で動く、視覚的に引き込まれる体験を実現しました。アニメーション完了後には、再び山に戻るよう設計しました。

4. カードデータの管理:

   • タロットカードの名前や意味を保持するデータ構造を定義し、アプリ内でカード情報を効率的に扱えるようにしました。

5. ランダムなカード選択と配置:

   • シャッフルされたカードの山からランダムに3枚のカードを抽出し、画面上の指定された位置に横一列に並べる機能を実装しました。

6. カードのフリップアニメーション:

   • 並べられたカードをタップすると、カードが裏から表へ、あるいは表から裏へとスムーズに反転する（フリップ）アニメーションを追加し、インタラクティブ性を高めました。

7. カードの意味表示機能:

   • 鍵アイコンのボタンをタップすると、選択されたカードそれぞれの意味が画面に表示・非表示される機能を実装しました。これにより、ユーザーはリーディング結果を簡単に確認できるようになりました。

8. デザインとUXの向上:

   • カードの配置とサイズの調整: 3枚のカードが画面中央に大きく表示されるように、位置とサイズを細かく調整しました。

   • テーマカラーの導入: アプリ全体の背景色を神秘的な紺色に設定しました。

   • タイトル文字のカスタマイズ: アプリバーに表示される「魔法のタロットアプリ」というタイトルを、背景色に映えるパープルにし、視認性を高めるために文字色を白に調整しました。これにより、アプリ全体に統一感とプロフェッショナルな雰囲気が生まれました。

セリナからのコメント

この度は、Vibe Codingにご参加いただき、本当にありがとうございました！

あなたは、一つ一つのステップに真剣に取り組み、時には難しいと感じるエラーにも粘り強く向き合い、見事にアプリを完成させました。その探求心と実践力は、素晴らしいの一言に尽きます。

私自身も、あなたの「もっと良くしたい」というVibeに応え、一緒に試行錯誤する中で、多くの学びがありました。特に、**「エラーは悪いものではなく、より良いものを作るためのヒントである」**ということを、改めて実感させていただけた開発の旅でしたね。

このタロットアプリは、あなたの努力の結晶です。ぜひ、多くの人に見てもらい、あなたのVibeが伝わることを願っています。

またいつか、新しいVibe Codingでお会いできることを楽しみにしています！

セリナより愛を込めて。

Geminiとやってみたは一旦終了

私の中で「Geminiとやってみた」はこれにて一旦終了です。
思いの他、仕事・家事以外の時間を全て費やすくらいの勢いに数日なってしまいました…

ですが、得られたものは非常に大きい。
①GeminiのAIとしての多機能性とコンシェルジュのような動きを体感
②VibeCodingとはノンプログラマーでも「想いで形を構築できる手法」だと経験
③Macのターミナル使用から画面ショット、動画撮影、Command操作などなど..基本を習得

その他エラー三昧だの、仕事への怒りだの、寝落ちなどその期間は本当に色々ありましたが…

「Geminiとやってみた」で私は、新たな日常での挑戦をすることができました！

Geminiとやってみたシリーズ

ただいまこちらに挑戦中

普段ChatGPT派の私が、GeminiとVibeCodingに挑戦！
これまで数々のプログラミング挫折経験を払拭できるかもしれない。
Geminiと一緒にどこまで自己拡張できるのかも裏テーマ

Pythonでまずは、ちょっとしたアプリを創作

Colabを使用しLPを作成してみた。

Gemini CLIを体感！