17,551 文字
今やAIがあれば、コーディングの知識がなくても、ちょっとしたプロンプトで完全に機能するウェブサイトやアプリを作れるようになりました。ソフトウェアのアイデアがあるけど、コードの書き方がわからへん、そんな人にとってこのツールはめっちゃ力になりますわ。
今日の動画では、カーソーっていうAIコードアシスタントについて説明していきます。ワイ自身はコーディング経験がないんやけど、カーソーを使って二つのプロジェクトを作っていく過程を、順を追って見せていきますわ。
最初のプロジェクトは、めっちゃクールな画像エディターです。ここでは写真をアップロードしたら、自動的に背景を削除して単色に置き換えてくれます。それに加えて、テキストを追加したり、テキストのサイズ、色、位置を変更したりできるんです。
二つ目のプロジェクトでは、Fluxを使った画像生成ツールを作ります。これはちょっと複雑で、フロントエンドの設定だけじゃなく、バックエンドのコードも書いて、外部APIにリンクせなあかんのです。でも、カーソーと、ほんの少しのプロンプトがあれば、コーディングの知識なしでもこれら全部ができちゃうんですわ。
ほな、さっそく始めていきましょか。
まずはカーソーをインストールすることから始めましょ。cursor.comに行って、説明書きにもリンクを載せときますわ。ページに行ったら、「無料でダウンロード」をクリックするだけです。
ダウンロードが終わったら、exeファイルを開いて、インストーラーの指示に従ってください。設定画面が出てきたら、キーボードはデフォルトのVS Codeのままにしておきます。言語は英語のままにしておきますが、他の言語に設定したいならそうしてもええですよ。コードベース全体は「有効」をクリックして、コマンドラインにも追加しておきます。「カーソーをインストール」をクリックしましょう。
「続行」をクリックして、データをサーバーに送信するかどうかの選択が出てきます。これには質問、チャットのコードスニペット、エディターの操作などが含まれます。ワイはこれを選択解除して、プライバシーモードを選びました。これで完了です。
次はログインです。まだアカウントを持ってへんかったら、すぐに無料アカウントを作れます。料金プランはこんな感じです。無料プランもあって、最初にサインアップすると2ユーロの試用期間があります。その後は毎月2,000回の補完と50回の遅いプレミアムリクエストなどが含まれます。もっと高い制限が必要なら、月20ドルでプロプランを選べます。でも、ワイの経験では、無料プランでも十分なことが多いです。
次にダウンロードが必要なのは、Node.jsです。これは他のパッケージや依存関係をインストールするのに必要になります。nodejs.orgに行ってください。これもリンクを説明書きに載せときますわ。「ダウンロード」タブに行って、ワイはプレビルドインストーラーを使います。これはMicrosoftのインストーラーファイルをコンピューターにダウンロードするだけです。
ダウンロードが終わったら、クリックして実行して、セットアップの指示に従ってください。ワイはずっと「次へ」をクリックして、最後に「インストール」をクリックしました。
Nodeのインストールが終わったら、カーソープロジェクトを始めましょう。整理のために、新しいフォルダを作ります。ワイはデスクトップに作りましたが、好きな場所に作ってもええです。名前も好きなように付けられますが、ワイは「cursor_project」にしました。
さぁ、カーソーを開きましょう。ワイはWindowsを使ってるので、スタートメニューでカーソーを検索したら見つかるはずです。開いたら、初めての場合はフォルダを開く必要があります。上の方で「フォルダを開く」を選んで、さっき作った「cursor_project」フォルダを選びます。
フォルダに入ったら、上の方に「cursor_project」って表示されるはずです。次にウェブサイトを作る必要があります。キーボードでCtrl+Lを押すと、右側の列にこのチャットバーが開きます。ここで普通のチャットボットみたいに会話できるんです。
左下の角では、異なる最先端のモデルを選べます。GPT-4.0やCloud 3.5 Sonnet、GPT-4.0 miniなどから選べます。プロジェクトをコーディングしたり、ページを編集したり生成したりする時に、実際にこれらのチャットボット間を行ったり来たりするのを見ることになります。
GPT-4.0 miniは、数行のコードを編集するのには十分です。ページ全体を生成したり、トラブルシューティングしたりする場合はCloud 3.5 Sonnetが通常うまくいきます。それでもうまくいかない場合は、GPT-4.0に頼ることもあります。時々それで問題が解決することがあります。
とりあえず、GPT-4.0を選んで、サイトを作ることから始めましょう。どのフレームワークを使うかは重要じゃありません。生のHTML、CSS、JavaScriptを使うこともできるし、Vue.jsを使うこともできるし、Pythonを使うこともできます。ワイはNext.jsを使います。これは最近のウェブサイト構築で人気のフレームワークです。
最初のプロンプトでは、「新しいNext.jsウェブサイトをどう作るの？」って聞きます。そしたらGPT-4.0が全ての手順を教えてくれます。各ステップで「実行」をクリックするだけでええんです。
完璧です。「実行」をクリックしたら、このラインがターミナルウィンドウで実行されるのが見えます。続行するには、エンターを押すだけでええんです。
TypeScriptを使いますか？はい
ESLintを使いますか？いいえ
はい、他の全てにはエンターを押して、デフォルトのままにします。
次のステップは、今作ったフォルダに移動することです。ここに「my-nextjs-app」っていう新しいフォルダが作られたのが見えます。これを展開すると、既にたくさんのファイルがダウンロードされているのが分かります。「実行」をクリックしましょう。
これで「my-nextjs-app」フォルダに入りました。次に、ここで「実行」をクリックすると、「npm run dev」が実行されます。ウェブサイトが動いているのが分かります。この「localhost:3000」をクリックするか、インターネットブラウザに入力すると、ウェブサイトが既に数秒で構築されているのが分かります。ランディングページができています。
もちろん、これを編集する必要があります。戻って、今でも「cursor_project」フォルダがメインフォルダになっています。便宜上、メインフォルダを「my-nextjs-app」にしたいです。「ファイル」をクリックして、「フォルダを開く」を選びます。そして「cursor_project」を選んで、「my-nextjs-app」をフォルダとして選びます。
上の方に「my-nextjs-app」がメインフォルダとして表示されて、今作られた全てのファイルが見えるはずです。
次のステップは、ホームページを編集することです。これを全部取り除いて、自分のものを追加したいです。初心者で、ホームページがフォルダのどこにあるか分からへんとしましょう。チャットに聞くだけでええんです。
チャットを閉じてしまった場合は、Ctrl+Lを押せば再び開きます。「ホームページはどのファイルですか？」って聞くだけです。Shift+Enterを押して新しい行を追加します。
ここで重要なのは、コードベース全体をスキャンして、どのファイルがホームページかを見つけてもらうことです。コードベース全体を参照してもらうには、@と入力して「codebase」を選ぶか、ここの「codebase」オプションをクリックします。そうすると、コードベース全体をスキャンして、どのファイルがホームページかを教えてくれます。
エンターを押すと、答えが返ってきます。ホームページはこのファイルにあります。これをクリックすると、ファイルが開きます。あるいは、下の方に「app/page.tsx」って書いてあるので、このappフォルダを開いて、page.tsxをクリックすれば、ホームページが開きます。
ほな、このページで最初のウェブアプリを作り始めましょう。これを全部取り除いて、ユーザーが画像をアップロードできるアプリを作ります。そしたら背景を削除して、単色に置き換えます。テキストも追加できて、背景の色やテキストのサイズも調整できるようにします。
カーソーを使う時は、プロジェクト全体のアイデアを一度に与えて、全部を一気に作ってもらおうとは思わんでください。機能や追加したい要素を段階的に与えていく方がええです。まずは画像のアップロードと背景の単色への置き換えから始めましょう。その後で、テキストを追加したり、他の調整を加えたりする機能を追加していきます。
カーソーを使う時に次に知っておくべきことは、使いたいツールやAPIについて、できるだけ多くの情報を与えることが大切やということです。例えば、背景削除には「Remove Background」っていう無料のパッケージを使います。
ここにリンクをコピーして、カーソーに戻ります。今はホームページにいます。もう一度Ctrl+Lを押してチャットウィンドウを開きます。そして「このページでユーザーが画像をアップロードできるようにして」って書きます。Shift+Enterを押して新しい行を始めます。
次に「use」って書いて、このバックグラウンド削除ツールのリンクを貼ります。カーソーがこのページの全ての情報と指示を参照できるようにするには、@と入力してリンクを貼り付けるだけでええんです。そして「リンクを追加」をクリックします。
リンクがハイライトされているのが見えると思います。これで全ての情報を参照して、この背景削除を追加してくれます。次の行に「このツールを使って画像の背景を削除し」って書きます。また Shift+Enterを押して新しい行を始めます。
背景を削除した後の次のステップは、背景を単色に置き換えることです。「背景を単色に置き換え、ユーザーが調整できるカラースライダーを追加する」って書きます。もう一度Shift+Enterを押して新しい行を始めます。
最後に「結果をページにリアルタイムで表示する」って書きます。エンターを押して、何が返ってくるか見てみましょう。
まず、このバックグラウンド削除パッケージをインストールする必要があります。「実行」をクリックしましょう。「実行」をクリックすると、このターミナルウィンドウが開きます。まず、セッションを終了する必要があります。今はこのホームページをlocalhost:3000で実行しているからです。まずこれを終了する必要があります。
Yを押してエンターを押し、終了します。そして再び「実行」を押すと、27のパッケージが追加されたのが分かります。
パッケージをインストールした後の次のステップは、ホームページを更新して、これら全てを含めることです。手動で入力する代わりに、「適用」をクリックするだけでええんです。「はい」をクリックして続行します。
行ごとに全てを適用しているのが見えます。緑でハイライトされた行は、この提案に基づいて追加された新しい行です。赤でハイライトされた行は、元のファイルから削除された行です。
一行ずつ確認して、Ctrl+Shift+Yを押して変更を受け入れることができます。最初の行でCtrl+Shift+Yを押すと、この変更が追加されたのが分かります。2行目でも同じようにCtrl+Shift+Yを押して変更を受け入れられます。
変更を受け入れたくない場合は、Ctrl+Nを押すこともできます。全ての変更を一度に受け入れたい場合は、一行ずつ確認せずに、ここの「受け入れ」をクリックするだけでええんです。
変更を受け入れたら、Ctrl+Sを押して保存しましょう。そして、もう一度ウェブサイトを実行しましょう。下のターミナルで「npm run dev」と入力すると、localhost:3000でウェブサイトが再び立ち上がります。
これを開いて、実際にウェブサイトを左側に、カーソーを右側に並べて表示しましょう。
今、エラーが出ています。「useStateが必要なコンポーネントをインポートしていますが、これはクライアントコンポーネントでしか動作しません。しかし、その親コンポーネントのどれも’use client’とマークされていません」などと書かれています。
これが何を意味するのか分からへんとしましょう。エラーをコピーして、カーソーのチャットに貼り付けて、エンターを押すだけでええんです。
新しいコードを追加する提案が返ってきました。「適用」を押しましょう。上の方に一行だけ追加されているようです。「use client」という行です。「受け入れ」を押して、Ctrl+Sを押してこのページを保存します。
これで新しいホームページができました。しかし、もう一度拡大すると、まだエラーが出ているのが分かります。この赤い線にカーソルを合わせると、「この式は呼び出し可能ではありません」などと表示されます。
このコードをコピーしてチャットに貼り付けて修正を求めることもできますが、カーソルを合わせると、「AIによる修正をチャットで」という便利なボタンがあります。これをクリックすると、自動的にこのエラーをチャットに貼り付けて修正を試みます。
これを試してみましょう。クリックすると、「現在のコードでこのエラーが出ています」と自動的にプロンプトを生成し、エラーを貼り付けて、「これをどう解決すればいいですか？」と聞きます。
「適用」をクリックして、「受け入れ」をクリックして、エラーが消えたかどうか見てみましょう。
完璧です。このページにエラーはなくなりました。Ctrl+Sを押してページを保存し、これを右半分に移動させます。左半分では、始めましょう。画像をアップロードします。
この画像をアップロードします。はい、ここに画像が表示されました。背景が削除されています。これが背景色だと思います。色を赤に設定してみましょう。確かに赤くなりました。色を青に変更してみます。ええやん、ええやん。
もうすでに動いてるってすごいですな。下の部分はデフォルトのホームページからのものなので、これらは全部取り除きたいです。実際にこのスクリーンショットを撮って、カーソーに戻ります。
今は別のことをしているので、これは背景削除の機能とは関係ありません。新しいチャットを始めましょう。ここをクリックするか、これを閉じてCtrl+Lを押して新しいチャットを始められます。
ページにいる時、デフォルトではチャットボットはこのページの全てを参照します。ここに見えるとおりです。でも、このページの何も編集したくない、コードベースの他の部分について聞きたいという場合もあるでしょう。その時はここをクリックして、このページの参照を外せます。
でも今はこのページを参照したいので、このプラスアイコンをクリックして、ページを再度参照します。そして実際にここにスクリーンショットを貼り付けて、「これらの要素をページから削除して」とプロンプトを入力します。エンターを押しましょう。
「受け入れ」をクリックして、「適用」をクリックします。ファイル全体に適用するか、homeだけに適用するかを選べます。homeだけに適用すると、このhomeコンポーネントだけに適用され、これらの部分は無視されます。
初心者で、何をしているのか分からない、このコードが何を意味するのか分からない場合は、簡単にファイル全体に適用をクリックすれば大丈夫です。
下の方でこのコードを削除しているのが分かります。おそらく、削除したい部分のコードでしょう。「受け入れ」をクリックして全ての変更を受け入れ、Ctrl+Sを押すと、全てのものが消えたのが分かります。
機能はほぼ完成しています。カラーピッカーの見た目がちょっと悪いので、もう少し良くしてみましょう。新しいチャットを始めて、「カラーピッカーのスタイルをもっと良くして」とプロンプトを入力します。かなり曖昧ですが、どんな結果が返ってくるか見てみましょう。
「適用」をクリックし、「受け入れ」をクリックして、ページでCtrl+Sを押して保存します。ほら、今ではラベルができて、これが何なのか実際に分かるようになりました。クリックすると、以前よりもずっと見た目が良くなっています。さらに、横に16進コードも表示されています。ええやん、ええやん。
カラーピッカーのスタイルを変える代わりに、この見た目をもっと良くできると思います。「画像アップロードセクションのスタイルをもっと良くして」と書きましょう。これもかなり曖昧です。デザイナーで、特定の色や見た目を指定したい場合は、もちろんそうすることもできます。でも今は本当に曖昧な例を見せているだけです。
追加のコードが返ってきました。「適用」をクリックして、全てに「受け入れ」をクリックします。Ctrl+Sを押して保存すると、ボタンの見た目がずっと良くなったのが分かります。
画像をアップロードしてみましょう。このカンフー・パンダの画像をアップロードします。画像の読み込みが終わると、「画像が正常に読み込まれました」と表示されます。完璧です。これをクリックして背景を編集すると、背景が置き換わります。
次のステップは、ユーザーがテキストを入力できる機能を追加することです。そのテキストはこのキャラクターの背後、背景上に重ねて表示されます。これは新しい機能で、今ある機能とは別のものなので、新しいチャットを始めましょう。
「ユーザーがテキストを入力できる機能を追加し、そのテキストを画像の背景に追加する」と書きます。さらに難しくするために、「ユーザーは背景上のテキストの位置も調整できる」と書きます。これができるか見てみましょう。
コードが実行されるのを待つだけです。終わったら「適用」をクリックし、ファイル全体に適用して、「受け入れ」をクリックします。そしてこのファイルでもう一度Ctrl+Sを押します。
よっしゃ。画像をアップロードしてみましょう。イーロン・マスクの画像をアップロードします。はい、できました。背景色を、そうですね、緑に設定しましょう。テキストには「hello」と書いてみます。確かにテキストが表示されました。
X位置を動かすと、左右に動きます。Y位置を動かすと、上下に動きます。完璧です。
AI Portraitのスポンサーについて少し話させてください。LinkedInやビジネスプロフィールに良い専門的な写真があるのは、大きな違いを生みます。自分で撮ろうとしたり、友達に頼んだりすることもできますが、ほとんどの人は専門的な写真を撮るのが得意じゃありません。
プロのフォトセッションを頼むこともできますが、これは平均200ドル以上かかります。それに、セッションのスケジュールを立てて、何時間もカメラの前で居心地悪そうにポーズを取らなあかんのです。
ここでAI Portraitの出番です。たった1枚の写真をアップロードして性別を選ぶだけで、様々な設定で50枚の専門的なヘッドショットのポートフォリオを生成してくれます。しかも数分で生成されるんです。
物理的なフォトセッションの手間なしに、高品質の専門的な写真が欲しい場合、AI Portraitが最適な選択肢です。説明書きのリンクからチェックしてみてください。
さて、いくつか調整したい点があります。一つはテキストのサイズを調整したいこと。二つ目はテキストの色を調整したいこと。三つ目は、背景削除で抽出した前景の後ろにテキストを配置するオプションも欲しいということです。
これを入力してみましょう。「ユーザーがテキストのサイズと色を調整するオプションを追加してください。また、背景削除で抽出した前景の後ろにテキストを配置するオプションも追加してください。」
コードが追加されました。「適用」をクリックし、ファイル全体に適用して、エラーが出ないことを祈りましょう。「受け入れ」をクリックして、ファイルのどこかをクリックし、Ctrl+Sを押して保存します。
同じ画像をアップロードしてみましょう。背景色を紫に設定します。テキストには「piece」と書きます。X位置は機能していますね。Y位置も機能しています。テキストサイズも機能しています。テキストの色をピンクにしてみましょう。これも機能しています。画像の後ろにテキストを配置…なんと、これも機能しています。
これは素晴らしいですね。カーソーでのほんの少しのプロンプトだけで、既にこんなミーム生成ツールやYouTubeのサムネイル生成ツールができてしまいました。すごいでしょう？
ここでもう一つの機能を紹介します。チャットに話しかけるだけじゃなく、個々のコード行を編集することもできます。例えば、このコードの一部が何を意味するか分かっているとしましょう。ここにタイトルを追加したいとします。
まず、この「画像をアップロード」ボタンを見つけます。ここにあります。これが画像アップロードボタンです。ここにタイトルを挿入したいとします。Ctrl+Lを押してチャットに話しかける代わりに、Ctrl+Kを押して、「ここに『最高にクールな画像エディター』というタイトルを追加して」と書くだけです。
エンターを押して生成すると、このコード行が生成されます。生成を受け入れるにはCtrl+Enterを押し、拒否するにはCtrl+Backspaceを押します。今回は受け入れるので、Ctrl+Enterを押します。
Ctrl+Sを押して保存すると、ここにタイトルが表示されます。この「画像をアップロード」ボタンがタイトルに近すぎるので、タイトルの下にスペースを追加したいと思います。
タイトルはもうあるので、この行を選択して、Ctrl+Kを押してこのコード行を編集するだけでいいです。Ctrl+Kは特定のコード行や特定のページセクションに対するマイクロ編集を行うのに使います。一方、Ctrl+Lは右側の列にチャットボットを開き、プロンプトを入力すると、ページ全体をスキャンして適切な変更を加えます。
この例では、この行を選択してCtrl+Kを押し、「タイトルの下にマージンやスペースを追加して、さらにタイトルを虹色にして」と書きます。これができるか見てみましょう。
Ctrl+Enterを押して受け入れ、Ctrl+Sを押して保存します。ほら、虹色のタイトルができて、下にスペースもできました。
つまり、それだけです。ほんの少しのプロンプトで、画像編集、背景削除、テキスト追加、テキストの位置やサイズの調整、さらには画像のレイヤリングまでできる、完全なランディングページを構築できたんです。
さて、背景削除機能付きのミーム生成ツールができました。これをなんて呼べばいいのか分かりませんが、次のステップは上部にナビゲーションバーを追加し、その後で新しいページを追加することです。
カーソーに戻って、Ctrl+Lを押して新しいチャットを開きます。今回はSonnet 3.5を使います。また、コーディングについて何も知らないと仮定して、ナビゲーションバーの追加方法が全く分からないとします。
「『ホーム』と『ジェネレーター』というアイテムを持つナビゲーションバーをどうやって追加すればいいですか？」と聞くだけでいいです。ジェネレーターは、これから作る2つ目のページです。「そして、これを全てのページの上部に追加してください」と付け加えます。
今、このホームページ（page.tsx）にいますが、ホームページにこれを追加する必要はないかもしれません。ホームページには関係ないかもしれません。サイト全体にナビゲーションバーを追加したいだけです。なので、この page.tsx への参照を削除しましょう。
Shift+Enterを押して新しい行を追加し、@と入力して「codebase」を選びます。これで、フォルダ全体をスキャンして、このナビゲーションバーをどこに追加すべきか判断してくれます。
エンターを押して、コードベースをスキャンして何をすべきか教えてもらいましょう。
それによると、app/components/navbar.tsxという新しいファイルを作る必要があるそうです。これをクリックして何が起こるか見てみましょう。
クリックしても何も起こりません。このファイルもフォルダも存在しないからです。components フォルダはどこにもありません。でも、「ファイルを作成」をクリックすると、自動的に作ってくれます。
ここで「適用」をクリックします。メッセージがありますが、よく読めません。「ナビゲーションバーに適用しますか？」と聞いているようです。「続行」を押しましょう。
これでナビゲーションバーにこのコードが全て追加されます。「受け入れ」をクリックして、このページのどこかをクリックし、Ctrl+Sを押して保存します。保存しないと、サイトでライブ表示されません。
その後、app/layout に移動する必要があります。これをクリックすると、自動的にこの layout.tsx ページに移動します。
また、このコードが何を意味するのか全く分からないと仮定して、「適用」をクリックし、「layout.tsxに適用しますか？」に「はい」と答えて続行します。「受け入れ」をクリックし、ページのどこかをクリックして Ctrl+S を押して保存します。
おお、すでに上部にナビゲーションバーができています。さらにコードが提示されていますが、ナビゲーションバーはすでに追加したと思います。ここで「適用」をクリックし、ファイル全体に適用して何が起こるか見てみましょう。変更はないようです。「受け入れ」をクリックしましょう。
ウェブサイトに戻ると、ここにナビゲーションバーがあるのが分かります。「ホーム」をクリックするとホームページに移動し、「ジェネレーター」をクリックすると /generator に移動します。
このページは今404エラーを表示しています。ページをまだ作っていないからです。次はそれを作りましょう。
新しいページを作るので、これはナビゲーションバーの作成とは別の機能です。もう一度 Ctrl+L を押して新しいチャットを開始します。
新しいページを作ろうとしているので、この現在の layout.tsx ページとは関係ありません。これを参照から外して、「/generator というパスで新しいページをどうやって作りますか？」と書きます。
そして @ を押して「codebase」と入力し、コードベース全体をスキャンして、app フォルダのどこにこのページを置くべきか教えてもらいます。エンターを押して、どんな結果が返ってくるか見てみましょう。
app ディレクトリ内の generator という名前のフォルダの中に、page.tsx という名前の新しいファイルを作る必要があるそうです。パスはこうなるはずです。
page.tsx をクリックして何が起こるか見てみましょう。page.tsx をクリックすると、ホームページである app/page.tsx に移動してしまいます。これは望んでいるものではありません。
残念ながら、これをクリックすることはできません。手動でこのページを追加する必要があります。app フォルダ内に generator という新しいフォルダを作り、その中に page.tsx というファイルを作る必要があります。
今すぐそうしましょう。新しいフォルダを作成し、generator と名付けます。そして generator 内で右クリックして新しいファイルを作成し、page.tsx と名付けます。
ここに全てを貼り付けましょう。「適用」をクリックし、「page.tsx に適用しますか？」に「はい」と答えて続行します。「受け入れ」をクリックします。
このページのどこかをクリックして Ctrl+S を押し、ページを保存します。
最後に、ナビゲーションバーでこのジェネレーターを表示するように Navbar コンポーネントを更新する必要があります。これがすでにあるかどうか確認してみましょう。Navbar をクリックします。
正しい Navbar が表示されません。これは間違ったファイルです。これは単なるレイアウトファイルです。これらの両方をクリックしても、レイアウトファイルに移動するだけです。本当は、この Navbar に移動するはずです。
/generator があるかどうか確認しましょう。すでにあります。完璧です。
これを更新すると、404エラーが消えて、このジェネレーターページが表示されます。確かに、「ジェネレーターページ、これはジェネレーターページです」というテキストが表示されています。
ホームに戻ると、背景削除アプリに戻ります。完璧です。
最初のプロジェクトでは、これを作りました。ユーザーが画像をアップロードし、画像の背景を削除し、背景色を設定し、テキストを追加し、テキストの位置、サイズ、色を編集できる、とてもシンプルなフロントエンドサイトです。
これは全てフロントエンドの作業で、バックエンドのコンポーネントや外部のサービスやAPIは呼び出していません。
このジェネレーターページでは、ユーザーがプロンプトを入力し、「生成」をクリックすると、そのプロンプトが Fluxに送信されて画像を生成します。Fluxを聞いたことがない場合は、ぜひこの動画をチェックしてください。とにかく、ユーザーのプロンプトを Flux に送信して画像を生成するので、基本的に自分のサイトに画像生成ツールを作ることになります。
カーソーを使ってこれを構築するには、使いたいプラットフォームやツール、サービスを指定することが非常に重要です。「安定拡散やFluxを使って画像生成アプリを作って」と言うだけでは、魔法のように作ってくれるわけではありません。
Fluxや安定拡散を使うためには、APIやプラットフォームにリンクする必要があります。そのためのプラットフォームはたくさんあります。Novitaはその一つで、そのAPIにリンクして安定拡散を使うことができます。Modalは別のもので、安定拡散を含む多くの異なるAIモデルを使うためにこのAPIにリンクできます。
おそらく最も有名なのはReplicateで、今日はこれを使います。
始めるには、まず無料アカウントにサインアップする必要があります。「サインイン」をクリックしましょう。残念ながら、サインイン方法はGitHubだけです。GitHubアカウントを持っていない場合は、無料のGitHubアカウントにサインアップする必要があります。
それが済んだら、Replicateで「GitHubでサインイン」をクリックします。
サインインした後、まず請求設定をする必要があります。FluxをAPIを通して実行するには、数セントの端数程度のコストがかかるからです。心配しないでください、大金はかかりません。でも、支払い方法を追加する必要があります。
「請求設定」をクリックして、ここで詳細を入力しましょう。その後、上部でFluxを検索すると、Flux Schnellが表示されるはずです。これを選びましょう。
このAPIタブをクリックします。ここには、Flux Schnellをセットアップするためにカーソーに送る必要がある全ての指示が含まれています。実際、APIリファレンスをクリックしましょう。ここには、ウェブサイトにこれをセットアップするのに役立つ全てのコードが含まれています。
新しいジェネレーターページに戻って、Ctrl+Lを押して新しいチャットを開始しましょう。今、このジェネレーターページが参照されています。これを編集するつもりなので、そのままでいいです。
このプロンプトを試してみましょう。今回はCloud 3.5 Sonetを使います。多くのステップを含む複雑なプロンプトだからです。
「このページで、ユーザーがプロンプトを入力し、生成を押せるようにしてください」と書きます。Shift+Enterを押して新しい行を始めます。
ここで何をするかというと、このAPIリファレンスページのURLをコピーしてカーソーに送ります。そして「use」と書きます。@を押した後、いくつかのオプションがあります。
頻繁に参照するドキュメントページがある場合は、この「docs」項目をクリックし、下の「新しいdocを追加」をクリックして、リンクを貼り付けてエンターを押します。エンターを押した後、このドキュメントに好きな名前を付けられます。「How to use Flux Schnell」と呼びましょう。Schnellのスペルは…こうですね。確認します。
将来、新しいページを作っていて、このAPIドキュメントを再び参照したい場合、このページを見つけてリンクをコピーする必要はありません。@を押して、docsで保存したdocを見つけるだけです。これがそれです。
あるいは、これを一度だけ参照して二度と使わない場合は、docsフォルダに保存する必要はありません。URLをここに貼り付けるだけで、自動的にこのリンクを参照して詳細な指示を得ることができます。
とにかく、プロンプトには「ユーザーのプロンプトで画像を生成するための全ての指示が含まれているこのページを使用してください」と書きます。Shift+Enterを押して新しい行を始めます。
そして、「Replicateのセットアップ方法を教えてください」と書きます。これが全て何を意味するのか全く分からないと仮定して、これをセットアップして動作させる方法を教えてください。
「Replicateのセットアップ方法と全てのAPIエンドポイントを教えてください」と書きます。また、プロジェクトについてできるだけ多くの情報を提供することは常に良いことです。ここではNext.js 14のウェブサイトを使用しているので、プロンプトをより堅牢でエラーが少なくなるようにするために、「Next.js 14を使用しています」と書きます。
最後に、初心者でも理解できる指示を得るために、「初心者向けのステップバイステップの指示を教えてください」と書きます。
この長いプロンプトを入力しています。これは、背景削除ページとは異なります。そちらははるかにシンプルで、「ボタンを変更して」「タイトルを虹色に変更して」などと言えばよかったのです。その場合、このような長いプロンプトは必要ありません。
しかし、ここでは複数のステップが必要です。Replicateをリンクし、全てのAPIエンドポイントをセットアップする必要があります。ステップバイステップの指示が欲しいし、何も知らないと仮定しています。
エンターを押して、どんな結果が返ってくるか見てみましょう。
結果が返ってきました。ここを展開してみましょう。まず、Next.jsプロジェクトをセットアップしていない場合は、これを行ってください。これは最初にすでに行ったので、次のステップに進みましょう。
次に、Replicateをインストールする必要があります。「実行」をクリックしましょう。OK、まずセッションを終了してからこのパッケージをインストールする必要があります。もう一度「実行」をクリックします。
ターミナルでReplicateをインストールしているのが見えます。11のパッケージが追加され、成功しました。
次のステップは、プロジェクトに.env.localファイルを作成し、ReplicateのAPIトークンを追加することです。これをクリックするとどうなるでしょうか？
OK、存在しないこのファイルが開きます。ファイルを作成しましょう。ここで「適用」をクリックし、「続行」をクリックして新しいファイルに適用します。「受け入れ」をクリックします。
APIトークンを手動で追加する必要があることに注意してください。Replicateに戻って、ユーザーアイコンをクリックし、「APIトークン」をクリックすると、デフォルトのトークンがあります。これをコピーするか、新しいトークンを作成できます。
このトークンをコピーして、カーソーに戻りここに貼り付けましょう。このトークンは誰にも教えないでくださいね。ビデオを公開する前にこのトークンは削除します。これは秘密のコードで、公開してはいけません。
このファイルをクリックして、Ctrl+Sを押して保存しましょう。
次のステップは、app/api/generate/route.tsという新しいファイルを作成することです。これをクリックしてみましょう。このファイルはまだ作成していないので、見つからないと表示されます。ファイルを作成しましょう。
上の方に、自動的にapi/generate/route.tsが作成されたのが見えますね。「適用」をクリックして、このコードを新しいページに適用しましょう。「続行」を押して、「受け入れ」を押します。
忘れずに、ページのどこかをクリックしてCtrl+Sを押して保存してください。ウェブサイトを実行したときに結果が表示されるようにするためです。
次のステップは、このジェネレーターページを更新することです。ジェネレーターページをクリックすると、自動的にこのページに移動します。「適用」をクリックして、このページに全ての変更を適用し、「受け入れ」をクリックして全ての変更を受け入れます。
もう一度、このページのどこかをクリックしてCtrl+Sを押して、全ての変更を保存します。
最後に、ステップ6では、next.config.jsファイルを設定する必要があります。これが何なのかわかりませんが、今のところスキップして、アプリケーションを実行してみましょう。
「実行」をクリックすると、下の方でnpm run devが実行されているのが見えます。Ctrlを押しながらlocalhost:3000をクリックして、ウェブサイトを開きましょう。
ホームページはまだこの背景削除アプリで、ジェネレーターをクリックすると、画像生成ツールに移動します。
最後に、一番下までスクロールして、他に変更が必要かどうか確認しましょう。「Replicateのトークンを.env.localファイルの実際のReplicateのAPIトークンに置き換えることを忘れないでください」と書いてありますが、これはすでに追加しました。ここにReplicateのAPIトークンがありますね。
「この例で使用されているバージョン7b1などはプレースホルダーであることに注意してください。Flux Schnellモデルの実際の最新バージョンに置き換える必要があります」とも書いてあります。これを見つけてみましょう。
これを展開すると、ここのコードを指していると思います。これはただのプレースホルダーで、最新バージョンに置き換える必要があります。Replicateに戻って、もう一度Flux Schnellを検索し、APIリファレンスをクリックしてみましょう。
これを右に設定して、このReplicate.runコードを比較してみると、blackforestlabs/fluxschnellとだけ使っています。ここにも同じコードがあります。Replicate.run blackforestlabs/fluxschnellで、コードはないようです。これを削除してCtrl+Sを押して保存し、何が起こるか見てみましょう。
試してみましょう。ジェネレーターアプリに戻って、シンプルなプロンプトを入力してみます。例えば「街にいる男性」と入力して、「生成」をクリックしてみましょう。
生成中はボタンが「生成中」に変わっているのがわかりますね。そして、はい！街にいる男性の画像が生成されました。
カーソーでのほんの少しのプロンプトで、コーディングの知識がゼロの人でもAI画像生成ウェブサイトを構築できるのがわかりますね。これはとてもパワフルです。
別のプロンプトも試してみましょう。「カフェにいる女性」はどうでしょうか。はい、カフェにいる女性の画像が生成されました。完璧です。
さて、ジェネレーターページに戻りましょう。Ctrl+Lを押して新しいチャットを開始し、「ユーザーが画像をダウンロードできるダウンロードボタンを追加してください」と入力してみましょう。エンターを押します。
追加のコードが提供されました。「適用」をクリックし、「受け入れ」をクリックします。ページでCtrl+Sを押して保存すると、新しい「画像をダウンロード」ボタンができました。
これをクリックすると、画像が保存されます。この画像を開くと、確かにコンピューターに画像が保存されています。すごいですね！
また、Ctrl+Lを押して新しいチャットを開始する代わりに、任意のコード行を選択して、例えばこのボタンを選択し、Ctrl+Kを押して、ボタンの外観やスタイルを変更することもできます。
「色を青に変更して」と入力し、Ctrl+Enterを押して変更を受け入れ、Ctrl+Sを押して保存すると、ボタンが青くなりました。
これで、コーディング経験のない人がカーソーを使ってものを作る方法の説明は終わりです。
カーソーにはもっと多くのクールな機能があり、このビデオではごく基本的なことしか扱っていないことを覚えておいてください。これは入門編で、アプリを最初から最後まで構築する際のワークフローを示すことを目的としていますが、高度な技術的なチュートリアルを目指したものではありません。
これが役立つことを願っています。試してみて、どんなクールなものが作れたか、コメントで教えてください。また、何か問題が発生した場合もコメントで教えてください。可能な限りトラブルシューティングを手伝います。
いつもどおり、トップAIニュースやツールを探して、皆さんと共有していきます。この動画を楽しんでいただけたなら、いいね、シェア、購読をお忘れなく。そして、次のコンテンツもお楽しみに。
また、AIの世界では毎週とてもたくさんのことが起こっているので、YouTubeチャンネルだけでは全てをカバーできません。AIで起こっていることを本当に把握するには、無料の週刊ニュースレターを購読してください。リンクは説明欄にあります。
視聴ありがとうございました。また次回お会いしましょう。
コメント