A little coding challenge that it was able to accomplish in almost no time.

ちょっとしたコーディングの挑戦だったが、ほとんど時間をかけずに達成することができた。

I mean, I'm really impressed, and it only took two prompts.

つまり、私は本当に感動しているんだ。

I had to correct it, you know, that first one.

最初の1本は修正したんだ。

Apparently, Claude is the game to beat in town.

どうやら、クロードはこの街で勝てるゲームらしい。

As of yesterday, June 20th, 2024, Claude's models, their new model Sonnet, is outperforming in most instances all the other big players in the AI LLM game.

昨日、2024年6月20日の時点で、クロードのモデル、彼らの新しいモデル、ソネットは、AI LLMゲームにおける他のすべてのビッグプレーヤーをほとんどのケースで凌駕している。

Now, if you're an ordinary person like me, a lot of that is just jargon that I don't know what it means.

さて、私のような一般人であれば、その多くは単なる専門用語で意味がわからない。

Let's get digging a little bit, though, and do something kind of basic, kind of not.

少し掘り下げて、基本的なことをやってみよう。

We're going to build a one-page website.

私たちは1ページのウェブサイトを作るつもりです。

Now, let me highlight a few things from Claude, first and foremost.

さて、クロードからいくつか強調しておきたいことがある。

A, I like the interface here.

A、ここのインターフェイスは気に入っている。

This is basic stuff if you're using the and it gives you a response up here, just like ChatGPT, Copilot, MetaAI, anything that you've been using or have seen used or even heard talked about.

ChatGPT、Copilot、MetaAIなど、あなたが使っている、あるいは使っているのを見たことがある、あるいは話題になっているのを聞いたことがあるものなら何でもそうです。

This is what we're talking about when we say LLMs.

LLMと言えばこれだ。

It's large language models that we can talk to like a little chat, and it responds to us mostly intelligently.

これは大きな言語モデルで、ちょっとしたチャットのように話しかけることができ、ほとんど知的に応答してくれる。

Now, what I want to do today is look at a few of the nitty-gritties.

さて、今日私がしたいことは、細かいことをいくつか見ていくことだ。

We could just stay right here and prompt Claude 3.5, and I am on the free version.

ここでクロード3.5のプロンプトを出せばいいんだ。

I might point that out.

私はそれを指摘するかもしれない。

But I want to go a few steps deeper.

しかし、私はもう数歩踏み込みたい。

So on Anthropic's page, you can find out more information on their model, what it does, how it does it, all that stuff.

だから、Anthropicのページでは、彼らのモデル、それが何をするのか、どのようにするのか、そういったことについての詳細情報を見ることができる。

It's got links to papers and research and pricing and API access.

論文や研究、価格、APIアクセスへのリンクがある。

And what's this?

これは何だ？

Speaking of API access, let's dig into the documentation a little bit.

APIアクセスといえば、ドキュメントを少し掘り下げてみよう。

So if you go a little deeper and you look into the documentation here, there's all sorts of stuff that you can get into.

だから、もう少し深く掘り下げて、ここのドキュメントを調べれば、いろいろなことがわかるよ。

What we're going to do is check out this right here.

これからすることは、これをチェックすることだ。

This is a prompt library, which is fantastic to do exactly what it says.

これはプロンプト・ライブラリーであり、その言葉通りの素晴らしいものだ。

Explore example prompts for inspiration.

インスピレーションの源となるプロンプトの例をご覧ください。

If you've ever been using AI and just kind of curious about what you can actually do, other than have it reply to you in the form of a poem or other such pretty useless things, this is a good starting point.

もしあなたがAIを使ったことがあり、実際に何ができるのかちょっと興味があるのなら、詩のような形であなたに返信させるとか、そういうかなり役に立たないこと以外に、これは良い出発点だ。

We're going to go there in just a second to get our website prompt, in fact.

私たちのウェブサイトのプロンプトが表示されるまで、ほんの少しお待ちください。

Two other things to point out, though, there's an intro section here that you can explore the capabilities and development flow if you are on the technical side of things and interested in using this for development.

もう2つ指摘しておきたいことがあるが、ここにはイントロセクションがあり、技術的な面でこれを開発に使うことに興味があれば、機能や開発の流れを調べることができる。

And in a future video, I plan on going through this quick start.

今後のビデオでは、このクイックスタートについて説明する予定だ。

And this is actually getting what's called an API key and doing this from your computer, from the terminal, from the command line, and actually prompting instead of typing on their website, prompting the AI model.

そしてこれは、APIキーと呼ばれるものを取得し、あなたのコンピューターから、ターミナルから、コマンドラインから、実際に彼らのウェブサイトに入力する代わりにプロンプトを表示し、AIモデルにプロンプトを表示する。

