5,456 文字
こんにちは、皆さん。今日の動画へようこそ。今日の動画では、最新のAnthropicモデルであるClaude Sonnet 3.7を使ったクライン（Cline）をテストしていきます。まず最初にやるべきことは、拡張機能に行き、ここに表示されるはずの「更新」または「拡張機能を再起動」というボタンをクリックすることです。これはVisual Studio codeですが、それによってクラインが更新されます。更新が完了したら、ここの設定に行き、Anthropicを選ぶと、そこにClaude 3.7 Sonnetがあります。完璧ですね。3.7 Sonnetを設定し、ここで完了を押します。このモデルがどのように動作するのか、とても興味があります。
今回使用するプロンプトは、サービスベースのウェブサイトを作成するためのプロンプトです。おそらくこのプロンプトですが、別のものかもしれません。基本的にこのプロンプトは、サービスベースのウェブサイトを作成し、Next.jsを使用し、Next.jsの特定のバージョンを使用するというものです。
まず最初に私がいつもやることは、自分でNext.jsプロジェクトを作成することです。ちょっとChatGPTに「Next.jsプロジェクトを作成するコマンドを教えて」と言います。私は特にNext.js 14.2.3を使用したいですが、これは変更される可能性があります。最新のSonnetモデルがいつまでの情報を持っているかわからないからです。他のバージョンに変更するかもしれません。
ブログ記事には変更があったという記載はないので、おそらくSonnet 3.5と同様に2024年4月までの情報を持っていると思われます。証拠はありませんが、実際いつまで学習されているかは知りません。ただ一般的に言えば、私はNext.js 14.2.3を使うのが好きです。なぜならそれはClaudeの学習範囲内だからです。
プロジェクト名を「rollsroyce-website」とし、まずアプリケーションを作成します。Enterを数回押して…それが完了するのを待ちましょう。OK、完了しました。「フォルダを開く」を選び、Rから始まるフォルダを探します。フォルダ名は気にしないでください。このフォルダを選択し、クライアント（Client）に進みます。
私がまずプロジェクトを作る理由は、時々動きが止まることがあるからです。プロジェクトから始める方が実際にはずっと良いです。「plan」に進み、このプロンプトを持ってきます。
実はその前にやらなければならないことがあります。publicフォルダを追加する必要があります。おそらくappの中だと思いますが、実際にはよくわかりません。いや、ここだと思います。このフォルダを作成し、その中にimagesフォルダを作ります。そうすれば機能すると思います。
それから画像をいくつか追加します。Unsplashに行って「イタリアでの結婚式」と検索してみましょう。無料のものが欲しいです。はい、これは無料でダウンロードできますね…これはLAにあるんですね、面白い。いや、LAAですね、別の場所です。OK、そのファイルをダウンロードしました。
ここにドラッグアンドドロップして、「wedding-photo-in-abandoned-car-park」のように名前を変更することをお勧めします。その理由は、LLMやクラインがそれを読むことができるからです。次に、ロールスロイスのウィキペディアに行きます。ウィキペディアなのでこれらの画像は使用が許可されています。これを「Rolls-Royce-logo.svg」として保存し、ここにドラッグアンドドロップします。
実際には、もっと多くのことに対してこれを行うでしょう。文字通り結婚式、誕生日パーティーなどに対してこれを行います。今はそれをする時間がないので、ここに置いておきます。これはロールスロイスのロゴです。これらは何と呼ばれていますか？「initials.png」というものです。
彼らは誕生日もやっているので、ここに行きます。「イタリアでの誕生日パーティー」など、もっと画像をダウンロードします。今はすべてをするつもりはありませんが、ダウンロードを続け、もっと画像を取得し続けてください。必要な画像をすべて入手したら、そのときにこのプロジェクトを実際に開始することができます。
前のモデルと比較してどのように動作するか非常に興味があります。ここに置いて、Enterを押します。これは「plan」セクションにあるので、計画を立てることになります。すべてを読み、何が起こっているのかなどを確認します。
実際にこれはとても賢いです。「連絡先情報を提供してください。この情報は連絡先ページに必要で、タスクの説明に空欄になっていました」と言っています。今は「プレースホルダーを入れてください」と言っておきます。
「また、ウェブサイトが過度に複雑にせずに本番環境に対応していることを確認してください。モバイルフレンドリーでSEOフレンドリーであり、hreflang タグが永続性をもって適切に実装されていることを確認してください」。
まだ計画段階にいます。どうぞすべてを実行させてください。ERダイアグラムを生成しています。これは本当にクールです。以前にこれを見たことがありません。良いですね。これは本当にクールです。ここで「act」を押して、先に進みましょう。
これまでのところ確かに良好です。これは私がClaude Sonnet 3.5で以前に見たものよりもはるかに優れた計画です。より詳細な計画です。そしてこれが実際にすべてを作成し、それが機能することを期待しています。もしそうであれば、このようにクラインを使ってワンショットでウェブサイトを作れるなら、これは絶対にクレイジーなことになるでしょう。
ちなみに、「Auto approve」をオンにしています。ここにある小さなボタンを押すだけで、これらをチェックし、それをどのような最大リクエスト数にでも設定できます。500も使うとは思いませんが、高い数字にしておくのが好きです。なぜなら、例えば今出かけなければならない場合、私の婚約者をナポリまで車で送らなければなりません。現在イタリアにいますが、マイクのひどい品質をお許しください。でも今出かけることもできます。
別のプロジェクトを開始することもできます。「ファイル」→「新しいウィンドウ」で、シネ（Cine）に行って何か全く違うものを作り始めることができます。あなたが2つ、3つ、10個、50個のことを一度にできるとき、または寝ている間にできるとき、それはあなたの能力を10倍、20倍に高める本当の瞬間です。
プロンプトを簡単に見ていきましょう、興味のある人のために。「あなたは新しいNext.jsプロジェクト内にいます。これを行うにはこのディレクトリにcdする必要があります」。実際にそれをやっているか確認しましょう。正しい場所にあるように見えます。はい、正しい場所にあります。良いですね。
「私はWindows PowerShellを使用しているので、&&記号を使用しないでください。Next.jsプロジェクトを生成したいです。あなたはすでに新しいNext.jsプロジェクト内にいます。/images というフォルダ内に画像があります。これはこれらのサービスを提供する会社のサービスベースのウェブサイトです」。
アイデアとしては、これは汎用プロンプトで、あなたが作ろうとしているものに合わせてこの情報を変更することができます。ちなみに、このプロンプトは完全に無料で、この動画の説明欄で見つけることができます。また、これらのウェブサイトの1つを作成してほしい場合は、ここにある「work with us」リンクをクリックしてください。バックリンクを構築し、ウェブサイト全体を作成し、あなたのウェブサイトを成長させます。
「ウェブサイトは言語でなければならず、URLのメインスラッグの前にhref言語タグで適切に分割されていなければなりません。例：example.com/fr/example、example.com/en/example。画像を活用して、良いカラースキームやフォントなどの要素を持つモダンなウェブサイトを構築してください。適切なインテリジェントな色とフォントを使用してください」。
少し変な文章ですが、このようなプロンプトが実際にはより良く機能することがあります。「サービス情報を使用してビジネスの詳細を理解してください。言語については、両方の言語のSEOとキーワードなどを実装し、言語の1つだけではないようにしてください。また、URLスラッグも翻訳する必要があります。会社はこれらの場所でこれらのサービスを提供しています」。
場所までスクロールすると、私の古い上司であるisitとTwanのオーナーが含めるように頼んだすべての場所が表示されます。アイデアは、サービスと場所の両方を組み合わせたすべての可能なページを生成し、サービス+場所ページのサービスベースのSEOのための場所ベースのSEOを作成することです。
「これが機能するようにSVGアイコンを使用できます。少なくとも5〜7つの異なる垂直ユニークブロックでセットアップし、ページの全体的な価値を高めます。これは重要です。なぜなら、これらは私たちが本当にランク付けしようとしているページであり、それらに良いユニークな情報がなければランク付けされないからです。テンプレートを使用することで、それらができるだけ多様になるようにしてください」。
「ページはサービスごとに分割されているため、サービス+場所ページが同じように見えても、2つのサービスランディングページが同じように見えないようにしてください。色が対照的で、どの時点でも白地に黒や黒地に黒にならないようにしてください。これらのページの内容は、あなたが構築したテンプレートを使用して、画像や与えられた情報から知っていることや解釈できる他の情報を使用してサービス自体のランディングページである必要があります」。
「連絡先ページには連絡先情報を入れてください」。連絡先情報までスクロールすると、使用したい電話番号などを入力できます。これは汎用プロンプトなので、少し変更するだけです。「画像とサービスに関する情報を使用して、モジュラーでモバイルフレンドリーなモダンなホームページを作成してください。モバイルでは水平方向にスクロールしないようにしてください」。
そして、サービス情報、サービス情報、場所があり、最後に正しい方向に導くためのいくつかのことがあります。しかし全体的に、これは非常に優れたプロジェクトを作成します。これで終了するのを待ちましょう。
非コーダーの皆さんのために言っておきますが、私は実際に何もコーディングしていません。文字通りプロンプトを与え、自動承認をオンにして、終了するのを待っているだけです。それが複雑に見えるかもしれませんが、私は実際には何もしていません。クラインにこのプロジェクト全体を構築させているだけです。
ウェブサイトが完成したと表示されています。見てみましょう。
これは私が今まで見た中で最も狂気じみたものです。これがどれほど素晴らしいか信じられません。品質は驚異的です。私はこれをWordPressでも12時間かけてもこれより良くは作れなかったでしょう。完成しています。
いくつかのものが404エラーになっていますが、それは通常のことです。イタリア語バージョンがどうなるか見てみましょう。これも404エラーになっているようです。ご覧のように、まだいくつかの問題がありますが、品質は驚異的です。AI によってこれほど短時間で作られたこれほど優れたものを見たことがないと思います。そして費用は220ドルでした。これは驚異的です。
もちろんいくつかの問題があります。これは404エラーになっています。いくつかの404の問題がありますが、一般的に言えば、これが実際にどれだけ素晴らしいかがわかります。
404エラーを修正したい場合、これは処理の途中ですが、ターミナル内でControl+Cを押すと、コンピュータがフリーズしなければ…そうすると、このターミナル出力をClaudeに送信し、「ウェブサイトは動作していますが、特定のページに対して404エラーがあります。ブラウザでウェブサイトがどのように見えるか確認しましょう」と表示されます。修正してほしい404エラーがいくつかあります。今それらのエラーを修正するはずです。
ここで動画を終了します。これは私が今まで見た中で最高品質のAI生成ウェブサイトです。つまり、3.7は確実にプロンプトにより忠実に従っており、自身の脳、自身の能力を使用してこの全体のプロジェクトを作成しています。
動画はここまでにします。これは間違いなく大きな改善です。クラインを使ったClaude 3.7は、次の最高のAIコーディングコンパニオンになるでしょう。視聴いただきありがとうございます。最後まで見ていただいた方は伝説的です。また近いうちに新しいコンテンツでお会いしましょう。ピースアウト。
コメント