CursorとExpoで音声からSNSアプリを作る方法

TL;DR

Cursorのボイスモードに要件を伝え、Expoでひな型と画面を生成し、実機で確認しながら不具合を追加指示で直す。SupabaseとMCPを接続すれば、認証、投稿、プロフィール、RLSポリシーまで構築できるが、セキュリティやデータ設計は人による検証が必要である。

Transcript

はい、どうもしです。今回ですけども、 喋るだけでスマホアプリ解説ができるよう になりましたよっていう動画を撮って いこうかなと思います。ま、最近はね、 カーソルだったり、ジェミサ、ま、 コデックスとかね、ま、色々登場したと 思うんですけど、ま、最近登場した カーソルエディターにはボイスモードって いうのが標準で搭載されていて、で、 プラスJMIN3Pro、CEX、 クロードみたいなモデルもね、搭載され てるので、もうね、その、え、喋るだけで 欲しいアプリが作れるっていう時代になり ましたので、ま、今回その作り方を皆さん にシェアしていこうかなと思います。で、 どんなアプリ作れるのかって言うと、ま、 ちょっと見づらいと思うんですけど、ま、 簡単用語時点みたいなね、もう12時間と かで作れちゃい... Read More

Key Insights

• Cursorのボイスモードは、Expoのひな型作成からSNSの画面要件まで、自然言語の音声指示を開発作業へ変換できる機能である。
• Expoは、Windows環境から開発し、ブラウザーまたはExpo Goの実機で動作を確認しながら、iOSの審査とリリースを目指せる選択肢である。
• Claude 4.5 Opusは、エンジニア向けSNSのUI生成とブラウザーテストを約56分で進めたが、生成後にも表示や操作の修正が必要だった。
• 不具合の修正方法は、フォームが消える、データが保存されないなど、現在の症状と期待する動作を言葉で具体的に伝えることである。
• SupabaseのMCP接続は、Cursor上のAIから対象プロジェクトへアクセスし、スキーマやトリガー、RLSポリシーの作成を依頼する仕組みである。
• RLSポリシーは、ログイン中のユーザーだけに投稿を許可するなど、データベース側で操作条件を制御するために設定されている。
• データ永続化は、認証ユーザー、投稿、プロフィールがSupabaseへ保存され、アプリを再読み込みしても内容が残ることを確認して判断できる。
• AI生成アプリの公開では、セキュリティ、スキーマの妥当性、性能、インデックスを人が確認し、必要に応じてAIへ追加検証を依頼する必要がある。
• 🎬 このチャンネルの他の動画:
  • 個人開発の集客と収益を分析・改善する方法
  • Claude Codeで小規模副業を始める方法
  • バイブコーディングの脆弱性を防ぐ方法とは？
• 📺 このチャンネル: プログラミングチュートリアル

Questions & Answers

Q: Cursorの音声入力でスマホアプリを作る方法は？

Cursorで空のプロジェクトを開き、右上のボイスモードからExpoのひな型や必要な機能を具体的に指示する。生成後はアプリを起動し、ブラウザーまたはExpo Goで確認し、発見した不具合と期待する動作を言葉で伝えて修正を繰り返す。

Q: WindowsでExpoアプリの動作を確認する方法は？

npm run startで開発サーバーを起動し、ブラウザーでローカルホスト8081番を開けば確認できる。Android Studioのエミュレーターも利用でき、Expo Goをスマホへ入れれば実機でも確認できる。話者はWindowsからiOSの審査とリリースを進める目的でもExpoを選んでいる。

Q: 音声だけでSNSアプリの要件を伝える方法は？

対象ユーザー、利用技術、登録後の画面、投稿やいいねなどの機能、参考にするサービス、求めるUI品質をまとめて伝える。実演ではエンジニア向けSNS、Supabase、ユーザー登録、タイムライン、投稿、いいね、リポスト候補、Xを参考にしたUIを指定した。

Q: 生成されたアプリの不具合をAIに直させる方法は？

発生している現象と本来の動作を具体的に説明し、修正を依頼する。実演では、アカウント作成時に入力フォームが消える問題や、認証ユーザー、投稿、プロフィールがSupabaseへ保存されない問題を伝え、修正後に実機とデータベースの双方で確認した。

Q: CursorとSupabaseをMCPで接続する方法は？

Supabaseのアカウント設定でアクセストークンを生成してコピーし、Cursorの設定画面にあるMCPへ貼り付けて保存する。緑色のランプで接続を確認した後、対象プロジェクトを指定し、スキーマ、RLS、トリガーなどの作成をエージェントモードで依頼する。

Q: SupabaseのRLSポリシーはなぜ必要なのか？

RLSポリシーは、データに対して誰がどの操作を実行できるかを制限するために必要である。実演では投稿テーブルに4つのポリシーが作られ、挿入についてはログイン中のユーザーだけが投稿できる条件になっていることを確認した。

Q: Supabaseへのデータ保存を確認する方法は？

アプリで登録や投稿、プロフィール編集を実行し、Supabaseの認証画面とテーブルエディターで対応するデータを確認する。さらにアプリを再読み込みし、投稿やプロフィールが消えずに残っていれば、一時保存ではなく永続的に保存されていると判断できる。

Q: AIで生成したスマホアプリのセキュリティを確認する方法は？

AIへ安全性の点検を依頼するだけでなく、自分でもセキュリティを学び、RLS、認証、データスキーマ、性能、インデックスを確認する必要がある。実演ではログイン済みユーザーだけに投稿を許す設定を確認したが、話者も最適性の判断には知識が必要だと述べている。

Q: AI生成のSNSアプリを完成させるには何が残る？

実演時点では通知機能と検索機能がダミーであり、継続的な実装が必要である。プロフィール画像も未対応で、Supabase StorageやCloudflare R2などへの画像保存が候補として挙げられた。Google認証を追加すれば、登録済みのアイコン画像を表示できる可能性も示されている。

Summary & Key Takeaways

• 最初にCursorで空のプロジェクトを開き、音声でExpoのひな型作成を依頼する。生成後はnpm run startで起動し、ブラウザーのローカルホスト8081番、またはスマホのExpo Goで表示を確認する。WindowsでもExpoを使えばiOSの審査とリリースまで進められると説明されている。

• 次にエンジニア向けSNSという要件を音声で伝え、登録後のタイムライン、投稿、いいね、リポスト候補、Xを参考にしたUIを生成させる。Claude 4.5 Opusは約56分でUIやテストまで進めたが、入力時にフォームが消えるなどの不具合もあり、現象を具体的に伝えて修正を重ねた。

• データ永続化にはSupabaseを採用し、アクセストークンでMCPサーバーを接続して、スキーマ、認証、トリガー、RLSポリシーの作成を依頼する。最終的にユーザー、投稿、プロフィールの保存を確認した一方、検索や通知はダミーで、画像には別途ストレージが必要だった。