Now, that's way ahead of where we are today, but just a tease of what's to come and what you can do with this LLM.

しかし、このLLMで何ができるのか、何が起こるのか、ほんの一例です。

Let's go back over here to our prompt library, though.

プロンプト・ライブラリーに戻ろう。

So they have all kinds of prompts, some of them witty and clever.

そのため、あらゆる種類のプロンプトが用意されており、中にはウィットに富んだ賢いものもある。

Spreadsheet Sourcer is a good example of that.

Spreadsheet Sourcerはその良い例だ。

All of them witty and clever, actually.

実際、どれもウィットに富んでいて賢い。

They've got categories here for us.

私たちのためにカテゴリーを用意してくれている。

But I want to go to this website wizard, OK?

でも、このウェブサイトのウィザードに行きたいんだ。

And we've got here system prompts and user prompts.

ここにはシステム・プロンプトとユーザー・プロンプトがある。

So what's the difference?

では、何が違うのか？

Well, a system prompt is something that you're instructing the model, the AI model, to be.

システム・プロンプトとは、モデル（AIモデル）に指示するものだ。

So in this case, your task is to create a one-page website with these specifications and some general guidelines for what the system should be doing.

つまりこの場合、あなたの仕事は、これらの仕様と、システムが何をすべきかについての一般的なガイドラインを含む1ページのウェブサイトを作成することである。

This is very useful when you're using the API requests and not just the chat window.

これは、チャット・ウィンドウだけでなく、APIリクエストを使っている場合に非常に便利だ。

You can type this in the chat window also.

チャットウィンドウにも入力できます。

And in fact, let's do it both ways.

そして実際、両方やってみよう。

So let's get started.

では、始めよう。

Let's take this system prompt.

このシステム・プロンプトを見てみよう。

Let's go over here and say that and then shift return for a new line.

ここでそう言って、シフト・リターンで新しい行に戻ろう。

Please respond only with yes if you understand your role, OK?

自分の役割を理解している場合のみ、「はい」と答えてください。

And so it's going to take that The alternative to this is over here on the console.

その代わり、コンソールのこっちの方にある。

So this is kind of the developer version of all that.

つまり、これはその開発者バージョンのようなものだ。

We can enter a system prompt up here.

ここでシステム・プロンプトに入ることができる。

And don't worry, there's links for all of this stuff in the description.

そして、心配しないで、説明の中にこれらすべてのリンクがある。

It's all found in different places on Anthropic's website.

それはすべて、Anthropicのウェブサイトのさまざまな場所に掲載されている。

Don't be intimidated.

怖がらないで。

Just start trying this stuff out.

とにかく試してみることだ。

I'm going to paste that system prompt in here.

そのシステム・プロンプトをここに貼り付けます。

When you first use the console, you can see that you actually have to have credits to do this.

コンソールを初めて使うとき、これを行うにはクレジットが必要であることがわかる。

Then they've got this one-page website for this learning platform called EduQuest.

そして、EduQuestという学習プラットフォームの1ページのウェブサイトがある。

So this is the prompt that they're using.

だから、これは彼らが使っているプロンプトなんだ。

And I've actually modified it over here in another window to fit our purposes.

このウィンドウは、私たちの目的に合うように、別のウィンドウで修正しました。

And I'm going to take that.

そして、私はそれを受け取るつもりだ。

I'm going to come back in here and I'm going to basically what we're saying is, hey, create this one-page website.

私はここに戻って、基本的に私たちが言っているのは、この1ページのウェブサイトを作りましょう、ということです。

Change the title there.

そこでタイトルを変更する。

Create a one-page website for an online learning platform.

オンライン学習プラットフォームの1ページのウェブサイトを作成する。

Got sheet.

シートを手に入れた。

A fixed navigation bar with links to two categories.

2つのカテゴリーへのリンクを持つ固定ナビゲーションバー。

Actually, we're going to put my name in here because that's kind of the brand right now.

実は、私の名前をここに入れるつもりなんだ。それが今のブランドのようなものだからね。

So we've got a navigation bar with these two categories.

ナビゲーション・バーには、この2つのカテゴリーがあります。

A hero section with a video background.

ビデオの背景を持つヒーロー・セクション。

We may have to add that ourselves.

私たち自身で追加しなければならないかもしれない。

A dynamic tagline that changes between these statements.

これらのステートメントの間で変化するダイナミックなキャッチフレーズ。

A feature course section.

特徴的なコースセクション。

A success story is basically a testimonial section.

サクセスストーリーは、基本的に証言欄である。

A footer with links to the newsletter.

ニュースレターへのリンクを含むフッター。

