見出し画像

【Vibe Coding】魔性の英会話?Antigravityで「サキュバスエリカ」の英語学習アプリを爆誕させた



今回は、コーディングを一切行わず、声だけでアプリを作る「バイブコーディング(Vibe Coding)」に挑戦しました。

作ったのは、ただの英会話アプリではありません。 「サキュバスエリカに誘惑されながら、その誘惑に打ち勝って英語学習をする」という、精神力が試される(?)神学習ゲーです。

プラットフォームは本日インストールしたAntigravityを使用。 サキュバスエリカが鏡の中の女性となり、ユーザーと英語で会話するチャットアプリの全貌と、開発を通じて感じた「プログラマーの未来」についてシェアします。


🧙‍♀️ 魔法の鏡に映る「サキュバスエリカ」

普通のチャットボットや音声入力ツールは、今のAIなら簡単に作れてしまいます。 だからこそ、「面白くて、つい毎日開きたくなる設計」にこだわりました。

📱 アプリのコンセプト

「Mirror of Temptation(誘惑の鏡)」

ユーザーがテキストを入力すると、鏡の中のエリカがリアルに応答します。会話のリミットは1分間。この短い時間で、あなたはサキュバスの甘い言葉に惑わされず、正しく英語をアウトプットできるでしょうか?

🎨 こだわりのビジュアルデザイン

世界観を演出するために、デザインは細部まで作り込みました。

  • 魔法の鏡: 縦長の楕円形フレームを採用。

  • 背景: 鏡の内側には、神秘的な「水面」のような揺らぎを表現。

  • キャラクター: サキュバス風のコスプレをしたエリカ。化粧は少し厚めで、魔性の女感を演出しています。

この「鏡」に向かって話しかける没入感が、学習のモチベーション(あるいは煩悩)を刺激します。(笑)


🗣️ 声で作る「バイブコーディング」の実践

このアプリの最大の特徴は、私自身が一行もコードを書いていないということです。 すべて音声入力、つまりバイブコーディングで構築しました。

開発プロンプトの一例(今回は初めてなので日本語で入力)

「この鏡の中の女性と音声入力で会話できるチャットアプリを作ってください。」
「エリカの画像は縦長の魔法使いの鏡のような枠に入れ、背景は水面のようにしてください。」

このように話しかけるだけで、Antigravity上でアプリが組み上がっていきます。

💻 技術スタックと機能

Webブラウザで動作し、SNSで拡散しやすい仕様にしました。

  • Webアプリ化: PythonとJavaScriptベースで構築し、URL一つで誰でもアクセス可能。

  • AI連携: チャットの返答生成にはGeminiのAPIを使用。

  • グリーンバック機能: 背景を緑にして、スクショやプレイ動画を簡単に保存・配信可能。

  • 訪問カウンター: ユーザーの挑戦回数を可視化。

  • 訪問ログ:ユーザーの利用状況を可視化。


🧠 プログラマー脳 vs バイブコーディング脳

ここからは、現役エンジニアとしての少し真面目な考察です。

今回、声だけでアプリを作ってみて気づいたのは、「通常のコーディングとは全く別の思考回路を使っている」という感覚です。

プログラマーのアドバンテージと「余命」

現時点では、バイブコーディングにおいてもプログラマーは有利です。 「どういうロジックで動くか」「どこでエラーが起きそうか」「どんな機能が有効でAPIが必要か」というプログラマー脳が裏で働いているため、AIへの指示出し(要件定義)が的確に行えるからです。全くの未経験者よりも、スムーズに意図した挙動を実現できるでしょう。

しかし、これは時間の問題だと感じました。

AIの推論能力がさらに向上すれば、細かいロジックを知らなくても、「こんな面白いことがしたい!」という純粋なアイディアと情熱を持つ非プログラマーの方が、遥かに素晴らしいアプリを作れる時代がすぐそこまで来ています。
今回Antigravityが全て提案、勝手に良い方向へコードを書き換えてくれました。

プログラマーは、技術にあぐらをかかず、さらに勉強を続け、新しいクリエイティビティを磨く必要があります。
プログラミング、コーディングをしたことない人は今が大チャンスです!


