【無料で使える！Claude 3.5 Sonnetの驚異の21活用事例】英語解説を日本語で読む【2024年7月5日｜@The AI Advantage】
Claude 3.5 Sonnetは無料で利用でき、多くのカテゴリーでChatGPT-4oを上回ります。特に、コード生成では比類なく、コードを生成するだけでなく、その動作をリアルタイムで確認できる点が画期的です。例えば、データ可視化のエキスパートとして病気の拡散を国別にリアルタイムで表示するダッシュボードを作成するプロンプトがあります。リアルタイムでデータを更新するAPIにも接続可能です。また、エラーが発生した場合、そのエラーメッセージをコピーして再入力するだけで修正されます。他にもPDFから物語風のウェブサイトを生成するプロンプトや、画像認識機能を使ったインタラクティブなダッシュボードの作成例も紹介します。例えば、人口増加を視覚化するスライダーとテキストフィールド付きのダッシュボードを画像データから作成することができます。ゲーム開発にも対応しており、8ビットスタイルのキャラクターを使ったシンプルなゲームや、AI対戦機能を持つチェッカーゲームなど、様々なゲームを簡単なプロンプトで作成可能です。
公開日：2024年7月5日
※動画を再生してから読むのがオススメです。
As you probably heard, Claude 3.5 Sonnet is freely available with limited usage, and it beats ChatGPT-4o across many categories.
おそらくお聞きになった通り、Claude 3.5 Sonnetは制限付きで無料で利用可能であり、多くのカテゴリでChatGPT-4oを凌駕しています。
The one that is absolutely undebatable though is code generation, and not just code generation, their artifacts feature allows you to see that code in action as it generates it, making this unprecedented development in the AI space.
しかし、議論の余地のないのはコード生成であり、単なるコード生成ではなく、その成果物機能により、生成されるコードを実際に見ることができるため、これはAI領域における画期的な進歩です。
What does this mean practically?
これは実際にはどういう意味ですか？
You can create websites, you can create games, you can create visualizations, and so much more.
ウェブサイトを作成したり、ゲームを作成したり、視覚化を行ったり、さまざまなことができます。
I've done a lot of cases and actually really took my time with this video and researched this across the past week since Sonnet came out, and I compiled all of them for you in one video.
私は多くのケースを行い、実際にこのビデオに多くの時間を費やし、Sonnetが登場して以来の過去1週間を通じてこれを研究し、それらをすべて1つのビデオにまとめました。
The beautiful thing here is though, as opposed to the GPT-4o use case video that I did, a lot of these use cases you can try, you can replicate, you can use for yourself today.
ここでの素晴らしい点は、私が行ったGPT-4oのユースケースビデオとは異なり、これらの多くのユースケースを試すことができ、複製することができ、今日自分自身で使用することができるということです。
Because Sonnet 3.5 and its capabilities are not some sort of announcement or promise of things that are yet to come.
Sonnet 3.5とその機能は、まだ来るものではないという発表や約束ではありません。
It's available today, and we'll be looking at all the various ways you could use it today.
それは今日利用可能であり、今日それをどのように使用できるかをすべてのさまざまな方法を見ていきます。
If you want more details on the model itself, I created a separate video for that.
もしご自身でモデルについて詳細を知りたい場合は、それについて別のビデオを作成しました。
This video is going to be all about how you can put it to work, which is going to be a combination of examples of how other people put it to work and prompts that I crafted myself.
このビデオでは、他の人々がどのようにそれを活用している例と、私自身が作成したプロンプトの組み合わせについてすべて説明します。
Some simpler, some a little more intricate, all of the prompts that you'll see here I'm providing to you for free in the description of the video.
いくつかは簡単なものもありますし、少し複雑なものもありますが、ここで見るすべてのプロンプトは、動画の説明に無料で提供しています。
If they're too long in the description, I'll probably just have to link this Notion page but you're getting freely access just like a website.
説明文が長すぎる場合は、このNotionページにリンクすることになるかもしれませんが、ウェブサイトと同じように自由にアクセスできます。
Let's get into it.
さあ、始めましょう。
There's a lot to cover, and I could have actually quite easily made a video titled the 50 most mind-blowing use cases.
カバーする内容がたくさんありますし、実際には「最も驚くべき50の使用例」というタイトルの動画を簡単に作ることができました。
But the thing is not all of them are created equal.
しかし、重要なのはすべてが同じ価値ではないということです。
Some are more impressive than others and some are more practical than others.
いくつかは他よりも印象的であり、いくつかは他よりも実用的です。
I use my personal judgment and experience to pick the use cases that I figured you might find really interesting here because we're going to be visualizing data as an animation.
ここでは、データをアニメーションとして可視化するために、あなたが本当に興味を持つと思われるユースケースを選ぶために、私は個人的な判断と経験を使用しています。
This is something the Code Interpreter aka the data analysis tool in GPT-4o cannot do.
これは、GPT-4oのコードインタプリター、つまりデータ分析ツールができないことです。
Namely the prompt I'm using here is act as a data visualization expert, create a real-time dashboard to effectively represent the spread of a disease over time across various countries.
具体的には、私がここで使用しているプロンプトは、データ可視化の専門家として機能し、さまざまな国々で時間の経過とともに病気の広がりを効果的に表現するためのリアルタイムダッシュボードを作成することです。
This is one of the first capabilities I want to highlight.
これは、私が強調したい最初の機能の1つです。
Creating these dashboards type websites, we'll be looking at more examples shortly here.
これらのダッシュボード型のウェブサイトを作成する際には、まもなくさらなる例を見ていきます。
But look, from this simple little prompt, it writes the answer.
しかし、このシンプルなプロンプトから、答えが書かれます。
Here you have the artifact that essentially is all of this code, but you don't even see the code in the first view.
ここには、基本的にはこのすべてのコードが含まれていますが、最初のビューではコードを見ることさえありません。
It just writes that in the background and it gives you this interactive preview and you can look at the little app.
それはバックグラウンドで書かれ、インタラクティブなプレビューが表示され、その小さなアプリを見ることができます。
Look how great this is.
これがどれほど素晴らしいかを見てください。
I didn't even give it any data.
私はそれに何のデータも与えていません。
It just came up with some mock data for me and I can switch between the different countries, and it has several features like it simulates real-time updates.
それは私のためにいくつかの模擬データを提供してくれ、異なる国々を切り替えることができ、リアルタイムの更新をシミュレートするなど、いくつかの機能があります。
You could hook this up to API with code that provides it with real-time data and it will be updating as it goes.
これをAPIに接続して、リアルタイムのデータを提供するコードを備えると、進行中に更新されます。
Quite simple, right?
かなり簡単ですね？
But if we go further in this conversation, I'll present you with by far my favorite follow-up prompt here.
しかし、この会話をさらに進めると、ここでこれまでで一番のお気に入りのフォローアッププロンプトを提供します。
It's so simple yet so effective.
それはとてもシンプルですが、非常に効果的です。
By simply saying make it better, it will interpret what you mean by better.
単に「もっと良くして」と言うだけで、それは「良くする」という意味を解釈します。
It will look at the context so far at what it created and come up with a list of iterations that would make it better in Claude's eyes, that is, but it turns out it's really good at figuring out what would make it better.
これまでに作成したコンテキストを見て、Claudeの視点でより良くするためのイテレーションのリストを考え出しますが、実際には、それが何をより良くするかを理解するのにとても優れていることがわかります。
By simply saying make it better, it came up with this dashboard with way more information.
単に「もっと良くして」と言うだけで、このダッシュボードがより多くの情報を提供するようになりました。
At the top, you have the base data.
一番上には基本データがあります。
It added a bar chart option and there's a global map view.
バーチャートのオプションが追加され、グローバルマップビューがあります。
Here we get to the first important caveat.
ここで最初の重要な注意点に到達します。
This will write code for you that might not be executable within the artifacts feature.
これは、アーティファクト機能内で実行できない可能性のあるコードを書きます。
But if you bring this over to something like Visual Studio Code and run it, you can have additional packages that are not available in here.
ただし、これをVisual Studio Codeなどの他の場所に持って行って実行すると、ここでは利用できない追加パッケージを使用できます。
Just as a recap for non-technical people, which by the way is what I assume for this video, you don't need to know code to follow or recreate these use cases that I show you.
非技術者向けに簡単に説明すると、このビデオでは私が想定していることですが、私がお見せするユースケースをフォローしたり再現したりするにはコードを知る必要はありません。
A package is a set of functions and instructions that do a specific thing with code.
パッケージとは、コードを使用して特定のことを行う関数と命令のセットです。
Usually, they're more advanced functions that by using a package you don't have to bother with.
通常、パッケージを使用することで、面倒なことをしなくてもより高度な機能を利用できます。
In this case, it's a package that represents maps of the world really well.
この場合、それは世界地図を非常によく表現したパッケージです。
But this package is not available in here, yet Claude will still create this for you because it assumes it'll probably take the code and host it elsewhere.
しかし、このパッケージはまだここにはありませんが、Claudeがおそらくコードを取得して他の場所でホストすると仮定して、それを作成します。
This is just a preview, right?
これはただのプレビューですね？
This is something to be aware of because sometimes the more advanced prompts that I'll show you will use packages that are not accessible in here.
これは注意しておくべきことです。なぜなら、私がお見せするより高度なプロンプトは、ここではアクセスできないパッケージを使用することがあります。
But if all you want to do is stay in here and use the artifacts feature, you can absolutely do that.
しかし、ここにとどまってアーティファクト機能を使用したいだけなら、それは完全に可能です。
We'll talk about the nuances of that once that comes up.
それが出てきたら、その微妙な点について話し合います。
But as you can see, by simply saying make it better, it really improved this dashboard.
しかし、単に「より良くする」と言うことで、このダッシュボードが本当に改善されました。
It added this global map view that is not accessible in here because it's a package that's not in here as I outlined, and that's the very first use case, but it doesn't stop there.
これにより、このグローバルマップビューが追加されましたが、これはここではアクセスできません。なぜなら、私が説明したように、ここにはそのパッケージがないからです。これが最初のユースケースですが、そこで止まりません。
I actually went in and used some of the prompt engineering skills that I've been teaching on this channel and I crafted a prompt that helps improve some of these use cases.
実際に私は、このチャンネルで教えているプロンプトエンジニアリングのスキルの一部を使って、いくつかのユースケースを改善するのに役立つプロンプトを作成しました。
The result of it is this.
その結果がこれです。
It's this larger prompt that goes into all the details of the data visualization that I'm looking for.
私が求めているのは、データ可視化のすべての詳細を含むこのより大きなプロンプトです。
This is something similar to "Sam, The Prompt Creator" that I showed you on the channel about a week ago, but this is for the use case of creating projects using artifacts in Sonnet.
これは、約1週間前にチャンネルで紹介した「Sam, The Prompt Creator」に似ていますが、Sonnetのアーティファクトを使用してプロジェクトを作成するユースケース向けです。
What I'll do in this video is I'll give you all the use case prompts, but this improvement prompt we're refining that in the community.
このビデオでは、すべてのユースケースのプロンプトを提供しますが、この改善プロンプトはコミュニティで洗練されています。
We're actually hosting a weekly challenge right now where all the community members get to use that prompt to flesh out their own use cases.
実際には、私たちは現在、コミュニティメンバー全員がそのプロンプトを使用して自分自身のユースケースを具体化する週次の挑戦を開催しています。
In the spirit of the Advantage channel, I'll say what I always say is that these videos are always there to give you fish, but then the community exists to teach you how to fish so you can catch them yourself.
「アドバンテージチャンネル」の精神に則って、私がいつも言っていることは、これらのビデオはあなたに魚を与えるために常に存在していますが、その後、コミュニティがあなたに魚を釣り方を教えるために存在しているということです。
In this case, the fish that I'm giving you is this fleshed out prompt.
この場合、私があなたに与えている魚は、この具体化されたプロンプトです。
If you copy-paste it into here and simply run it, you will see that it does a few things.
ここにコピー＆ペーストして単に実行すると、いくつかのことを行うことができることがわかります。
First of all, you have manual control over the various features in here.
まず第一に、ここにはさまざまな機能に対する手動制御があります。
Instead of having a quick one-liner and it assuming a lot of things, you tell it exactly what you want.
簡単な一行ではなく、たくさんのことを仮定する代わりに、正確に欲しいものを伝えます。
If you're building a visualization like this, that represents the spread of disease over time across various countries, then it might be really good to have manual control over these things because here you can go into the prompt and you can actually edit.
このような病気の広がりをさまざまな国々で時間の経過とともに表現するような可視化を作成している場合、これらのことに手動で制御できると本当に良いかもしれません。ここではプロンプトに入って実際に編集することができます。
You can actually see what decisions have been made rather than telling Claude, bro, Figure it out yourself.
Claudeに自分で考えてもらうのではなく、実際にどのような決定がなされたかを見ることができます。
Here is the result.
こちらが結果です。
I kept it like this on purpose because here we ran into our first problem.
これは意図してこのままにしておきました。なぜなら、ここで最初の問題に遭遇したからです。
There is an error message, right?
エラーメッセージが表示されていますね？
This generated code includes unsupported libraries, date FNS and calendar as calendar icon from Lucid React.
この生成されたコードには、サポートされていないライブラリ、FNSとカレンダーアイコンとしてLucid Reactからのカレンダーが含まれています。
You don't need to know these packages.
これらのパッケージを知る必要はありません。
You don't even need to know what this means.
これが何を意味するかさえ知る必要はありません。
You just have to know that this is an error message.
これがエラーメッセージであることを知っているだけでいいです。
What you can do in Claude and in GPT-4o every time is just copy the error message and paste all of this back into it.
ClaudeとGPT-4oでできることは、エラーメッセージをコピーしてすべてをそれに貼り付けるだけです。
You could also copy just the error message in the middle, but this works like a charm.
中央のエラーメッセージだけをコピーしてもいいですが、これは確実に機能します。
Just paste it in there and it apologizes to you and it will rebuild the app without those packages.
それを貼り付けるだけで、謝罪し、それらのパッケージを除いてアプリを再構築します。
You want to do this if you want to stay inside of the artifacts feature if you want to bring this outside, if you want to host this yourself on the internet.
アーティファクト機能内で作業を続けたい場合にはこれを行い、外部に持ち出してインターネット上で自分でホストしたい場合にはそうしてください。
You don't mind these packages will probably do something even better than you can do it here in these artifacts.
これらのパッケージを使うことに問題がなければ、アーティファクト内でできる以上のことができる可能性があります。
If you want to stay in this web interface, just take the error messages that it gives you, throw them back in and there you go.
もしこのウェブインターフェースに留まりたい場合、与えられたエラーメッセージを受け取り、それを戻してください。
Here's the improved app.
こちらが改善されたアプリです。
You can see there are various improvements, different views, you have an option to share the page, you have an option to export the data, and all we did is lead with the more advanced prompt.
さまざまな改善点があり、異なるビューがあり、ページを共有するオプションがあり、データをエクスポートするオプションがあります。私たちが行ったのは、より高度なプロンプトで先導することだけです。
If you want to stay inside of the artifacts feature, we just paste the error message and it readjusts it so that it works in here.
アーティファクト機能の中にとどまりたい場合は、エラーメッセージを貼り付けるだけで、それを読み込んでここで動作するように再調整します。
Just be wary that will usually result in worse code objectively.
ただし、客観的には通常、より悪いコードになる可能性がありますので、注意してください。
If you want to host this elsewhere, take the first version.
他の場所でこれをホストしたい場合は、最初のバージョンを取ってください。
Also the obvious question, Igor, how do I host this elsewhere?
また、当然の質問ですが、イゴール、どうやって他の場所でこれをホストすればいいですか？
This is not a technical tutorial on how to host websites or web apps on the internet.
これはインターネット上でウェブサイトやウェブアプリをホストする方法についての技術的なチュートリアルではありません。
But what I did do and in my prompt, I included the blog that tells it to give you a step-by-step guide on how to host this.
しかし、私が行ったことは、私のプロンプトにブログを含め、これをホストする方法についてステップバイステップのガイドを提供するように指示しました。
If you look at the bottom of its output, it doesn't just give you the artifact, okay, the website that works, but also here at the bottom, it tells you to fully implement this dashboard in a production environment you would need to add a proper date range picker, implement real API calls, add proper error handling, implement the sharing and data export functionalities.
その出力の一番下を見ると、単にアーティファクトを提供するだけでなく、ウェブサイトが機能することを示していますが、また、一番下には、このダッシュボードを本番環境で完全に実装するには、適切な日付範囲ピッカーを追加し、実際のAPI呼び出しを実装し、適切なエラー処理を追加し、共有とデータエクスポート機能を実装する必要があることを示しています。
It gives you all the steps that you could then communicate to a developer or work with Claude to guide you through it.
これにより、開発者に伝えるためのすべての手順が提供され、またはClaudeと協力してガイドを受けることができます。
Also what you'll see in the first result, it gives you a step-by-step guide on how to host this yourself.
また、最初の結果で見ることができるのは、自分でこれをホストする方法についてのステップバイステップのガイドです。
This app goes offline as soon as it closes the tab and you can share it with the world for others to use it.
このアプリは、タブを閉じるとすぐにオフラインになり、他の人が使用できるように世界と共有することができます。
But if you follow this step-by-step guide that comes from the initial advanced prompt, I'm confident that if you take some time and use Claude's assistance in it, you will be able to get this up and running.
しかし、最初の高度なプロンプトから来たこの段階ごとのガイドに従えば、時間をかけてClaudeの支援を利用すれば、この作業をうまく進めることができると確信しています。
It's not easy, but with the assistance of something like Claude, it's not that hard either.
簡単ではありませんが、Claudeのようなものの支援を受ければ、それほど難しくはありません。
I have a more advanced example of a visualization here on Twitter by Luis Patala and it took him five minutes and a couple of iterations.
ここでは、ルイス・パタラによるTwitter上のより高度な可視化の例があり、彼は5分と数回の反復を要しました。
That's what it takes sometimes, right?
時にはそれが必要なこともあるんですよね？
If it doesn't work, you gotta follow up, you gotta tell it what you don't like, what it should change.
うまくいかない場合は、フォローアップする必要があります。気に入らない点や変更すべき点を伝える必要があります。
He just visualizes a pendulum with a bunch of random numbers in between.
彼はただ、ランダムな数字が挟まれた振り子を想像しています。
It generates a bunch of other pendulums, and look, you get this visualization.
それによってたくさんの他の振り子が生成され、見てください、この視覚化が得られます。
I'm not exactly sure how you practically use this, but you can do things like this.
実際にこれをどのように使うかは正確にはわかりませんが、こういったことができます。
While the options might not be infinite, there's so much you can do, which just wasn't possible a month ago.
選択肢は無限ではないかもしれませんが、1か月前には不可能だったことがたくさんあります。
If you want the final prompt on the tweet, links are in the description as per usual.
もしツイートの最終プロンプトが欲しい場合は、通常通りリンクが説明にあります。
Next up, we'll be using a new chat and this is a very simple prompt yet again.
次に、新しいチャットを使用します。また、これは非常にシンプルなプロンプトです。
Create a narrative-driven website from a PDF that weaves together unexpected visual elements and storytelling techniques to reinforce the information in the PDF.
PDFから物語に基づいたウェブサイトを作成し、予期せぬビジュアル要素とストーリーテリング技術を組み合わせて、PDFの情報を強化します。
This one comes from my personal prompt library.
これは私の個人的なプロンプトライブラリから来ています。
I have various interesting and esoteric prompts that I like to play around with here and there.
私はここそこで遊びたいと思うさまざまな興味深いエソテリックなプロンプトを持っています。
This was a variation of one of it and I used its ability to convert PDFs into websites and combine that with these really powerful LLM keywords like storytelling techniques and unexpected visual elements.
これはそのバリエーションの1つであり、PDFをウェブサイトに変換する能力を使用し、ストーリーテリング技術や予期せぬビジュアル要素などの非常に強力な大規模言語モデルキーワードと組み合わせました。
What do I need to do here?
ここで何をすればいいですか？
I need to provide it a PDF, otherwise it will be a little lost.
PDFを提供する必要があります。そうでないと、少し迷ってしまいます。
This is a PDF I shared on the channel before.
これは以前チャンネルで共有したPDFです。
It's one of now 60 or 70 AI Advantage Community Guides and it's this majority technique where you can generate screens with green screens in them, which makes it really easy to create custom marketing materials for your very own brand because it's really simple to replace the green screens in either with a chroma key effect in a video editor or by selecting that one color inside of Photoshop, Canva or similar.
これは今や60から70のAI Advantage Community Guidesの1つであり、画面に緑色のスクリーンが含まれているため、非常に簡単に独自のブランド向けのカスタムマーケティング資料を作成できます。ビデオエディターでクロマキー効果を使用して緑色のスクリーンを置き換えるか、Photoshop、Canvaなどでその色を選択することが本当に簡単です。
Anyway, the point is that this is a step by step guide and we're going to try to visually represent this and just run this prompt and see what we get.
とにかく、ポイントは、これが段階的なガイドであり、これを視覚的に表現し、このプロンプトを実行して結果を見てみるつもりです。
This one is so interesting because the concept here is not the idea of turning a Midjourney tutorial PDF into a website.
この例は非常に興味深いです。なぜなら、ここでのコンセプトはMidjourneyのチュートリアルPDFをウェブサイトに変換するというアイデアではないからです。
It's the idea of transforming any PDF into a different medium.
それは任意のPDFを異なるメディアに変換するというアイデアです。
LLMs are essentially transformers that generate various outputs, right?
大規模言語モデルは基本的にさまざまな出力を生成する変換器ですね？
They generate text, image, even video now with Gen-3 and Dream Machine.
彼らはテキスト、画像、さらにはGen-3やDream Machineで今はビデオさえ生成します。
Or with Claude Sonnet, they create web apps, websites and games or interactive visualizations.
また、Claude Sonnetでは、彼らはWebアプリ、ウェブサイト、ゲーム、またはインタラクティブな視覚化を作成します。
This is a very simple prompt and I just gave it the PDF without any additional context and it creates this website for me and as you can see, it is narrative driven.
これは非常にシンプルなプロンプトで、追加の文脈なしにPDFを提供し、このウェブサイトを作成してもらいました。ご覧の通り、物語が主導しています。
Chapter one, the discovery.
第1章、発見。
It turns my little tutorial into a story driven website.
私の小さなチュートリアルが物語が主導するウェブサイトに変わりました。
Isn't that interesting?
それは面白いですね。
You could enter the Midjourney prompt here, generate the image, obviously you would need to hook this up to the API to actually work with Midjourney and Midjourney doesn't have an API so you would need to do Stable Diffusion or something else.
ここにMidjourneyのプロンプトを入力し、画像を生成することができますが、明らかにMidjourneyと連携するためにはAPIに接続する必要があります。MidjourneyにはAPIがないので、Stable Diffusionなど他の方法を使う必要があります。
But you get the point here.
でも、ここでポイントがわかりますね。
These placeholder images in the background, look at these scrolling elements.
背景にあるこれらのプレースホルダー画像を見てください。
This is not your typical website.
これはあなたの典型的なウェブサイトではありません。
Powerful little prompt right there that you can play around with yourself.
自分で遊ぶことができる強力な小さなプロンプトがここにあります。
Here's the formula of how to do it.
ここにそれを行う方法の公式があります。
Here at the bottom, we should have the different use cases.
ここでは、異なるユースケースを示すべきです。
We always make a point out of including use cases at the bottom of the community guides, and there you have a few of them.
コミュニティガイドの最後には常にユースケースを含めるようにしており、ここにいくつかの例があります。
There's an epilogue with a little motivational message.
エピローグには少しモチベーションのあるメッセージがあります。
Very interesting, isn't it?
とても興味深いですね。
If you take this a step further and you flash out this prompt into this, yet again, the prompt is available right here.
さらに一歩踏み込んで、このプロンプトを詳しく説明すると、再び、プロンプトはこちらで利用可能です。
It flashes out all the details of what we want on the website, and in this case, it's interesting because this is actually less creative and less unexpected.
ウェブサイトで欲しいもののすべての詳細が明確に示され、この場合、実際にはより創造的で予期せぬ要素が少ないので興味深いです。
The more guidelines you give it in the prompt, the less room it will have for interpretation.
プロンプトで与えるガイドラインが多ければ多いほど、解釈の余地が少なくなります。
In this case, maybe going with the more open-ended prompt of narrative driven website that weaves together unexpected visuals and storytelling, and then Figure out all the details of that Claude might be a better option than going with this advanced one.
この場合、予期せぬビジュアルとストーリーテリングを織り交ぜた物語重視のウェブサイトのよりオープンなプロンプトを選択し、その詳細をすべて考えることが、この高度なものを選択するよりも良い選択肢かもしれません。
Nevertheless, I just wanted to give you the options.
それでも、選択肢を提供したかっただけです。
This looks certainly more formal, but that's the trick.
これは確かによりフォーマルに見えますが、それがポイントです。
This menu on top jumps to the various sections of the website, and it's just a very powerful way of turning any PDF into an interactive website.
この上部のメニューは、ウェブサイトのさまざまなセクションに移動するための非常に強力な方法であり、任意のPDFをインタラクティブなウェブサイトに変換する方法です。
There you go.
そうですね。
You created the website from a PDF in seconds, and here's another interesting capability.
数秒でPDFからウェブサイトを作成しました。さらに興味深い機能があります。
You have this menu at the top right here, and you just got to realize that you can always add to these web pages, add to these projects.
右上にこのメニューがありますが、いつでもこれらのウェブページに追加したり、これらのプロジェクトに追加したりできることに気づく必要があります。
Just because I show you how to do things in one prompt doesn't mean that you can't have a conversation with it.
私が一つのプロンプトでやり方を示したからといって、それと対話できないわけではありません。
I'll just go in here and paste this prompt here.
ここに入って、このプロンプトを貼り付けます。
Add a tab with an interactive quiz.
インタラクティブなクイズをタブに追加します。
I featured this many times on the channel, creating little quizzes, questionnaires, flash cards.
私はこれをチャンネルで何度も取り上げており、小さなクイズやアンケート、フラッシュカードを作成しています。
It's all alarms are really good at that, and we can use that capability and our awareness of that capability in a little prompt like this by adding a tab with a quiz that consists of five multiple choice questions.
全てのアラームは本当にその点に優れており、その能力とその能力の認識を活用して、5つの選択肢のクイズからなるタブを追加することで、このような小さなプロンプトでそれを利用できます。
I'll just run this and it will update this project here for me.
これを実行して、このプロジェクトを更新します。
All I have to do is wait for a few seconds.
私がしなければならないことは、数秒待つだけです。
The funny thing is with GPT-4, I usually had to stop and wait for a minute until it's finished.
面白いことに、GPT-4では通常、終わるまで1分待たなければならなかった。
We cut the recording.
録音を切りました。
But here I'm just talking over this happening.
しかし、ここではただこの出来事について話しているだけです。
A few moments later.
数分後。
Okay, fair enough.
わかりました、了解しました。
We had to fast forward a little bit just because generating the code for all the multiple choice questions took a while.
複数選択問題のコードを生成するのに時間がかかったため、少し早送りしなければなりませんでした。
But look at that.
でも、見てください。
We have a little tab with a multiple choice quiz.
私たちには、選択式クイズがある小さなタブがあります。
You could submit that quiz.
そのクイズを提出することができます。
You could ask Claude how to implement this practically.
実際にこれを実装する方法をClaudeに尋ねることができます。
There's some console messages that I could now take and paste back.
今、取得できるコンソールメッセージがあり、それをコピーして貼り付けることができます。
This is the way you want to work with it.
これがあなたがそれと一緒に作業したい方法です。
You want to add your ideas and if something doesn't work and you get error messages, you just paste them back in and then it will improve on it by itself.
あなたは自分のアイデアを追加したいし、何かがうまくいかない場合やエラーメッセージが表示された場合は、それをコピーして貼り付けるだけで、それ自体が改善されます。
Here I want to highlight another use case here from Sabo Shubban on X and what he actually He gave it the Tesla earnings report for the first quarter of 2024.
ここでは、Sabo ShubbanさんがXでの別のユースケースを紹介し、実際に2024年第1四半期のTeslaの収益レポートを提供しました。
Because that is very well formatted, he gave it a simple prompt like this, come up with a detailed analysis and summary with stock recommendations by carefully reading the attached earnings report, put together a nice interactive and highly detailed but visual appealing dashboard.
それは非常に整形されているため、彼はこれに似た簡単なプロンプトを与えました。添付された収益レポートを注意深く読んで、株の推奨事項と詳細な分析と要約を考え、見栄えの良く、インタラクティブで非常に詳細なダッシュボードを作成してください。
Here you have the dashboard keyword again, very useful if you just want to create overviews of something.
ここで再びダッシュボードのキーワードが登場します。何かの概要を作成したい場合に非常に便利です。
Here it is.
こちらです。
He transformed a PDF into a website.
彼はPDFをウェブサイトに変換しました。
This is just another use case after the step-by-step guide that I showed you.
これは、私があなたに示したステップバイステップのガイドの後のもう1つのユースケースに過ぎません。
You could do this with any PDF.
どんなPDFでもこれを行うことができます。
Just try it out.
ぜひ試してみてください。
It's free to use.
無料で使用できます。
Isn't that crazy?
それは狂っていますよね？
There's a limitation of only a few messages, but you could just try all of this yourself today.
メッセージ数には制限がありますが、今日は自分で試してみることができます。
Next up, I'll be using another one of my prompts.
次に、私はもう1つのプロンプトを使用します。
Create an interactive dashboard with editable sliders and text fields to visualize population growth in the U.S. over time.
アメリカの人口増加を時系列で可視化するために、編集可能なスライダーとテキストフィールドを備えたインタラクティブなダッシュボードを作成します。
You were not giving it any data here so far, right?
ここまでのところ、データは何も提供されていませんでしたね。
We're just telling it to create in another dashboard.
私たちはただ別のダッシュボードを作成するように指示しているだけです。
But what I did here is I took a screenshot from this website, worldometers.info.
しかし、私がここで行ったことは、このウェブサイト、worldometers.infoからスクリーンショットを取ることです。
You can take your data from wherever you want, but because it can recognize images, I want to show you this capability of you feeding it images and using the various dashboard website game generation capabilities that we have here to create something that might be useful to you.
どこからでもデータを取得できますが、画像を認識できるので、画像を与えてさまざまなダッシュボードウェブサイトのゲーム生成機能を使用して、あなたに役立つかもしれないものを作成する能力をお見せしたいと思います。
All I did is screenshot a part of this data that is relevant to what we're doing here.
私がしたことは、ここで行っていることに関連するデータの一部をスクリーンショットしただけです。
Here's the screenshot.
こちらがスクリーンショットです。
I'll just drag and drop it onto Claude now.
今、Claudeにドラッグアンドドロップします。
I uploaded the content.
コンテンツをアップロードしました。
As soon as it's uploaded, I can run this and it will generate this dashboard based on the data that I gave it, right?
アップロードされるとすぐに、私はこれを実行して、私が与えたデータに基づいてこのダッシュボードを生成することができますね？
You could also run it without the data.
データなしで実行することもできます。
It will just invent some random stuff or tell you to connect it to API later on.
単にいくつかのランダムなものを発明するか、後でAPIに接続するように指示されるでしょう。
This time we're not doing PDF plus prompt, but we're doing image plus prompt and we're creating an interactive dashboard from that.
今回はPDFプラスプロンプトではなく、画像プラスプロンプトを行い、それからインタラクティブなダッシュボードを作成します。
This should happen so fast that maybe we don't even need to fast forward or cut too much.
これは非常に速く行われるはずで、早送りや大幅なカットが必要ないかもしれません。
It's already working on it.
すでにその作業を進めています。
It's already generating code.
すでにコードを生成しています。
It's going to open up this little IDE over here.
こちらにこの小さなIDEを開く予定です。
As you can see here, I love this.
ここでご覧の通り、私はこれが大好きです。
You can see how it populates every single year.
どの年もきちんと表示されるのがわかります。
You can always double check that.
いつでもそれを再確認することができます。
But the vision capabilities of Claude, as I talked in my summary video, they're also best in class when it comes to the benchmarks.
しかし、私がサマリー動画で話したように、Claudeのビジョン能力は、ベンチマークに関しても最高クラスです。
Practically that's the case too.
実際にはそのようなケースです。
It packages all of that.
それはすべてをパッケージ化します。
It finishes up the prompt and we should be presented with a visualization any second here.
プロンプトを終了し、ここではすぐに視覚化が表示されるはずです。
Let's have a look.
見てみましょう。
There's a little bit of loading.
少し読み込みがあります。
I'm out of messages.
メッセージがなくなりました。
I'll have to wait another 20 minutes.
もう20分待たなければなりません。
But look at this wonderful dashboard that it created in the very first try here.
でも、ここで最初の試みで作成された素晴らしいダッシュボードを見てください。
I can actually adjust these sliders.
実際にこれらのスライダーを調整できます。
Like what is the range?
範囲はどのようになっていますか？
They want to go from 1955 to 2024.
彼らは1955年から2024年まで行きたいと言っています。
Here I would maybe like a second button here where I can readjust this.
ここにもう1つボタンが欲しいかもしれません。ここでこれを再調整できるように。
I could just follow up prompt this if I had more messages this very second, but I think you see the point here.
もし今この瞬間にもっとメッセージがあれば、私はただ追加のプロンプトを行うことができますが、ここでのポイントは理解していると思います。
By the way, I'm on a paid plan and I've been testing like crazy over the past days and especially today as I finalize all the research for this video.
ところで、有料プランを利用しており、過去数日間、特に今日はこの動画のためのすべてのリサーチをまとめるために熱心にテストを行ってきました。
But no worries, in 20 minutes we'll be back.
でも心配しないでください、20分後には戻ります。
As you can see, this works as expected and we have an interactive graph that we easily generated from a screenshot and a simple prompt like this.
ご覧の通り、期待通りに機能しており、スクリーンショットとこのような簡単なプロンプトから簡単に生成したインタラクティブなグラフがあります。
Pretty amazing.
かなり素晴らしいですね。
I want to highlight one more thing in the original chat, it cut off some numbers here for me.
元のチャットで、ここでいくつかの数字が切れてしまっていますが、もう1つの重要な点を強調したいと思います。
I didn't like that.
それは好きではありませんでした。
I just told it the numbers are cut off.
私はただ、数字が切れていることを伝えただけです。
If I go into billions, make it more visually appealing, unique and better.
数十億になると、より視覚的に魅力的でユニークで良くしてください。
In this example, I didn't even give it the data, so it just embed in some, but as you can see by following up with your feedback, with your human feedback, as you would be giving it to your assistant or another human that works for you or another human that works with you, it makes these adjustments on the go.
この例では、データさえ与えていないので、いくつか埋め込まれていますが、あなたのフィードバックに従って見ていただくとわかるように、あなたの人間のフィードバックによって、あなたのアシスタントやあなたのために働く他の人間、またはあなたと一緒に働く他の人間にそれを提供するように、途中でこれらの調整を行います。
But now there's a graph missing.
しかし、今はグラフが欠けています。
I say include a graph and then it creates a graph.
グラフを含めると言ったら、グラフが作成されます。
But what is this graph?
でも、このグラフって何？
This is more graph than website.
これはウェブサイトよりもグラフが多いです。
The heck?
何だこれは？
This is some mutant graph.
これは何か変異したグラフです。
I don't like it.
私はそれが好きではありません。
I simply told it.
私は単にそれを言っただけです。
This graph is crazy.
このグラフは狂っています。
Fix it.
修正してください。
It interprets crazy by itself.
それは自分で狂って解釈します。
This prompt might be a bit ambiguous going against what I teach on this channel, but OK, gotta have fun sometimes too.
このプロンプトは、このチャンネルで教えていることに反するかもしれませんが、まあ、時には楽しむことも大切です。
Eventually after telling it that it should fit on the screen, being more specific than just telling it, it's crazy, that didn't work.
最終的には、画面に収まるようにと伝えた後、それが狂っているというだけでなく、より具体的に伝えることが必要だったのですが、それはうまくいきませんでした。
It does this for me, which I think is a fantastic end result, considering I give it what? Like three sentences in total? Incredible.
これは私のために行ってくれます。私が何を与えているか考えると、素晴らしい結果だと思います。
Here's the same use case, but with the flashed out prompt that we show you how to do in this week's community challenge.
こちらは同じユースケースですが、今週のコミュニティチャレンジでどのように行うかを示すフラッシュされたプロンプトが含まれています。
By copy pasting this prompt into here, you get this artifact generated for you.
このプロンプトをここにコピー＆ペーストすることで、このアーティファクトが生成されます。
As you can see from the prompt straight up, I didn't even edit the prompt, right?
プロンプトからすぐにわかるように、プロンプトを編集することはありませんでしたね。
I just ran it for my little workflow there.
私はちょっとしたワークフローでそれを実行しただけです。
I get something that is immediately usable.
すぐに使えるものが得られます。
There's a lot of details like export data, and it's just the more advanced version with more customizable building blocks in here.
ここには、エクスポートデータなどの詳細がたくさんあります。より高度なバージョンで、よりカスタマイズ可能なビルディングブロックがたくさんあります。
But this is pretty great.
でも、これはかなり素晴らしいです。
I get multiple ways to visualize this export button and so much more, and it all works in one shot.
このエクスポートボタンを視覚化するための複数の方法や、それ以上の機能がたくさんあり、すべてが一度に機能します。
This is what I say in some of my other videos.
これは私の他のビデオでも言っていることです。
If you dare to give it feedback and if you know what you expect, it's fine to have short and simple prompts.
フィードバックをする勇気があれば、期待することを知っているなら、短くてシンプルなプロンプトでも問題ありません。
But if you want reliable results or you're going to automate it away or you're going to delegate the prompt to somebody else, you want one prompt that contains it all because that eliminates room for error and provides you with consistency.
しかし、信頼性のある結果を得たい場合や自動化したい場合、または他の誰かにプロンプトを委任する場合は、すべてを含む1つのプロンプトが必要です。これにより、エラーの余地がなくなり、一貫性が確保されます。
The results from this prompt will be way more consistent than from a prompt like this just because we're nailing down all the various variables and telling it exactly what we want rather than letting it Figure out everything itself.
このプロンプトからの結果は、このようなプロンプトからの結果よりもはるかに一貫性があります。なぜなら、さまざまな変数をすべて把握し、自分たちが望むことを正確に伝えることで、すべてを自分で解決させるのではなく、自分たちで解決するからです。
For next use case, we'll be creating a web app and concretely we'll be creating an AI powered web app.
次のユースケースでは、Webアプリを作成し、具体的にはAIパワードのWebアプリを作成します。
This is something that won't fully work in here just because you can't link to API endpoints from within the artifacts feature.
これは、アーティファクト機能内からAPIエンドポイントにリンクすることができないため、ここでは完全に機能しません。
This you would need to copy over to some ID or host it yourself on something like Versal.
これは、Versalのようなものに自分でホストするか、IDにコピーする必要があります。
But by simply telling it to create a summarizer tool that links to the cloud API, include a field to paste text and a field to add the prompt.
ただ、クラウドAPIにリンクする要約ツールを作成するように指示するだけで、テキストを貼り付けるフィールドとプロンプトを追加するフィールドを含めることができます。
You get this here you paste the text you want to summarize.
ここには、要約したいテキストを貼り付けることができます。
Here you have the option for a custom prompt and all you do is hit summarize and it will give you the summary.
カスタムプロンプトのオプションがあり、要約ボタンを押すだけで要約が表示されます。
But then I'll follow up with the good old make it better.
しかし、その後にはいつものように改善していきます。
What do we get?
何が得られるのでしょうか？
We get a better version.
より良いバージョンを手に入れます。
It figures out what better means in this context itself concretely here it adds an advanced mode where you can actually adjust the max tokens and the temperature.
ここでは、この文脈で「より良い」とは具体的に何を意味するかを理解し、実際に最大トークンと温度を調整できる高度なモードが追加されています。
Beyond that, it gives you the free different cloud options to choose from.
さらに、無料で異なるクラウドオプションを選択することができます。
If you want to be using Sonnet, you can pick that it's going to be faster.
Sonnetを使用したい場合は、それを選択するとより速くなります。
It's going to be cheaper.
より安くなります。
This won't work by itself as it outlines here in the prompt.
これだけではうまく動作しません。プロンプトでここに概説されている通りです。
You will need to go into the code and you'll need to replace your API key here with your actual API key.
コードに入り、ここにあるAPIキーを実際のAPIキーに置き換える必要があります。
If we head on over to the code, this shouldn't be hard to identify.
コードに移動すれば、これを特定するのは難しくないはずです。
You can always just command of API underscore.
常にAPIアンダースコアのコマンドを使用できます。
Here it is.
こちらです。
This is what you would need to replace with your very own API key.
これは、あなた自身のAPIキーで置き換える必要があるものです。
I showed you that about 20 times before on this channel.
このチャンネルでこれについて約20回お見せしました。
Just look up one of the chatbot building tutorials to retrieve your open API key or just ask Claude where you can find it.
チャットボット構築チュートリアルの1つを調べて、オープンAPIキーを取得するか、どこで見つけるかClaudeに尋ねてください。
Beyond that, I continued in the conversation by telling it to make it more aesthetic and look at these simple little prompts, make it more aesthetic, make it better, or in some cases make it more unique also works really well.
その後、会話を続け、より美しくするように指示し、これらのシンプルなプロンプトを見て、より美しく、より良く、あるいは場合によってはよりユニークにするように指示しました。
It does that.
それはそのようにします。
It makes it more aesthetic.
それはより美しくなります。
Look at that.
それを見てください。
It adds this universal symbol for AI that the internet seems to have agreed on at this point.
これは、インターネットがこの時点で合意しているAIの普遍的なシンボルを追加します。
It's kind of funny.
それはちょっと面白いですね。
Here we have the advanced features.
ここには高度な機能があります。
It's not perfect.
完璧ではありません。
There's a bit of padding missing on this, but again, we could follow up on this.
これには少しパディングが足りない部分がありますが、再度これについてフォローアップすることができます。
I just want to highlight this is not supposed to build 100% perfect apps.
私はただ、100%完璧なアプリを作ることが意図されていないことを強調したいと思います。
It's just the best LLM we ever had for building applications like this.
これは、このようなアプリケーションを構築するために私たちが持っていた中で最高の大規模言語モデルです。
It allows non-technical users to actually build things, which before wasn't really the case.
これにより、技術的でないユーザーが実際に物事を構築することができるようになりました。以前はそうではありませんでした。
You need to download IDE, install Python, make sure you have all the packages that are needed.
IDEをダウンロードし、Pythonをインストールし、必要なすべてのパッケージを持っていることを確認する必要があります。
I covered this on the channel before.
以前、このことをチャンネルで取り上げました。
Matter of fact, there's one video that teaches you how to build a basic chatbot.
実際、基本的なチャットボットの作り方を教えるビデオが1つあります。
It's the first one in the chatbot building playlist on the Advantage channel.
それはAdvantageチャンネルのチャットボット構築プレイリストの最初のビデオです。
That teaches you how to set up a local environment for you to copy this code into where it will work.
これは、このコードをコピーして動作させるためのローカル環境を設定する方法を教えてくれます。
It's about building a ChatGPT chatbot with Python.
Pythonを使用してChatGPTチャットボットを構築することについてです。
But most of the setup steps and retrieving the API keys, etc.
しかし、ほとんどのセットアップ手順やAPIキーの取得などがあります。
Are all the same.
全て同じです。
Check out that video if you want a detailed step by step tutorial on how to use this code yourself.
このコードを自分で使い方を詳しく学びたい場合は、そのビデオをチェックしてください。
Anyway, it's time to move on to the next use case, which in this case is something that me and the team found on Reddit.
とにかく、次のユースケースに移る時が来ました。この場合は、私とチームがRedditで見つけたものです。
This one is incredible.
これは信じられないものです。
Let me tell you.
お話しします。
Before you even look at this, I just have to clarify this is not something you will get from one prompt.
これを見る前に、これは1つのプロンプトから得られるものではないことを明確にしておかなければなりません。
This must have took a lot of iteration.
これは多くの反復を必要としたものであるはずです。
As you can see, this is not hosted inside of the artifacts features.
ご覧の通り、これはアーティファクトの機能の中にホストされていません。
You have to bring the code out, host it somewhere.
コードを取り出して、どこかにホストする必要があります。
You can get something like this.
こんな感じのものが手に入ります。
As you can see, this is hosted on the internet.
ご覧の通り、これはインターネット上でホストされています。
These more advanced prompts that I include in tutorial always give you a step by step guide on how to host plus there's a plethora of tutorials across the internet.
私がチュートリアルに含めるより高度なプロンプトは、常にホスト方法のステップバイステップガイドを提供しており、インターネット上には豊富なチュートリアルがあります。
It's not too hard.
それほど難しくはありません。
Almost everybody can Figure that out in an afternoon.
ほとんどの人が午後にそれを理解できるでしょう。
But as you can see, this is a web hosted app and it's this travel planner.
しかし、ご覧の通り、これはWebホストされたアプリであり、これが旅行プランナーです。
I think it's absolutely incredible.
私はそれが本当に素晴らしいと思います。
It includes images which were obviously added.
明らかに追加された画像が含まれています。
It includes a link to Google Maps and all of this was set up by Claude.
Googleマップへのリンクも含まれており、これはすべてClaudeによって設定されました。
Is there additional steps after Claude does the generation?
Claudeが生成を行った後に追加の手順はありますか？
Yes, absolutely.
はい、もちろんあります。
But can Claude Sonnet guide you through every step of the way?
しかし、Claude・Sonnetはあなたを進めるためのすべてのステップを案内してくれますか？
Also, yes, you can provide screenshots of your progress as you work for something and tell it what kind of problem you have and it will act as a tutor for you in implementing it too.
はい、作業中に進捗状況のスクリーンショットを提供し、どのような問題を抱えているかを伝えることができ、それに応じて実装する際のチューターとして機能します。
But look at that.
でも、それを見てください。
You can search for various locations across Bali with custom images.
バリ島全体のさまざまな場所をカスタム画像で検索することができます。
It gives you the different points on the map.
地図上で異なるポイントを表示します。
Incredible use case right there.
すごい使い方ですね。
Here's another one from Sabo Schumann where he actually took a screenshot of the ChatGPT interface and he let Claude 3.5 Sonnet re-create ChatGPT.
ここでは、Sabo Schumannが実際にChatGPTインターフェースのスクリーンショットを撮影し、Claude 3.5 SonnetにChatGPTを再作成させたものがあります。
Kind of rude, isn't it?
ちょっと失礼ですね？
But it did exactly that.
しかし、それはまさにその通りでした。
It wrote the entire code for a ChatGPT-4o clone with the prompt presets with all of that.
それは、プロンプトのプリセットを使用して、ChatGPT-4oのクローンのための完全なコードを書きました。
You could hook that up to the GPT-4o API and have yourself build ChatGPT-4o clone just like that.
それをGPT-4o APIに接続して、簡単にChatGPT-4oのクローンを構築することができます。
The links to all these posts are below.
これらの投稿へのリンクは以下にあります。
You can check out more details there if you're interested in that.
興味があれば、そちらで詳細をチェックすることができます。
But this brings me to my last category, which is a bit of a tricky one because it is game creation.
しかし、これで最後のカテゴリになりますが、それはゲーム制作という少しややこしいものです。
I do have some very basic prompts here.
ここには非常に基本的なプロンプトがあります。
But look, I just have to say I'm not a game developer.
でも、私はゲーム開発者ではないと言わざるを得ません。
I might be an avid gamer, always have been, but I've never created games.
私は熱心なゲーマーかもしれませんが、ずっとそうでしたが、ゲームを作ったことはありません。
But with Claude, you can get your feet wet and you can build your own interactive little games yourself.
しかし、Claudeを使えば、自分でインタラクティブな小さなゲームを作ることができます。
They actually work in artifacts feature so you don't have to bring them out.
実際には、それらはアーティファクトの機能で動作するので、持ち出す必要はありません。
You don't have to host them anyway.
とにかく、あなたはそれらをホストする必要はありません。
They just work in there.
それらはそこでだけ動作します。
Is there limitations?
制限はありますか？
You won't be able to build GTA 6 in here.
ここではGTA 6を構築することはできません。
Let me tell you that.
それをお伝えします。
But you can create simple little things like Pac-Man, Beckman, Tetris or the good old snake.
しかし、パックマン、ベックマン、テトリス、古典的なスネークのようなシンプルな小さなものを作成することができます。
We'll do that in a second here and I'll even show you how to create custom game assets yourself that you can then use in your very own game.
ここでそれをすぐに行います。そして、あなたが自分のゲームで使用できるカスタムゲームアセットを作成する方法もお見せします。
But before that, I want to actually dive into the deep end of the pool and shout out the friend of the channel, Chris from All About AI and this video that he posted on YouTube.
しかし、その前に、実際にプールの深い部分に飛び込んで、チャンネルの友人であるAll About AIのクリスに感謝の意を表し、彼がYouTubeに投稿したこのビデオについて話したいと思います。
I think this is an absolutely incredible one.
これは本当に素晴らしいものだと思います。
If you care more about game creation and you want to see what you can do if you're ready to bring the code out and to do a little bit of code editing, which does require some coding knowledge, then check out this video.
もしゲーム制作に興味があり、コードを取り出して少しのコード編集を行う準備ができている場合、それにはある程度のコーディング知識が必要ですが、この動画をチェックしてみてください。
You can also follow his project step by step and rebuild this game that he did.
彼のプロジェクトをステップバイステップでフォローし、彼が行ったこのゲームを再構築することもできます。
But here in under 30 minutes, he actually went for a step by step tutorial through all the asset generations.
しかし、ここでは30分以内に、彼は実際にすべてのアセット生成をステップバイステップでチュートリアルしています。
He generated these little flappy bird assets in 8-bit that I'll show you something similar in a second here himself or maybe not himself, maybe rather in tandem with Sonnet 3.5.
彼はこれらの8ビットの小さなフラッピーバードのアセットを生成しましたが、私がすぐに似たものをお見せします。彼自身がやったのか、もしかしたらむしろSonnet 3.5と一緒に行ったのかもしれません。
But that's the new doing it by yourself, I guess.
でも、それは新しい自分でやることだと思います。
He just goes for all the step of adding various sprites, adding AI opponents.
彼はさまざまなスプライトを追加し、AIの対戦相手を追加するというすべてのステップを踏んでいます。
Yes, that's something that Sonnet can do really well, adding music and sound and background and finishing up the game.
はい、それはSonnetが本当にうまくできることです。音楽やサウンド、背景を追加してゲームを仕上げることができます。
He has a fully functional game that he can actually play.
実際にプレイできる完全に機能するゲームを持っています。
He uses Claude's new project feature to build it.
彼はそれを構築するためにClaudeの新しいプロジェクト機能を使用しています。
As he generates more assets and more code, he adds it to a project.
彼はより多くのアセットとコードを生成すると、それをプロジェクトに追加しています。
He keeps talking to it.
彼はそれと話し続けています。
Sonnet is aware of all the different code and all the different things that have been added to the game.
Sonnetは、ゲームに追加されたさまざまなコードやさまざまなものに気づいています。
If you're interested in building something more complex and you try out the various use cases in this video, then Chris's video here might be a fantastic next step.
もし、より複雑なものを構築することに興味があるなら、このビデオでさまざまなユースケースを試してみてください。その後、こちらのクリスのビデオが素晴らしい次のステップになるかもしれません。
Let me just note, I forgot my table mount for this mic, so I keep handing it off from one hand to the other because it's really heavy.
ちなみに、このマイクのためのテーブルマウントを忘れてしまったので、本当に重いので片手からもう片手に渡しています。
Anyway, let's get back to the video here.
とにかく、ビデオに戻りましょう。
Here you have a full project.
こちらには完全なプロジェクトがあります。
This is kind of as far as you can take it with a tool like this when it comes to game development today.
これは、現在のゲーム開発において、このようなツールでできる限りのことです。
I'm sure you could do a little more, but this really shows you what is possible very well.
もちろん、もう少しできることもあると思いますが、これは非常に可能性をよく示しています。
But again, that does require some coding knowledge.
ただし、それにはある程度のコーディング知識が必要です。
If you want to kind of just play around and have a good time, then let me show you some other use cases before we build something ourselves.
もし単に遊んで楽しむだけであれば、私たち自身で何かを構築する前に、他の使用例をいくつかお見せしましょう。
Because you could not just ideate, but you could also build with Claude 3.5 Sonnet when it comes to games.
あなたはゲームに関して、アイデアを考えるだけでなく、Claude 3.5 Sonnetを使って実際に作ることができたからです。
In this Reddit example, SirWoodDafu here made a simple 3D first person shooter touch screen game right in the chat interface.
このRedditの例では、SirWoodDafuさんがチャットインターフェース内で簡単な3Dファーストパーソンシューティングタッチスクリーンゲームを作成しました。
OK, so all of this is created within the artifacts feature.
OK、すべてはアーティファクト機能内で作成されています。
In the game, you shoot happy emojis at sad monsters to make them happy.
ゲームでは、悲しいモンスターに幸せな絵文字を撃ち、彼らを幸せにします。
Kind of a neat concept, right?
なかなか面白いコンセプトですね？
By the way, the ridiculous idea for this game is Claude's.
ところで、このゲームの馬鹿げたアイデアはClaudeのものです。
You could first generate the idea for the game and then create it.
まず、ゲームのアイデアを考えてから作成することができます。
All you need to be aware of is the various things that you need, which Chris's video perfectly outlines.
気をつける必要があるのは、クリスのビデオで完璧に説明されているさまざまな必要なものです。
You need opponents, you need sprites, unique music sounds, maybe a menu to navigate it, et cetera.
対戦相手が必要で、スプライトが必要で、ユニークな音楽が必要で、おそらくそれをナビゲートするためのメニューが必要です。
As we're going through and exploring some of these ideas, let me show you another one here because this one is all about adding AI players.
これらのアイデアを探求しながら、ここで別のものを紹介させていただきます。なぜなら、これはAIプレイヤーを追加することに関するものだからです。
This is something that got a lot of people excited because you can create single player games and add AI players to it really simply with Claude 3.5 Sonnet.
これは、Claude 3.5 Sonnetを使用してシングルプレイヤーゲームを作成し、AIプレイヤーを簡単に追加できるため、多くの人々を興奮させたものです。
This was something that was a little tricky with GPT-4o.
これは、GPT-4oでは少し難しかったことでした。
Let me tell you from personal experience, it just did not work reliably.
個人的な経験から言わせていただくと、それは信頼性がなかったのです。
If you want all the prompts, they're also here in this Reddit thread.
すべてのプロンプトが必要な場合は、このRedditスレッドにもあります。
He posted every single prompt and as you can see, this is a 15 prompt sequence.
彼はすべてのプロンプトを投稿しましたが、これは15のプロンプトのシーケンスです。
Don't expect to build some of these more impressive use cases and one or two prompts.
これらのより印象的な使用例のいくつかを構築することを期待しないでください。1つか2つのプロンプトが必要です。
You're going to have to iterate a little bit, but I hope that this video is enough inspiration and points towards enough resources that you're going to be able to Figure it out yourself.
少し反復する必要がありますが、このビデオが十分なインスピレーションとリソースを示していることを願っています。それによって自分で解決できるようになるでしょう。
Or you join the advantage community and you can do it together with others.
または、アドバンテージコミュニティに参加して、他の人と一緒に行うこともできます。
Shameless plug.
厚かましい宣伝ですが。
OK, here's another use case that you can build.
では、もう1つ構築できる使用例があります。
As I mentioned, these basic games are easier to build.
私が言及したように、これらの基本的なゲームは作りやすいです。
Here it combines a basic game and an AI enemy to build a checkers game where you're playing against the AI.
ここでは、基本的なゲームとAI敵を組み合わせて、AIと対戦するチェッカーゲームを作成しています。
As you can see, this is running in the browser on your phone, OK, so you don't need to host it externally.
ご覧の通り、これはあなたの携帯電話のブラウザで実行されていますので、外部でホストする必要はありません。
You can build these things while you sit at dinner with your family and show them.
家族と一緒に夕食をとりながらこれらのものを作成し、彼らに見せることができます。
Hey mom, I built a checkers game where you can play versus AI myself while you ate your appetizer.
「お母さん、私はチェッカーゲームを作成しました。前菜を食べながらAIと対戦できるゲームですよ。」
Actually, thinking about it, don't do that.
実際に考えてみると、それはやめた方がいいと思います。
Most people are going to consider that weird.
ほとんどの人はそれを奇妙だと考えるでしょう。
Not me, though.
しかし、私はそうは思いません。
I think that's kind of a badass move.
私はそれがかなりカッコいい動きだと思います。
Or here we have one more example from Ethan Molyk before I show you the last two prompts I have here.
ここには、最後の2つのプロンプトをお見せする前に、Ethan Molykからもう1つの例があります。
He actually turned the academic research paper that he wrote himself.
彼は実際に、自ら書いた学術研究論文をゲーム化しました。
You could use any academic research paper into an interactive game.
どんな学術研究論文でも、インタラクティブなゲームに利用できます。
This is a 3D shooter that references concepts from the paper to be used in the game.
これは、ゲーム内で論文からの概念を参照する3Dシューティングゲームです。
I can't say everything is possible in here, but a lot is possible.
ここではすべてが可能とは言えませんが、多くのことが可能です。
My hope is that, for examples like this, that becomes clear.
私の希望は、このような例を通じて、それが明確になることです。
There we go.
さあ、やっていきましょう。
Finally, my cloud usage actually reset and we're going to be able to do the thing that I've been waiting for all day.
やっとクラウドの使用量がリセットされ、一日中待ち続けていたことができるようになりました。
That is generate an image of a cat with a hat in the 8-bit style.
それは、帽子をかぶった猫の画像を8ビットスタイルで生成することです。
OK, if you're not familiar with 8-bit in a second, you'll see exactly what that is.
8ビットに馴染みがない場合は、すぐにその内容がわかります。
You could see it writing the code to generate a little cat with a red hat.
赤い帽子をかぶった小さな猫を生成するコードを書いているのが見えます。
Is this a cat in a hat?
これは帽子をかぶった猫ですか？
Isn't that beautiful?
それは美しいですね。
What I want to do here is I want to follow up with a prompt and I just want to show you this combo.
ここでやりたいことは、プロンプトに続きたいだけで、このコンボを見せたいだけです。
This is very basic, right?
これは非常に基本的ですね。
This is something you could Figure out yourself.
これは自分で考え出すことができるものです。
But it's this ability to combine that you really need to become aware of.
しかし、本当に意識を向ける必要があるのは、この組み合わせの能力です。
Because as I showed you, some of the best things in here are built with 15 prompts or more.
なぜなら、私が示したように、ここにある最高のもののいくつかは、15個以上のプロンプトで構築されているからです。
If I now say create a snake game with the cat with a hat as the player character, you can create a snake game, but you can use the little 8-bit style cat in SVG format that we created before in the same conversation as your player character.
もし今、帽子をかぶった猫をプレイヤーキャラクターとして使った蛇ゲームを作成するように言ったら、蛇ゲームを作成できますが、以前に同じ会話で作成した8ビットスタイルの猫のSVG形式をプレイヤーキャラクターとして使用することができます。
Let's see how it handles that.
それがどのように処理されるか見てみましょう。
It should be able to pick up the SVG, write the code for snake.
SVGを取得し、蛇のコードを書くことができるはずです。
That should be pretty straightforward.
それはかなり簡単なはずです。
In just two prompts, we should have a playable game.
たった2つのプロンプトで、プレイ可能なゲームができるはずです。
If that's not the case, I'll follow up further.
もし違う場合は、さらに追加で対応します。
But let's see.
でも、見てみましょう。
Use the arrow keys to move the cat.
猫を動かすには矢印キーを使用してください。
This is really great.
これは本当に素晴らしいです。
My little cat is getting longer and longer.
うちの小さな猫はますます大きくなっています。
But like I'm missing one more thing, right?
でも、もう1つ足りないものがあるような気がしますね。
Is it just me or do we want the cat to actually hunt hats?
私だけなのか、それとも猫に実際に帽子を狩ってほしいと思っているのでしょうか？
Let me see if I can do this in one prompt, create an image of a hat in 8-bit style and use it as the food.
1つのプロンプトでこれをやってみましょう、8ビットスタイルで帽子の画像を作成して食べ物として使用します。
Why am I saying food?
なぜ私は食べ物と言っているのか？
Because I looked at what it wrote and I saw that it references to the thing that we need to eat up as food.
なぜなら、私はそれが書いてあるものを見て、私たちが食べ物として食べる必要があるものを指していることに気づいたからです。
This is a very old trick, but it's one of the most reliable ways to reduce ambiguity.
これは非常に古いトリックですが、曖昧さを減らすための最も信頼性の高い方法の1つです。
Just reference the words that it uses itself.
単にそれ自体が使う言葉を参照するだけです。
Can't go wrong with that.
それで間違いはありません。
There you go.
どうぞ。
The very first time on this channel, we created a little snake game where a cat with a hat is hunting more hats and extending its empire, extending its body by finding more hats.
このチャンネルで初めて、帽子を被った猫が帽子を狩り、帝国を拡大し、帽子を見つけて体を伸ばす小さな蛇ゲームを作成しました。
It might look basic from the outside, but considering the fact that we just made this while I was talking in under a minute, I think that's seriously impressive.
外から見ると基本的に見えるかもしれませんが、私が話している間にこれを1分以内に作ったことを考えると、それは本当に印象的だと思います。
This is the worst these tools are ever going to be.
これがこれらのツールが今後最悪になるであろう瞬間です。
I can't wait for the large model Claude 3.5 Opus or OpenAI's response to this move.
大きなモデルClaude 3.5 OpusやOpenAIのこの動きへの反応を待ちきれません。
I hope this video brought you some inspiration and some knowledge.
この動画があなたにいくらかのインスピレーションと知識をもたらしてくれたら嬉しいです。
If you want to get more into this, if this sparked your interest, I would again recommend this little playlist that is still relevant on how to build a custom chatbot with code without any coding knowledge.
もしもっと深く学びたいと思うのであれば、もしも興味を持たれたのであれば、コーディングの知識がなくてもカスタムチャットボットを作る方法に関するこのプレイリストを再度お勧めします。
It's the most popular long form tutorial on this channel for a reason.
このチャンネルで最も人気のある長い形式のチュートリアルなので、理由があります。
Using something like VSCode and installing various coding languages yourself on your own machine is the logical next step to bringing games like this to life yourself.
VSCodeのようなものを使用し、自分のマシンにさまざまなコーディング言語をインストールすることは、自分でこのようなゲームを実現するための次の論理的なステップです。
That's all I got for today.
それでは、今日はこれで終わりです。
See you soon.
すぐにお会いしましょう。
この記事が気に入ったらサポートをしてみませんか？