FAQ, privacy policy, and contact us.

よくある質問、プライバシーポリシー、お問い合わせ

And include filler placeholder content for the video background.

また、動画背景用のフィラー・プレースホルダー・コンテンツも含める。

For the course cards, because I've got that video, we'll see what it does with the video.

コースカードについては、ビデオを持っているので、ビデオで何をするか見てみよう。

And let's just try this out.

そして、これを試してみよう。

And right out of the gate, you can see the speed that it's going here.

ゲートを出てすぐに、そのスピードがわかるだろう。

This is pretty fast compared to some stuff I've seen.

私が見てきたいくつかの作品と比べると、これはかなり速い。

Okay, so we got some problems in commenting there.

さて、そこでコメントする上でいくつか問題がある。

It looks like this whole thing is commented out, but we can change that ourselves.

全体がコメントアウトされているように見えるが、それは自分たちで変えられる。

No, it's not.

いや、そんなことはない。

It's just not.

ただ、そうではない。

The format is just showing it grayed out.

フォーマットがグレーアウトして表示されているだけだ。

It's not commented out.

コメントアウトされていない。

This first line is.

この1行目はこうだ。

All right, so it's putting all the style in there.

よし、これですべてのスタイルが整った。

And yeah, this should be in a CSS file probably, but we're going to keep it in here.

これはCSSファイルに書くべきだろうが、ここではこのままにしておく。

You know, I didn't specify any colors, so we'll see what it comes up with in terms of colors.

色の指定はしていないから、どんな色が出てくるか見てみよう。

It looks like background being dark and color of font being white is what it's going for.

背景が暗く、フォントの色が白であることを狙っているように見える。

We got this stuff.

こんなものを手に入れた。

Look, we've got that video.

ほら、あのビデオだ。

This is probably not going to work.

これはおそらくうまくいかないだろう。

We need to down.

我々はダウンする必要がある。

Now it's putting in the JavaScript for the taglines, setting the interval, rotate.

あとはキャッチフレーズのJavaScriptを入れて、間隔を設定し、回転させる。

I mean, this is doing a lot.

つまり、これは多くのことをやっているんだ。

Okay, now copy this.

じゃあ、これをコピーして。

And then what we're going to do is go over here to we're going to load up an HTML file.

そして、HTMLファイルを読み込む。

I'm going to paste all of that in right here.

そのすべてをここに貼り付けよう。

And then I've got a live server.

それから、ライブサーバーも持っている。

And there it is.

そして、そこにある。

So this is rotating between the things.

つまり、これは物事の間を回転しているのだ。

It does have a get started button.

スタートボタンはある。

It does have featured course cards and it has success stories.

コースカードもあるし、サクセスストーリーもある。

And is it responsive?

そして、手応えはあるか？

It is responsive.

手応えがある。

So it's got breakpoints in there.

だからブレークポイントがあるんだ。

It's got the bottom stuff going on there.

あそこは底力がある。

Wow.

ワオ。

So that's super impressive.

だから、とても印象的だ。

You know, some things I'll get rid of.

処分するものもあるんだ。

I don't need a search bar up here.

ここに検索バーは必要ない。

That's not going to do anything for me.

そんなことをしても何の意味もない。

Need links to YouTube and to the course page right there.

YouTubeとコースページへのリンクが必要だ。

And this needs to be a sign up link as well.

そして、これは登録リンクでもある必要がある。

But on the whole, pretty cool.

しかし、全体としてはかなりクールだ。

That spat out a decent starting point for a website in a matter of a couple minutes.

これで、数分のうちにウェブサイトの適切な出発点ができた。

So I'm impressed with that.

だから感心したよ。

The other thing that I thought was incredibly cool.

もうひとつ、信じられないほどクールだと思ったことがある。

Look at this right here.

これを見てくれ。

Cosmic Street keystrokes.

コズミックストリートのキーストローク

Write me a complete web app as a single HTML file using WASD to move around, blah, blah, blah, you should make the website very aesthetic and use Tailwind.

WASDを使って動き回るような、完全なウェブアプリを1つのHTMLファイルとして書いてください。

Now it's got example output that works.

これで、例の出力が機能するようになった。

But I want to see what happens when I throw this in myself.

でも、自分でこれを投入したらどうなるか見てみたい。

To Claude.

クロードへ。

It's still right in the JavaScript.

まだJavaScriptの中だ。

Okay, there you go.

よし、これでいい。

Copy this.

了解した。

Let's bring this over into our page here.

これを私たちのページに持ってきましょう。

And this is just auto refreshing.

そしてこれは自動リフレッシュだ。

Look at this.

これを見てくれ。

Wow.

すごいね。

Now, I don't see the JavaScript working.

