6,822 文字
皆さん、GPT-4.1 API がリリースされました。WindSurf で7日間無料で利用できるので、ちょっとした Vibe Coding を楽しみましょう。思う存分使えるこの機会に、プロジェクトの開発を進めながら、統合方法や基本機能を理解して、お金を払わずにプログラミングをしつつ、OpenAI のモデルをテストしていきましょう。それでは一緒に見ていきましょう。
いつも登録してくれた方々、いいねを押してくれた方々に感謝します。特に、このAIチャンネルをスポンサーしてくれるチャンネルメンバーの皆さんに特別な感謝を。メンバーは、インテリジェントエージェントの独占動画や先行公開動画にアクセスできることを忘れないでください。
こちらを見てください。昨日のリリース動画で作ったこのゲームですが、少し変な感じで問題がありますが、動きはとても良くなっています。車の動きはとても滑らかで、電車もうまく回転しています。そこで Vibe Coding を使って、このゲームを修正してみましょう。道路の上にある山を取り除き、対戦相手を配置し、収集できる金貨を追加して、ゲームをもう少し完成させつつ、モデルがうまく機能しているかどうかを評価してみましょう。
WindSurf を使ったことがない方は、windsurf.com からダウンロードできます。このアイコンから、インストールを行います。上部には「4月14日から21日まで全ユーザーに GPT-4.1 無制限」と表示されているので、本当に残り時間は少ないです。今すぐ利用する必要があります。ここから通常通りダウンロードして、通常通りインストールしてください。VsCode と少し改良されたものと同じです。
インストールが完了すると、VsCode が立ち上がります。もし慣れているなら、左側にファイル、中央にコード、右側に会話できるアシスタントがあるいつもの画面です。私はテスト用のコードを入れて遊び始めています。右側で利用可能なモデルを確認できます。それぞれの費用が表示されています。例えば、Claude Sonnet 3.7 は1クレジット、3.7 Sonnet は1.25クレジット、Gemini 2.5 Pro は1クレジット、Claude 3.5 は1クレジット、GPT-4.0 も1クレジットです。GPT-4.1 は現在無制限なので、ぜひ活用して楽しんでください。
始める前に、このプレビューを実行しましょう。コードを始める前や何かMCPをやりたい場合は、このプレビューを有効にします。プラットフォーム上で直接テストしたいので、この地球のアイコンをクリックしてプレビューを開始します。すでに実行中のサーバーがあるか聞かれますが、ない場合は、ポート8000でPython-MTP.sserverコマンドを実行するかと尋ねられます。
私の場合はPythonが設定されていないので機能しませんが、何が起こるか見てみましょう。acceptをクリックすると、下にコマンドが実行され始めますが、Pythonが認識されていないというエラーが出ます。エラーを検出しましたが、無視して実行中と判断しているようです。そこで、NPXでサーバーを実行するように伝えます。NPXは設定されているので、正しく動作します。ポート8000でNPX serveを実行します。
コマンドの実行状況に注意して、パッケージのインストールなどが必要になる場合があります。サーバーが起動すると、ローカルホストなどが表示されます。以前にエラーが出た場合は、open previewボタンが表示されているはずです。open previewをクリックすると、何が起きているかが正確に表示されます。この場合、単純なテストを実行しているだけなので、コードの問題に焦点を当てず、正常に動作していることを確認できます。
これで正常に動作し、アシスタントとの会話を始められます。プレビューも動作しています。興味深いのは、このCar Simulatorを実行したいのですが、これはindexと同じPEFで実行されています。索引が標準で開いたので、ブラウザで3Dカーシミュレーターのhtmlに移動します。そうするとゲームが表示され、WindSurf内でゲームをプレイできるようになりました。すべて順調です。indexを閉じて、ゲームに集中できます。
興味深い機能として、ここでsendオプションがあります。これをクリックするとページの要素をクリックでき、特定の要素について会話したい場合に便利です。例えば、画面全体や特定の部分について話したい場合、クリックすると、その部分のdivが正確にチャットに入力され、そのドキュメントの一部について会話できます。しかし、今はゲームをプレイしたいだけです。
クレジットが少ないという表示がありますが、アップグレードはせず、無料版を使います。サーバーの話から離れて新しい会話を始めるために、ここで会話をクリアします。ゼロから始めて、3Dカーシミュレーターファイルについて話し始めましょう。会話したいファイルをマークして、「道路の上に山を置かないでください」と指示します。
Vibe Codingを楽しんでいますが、プロンプトは少し変ですが、何が起こるか見てみましょう。「車で集めるための金貨を追加してください。車が何かに衝突したら爆発するようにしてください」。とりあえず3つのことを依頼して、どうなるか見てみましょう。
まず、山について「山はすでに-70と+70に作成されている」と説明し始め、金貨については「adcoin関数を作成する」と言い、車の爆発についても対応すると言っています。ファイルの編集が進んでいますが、これは瞬時ではないので待つ必要があります。このプログラミングは課金されておらず、100%無料であることを忘れないでください。
「完了しました。山は道路を侵害せず、金貨があり、すべて正常です」と言っています。すべて受け入れて、コードを見ずにブラウザを更新してみましょう。それでは機能するかどうか見てみます。
金貨が表示され、衝突すると爆発し、金貨も機能していることが確認できます。金貨を集めることができました。さて、電車にも衝突できないことを忘れていました。「ページをリロードして再度プレイ」とありますが、次はゲーム開始ボタンと車が爆発したときに再開ボタンが表示されるようにしましょう。ゲームの目標は10枚の金貨を集めることです。
さらに多くの機能を追加する必要があります。再開ボタンの作成や、10枚の金貨を集めるという目標の設定です。山は正しく画面の外に配置されていますが、木も道路の上にあるので修正が必要です。また、電車も邪魔しています。どこに衝突しても問題が発生しますね。
変更が適用されたので、「accept all」をクリックして更新してみましょう。開始ボタンが追加されました。正常に機能していて、金貨も適切に獲得できています。注意深く運転して衝突を避ける必要があります。ゲームは10枚の金貨で終了です。2枚、3枚、4枚…10枚集めました。おめでとうございます、10枚の金貨を集めました。再開ボタンをクリックしてみましょう。
再開ボタンをクリックすると、ゲーム開始画面に戻り、再度「開始」をクリックする必要があるようです。単純に再開ではなく、ゲームの最初に戻るようになっています。次に修正するのは、再開ボタンを押したらゲームが自動的に始まるようにすることです。
さらに、「私と対戦するAIを作成し、最初に10枚の金貨を集めた方が勝ち」という機能も追加しましょう。オープンフィールドなので、AIは金貨に向かって直進するため、私に勝つ可能性が高いですね。変更が適用されました。再開ボタンが直接機能し、AIの対戦相手、スコアボード、勝利条件（最初に10枚の金貨を集めた方）が追加されました。
ゲームを開始してみましょう。AIが動き始めましたが、どうやらAIは衝突しない様子です。これはフェアではありません。また、私の車が消えてしまい、初期位置に戻りません。変な動作です。車が爆発して再開したら初期位置に戻るべきです。また、初期位置を180度回転させて前向きに開始するようにしましょう。そうしないとAIが混乱してしまいます。
修正が適用され、前向きに開始されるようになりました。ゲームを開始すると、青い部分に衝突すると問題が発生しますが、白い部分を通過したときだけカウントされるようです。AIが勝っていて、9点まで取りました。再開すると、まだ爆発の問題があります。車が衝突した際にゲーム開始位置に戻るよう修正が必要です。
変更が適用されました。ゲームを開始してみましょう。このゲームは簡単ではなく、AIはとても上手くプレイしています。時々衝突しないこともありますが、今はうまく機能しているようです。しかし、金貨はもうなくなってしまいました。最後の1枚しかありません。私が取りましたが、もう金貨がないので誰も勝てません。
次の修正として、金貨が取られるたびに新しい金貨が出現するようにし、車の衝突問題を解決する必要があります。一部のオブジェクトを通過してしまう問題はポリゴンが多すぎるためかもしれません。また、車の速度も少し遅くしたいと思います。
生成に予想以上に時間がかかっていると表示されています。おそらく多くの人が同時に利用しているため遅くなっているのでしょう。変更が適用されました。ゲームを開始してみましょう。
AIはたくさん衝突していますね。AIが衝突して死んだときにポイントがリセットされるのか確認したいです。ポイントは維持されています（4）。完璧です。ちょうどそれが欲しかったのです。リセットではなく維持してほしかったのです。8、9…衝突はまだ問題があります。10点で私が勝ちました！
プレイを簡単にするために、スペースバーでゲームを開始または再開できるようにし、プレイヤーのデフォルト速度を下げてほしいです。操作が難しいので、速度調整が必要です。ご存知ない方のために、Vibe Codingとはコードを触らず眺めるだけのものです。速度調整など変数を調整するだけで解決できますが、Vibe Codingでは何もせず見ているだけです。
変更が適用され、スペースバーで開始できるようになりました。車はまだオブジェクトを通過してしまいますが、問題ありません。速度が十分に下がったかどうかわかりませんが、まだプレイが難しいです。正確に狙う必要があります。AIが私に勝ちそうです…AIが勝ちました。再開してスペースバーで再開できるか確認しましょう。
スペースバーで再開しましたが、スコアがリセットされていません。再開時にスコアをリセットし、車の青と赤の部分もオブジェクトと衝突するようにしましょう。コードを見ると、加速度という変数があるなど、簡単に理解できる部分もありますが、Vibe Codingでは怠け者モードです。
変更が適用されましたが、赤い部分は衝突せず、白い部分だけが衝突しているようです。しかし、速度は下がったので、少なくとも考える余裕ができました。私はまだ金貨を通過していて、車は衝突しています。AIは金貨を取ろうとしていますが、私と衝突はしません。勝ちました！
スコアを画面中央に表示し、AIが金貨を集めるたびに通知を表示し、車の衝突を車全体に適用する（白い部分だけでなく）よう修正しましょう。
プログラミング中に感じているのは、他の経験と比較して、要求した変更に対する反応が良くないことです。物事は起こっていて、それは良い点ですが、ゲームは壊れていませんが、私が望んでいることを正確に解釈していないように感じます。GeminiやClaudeなら最初から正しく理解していたはずです。
変更が適用されました。ゲームを開始すると、修正されたように見えます。何かに衝突すると反応しますが、まだ通過することもあります。衝突の問題はゲームを難しくしています。タイヤも金貨を収集するようになったようです。大きなスコアボードが表示され、「あなたの勝ち」と表示されます。
再開しましたが、車は消えてスコアボードが消えません。再開時にスコアボードを無効にし、木を道路の外側に移動するよう依頼しましょう。これでAIが木に直接衝突しなくなるため、より難しくなるでしょう。
編集の速度が非常に速くなりました。以前は非常に遅かったです。ゲームを開始すると、木が移動し、AIはより積極的になっています。AIが金貨を取りました。ゲームは本格的になってきました。衝突の問題はまだありますが、AIが勝ちました。敗北しました。スコアボードが画面から消えないという問題があります。
ゲーム終了時の中央スコアボードが再開時に画面から消えず、車はまだオブジェクトを通過しています。衝突を見直して、車のすべての部分が衝突を確認するようにしましょう。AIはうまく収集できるはずですが、素通りして衝突してしまいます。
変更を受け入れ、衝突が修正されるか確認しましょう。まだ通過しています。何とも言えませんね。このゲームは中程度の出来ですが、満足のいく形で作られました。スコアボードは画面の前に表示されたままで、解決できない問題があります。ゲームを進めて、より高度な事を行うことができません。
AIは良いですが、そこまで優れているわけではないことがわかります。こちらはGeminiで作成した同じゲームのバージョンです。AIがプレイし、私もプレイしています。動きは似ていますが、金貨を集める必要があり、少し遅いですが、衝突は正確です。車は少しシンプルですが、木に衝突すると本当に衝突します。勝つまであと少しです。「あなたの勝ち」とスコアが正確に表示され、スペースを押すと再開し、基本的なプログラミングの問題は発生しませんでした。
AIに何かを尋ね、AIが学習できないという問題はありませんでした。例えば、AIの後ろに衝突すると私は爆発し、AIが私の後ろに衝突するとAIだけが爆発するなど、より高度なことも実現できました。AIが私の後部に衝突すると考えられる、より高度な要素です。このバージョンの山との衝突は少し問題がありますが、Geminiのバージョンではより進んだ開発ができ、プロンプトエンジニアリングを気にせずにプログラミングできました。
GPT-4.1では、AIが理解できるよう書き方を考え始める必要がありますが、単なる不運かもしれません。あなたが自宅でバージョンを作成すると、衝突が正確になるかもしれません。衝突問題を解決するためにどのようなプロンプトが良いと思うか、コメントで教えてください。
良い点は、他のモデルも選択でき、Sonnetなどを使って開発を続けることができることです。このVibe Codingでは何も費用がかからず、非常に楽しいものでした。テストを続ける日数があり、OpenAIはモニタリングを続けてより優れたモデルを作るでしょう。このモデルは非常に優れており、質の高いコードを提供しますが、ClaudeとGemini 2.5の標準はより高くなっています。コーディングが得意なモデルとして位置付けられています。
Grokについても触れておきます。「誰もGrokについて話さない」というコメントがありますが、Grokもプログラミングが非常に優れており、Grokに関する動画も近日公開予定です。
最終バージョンでは、動画編集中に多くの衝突問題を修正しました。例えば、車同士が衝突するようになり、プレイヤーに衝突すると死にます。金貨との衝突問題も解決しました。単に「金貨との衝突を修正して」と指示したところ、修正すべきすべての衝突を自動的に解決してくれました。また、金貨を画面中央にだけ配置するよう依頼しました。
AIが勝ったのは、私が皆さんと会話していたからです。木は道路の外に、山も道路の外に配置され、車は互いに衝突し、電車に衝突しても反応します。最終バージョンでは、画面を混雑させないために2枚の金貨だけがあります。金貨を集めると消え、また2枚現れます。車はアリーナの中央で金貨を競い合い、時にはドリフトのようなことをします。AIがまた勝ちました。
正直言って、非常に気に入りました。Geminiの方がプログラミングしやすいと思いますが、少し努力すれば、GPT-4.1も機能し、しかも上手く機能します。このようなビデオをサポートしたい場合は、メンバーになってください。メンバーはインテリジェントエージェントの独占動画や先行公開動画にアクセスできます。それではいいねをお願いします。
コメント