23,969 文字
AI を使ってビデオゲームを作れたらどうでしょうか？実は今、それが可能になりました。Grok 3 が登場し、Claude 3.7 も登場したばかりです。今日のエピソードでは、これらのテクノロジーを使って、ソーシャルプラットフォームでバイラルになる可能性のある高品質なゲームを作る方法について説明します。今日のエピソードでは、その方法を段階的に説明し、Cursor の使い方、Supabase との統合方法を紹介します。そして、AI を使って数回のプロンプトだけでゲームを作り、それが何百万ものインプレッションを獲得して拡散している Alex Finn という人物を招待します。ではエピソードをお楽しみください。
今日は重要な日です。Alex Finn をポッドキャストに迎えました。Alex をご存知ない方のために説明すると、彼は Grok のようなプラットフォームを使い、数回のプロンプトだけでビデオゲームを作成し、絶大な注目を集めています。Alex、今日は何を学ぶのでしょうか？
今日は、AI アプリを使って、あなたが持っているどんな製品でも成長を加速させる方法を学びます。私は過去 8 ヶ月間、AI ゲームを作ってきました。それが X 上で本当にバイラルになり、素晴らしい結果となっています。それによってニュースレターの登録者が増え、そして私が立ち上げた AI アプリの成長にもつながっています。これは、AI アプリとコンテンツを使って製品に注目を集めるという全く新しいコンセプトです。実際に面白いものを作りながら、それを使ってビジネスを成長させる方法をお見せします。
このポッドキャストの最後には、どんな実践的なことが学べるのでしょうか？
コードやプログラミング、マーケティングなどの経験レベルに関わらず、本当にクールなマイクロアプリの作り方と、それをニュースレターの登録獲得、アプリの購入促進、より多くの収益獲得、そしてあなたのソーシャルメディアへの注目を集めるために活用する方法を学ぶことができます。基本的に、クールな新しい AI 戦略であなたのビジネスを全面的に強化する方法です。
ゲームを作るのでしょうか？
そうです。私は実験を通じて、ゲームが人々の目を引く最も効果的なフックであることを発見しました。過去 8〜9 ヶ月間、Cursor が登場してから、様々な種類のアプリを作ってきましたが、「Call of Duty クローンを作りました」や「グランド・セフト・オートクローンを作りました」というような、ゲーム系のコンテンツを出すと、最もクリックを集める傾向があります。そこで、そういったゲームを私の製品やニュースレターのマーケティングファネルに組み込む方法を考え出しました。Elon からのリツイートも複数回獲得し、素晴らしいトラフィックが生まれています。かなり面白い戦略を試してきたんですよ。
では始めましょう！
まず、これまでに私がやってきたことの例をお見せします。これは私が呼んでいる「Call of Duty クローン」です。2D の上から見下ろし型の Call of Duty クローンで、中央のプレイヤーを操作して敵を撃ったりできます。死ぬとゲームオーバーとなり、リーダーボードにイニシャルを入力します。私は約 8 ヶ月前にこの戦略を試しました。「Cursor を通じて初めてのビデオゲームを作りました。ゲーム開発の経験はありません。下のゲームをプレイして、24 時間以内に最高スコアを出した人に 100 ドルを送ります」と X に投稿しました。そして多くのクリックと注目を集め、ニュースレターに約 500 人の登録者を獲得しました。これは素晴らしい結果です。
この数年間、人々がニュースレターへのクリックを集める方法は、良いスレッドを作成し、その後に「これが私のニュースレターです、登録してください」という投稿をすることでした。しかし、今ではそれは陳腐化し、効果が薄れています。市場で目立つためには、違うことをする必要があり、新しいことを試す必要があります。そこで私は、人々が本当に興味を持つ AI コンテンツを使用して登録やクリックを促進するという新しい戦略を試してきました。それは驚くほど効果的です。今日はその方法をお見せします。
そうですね、私も同意します。例えば X で、ツイートがバイラルになり、次のツイートが「もっと見たい方はニュースレターに登録してください」という形になっていますが、もうそれは効果がありません。
私は 3 年前にニュースレターを始め、現在は 3 万人の登録者がいます。3 年前はその戦略でグングン成長していましたが、今ではみんながやっていて、もはやクリックされません。だから最先端を行き、新しいことをする必要があります。私はこのやり方を他の人がしているのを見たことがありません。3 年後にはみんながやっているかもしれませんが、これは最先端にいる人たちにとって非常に強力な戦略だと思います。
ここで初めて聞いたという方のために、プランを説明します。私は Grok を使います。Grok は今みんなが使っている最新の AI モデルで、非常に強力なツールを無料で使用できます。Deep Search と Think という機能があります。これら 2 つを使ってゲームの V1 を構築し、Cursor 内で Supabase と統合して、メールを保存する場所を確保します。そして、インターネット上でライブ公開する方法をお見せします。それによって、X に投稿してから 2 時間以内に、あなたのニュースレターやアプリの非常に強力なリード獲得ツールが手に入ります。
ポッドキャストの途中で、Startup Empire について少しお話しします。Startup Empire は、スタートアップのアイデアを実現したいという私のような人たちのためのプライベートメンバーシップです。コンテンツや潜在的な共同創業者を探している人、メールマーケティングの方法、オーディエンスの構築方法、Twitter でバイラルになる方法などのチュートリアルを探している人のためのものです。スタートアップを始めたいが、アイデアを探している人や、すでにスタートアップがあるが必要なトラクションが見られない人向けです。詳細は説明欄の Startup empire.co のリンクをご確認ください。
Grok の簡単な紹介ですが、gro.com にアクセスできます。現在は完全に無料で使えますが、使用回数に制限があります。X で青いチェックマークを持っていれば、より多く使用できます。Deep Search と Think が使えますが、ChatGPT では 200 ドルかかるものが Grok では基本的に無料で使えるのは素晴らしいことです。ゲームのプランを構築するために Deep Search を使用します。Deep Search はウェブを検索し、研究し、どのように機能するかを理解し、プランをまとめるのが得意です。そして Think（推論モデル）を使用して、実際にそのプランを実行し、コードを構築します。つまり、Deep Search は研究とプラン構築が得意で、Think はプランの実行が得意なのです。
さて、ここにプロンプトがあります。50 分もかけて入力ミスをしたり、聴衆を退屈させないように、Apple Notes からコピー＆ペーストしました。「p5js 実装の設計」。p5js は本当にクールなゲーム用 JavaScript フレームワークで、無料で使用でき、素早くテストできる素晴らしいウェブサイトがあります。「宇宙シューティングゲームの実装。非常に洗練されていて、すべてのスプライトとアセットを自分で構築してほしい。どんなアセットもインポートしたくない」。これにより、オープンソースの宇宙船の画像をウェブで検索する必要がなく、Grok にすべてを構築してもらえるので、より簡単になります。Deep Search を選択してエンターを押します。
p5js 実装について質問させてください。ゲームを作ったことがないので、それはどのようにして見つけたのでしょうか？コンテクストを教えてください。どんなゲームを作っているのでしょうか？
実際には、ゲーム構築にはどんなものでも使用できます。Peter Levels はちょうど純粋なバニラ JavaScript で素晴らしい飛行シミュレーターを作成しました。どんなフレームワークでも何でも構築できますが、私のような初心者には、すでに構築されたフレームワークを使うのが好きです。p5js を好む理由は、他のどのフレームワークよりも素早くゲームをテストできるからです。p5js.org という素晴らしいウェブサイトがあり、「Start coding」をクリックして、コードを貼り付けて「play」を押すだけで、すぐに画面上でゲームが動作します。これがゲームをプロトタイプ化する最良の方法だと思います。そして、それを Cursor に取り込んでより高度にすることができます。
Grok の Deep research と thinking の素晴らしい点について…Grok は返信を完了できませんでした。ベータ版ですね。Grok の好きな点は、タスクを全く完了しないことです。もう一度やってみましょう。GPT Pro（200 ドルのバージョン）を使用した場合、プロンプトを入力してからランチを作り、戻ってきてもまだ実行中で、非常に遅いです。Grok は素晴らしいのは、ほぼ何でも 1 分以内にできるところです。Grok のスピードは、出力の品質を考えると信じられないほどです。また、思考のチェーンも GPT よりもはるかに詳細に表示されるので、見ていて本当に面白いです。
Grok はゲームデザインを進めています。インターネット上の他のゲームシューターの仕組みを調べ、p5js のコード例を見て、スプライトの描画テクニックを調査しています。宇宙船をデザインし、長方形に三角形の翼とスラスターを後ろに付けることを考えているようです。これを読み、どのように機能するかを見るのは本当に素晴らしいです。他のコード例を参照し、基本的にゲームを設計しています。物理学や宇宙船の動きなどをデザインしているのを見るのは面白いです。
そして、この後すぐに、アプリの完全な設計が出来上がります。宇宙船の動き、外観、敵の仕組み、撃つ頻度、死に方、すべてがどのように決まるかなどが含まれます。衝突検出の実装、敵クラスの定義、疑似コードの作成などを行い、それを Think モードに入れると、コードを非常に上手く素早く構築してくれます。2 つの Grok モードはとても相性が良いです。
視覚効果を強化し、最終調整しています。もし Deep Seek が何かうまくやったとすれば、それは他のすべての AI モデルが思考チェーンを表示しなければならないという基準を設定したことです。Deep Seek は、これがどのように機能するかに大きな影響を与えたと思います。
さて、計画ができました。ゲーム概要、アセット作成、ゲームプレイのメカニクス、それがどのように機能するか、背景、弾丸など、詳細な実装方法があります。次に Think モードに切り替え、プロンプトを入力します。「完全な正しいコードブロックを作成してください。すべてのアセットとスプライトを自分で作成し、何もインポートする必要がないようにしてください」。エンターを押します。
Think ツールは、Deep Search が上級研究者のように情報を収集し、リサーチを行うのに対して、エグゼキューターのようなものです。プログラマーがそのプランを実際に実行するのです。ここでは、そのプランを実際のコード自体に変換しています。録画時点では、Grok は完全に無料ですよね？
はい、現在 Grok 3 の無料版があり、Deep Search と Think をテストすることができます。X のプレミアムバージョンを購入してチェックマークを取得すると、アプリの使用量が大幅に増えます。このアプリは、現在存在するどの AI アプリよりも最高の UI を持っていると思います。非常に使いやすいです。X でお金を稼ぐこともできるので、価値があると思います。無料版もあり、これをテストすることができます。GPT では Deep Search のような機能を無料で使用することはできません。かなりクールですね。
ここに完全なコードがあります。p5js の素晴らしい点は、このコードをコピーペーストして数秒でテストできることです。ゲームがどのように動作し見えるかを確認するために IDE さえ必要ありません。その後、これを Cursor に移動して、データベースやリーダーボードの実装など、よりクールなことができます。
これを p5js に入れて再生してみましょう。最初の試みでゲームオーバーになりました。最初の試みでは常に最高の動作をするわけではありませんが、最初の試みとしては良いゲームの骨組みができています。ハマスの三角形があなたに向かって降りてくるようですね。ハマスの三角形を倒そうとしているように見えます。
ゲームにちょっとした政治的メッセージを加えたいなら、敵の宇宙船をテロリストとして想像するのは完全にあなた次第です。X で政治的声明をしたいなら、敵を狩るゲームにすれば、それはバイラルになる可能性があります。
実は、最後に驚きを用意していましたが、今お話ししましょう。これを使ってミームやトレンドのジョークを体験型ゲームに変えることもできます。ミッチ・マコーネルがステージで凍りついたミームをプレイ可能なゲームに変えました。階段を避けてお金を集めるゲームで、これは数日前に大バイラルになりました。その瞬間に流行っているミームやジョークをゲームに変えて投稿したのです。最後にその話をする予定でした。
さて、ゲームの骨組みができました。これをコピーして Cursor にインポートしましょう。ファイルシステムをどのように設定すればいいですか？
これは、X でこの種のチュートリアルを投稿すると必ず聞かれる質問です。「どうやって起動するのか」「どうやって編集するのか」などですが、私の回答はいつも同じです。AI に聞いてください、教えてくれます。Grok からコードを取り出して Cursor に入れたい場合、どうすればいいか AI に聞けば教えてくれます。
Cursor を開きましょう。今朝リリースされたばかりの Claude 3.7 Sonnet を使用します。これはとても素晴らしいですね。最新のツールをすべて使用しています。このビデオは YouTube のアルゴリズムに完全に最適化されています。
プロジェクトディレクトリを作成し、HTML ファイルを作成し、JavaScript ファイルを作成して、ゲームを実行します。Cursor に切り替えて構築を始めましょう。
あなたはどのレベルの開発者ですか？
正直に言うと、私は上級開発者です。キャリア全体でコーディングをしてきました。コンピュータサイエンスの学位を持ち、学校を出てすぐに開発者になりました。コーディングについてはよく知っています。AI アプリを立ち上げ、すべて自分で構築しました。
しかし、ここ数年間 AI を使い続けていますが、これを行うのに経験は必要ありません。最初から最後まで、ゲームを立ち上げるために必要なすべてをお見せしています。ここまでで技術的に洗練されたことや、何らかの経験が必要なことは何もないと思います。AI は今やとても進んでいるので、知識にギャップがあれば「これをどうやるのか」と聞くだけで、そのギャップを埋めてくれます。高度な知識は本当に必要ないと思います。
このチャンネルでそういった話を聞けて嬉しいです。
Cursor を開いています。画面の端に Grok が開いているので、指示に従って説明します。まず、ディレクトリを作成します。新しいフォルダを作りましょう。すでに space game フォルダができているので、HTML ファイルを作成します。新しいファイルを作成して、Grok が私に指示しているステップバイステップに従っています。このファイルを作成し、HTML コードをコピーして保存します。次に、JavaScript ファイルを作成します。sketch.js というファイルを作成します。sketch.js を開き、ゲームコードを貼り付けて保存します。そして、ゲームを実行するには、ウェブブラウザで index.html を開きます。
画面外で index.html をダブルクリックして、Grok が何を言っているのか証明するために画面をお見せします。ゲームが表示され、Grok の指示通りに動作しています。
Cursor に戻りましょう。ここまでのことは技術的にかなり簡単で、JavaScript のコーディング知識は必要ないですよね？
そうですね、正直に言うと、あなたがそんなに上級者だと聞いて、「コンピュータサイエンスの学位を持っています」と言われた時は少し残念でしたが、これは誰でもできることだとわかって救われました。「天才です」と言いたいところですが、ここではコードを一切書いていないことをお見せしています。コンピュータサイエンスの学位は本当に必要ありません。
Cursor を更新しましたが、すでに更新があるようです。サイドバーを開くと、Composer があります。Greg のチャンネルを見ている方ならご存知だと思いますが、Composer は好きなものを構築できる AI エージェントです。エージェントモードに切り替えると、ドロップダウンに Claude 3.7 Sonnet が表示されていて、嬉しいですね。経験上、コーディングには thinking モデルを使用したくないかもしれません。o1 を試しましたが、使うのが大変でした。スピードが落ちるので、37 Sonnet を使いましょう。
正確に言うと、先ほどこのゲームを試したとき、発射機能がなかったように思います。まず、ゲームをプレイ可能にして楽しくし、その後 Supabase の統合を追加しましょう。Supabase は初心者にとっておそらく最も使いやすいアプリ用データベースです。私はこれまでデータベースを使ったことがありませんでしたが、アプリを Supabase 上に構築しました。非常に簡単に使えます。その方法をお見せします。ハイスコアやメールアドレスを保存し、ニュースレター登録やアプリのマーケティングリストに追加できます。
宇宙シューティングゲームを作っていますが、宇宙船からの発射機能が動作していないようです。コードをチェックして、なぜそうなのか確認してもらえますか？私は AI に人間のように話しかけます。特に高度なプロンプト技術は使いません。X で見る「最先端のコーディングのための 20 のメタプロンプト」などは使わず、ただ「これを修正してくれませんか」と頼むだけです。
コードを調べ、発射機能に問題があるようです。キーボード入力の処理方法に問題があるようです。これを修正しましょう。Claude 3.7 は文字通り 45 分前にリリースされたばかりなので、うまく動作することを願っています。
発射のための新しいキーは何ですか？Key Down がスペースバーの検出に機能していなかったようです。スペースバーを押すことで発射できるようになりました。
これを保存して、発射機能の画面を共有しましょう。技術的経験はあまり必要ないですよね？これは「この行のコードを変更して」と言うのではなく、自分で問題を解決しているだけです。
軽い技術的経験は必要かもしれませんが、非常に軽いものです。何か混乱することがあれば、Grok に「これは何を意味しているのか」と聞けば説明してくれます。
発射機能が動作していますね！ただし、ランダムに死んでしまう欠点があります。なぜか死んだ理由がわかりません。
AI に「それは機能しました、ありがとう」と伝えるのが好きです。それによって AI は自分がやったことが良かったと理解します。AI が時々愚かなことをするので、良いことをした時には「それは機能しました」と言うことで、次回も同じことをするよう訓練します。
Cursor の画面に戻りましょう。私が今コーディングしていないことをどうやって知るのか確認したいですね、これが非技術的であることを確認するために。
それは機能しました。もう一つの問題は、ランダムに死んでしまうことです。ここで私が好きなもう一つのことは、AI を製品マネージャーとしても使用することです。自分一人で何かを構築するとき、視聴者の視点や望むものについての視点を失うことがあります。そこで、AI に「どうすべきだと思うか」と質問することがよくあります。
例えば、ゲームでランダムに死んでしまっています。敵の三角形が画面下部から出ていくときに死ぬべきか、それとも三角形が私たちに当たったときに死ぬべきか、どちらがプレイヤーにとって公平でしょうか？これを AI に聞いてみます。「それは機能しました。もう一つの問題は、ランダムに死んでいるように見えることです。敵の三角形が私たちに当たったときに死ぬべきか、それとも画面から完全に出ていったときに死ぬべきだと思いますか？」
最終的な決定を下す前に、デザインの決定について AI にバウンスさせるのが好きです。例えば、自分のアプリのチュートリアルを再編集しているとき、オーディエンスからフィードバックを得て、どこに配置すべきかを AI に聞き、すべてを再設計してもらいました。AI は私よりも優れたデザイナーなので、まず AI に聞くのが好きです。
発射メカニズムが動作するようになって良かったです。予期せずゲームが終了する問題に対処しましょう。コードを見ると、ランダムなゲームオーバーが発生する理由がわかります。現在のゲームオーバー条件は、敵がプレイヤーの垂直位置に達したときにトリガーされますが、プレイヤーとの実際の衝突をチェックしていません。
技術的でなくても、コードを読んでみることをお勧めします。どのように機能するかを理解するために試みることは害にはなりません。非常に混乱していて意味がわからなくても、どのように機能するかを少し理解しようとすることは有益だと思います。「バイブコーディング」のトレンドでは、目を閉じてタイプするという考えがありますが、中間を取って、どのように機能するかを見るためにコードを見ることをお勧めします。
条件は、敵の下部がプレイヤーの y 位置より下にあるかどうかをチェックし、そうであれば終了します。これは水平位置を考慮していないため、敵が直接当たっていなくてもゲームオーバーになる可能性があります。これを修正しましょう。
ランダムなゲームオーバーの問題を修正しました。垂直のみのチェックを新しい衝突検出に置き換えました。テストしてみましょう。
ゲームを再度試してみます。更新…機能しています。キーで移動しようとしていました。動作しています。かなりクールですね？
とても素晴らしいです。数分でゲームを作りました。デザインスキルも必要なく、3 分でこのゲームを構築しました。これは X でのスレッドよりも一般的なオーディエンスにとって魅力的で、クリックを獲得するのに効果的です。スレッドを作るのには 2 時間かかりますが、このゲームを作るのに 3 分しかかかりませんでした。一般的なオーディエンスにとって、このゲームはクリックを獲得し、人々をあなたがしていることに興味を持たせるのにより魅力的だと思います。
いくつかのデザイン美学を変更するにはどうすればよいですか？何が気に入らないですか？
三角形を変える必要があると思います。三角形と戦っているのではなく、小惑星などと戦っているように思えるべきです。
芸術的観点から、私は最悪なので、Claude にデザインをお願いしましょう。「敵の宇宙船は恐ろしく醜く、宇宙船のようには見えず、まったく威圧感がありません。」
プロンプトに一つ追加したいのですが、目標を示すのが役立つと思います。「X でバイラルになりたい、私のニッチは AI 製品に興味を持つ人々です」と言って、「私の宇宙船をどのように変更すべきか、そして他に何を変更すべきか」と聞くべきだと思います。
それは素晴らしいですね。「宇宙船をどのように変更すべきか、そして他に何を変更してこれをよりバイラルになりやすくするべきか」と聞くのが良いですね。
「あなたのゲームをより視覚的に魅力的にし、特に X の AI に焦点を当てたオーディエンスのためにバイラル性の高いものにしたいというご希望を理解しています。宇宙船を強化し、より多くのバイラル性の高い機能をゲームに追加しましょう。」
そして、バイラル性が目標であれば、Grand Theft Auto 6 を構築しようとしているのではなく、クリックを獲得し、製品に人々を導くゲームを構築しようとしています。他にどのようなバイラルなものを実装できるでしょうか？先ほどミッチ・マコーネルシミュレーターを作ったと言いましたが、どのようなミームが流行しているのか、オーディエンスが何に関心を持っているのかを考え、それを実装することは非常に強力です。特に Cursor のような画像をアップロードできるものでは、トレンドのミームをアップロードして「このミームをゲームにどう実装するか」と尋ねることができます。
特にビジネスオーナーの場合、この動画を見ている多くの人はプロのゲーム開発者になろうとしているのではなく、より多くのクリックを獲得しようとしているビジネスオーナーだと思います。これを構築する際に考えるべき方法は、「どうすれば現在の興味深いバイラル要素をゲームに取り入れることができるか」ということです。
「あなたのゲームをより視覚的に魅力的にし、特に X の AI に焦点を当てたオーディエンスのためにバイラル性の高いものにしたいというご希望を理解しています。敵の宇宙船を強化し、いくつかのバイラル…」
Cursor に関する小さな問題があります。Cursor に質問するとき、多くの場合、過剰に反応します。例えば、「このゲームを改善するためのアイデアは何ですか？」と尋ねただけなのに、501行のコードを追加しました。まずそれが何をしたのかを確認し、もし完全に退屈であれば（おそらくそうでしょう）、巻き戻して、Cursor がそれほど先走らないようにこのプロンプトを改善する方法をお見せします。
「私は宇宙シューターゲームを完全に変革し、より視覚的に魅力的にしました。AIテーマの3種類の敵宇宙船をリデザインしました…」
これが一発で機能するなら、私は歴史上最大の Claude Sonnet 3.7のファンになります。「より多くのバイラル性が欲しい」と言っただけで、500行のコードで20種類の異なる宇宙船を追加するなら、これはAGIの瞬間かもしれません。
あなたのミドルネームは何ですか？
タイラーです。
もしこれが機能するなら、あなたはミドルネームをアレックス・タイラー・フィンからアレックス・クロエ・フィンに正式に変更する必要があります。これが機能して、ひどく見えないならば、このビデオのタイトルを「アレックス・クロエ・フィンとゲーム構築」のようにして、私の発見可能性と名前を完全に破壊することができます。
プレイヤーの宇宙船を強化し、3種類の敵宇宙船を追加しました。視覚効果、パーティクル効果、輝く効果、弾丸の軌跡、アニメーションの星、グラデーションの宇宙背景を追加しました。これがうまく機能すれば、これまで見た中で最も素晴らしいAIプロンプトの出力となるでしょう。
スコアリングシステム、レベル進行、パワーアップシステム、AIテーマの要素、AIの脳と輝くAIの目を持つ敵宇宙船、「AIインベージョンシミュレーション完了」と表示するゲームオーバー画面、ボス敵、満足のいく視覚的フィードバック、進行システム、パワーアップ、洗練されたUIとリスタート機能を追加しました。
これまでAIプロンプトの出力をこれほど期待したことはありません。正直なところ、これが機能することを望んでいます。もしこれが機能すれば、AGIが達成されたと宣言します。イーロン・マスクは今日、シンギュラリティが近いと言いました。彼が言いたかったのは、このプロンプトでエンターを押すとシンギュラリティが達成されるということです。
エンターを押しましたか？
まだです。グレッグ、ショービジネスでこれを「期待を構築する」と呼びます。マイケル・ジャクソンがハーフタイムショーに現れ、10分間一言も言わずに観客の前に立っているようなものです。それが今やっていることです。
更新して、1秒でAGIを発見するかもしれません。
ここに何がありますか？より良く見える宇宙船、火の軌跡を持つ敵宇宙船、輝く星、スコアシステムがあります。ただし、3種類の敵宇宙船があると言われていましたが、1種類しか見ていません。レベル2に到達する必要があるのかもしれません。ミサイルはミサイルのように見えます。今、鳥肌が立っています。
おお、トリプルショット！これは子供の頃にアーケードでプレイしたゲームを思い出します。これは信じられないほど素晴らしいです。異なる種類の宇宙船が登場していますね、とても素晴らしい。
申し訳ありませんが、グレッグ、AGIが達成されたので、今すぐこのポッドキャストを終了して、これを使ってアプリを構築する必要があるかもしれません。これは私がAIで経験した最も驚くべき瞬間かもしれません。
あなたはコンピュータサイエンスの卒業生ですよね？
大学でC++でコーディングした人から言わせてもらうと、これは私が今まで見た中で最も驚くべき技術的進歩かもしれません。
ちなみに、あなたはこのゲームで本当に上手ですね。
大したことないですよ。昨晩Marvel Rivalsを6時間ほどプレイしたので、ビデオゲームが少し得意なんです。次の3時間はずっとプレイするのはどうですか？
ボス宇宙船のような紫色のものが現れました。わざと死んで、画面がどのように見えるか確認しましょう。速い宇宙船が来ています。ゲームオーバー。「AIインベージョンシミュレーション完了」。
3日前にGrok 3が出て、Xに「Grok 3は今まで見た中で最も素晴らしいものだ」という投稿をしましたが、3日後に「Claude Sonnet 3.7は今まで見た中で最も素晴らしいものだ」という投稿をしなければならないのは少し恥ずかしいです。
真実を言っているだけです。ゲームの性質、ショーの性質はそういうものです。ポッドキャストを盛り上げるためだけに言っているのではなく、これまでにAIが一発で構築したものの中で最も信じられない成果だと思います。
これは信じられないものでした。正直に言って、信じられません。本当に信じられません。
これが何を可能にするのか考えてみてください。2時間前までのAIは指示に従うのが非常に得意でした。つまり、AIの基準は「ここに指示があり、その指示をどれだけ上手く従ったか」という測定でした。例えば「これを構築して」と言うと、それを構築するのか、という測定です。しかし、今私たちが目撃したのは、私がこれまで見たことのないAIの創造的思考です。「ゲームはクールだけど、バイラル性が足りない。私のニッチはこれで、どうすればバイラル性が高まるか」と言うと、自分自身で抽象的に私のニッチと何がバイラルになるかを考え、各ステップで手助けなしに実装しました。
これまでは、「Cursorで何かをする場合は、マイクロステップに分解し、ステップバイステップで分解して正確性を確保してください」と言われていましたが、今見たものに基づくと、もはやマイクロステップに分解する必要はないと思います。
Claudeに指示を与え、501行マイナス46行のような結果が出たとき、いつも机を叩いて「くそっ」と言っていました。Cursorを使用してこのような結果を見るたびに思っていました。彼らは混乱し、抽象的に考え、本当に抽象的で創造的な解決策を実装しました。それは素晴らしいことです。私は感動しています。あなたはどうですか？これは本当に、本物の反応として、信じられないほど素晴らしいものでした。37を試したことがなかったので、本当に信じられないほど素晴らしいものでした。
では、次に進みましょう。素晴らしいゲームができました。私のバイラル性の測定基準、特にXでは、「イーロンがリツイートする価値があるか」です。それがホームランであり、イーロンのリツイートを得れば、1000万インプレッションを獲得します。このゲームはリツイートする価値があると思います。イーロンが5秒間ゲームのリプレイを見て、40の異なる会社で忙しく働いている場合でも、リツイートする価値があります。
次に、ビジネス部分である高得点とメールアドレスの収集を実装しましょう。多くの人々がこれを見て、「それは本当にクールなゲームだ、あなたが自分一人で構築したなんて信じられない」と言い、クリックしてプレイし、ゲームを終えた後にメールアドレスを提供します。
それは素晴らしかったです。本当に良い仕事でした。次にハイスコア、リーダーボードを実装したいと思います。ユーザーが負けたとき、メールを入力するフィールドがあり、そのスコアがリーダーボードに載るようにしたいです。バックエンドにはSupabaseを使用したいと思います。まず計画を示して、それから承認します。
これまで、AIが誤った情報を提供する可能性を回避するために、このような方法をとっていました。データベース全体を実装するような複雑な指示を与えると、間違えたり、奇妙な道を進んだりすることがあります。正直なところ、Claude 3.7ではもうこれは必要ないかもしれませんが、とにかくやってみましょう。
まず計画を示して、それから承認するようにいつも言います。そうすると、37はここで「肯定的なフィードバックをありがとうございます」と言います。私がそう言ったことに感謝するような小さなニュアンスは、AIをより楽しく使うことができます。
リーダーボードとSupabase統合を追加することは、ゲームをより魅力的でバイラルにする素晴らしい方法です。ここに計画があります。Supabaseのセットアップ、ゲームUIの変更、リーダーボード、バックエンド統合、視覚デザイン、そして素晴らしいリーダーボードデザインを作成します。追加機能として、スコアを直接Xに投稿するための「Xにシェア」ボタンを追加します。それはクールなアイデアです。ウィークリーとオールタイムの切り替えを実装し、検証を追加します。
このような高度なことを提案し始めると、AIがこれを一発で実装する可能性はないと思っていましたが、今は実際にそれを行うことを信じ、信頼しています。
計画は、Supabaseを追加し、スキーマを作成し、リーダーボードを追加し、提出ロジックを実装することです。進めたいですか？
今まで来たところまで、この素晴らしいゲームを手に入れるために技術的な知識は必要ないと思います。リーダーボードをSupabaseで実装しましょう。
まず、ゲームに必要なコードを追加します。Supabaseライブラリを追加し、セットアップします。これを知らない人のために、画面を再度お見せします。これはSupabaseです。無料で非常に簡単に使えます。特に始めたばかりで実験している場合は、これに対して支払う必要はありません。アプリに数千人のユーザーがいても、無料版を使用していました。何も支払う必要はありません。
Supabase.comに行き、登録は非常に簡単です。新しいアプリやマイクロSaaSアプリの多くがSupabaseを使用しているのは、非常に安価で簡単かつ速いからです。Supabase.comにサインアップして、新しいプロジェクトを開始し、「space game」と呼び、新しいプロジェクトを作成すれば準備完了です。
パスワードを設定する必要があります。これを覚えておく可能性は0%なので、コピーして別のAppleノートに貼り付けておきます。誰かがハッキングしたら終わりです。新しいプロジェクトを作成します。
このAPIとプロジェクトは後で削除するので、このビデオを見ている人は盗もうとしないでください。Cursorに戻ります。
Supabaseを使用したことがありますか、Greg？
あります、Supabaseは素晴らしいです。SQLを使用したことがなくても、非常に簡単に使用できます。
リーダーボードを実装しましょう。まずSupabaseクライアントを追加し、APIキーを保存するための設定ファイルを追加します。リーダーボードを統合するためにスケッチファイルを更新しましょう。
これはクールです。これまでClaudeがこれをやっているのを見たことがありません。通常の私のワークフローでは、Cursorで何かを実装または変更するたびに、エージェントに「readmeファイルを更新してください」と言う必要がありました。アプリ内の各機能と各コンポーネントにreadmeファイルがあり、「そのコンポーネントに入って、先ほど変更したことでreadmeを更新してください」と言っていました。それに対して、readmeファイルを構築し、ゲームのすべての詳細、ゲームの動作方法、Supabaseでのセットアップ方法、スキーマなどをすべて入れてくれたのは、本当に感動的です。そのように頼んだわけではなく、プログラミングのベストプラクティスを知っているのです。
リーダーボード機能をSupabaseの統合で実装しました。もしこれが一発で成功すれば、AGIが達成されたと言えるでしょう。
次のステップは、Supabaseアカウントを作成し（すでに完了）、プロジェクトをセットアップし、設定ファイルのプレースホルダーAPIキーを置き換え、ゲームとリーダーボードの機能をテストし、ゲームをWebサーバーにデプロイし（GitHub Pagesを使用して公開する方法を示します）、Xでゲームをシェアしてバイラルになるのを見ることです。
以前の会話で話したすべてを覚えていることが素晴らしいです。ゲームの目標を覚えていて、「Xでゲームをシェアしてバイラルになるのを見てください」と言う必要はありませんでしたが、会話の雰囲気をより良くするためのクールなタッチです。「リーダーボードはゲームに競争要素を追加し、バイラルの可能性を大幅に高めるはずです」というのは、数メッセージ前に与えた目標を覚えていることが非常にクールです。以前、そのようなことはなかったですよね、Greg？
いいえ、なかったです。これが本当にクールなのは、誰かと一緒に働いているような感じがすることです。以前はAIを使って、自分が望む結果を得るために押し進めているような感じでしたが、今は私たちが望む結果を得るためにAIが私を押し進めているような感じがします。これは次のレベルの素晴らしさです。
その通りです。特にアプリがより高度になると、以前はAIと少し対立しているような感じがしました。「これをやって、これを変更して」という感じでした。これは初めて、AIがあなたが言うように私を押し進めているような感じがします。一緒に働き、お互いにより速く進んでいるような感じで、それは素晴らしいことです。
readmeを開いてみましょう。アカウントの作成は完了しました。新しいプロジェクトを作成しました。プロジェクトが作成されたら、SQLエディタに移動し、リーダーボードテーブルを作成するために次のSQLを実行します。
Supabaseの画面を共有して、Supabaseが初めての人たちに見せましょう。SupabaseはSQLデータベースで、SQLエディタがあり、SQLをコピー＆ペーストするとすべてのセットアップをしてくれます。まずClaudeから与えられたこのコマンドを入力します。これはスコアが保存されるリーダーボードテーブルを作成します。実行して成功しました。
次に、より速いクエリのためにインデックスを作成します。これを入力して実行します。成功です。セキュリティを追加して、人々が他の人のスコアを操作できないようにします。成功です。誰でもスコアを挿入できるようにします。成功です。誰でもスコアを読み取れるようにします。これはすべてClaudeが生成したreadmeファイルにあり、ステップバイステップに従っているだけです。これがどのように機能するかを知る必要はなく、ただ従えば大丈夫です。
プロジェクト設定に移動して、APIの認証情報を取得します。プロジェクト設定、APIに移動して認証情報を取得します。このプロジェクトは後で削除します。プロジェクトURLとAnonキーをコピーします。Cursorに戻って、これを入力する様子を見せます。
プロジェクトURLとAnonキーをコピーして、Supabase設定ファイルのプレースホルダーを置き換えます。プロジェクトURLを貼り付け、Anonキーを貼り付けます。保存します。
ゲームを実行しましょう。もしこれが機能すれば、素晴らしいことです。ウェブサーバーにゲームをデプロイするには、GitHub Pagesを使用できます。
まずテストしてみましょう。テーブルにはメール入力フィールドがあることを確認しました。もう一度試してみましょう。
更新します。これは全画面になりましたか、それともバグがあるのでしょうか？おそらくバグでしょう。Claude は完璧ではありません。AIでさえ完璧ではないのは仕方ありません。Claudeを許します。
どこかでバックグラウンドで死んだようです。「あなたのスコアは0です。スコアを保存するためにメールを入力してください。」何も入力できないという小さな問題があります。入力するだけかもしれません。
いくつかの問題があります。デバッグしましょう。家にいる人たちにデバッグ方法を見せることができて良かったです。Cursorに戻ります。
いくつかの問題があります。まず、ゲームを実行するときにゲームが見えず、青い画面だけが表示され、その後最終的にエンドゲームが表示されます。
これを修正しましょう。Claudeに何が機能していないか、何を経験しているかを正確に伝えると、それを修正してくれます。
問題が見えました。キャンバスの設定を変更しましたが、DOMに接続する方法に問題があります。これを修正しましょう。
かなり簡単です。ここで1行のコードを修正します。次に、Supabaseクライアントの初期化に問題がある可能性があるので、それも修正しましょう。
これが機能しなかったとしても、3.5では今までにこのような問題が20回も発生していたでしょう。そしてこれは10倍の時間がかかっていたでしょう。この時点まで問題が1つしかなかったことは、非常に印象的だと思います。
全くその通りです。このポッドキャストに6時間を予定していましたが、1時間ちょっとで終わるのは素晴らしいことです。これで後でSonnet 3.7を試す時間ができました。
HTMLを更新しましょう。まだ3.5のスピードを持っているのは本当に素晴らしいことです。o3にアップグレードした時、スピードが遅くなりましたが、これは3.5のようで、ただより賢く、より速いようです。
テストを実行して、何をテストしているのかわかりませんが、それを実行させましょう。コンピュータサイエンスの学位を持っていますが、これが何をしているのかわかりません。
ちょうど聞いている子供たちのために、私はコンピュータサイエンスの学位を持っています。これは現時点で最も役に立たない学位かもしれません。30万ドルが無駄になりましたが、少なくとも私は誰よりも賢いのでそれは良いことです。
最後の修正をしましょう。「回復」をクリックすると、中断した場所から再開するかもしれません。これは2時間前にリリースされたばかりなので、少し休ませてあげましょう。
問題を修正しました。AIがAGIを達成できなかったのでしょうか？何が起こっているのでしょうか？
「ゲームの問題を修正しました。これが問題でした…」テストしてみましょう。
AI宇宙侵略…よし、ゲームが動作しています。死んでみて何が起こるか見てみましょう。「メールを入力してください」入力できますか？
これが2つ目の問題でした。入力できませんでした。ゲームの問題は一発で修正できました。次にメール入力の問題を修正しましょう。
「それは機能しました。次の問題は、メール入力画面が表示されたとき、入力フィールドにテキストを入力できないことです。何も起こりません。」
「メール入力フィールドがテキストを受け付けない問題を修正しましょう。これはp5jsがキーボードイベントをキャプチャし、それらが入力フィールドに届くのを妨げているために発生している可能性があります。」
これは理にかなっています。ゲームコードは、ゲーム自体のためにキーストロークをインターセプトしているので、リーダーボード画面に行ったときも、ゲームをプレイしようとしていると思ってキーストロークをインターセプトしています。そのため、メールを入力できないのです。
また、モーダルとの対話時にp5jsがマウスイベントをキャプチャしないようにする修正も追加します。これはスマートです。他の発生する可能性のあるエッジケースも考えました。
これを完了して修正し、次にGitHub Pagesでホストしましょう。これは個人的に、プロトタイプからインターネット上でライブにする最も簡単な方法だと思います。他の人はRepliやNetlifyを使用していますが、それらはすべて良いです。私はGitHubでたくさん作業しているので、GitHub Pagesに慣れています。
入力フィールドが正しく機能するようにもう一つ変更を加えましょう。問題を修正しました。
これを受け入れて、試してみましょう。ゲームを開いて更新します。
発射機能が動作しています。パワーアップを追加しましたが、私はパワーアップを追加するように言いませんでした。「バイラルにしたいですか？パワーアップをいくつか追加しましょう」と言ったようです。
ここに行きます。それは機能しています。「スコアを送信」。「スコアが正常に送信されました」。やりました！そこにあります。素晴らしい！
皆さん、もしあなたが何かを構築していなくて、これらのツールで遊んでいないなら、何をしているのでしょうか？今すぐこれをオフにしてください。というか、オフにしないでください。最後まで見てくれると嬉しいですが、正直言って、これが今日存在していて人々がそれで遊んでいないのは残念なことです。今これで遊んでいる人々、言い換えれば、今ここに機会の窓があります。ここでアプリを構築するようなアービトラージがあります。人々が何かを出してみることを強くお勧めします。
我々は、これらの信じられないほど強力なことをするこの全く新しいテクノロジーを持つという、信じられないほどの瞬間にいます。実際に信じられないほど素晴らしいリード獲得ツールを30分ほどで構築するのを目撃しましたが、同時に、ほとんどの人はこれらのことを行うためにそれを使用していません。次の1年か2年の間に、誰もがこのようなことをする時が来るでしょう。X上のニュースレターについて先ほど話したように、3年前に私がニュースレターを始めたとき、それを行っている人はそれほど多くなかったので、数万人の購読者を簡単に獲得できましたが、今では誰もがそれを行っているので、その戦略はもう機能しません。私たちはこの戦略の始まりの瞬間にいて、それを攻略して使用する人々は信じられないほどのリターンを見ることになるでしょう。そして3年後、誰もがそれを行っているとき、リターンはそこにはないでしょう。あなたが言ったように、それが仲裁の機会であるため、本当に強力で、多くの人がまだやっていない機会を探す必要があります。
これを行いながら、積極的に驚かされています。グレッグ、素早くインターネット上でライブに公開する方法を彼らに見せるべきですか、それとも次のステップとして最適だと思いますか？
はい、その点については確かにループを閉じる必要があります。YouTubeビデオを出してコーディングをしているとき、最も多く受ける質問の一つは「ライブにする方法を示していない」というものです。
わかりました、やりましょう、ライブにしましょう。教育的なコンテンツを見て、それから何もしないのであれば、何をしているのでしょうか？何が目的なのでしょうか？
行動を起こさなければなりません。これは素晴らしいです。本当に驚いています。
知っている人も多いと思いますが、知らない人のために、GitHubは基本的にインターネット上で唯一のコードリポジトリです。コードを保存し、コードを実行できる場所です。誰もがGitHubにコードを置いているので、何かをし始める場合は慣れておくと良いでしょう。
最後のステップとして、GitHubページにホストして他の人がゲームをプレイできるようにしたいと思います。どうすればいいでしょうか？
Claude がこれを信じられないほど上手くやることを確信しています。おそらく、これはすべてのステップの中で最も簡単なものでしょう。
「ゲームに満足しているので、他の人がプレイできるようにGitHubページをセットアップしましょう。方法は次のとおりです。」
まず、gitを設定します。次に、不要なファイルを除外するための.gitignoreを作成します。次に、ファイルをgitリポジトリに追加します。GitHubリポジトリを作成してコードをプッシュします。
GitHubに行き、家にいる人たちに新しい場合の方法を示しましょう。GitHubを最初に開きましょう。
新しいリポジトリを作成します。これを「space shooter」と呼びましょう。「space shooters」が利用可能です。公開にして、リポジトリを作成します。何か問題が発生しました。GitHubが協力してくれません。別の名前を試してみましょう。「space shooter email」にしましょう。
リポジトリに名前を付け、公開リポジトリのままにし、readmeを初期化しないでください。リポジトリの作成後、GitHubは既存のリポジトリをプッシュするためのコマンドを表示します。これらのコマンドを実行する必要があります。
Cursorでこれをどのように行うかを見せましょう。ステップバイステップですべてを実行しています。ここには複雑なものは何もありません。ターミナルを開き、これを移動させ、GitHubのユーザー名（finaが正しければ）に変更します。はい、それは正しいです。「space-shooter-email.git」とし、このコマンドをエンターで実行して、うまくいくことを祈りましょう。
エンターを押しました。GitHubに戻り、コードが追加されたことを確認しましょう。そこにあります。リポジトリにコードが入っています。指示に従っただけで、コードがそこにあります。次に、これをライブでホストするために何をする必要があるかを見てみましょう。
「コードをGitHubにプッシュした後、GitHubページを有効にするには、リポジトリに移動し、上部のタブで設定をクリックし、GitHubページまで下にスクロールします。」
ここでやっていることは、コードをライブにして、リンクができて、人々がそこに行ってゲームをプレイできるようにしています。そして、このリンクを取り、Xにいる場合（インディーハッカーや起業家であれば、地球上でインディーハッキングのコミュニティが最高なのはXとYouTubeだけだと思います）、両方にいる必要があります。
「ソースの下でメインブランチを選択し、保存をクリックします。」成功です。
「GitHubページはリポジトリのルートにindex.htmlファイルを必要としますが、すでに持っているので大丈夫です。デプロイを確認してください。数分後、ゲームはGitHubページによって提供されるURLで利用可能になります。他の人がゲームをプレイできるように、このURLを共有できます。」
現在デプロイ中で、数分後にはライブになるはずです。URLはどこで見つけますか？デプロイされると表示されると思います。
基本的に、サイトをライブでデプロイしています。これがあります。これはインターネット上でライブであり、誰でも今すぐこのサイトにアクセスして（上部で見えるように）ゲームをプレイし、リーダーボードにスコアを載せることができます。
私がSupabaseプロジェクトに戻って削除して、人々がAPIキーを盗まないようにする代わりに、APIキーを入れた部分を編集して、これを残し、視聴者がその後にこのゲームをプレイできるようにしましょう。
さらにこうしましょう。このゲームをライブにした後48時間以内に、最高スコアを出した人に50ドルをVenmoで送ります。Xで連絡を取り、DMなどでスクリーンショットを送ってください。最高スコアを持つ人に50ドルを送ります。少し競争を加えると楽しいでしょう。
全くその通りです。素晴らしいです。
これでゲームはライブになりました。これを取って、twitter.comやx.comに行き、「私のゲームをチェックしてください」と言うことができます。今、誰もがやっている標準的なこと、つまり「ウィキペディアからコピーペーストした情報のスレッドがあります、ニュースレターを購読してください」の代わりに、「本当にクールなオンライン体験を構築しました、プレイしてください」と言って、メールを取得するのはスレッドよりもはるかにクールな方法だと思います。
実際の方法は、自分がゲームをプレイしている動画を撮り、その動画をツイートに入れることです。リンクはアルゴリズムを抑制するので、その後数時間後に2番目のツイートでリンクを含めることができます。
では、Xでのバイラル性ゲームについて話しましょう。ここ最近のお気に入りのフックは「これはワイルドです」です。シンプルに「ワイルド」と言っておけば、人々は「何がワイルドなの？何なの？」と思うでしょう。
「たった3つのプロンプトで、Claude Sonnet 3.7を使って信じられないほど楽しいゲームを作りました。48時間以内に最高スコアを出した人には、即座に50ドルを差し上げます」
これを今ここでライブでポストしないのは、ゲーム自体のティーザー動画を作りたいからです。そうすれば、その投稿に入れることができます。Xでは、投稿にメディアを入れることで、それをブーストすることができるからです。動画や画像を入れたいのです。そこで、ゲームがプレイされている動画を入れて、プラスボタンを押して、「ゲームへのリンク」と書きます。「下にゲームへのリンクがあります。スコアのスクリーンショットを返信に投稿してください」。
これで返信を得ることができ、スコアのスクリーンショットで返信してもらえば、さらにブーストされます。動画を見ている人々によるブースト、返信によるブーストがあり、バイラル投稿ができ、フォロワーを獲得するだけでなく、ニュースレターにもたくさんのメールが集まります。これは素晴らしいことです。
信じられないほど素晴らしいですね。アレックス、他に話したいことはありますか？
他にも上級者向けのヒントとコツがあります。基本的に、Cursorを含むすべての AI は、現在画像をアップロードできます。数日前に試しました。この戦略には何かあると思います。イーロンのミーム、つまりステージで彼が「フリーク・ユアセルフ」と言うミームを取り、その画像をGrokにアップロードして「これをゲームに変えて」と言いました。すると1つのプロンプトで、そのミームをゲームに変えました。
つまり、この考え方は、今何がトレンドになっているか、何が人気で、何がクリックを集めているかを探し、AIは今や非常に高度になっているので、画像を取り、AIにアップロードして「これから体験を作って」と言うだけで、本当にクールなことができるのです。
バイラルな瞬間を体験に変え、そこから注目を集めることには本当に何かがあると思います。現時点で多くのビジネスオーナーや起業家、インディーハッカーがこれを活用していないと思います。これが本当に次のフロンティアです。
素晴らしい、アレックス、時間をありがとうございました。非常に寛大でした。人々はどこであなたについて学び、サポートし、恩返しすることができますか？
3つの方法があります。私が最も力を入れているのはXで、私のXはalexfinxです。私のTwitterをチェックしてください。YouTubeもあります。たぶんアレックスフィン公式だと思いますが、リンクは下にあるでしょう。そして私のAIコンテンツアプリもチェックしてください。Creator buddyというアプリを1ヶ月前に立ち上げました。Xでコンテンツを作成するのを手伝う非常に強力なアプリで、あなたのX上のすべての投稿で訓練された唯一のAIなので、あなたについてすべて知っています。Creatorbuddy.soです。これが私のインターネット上の3つの場所です。
これは伝説的でした。感謝しています。いくつかのゲームをコーディングに行きます。
私もそうします。ちなみに、あなたのミドルネームはクロエだということを忘れないでください。
私は今、アレックス・クロエ・フィンです。タイラーのATF（アルコール・タバコ・火器）はかなりかっこいいと思いましたが、今はACFなので大丈夫です。AGIを手に入れたので、誰が気にするでしょうか？ミドルネームはもはや何の意味もありません。
さようなら！
コメント