今、JavaScriptが動いているのが見えない。

So it doesn't look like this one is actually working.

だから、これが実際に機能しているようには見えない。

Like current word is this const words.

今の言葉は、この言葉の羅列のようなものだ。

So we've got a word list in there.

そこで、単語リストを用意した。

This is completely different from the anthropic example.

これは人間原理的な例とはまったく異なる。

Where is it cosmic keystrokes.

宇宙のキーストロークはどこだ。

So here's the example output that they gave.

これが、彼らが示した出力例だ。

Let me just paste that back in here.

それをここに貼り付けておこう。

And then go back here and look, this is actually working.

そしてここに戻って見て、これは実際に機能している。

So let's try ours again.

では、私たちのものをもう一度試してみよう。

So you enter the word and you get a high score up here.

単語を入力すると、ここで高得点が出るんだ。

And WASD does this up and down.

そしてWASDはこれを上下に行う。

What word was that boy?

あの少年は何と言った？

Boy, and there you go.

少年よ、それでどうだ。

I'm going to get 10,000 points.

10,000ポイントをもらうつもりだ。

Watch, watch and learn against.

見て、見て、そして学ぶ。

Oh, oh, no.

ああ、ああ、だめだ。

I clicked the wrong word.

間違った言葉をクリックしてしまった。

Go back to a new word.

新しい単語に戻る。

I don't know what I just clicked.

何をクリックしたのかわからない。

Right, agent, agent.

そう、エージェント、エージェント。

There.

そこだ。

So 11,000 points.

だから11,000ポイントだ。

So pretty cool.

とてもクールだ。

I mean, come on.

というか、いいじゃないか。

Let's go back here, though, and see what's going on in our actual prompt window.

ここに戻って、実際のプロンプト・ウィンドウで何が起こっているのか見てみよう。

Works to move around, but there are no words scrolling.

移動はできるが、文字がスクロールしない。

You're right.

その通りだ。

The words aren't scrolling as intended.

文字が意図したようにスクロールしない。

Let's modify the game.

試合を修正しよう。

I'll update the code.

コードを更新するよ。

Here's a revised version.

これが改訂版だ。

Seems like it took a shorter amount of time.

もっと短い時間だったように思う。

Let's see if we can get this working.

うまくいくかどうか見てみよう。

Hey.

やあ。

Oh, and this is even resilience quest.

ああ、これはレジリエンスクエストでもあるんだ。

All right.

分かった。

So I did get some points that time.

だから、あの時は何点か取れたよ。

Ambition.

野心。

Only problem with this.

ただ、これには問題がある。

Persevere.

辛抱する。

Wow, that's cool.

ワオ、クールだね。

So this is actually even better courage in terms of the interface than the one that they gave the example for.

だから、これはインターフェイスの点で、彼らが例を挙げたものよりもさらに良い勇気だ。

However, there's too many words.

しかし、言葉が多すぎる。

So we could we could prompt this some more and get it to do us a little bit different.

だから、僕たちはこれをもっと促して、もう少し違うことをさせることができる。

And we could also have the arrow keys instead of the WASD keys, because this just almost this just makes it so I can't move out of way of other words.

WASDキーの代わりに矢印キーを使うこともできる。

And of course, we're typing some discover while all this is going on.

そしてもちろん、この作業が進行している間、我々はいくつかの発見をタイプしている。

But I mean, this is sweet.

でも、つまり、これは甘いんだ。

Little coding challenge that it was able to accomplish in almost no time.

ちょっとしたコーディングの挑戦だったが、ほとんど時間をかけずに達成することができた。

I mean, I'm really impressed.

つまり、本当に感心しているんだ。

And it only took two prompts.

しかも、たった2回のプロンプトで。

I had to correct it.

訂正しなければならなかった。

You know, that first one didn't work right out of the gate, but good enough.

最初の試合はすぐにうまくいかなかったが、十分だった。

And look, I can talk and obtain victory here.

ほら、私はここで話して勝利を得ることができる。

Speaking of victory, all at the same time, 125.

勝利といえば、同時に125。

Now I like the scoring in the other game because we got up to 10,000 pretty quick.

もうひとつの試合での得点は、すぐに1万点に達したので気に入っている。

This one is a little bit lower score, a little bit lower stakes, but hey, that's OK.

この試合は少しスコアが低く、賭け金も少し低いが、まあ、それでいい。

Hope that was helpful for you.

参考になっただろうか？

Subscribe to my channel where I teach coding and spreadsheets to business professionals and hope you have a fantastic day.

ビジネス・プロフェッショナルにコーディングとスプレッドシートを教える私のチャンネルを購読して、素晴らしい一日をお過ごしください。