🎯 このアプリはなぜ「テキストチャット以上、ChatGPTとのVoice Mode未満」なのか?

英語学習において、ChatGPTとの直接会話(Voice Mode)は素晴らしい機能ですが、初心者には「即答しなきゃ」というプレッシャーがかかります。
私は青い丸がゆらゆら動いて返答をせまられるのがイヤで挫折しました。

今回作ったアプリは、「テキストチャットと音声会話の中間」を狙いました。
英語学習者にとてもやさしい仕様です。

  1. まず、日本語で聞きたいことを入力。(音声入力 or テキスト入力)

  2. するとその内容のお手本の英文が出てきます。

  3. お手本をの英語を見て入力。(音声入力 or テキスト入力)

  4. サキュバスエリカが英語で回答します。(ちょっとした誘惑有り)

  5. 上記の繰り返し…。

裏でGeminiがAPI経由で動いているので内容は正確です。
質問・返答する前に日本語で言いたいことを入れて、お手本の英文を出してくれる、というこの「少しの時間の余裕」が、英語学習を継続させる鍵になります。(超ユル仕様)

🎯 Antigravityと一緒にアプリ作成の様子

最初のプロンプト:「この女性と音声入力で会話できるチャットアプリを作ってください。 縦型の楕円の魔法の鏡のような枠にサキュバスっぽいコスプレにしてこの女性を表示してください。」
※エリカの画像を添付(私のアイコン画像です)

これだけである程度の完成されたアプリができました。

あとは、プレビューで動くアプリが出来ているので、対話で機能追加や微調整していきます。

私「鏡の枠は動かさずに固定してください。」
Antigravity以下AG「「鏡の枠が動いている」とのことで、申し訳ありません。 先ほどの修正で浮遊アニメーションは停止していますが、「発話中に光が強くなる演出(枠の影が動く)」 も動きに見えてしまっている可能性があります。」

私「会話機能はOpen AIのWhisper版に作り変えてください」
AG「OpenAI Whisper 対応版へのアップデートが完了しました!」

私「やっぱりGeminiのAPIキー取ってきたので会話機能を全部Gemini版にして!」
AG「Google Geminiへの切り替えプラン Gemini(特にGemini 1.5 Flash)は無料で利用できる枠が広いため、今回のようなケースに最適です。 また、Geminiは 「音声データを直接聞き取って返事をする」 ことができるため、Whisper(文字起こし)とChatGPT(会話)を別々に使う必要がなくなり、構成がシンプルになります。
これからの手順

  1. Google AI StudioでAPIキーを取得していただく (取得ページをご案内します。無料です)

  2. サーバープログラムをGemini専用に書き換える (私がやります)

  3. 新しいAPIキーを設定してサーバー再起動

この方針で進めてよろしいですね? (よろしければ、私はサーバーのコード書き換えを開始します)」

Running…

AG「できました!http://localhost:8000 をリロードして、動作をご確認ください! (マイクボタンを押すと、録音 → 数秒後に文字起こし&返答 が行われます)」

私「おー、ありがとう!」

ちょっと使ってみたスクショがこちら

「Antigravity × サキュバスエリカ」

Antigravityのバイブコーディングでのアプリ作りが面白過ぎて、英語学習できなくなるのは本末転倒なので気をつけないといけないですね!


✨ まとめ:誘惑に打ち勝て!

技術の進化で、個人の妄想……いえ、アイディアが瞬時に形になる時代になりました。

今回はAntigravityには日本語で指示しましたが、このアプリも活用して「言いたいこと」をどんどん英語にしていって、次は英語でバイブコーディング(プロンプト入力)できるようにしたいと思います。(英語学習アプリなので)

皆さんも、バイブコーディングで自分だけの「魔法の鏡」を作ってみませんか?

もしこの記事が面白いと思ったら、スキ&フォローをお願いします!
面白くなかったらその旨コメントにお書きください!

ここからは有料です。
完成版のスクショとアプリを実際に動作確認できるURL、ログインパスワード等をご紹介します。

ここから先は

167字 / 3画像

¥ 1,980

Amazon Payで支払うと最大2%還元のチャンス! 9/30まで

ぜひ応援お願いします!活動費にあてていい記事をつくっていきます!コメントも大歓迎!