9,354 文字
Lovable 2.0がリリースされたばかりで、それは本当に凄いです。完全な初心者でも、わずか数分で任意のアプリをバイブコーディングできるようになりました。私自身、バイブコーディングに何百時間も費やしてきましたが、このLovableのアップデートはそれを次のレベルに引き上げています。すべてのバイブコーダーが知っておくべき7つの主要機能があり、このビデオではそれらすべての使い方をお見せします。
まず最初のステップは、lovable.devにアクセスするか、説明欄のリンクを使用することです。ご覧のように、ブランディングが完全に刷新されており、実際これがLovable 2.0アップデートの最初の変更点です。ブランドがより洗練されて大胆になりました。非常にクリーンなグラデーション、ロゴもより洗練され、より個性的に感じられます。全体的に見て、ブランディングは間違いなく向上しています。
しかし、最初の主要な変更点はチャットモードエージェントです。これはLovable内の新しいAIエージェントで、実際にはコードを編集せず、質問をしたり、プロジェクトを計画したり、デバッグしたりするために使用します。実際に見せた方が良いと思うので、Lovableに戻って、ビデオの下のリンクを使用してみましょう。
私は、私たち全員が持つべきものを作ろうと思います。それは自分のスキルをアピールするウェブサイトです。それはあなたの職歴、履歴書、提供するサービス、または外部に知ってもらいたいその他のものかもしれません。プロンプトを入力してみましょう：「クリーンでミニマリストな個人ウェブサイトを作成して、私の会社のポートフォリオを紹介してください」。スタイリング、フォント、色などはすべて選んでもらうことにします。
新しいチャットモードエージェントでは、計画しているときと構築しているときを実際に決めることができます。これらのバイブコーディングアプリの多くの大きな問題は、単に質問をしたいだけなのに、それが5つのファイルを変更してしまい、戻ってどの編集が良くてどれが悪いのかを把握する必要があることです。Lovableはコードベースを台無しにするのを防ぐだけでなく、実際にそれをずっとスマートにしました。
Lovableはアプリの構築を開始しました。そこにあります。Lovableがどのように考えているかがわかります。デザインのインスピレーション、機能、カラーパレット、タイポグラフィが見え、どのファイルで作業しているかも正確に分かります。これは非常に理解しやすいです。プログラマーでなくても全く問題なく作業できます。
ステップ3はナビゲーションコンポーネントの作成です。ステップ4はアプリの各セクションのコンポーネントを作成することです。ヒーロー、アバウトページ、ポートフォリオページ、コンタクトページがあります。
アプリの最初のプレビューが表示されています。エラーが出ましたが焦らないでください。この「修正を試みる」ボタンをクリックするだけです。このボタンをクリックするだけでエラーの90%は簡単に修正できます。Lovableはアプリの構築を非常に簡単にしました。人類の歴史上、カスタムソフトウェアを構築することがこれほど簡単だったことは文字通りありませんでした。
エラーを修正している間に、バイブコーダーがアプリをAIで構築する際に犯す2つの最大の間違いについて説明させてください。最初の間違いは、MVPを超えて進むことがないということです。誰でも数回プロンプトを入力して製品の最小限の実用的なバージョンを構築することはできますが、難しい部分はその後に来ます。プロジェクトを完成させ、実際に一般公開することです。このビデオの後半では、Lovableを使用してカスタムドメインでアプリを実際にデプロイする方法をお見せします。これによりインターネット上の誰もがそれを使用でき、実際にそれからお金を稼ぎ始めることができます。
バイブコーディング初心者が犯す2番目のよくある間違いは、セキュリティを完全に無視することです。これはAI初心者の間で大きな問題であり、視聴者の多くがバイブコーディングでアプリを作成した場合、ハッカーや悪意のある人が悪用できる深刻なセキュリティ上の欠陥があることを保証します。しかし幸いなことに、Lovableはこれを考慮して、セキュリティスキャンと呼ばれる新機能をリリースしています。これも後でどのように使用するかをお見せします。
エラーが解決され、ウェブサイトができました。最初の体験を見るためにリロードしてみましょう。きれいなアニメーション、「デビッド・アンドレ AIの創設者、起業家」と表示されています。明らかに画像は提供していませんが、それは問題ありません。簡単に変更できます。
最初のドラフトは非常に良いです。ホバーアニメーションがあり、デザインがとてもクリーンです。ミニマリストにするよう指示したので、それをうまく守っています。Lovableでもう一つできることは、自分のアセットを提供することです。例えば、ロゴを使用していないのは、ロゴを与えていないからです。私の丸いロゴをドラッグして「左上のReplを私の実際のロゴに置き換えてください」と言います。
できました。「ナビゲーションコンポーネントであなたのロゴでテキストを置き換えるのを手伝います」と言っています。そのファイルを更新しており、完了したようです。スクロールしても、ヘッダーに残っています。とても良いですね。
Lovable 2.0アップデートの最大の機能と言えるマルチプレイヤー機能をお見せしましょう。これは、アプリで他の人と協力できることを意味します。文字通りチームでバイブコーディングして、どんなアプリでも構築できます。その仕組みをお見せします。
Lovableアプリ内の右上に「招待」という新しいボタンがあります。クリックすると、メールアドレスで人を招待できます。ここに書かれているように、あなたのアカウントのクレジットが使用されます。そのLovableプロジェクトの所有者または作成者のクレジットが使用されます。
Lovableでプロジェクトに招待されると、このようなメールが届きます。「プロジェクトに参加」をクリックするだけです。これで新しいタブが開き、新しいLovableプロジェクトが表示され、新機能を含むLovable 2.0に関する小さなポップアップが表示されます。明らかにこのビデオですべてをお見せしているので、「始めましょう」をクリックしましょう。
ここでは、他の人が作業しているプロジェクトを見ることができます。実際、ビデオ編集者がメッセージを送信し、Lovableがそれに取り組んでいるのが見えます。もはや一人でバイブコーディングする必要はありません。友達がいるなら、Lovableプランを持っている人が1人いるだけで、多くの友達をここに招待して一緒にバイブコーディングできます。
カレンダービューができました。私は指一本動かす必要がありませんでした。このプロジェクトで協力している他の誰かがLovableに追加し、今それを見て、その上に構築できます。
新しいビジュアル編集機能とカスタムドメインをお見せする前に、価格の更新について話しましょう。Lovableは価格設定を大幅に簡素化しました。現在、有料オプションはプロプランとチームプランの2つだけです。プロプランは月額25ドルから、チームプランは月額30ドルからです。正直言って、どちらも非常に良いオプションです。まずはプロプランから始めることをお勧めします。チームや会社がある場合、メンバーがたくさんいる場合は、チームプランに切り替えて全員を追加するといいでしょう。
Lovableがこのビデオのスポンサーになることに同意してくれたので、説明欄のリンクを使用すると、どのプランを使用しても2倍のクレジットを取得できます。自分でLovableを試してみたい場合は、lovable.dev/davidandreにアクセスして、2倍のクレジットを手に入れましょう。
では、ビジュアル編集機能をお見せします。これは本当に大きなアップデートで、実際には十分に語られていないものです。チャットでは、この「編集」ボタンが見えます。これにより、任意のコンポーネントを選択できます。例えば、ヘッダーを選択できます。チャットの主要部分では、コンポーネントを手動で編集するための非常に優れたUIが表示されます。
例えば、ヘッダーの背景をピンクにしたい、または薄い黄色にしたいとします。ライムにしてみましょう。少し良くなりました。これで大丈夫だと思います。どんな色を選びたいとしても、様々な色合いで利用可能です。編集に満足したら、それを保存するだけで、AIを呼び出すことなく、ウェブサイトに非常に簡単な視覚的な編集を加えることができます。
繰り返しますが、CSS、HTML、JavaScriptなどを理解する必要はありません。Lovableはこの編集ボタンで非常に簡単にしています。任意のフォントを選択でき、このフォントサイズが気に入らない場合は、クレジットを無駄にすることなくここでコンテンツを変更できます。これが重要なポイントです。どのプランを提案しても、クレジットを無駄にしたくないですよね。このビジュアル編集機能は、AIとチャットするのが無意味であり、やりすぎになるような小さな調整に理想的です。
例えば、これをもっと大きくしたいとします。7XLにして、フォントの太さを変えます。これは多すぎるので、薄くして、プライマリカラーを青にします。そして、姓を最初の文字だけにしたいとします。保存すると、このようにして、AIクレジットを一切無駄にすることなく、数秒でアプリに小さな的を絞った変更を加えることができます。
開発モードに入る前に、まずチャットエージェントの力をお見せしましょう。これは計画に本当に優れています。「ウェブサイトをより専門的に、よりクラシックに感じさせるにはどうすればいいでしょうか？具体的な変更を提案してください」と言えます。
チャットモードなので、AIがサイトをいじることを心配する必要はありません。これは質問をしたり、計画を立てたり、フィードバックを得たりするのに本当に素晴らしいです。ChatGPTに切り替える必要はなく、今やLovableですべてができます。
「より的確な提案をするために、ウェブサイトの現状を確認させてください」と言っています。実際に応答する前に4つの異なるファイルを読み込み、コードを分析した後、4つの提案をしました。タイポグラフィ、ナビゲーションの洗練、ヒーローなどです。
では、チャットモードをオフにして、「良いですね、これら4つの変更をすべて適用してください」と言います。Lovableが作業を開始し、これらの変更を実装します。これは実際に良いプロンプティングの原則です。次に何をしたいのかを計画し、同意したら、ユーザーとAIの両方が次のステップについて一致する必要があります。一度、何が次のステップかについて明確になったら、チャットモードをオフにしてLovableに作業をさせるべきです。
つまり、これがバイブコーディングの方法です。明確になるまでチャットモードにいて、次のステップが明確になったら、チャットモードをオフにしてLovableに作業をさせるべきです。
見てください！フォントがPlayfair Displayに変更されました。これははるかにクラシックな感じがします。スクロール時にナビゲーションにガラスモーフィズム効果が追加されました。また、カラーパレットも洗練され、ヘッダーに選んだ変な緑色が削除されましたが、それで問題ありません。ガラスモーフィズム効果が見えます。非常にきれいで洗練されています。そして、私が求めたことを実行しました。
これが、チャットエージェント機能を活用する方法です。相談させ、アイデアを提案させ、何かが気に入ったらチャットモードをオフにして、それを実装するように指示します。
さて、新しい開発モードを見てみましょう。アプリケーション内で右上のコードビューアーをクリックし、アプリをGitHubと同期する必要があります。便利なボタンであるGitHubアイコンがあるので、それをクリックし、「GitHubに接続」をクリックします。GitHubアカウントをお持ちでない場合は、github.comにアクセスして登録してください。非常に簡単で30秒かかります。
ログインしたら、右上のアイコンをクリックして、リポジトリを選択します。ここでは、すべてのリポジトリが見えます。LovableはまだこのDavid on AI Showcaseを私たちのGitHubに接続していないので、手順に従いましょう。「GitHubに接続」をクリックすると、設定が開きます。次にアカウントを接続する必要があります。私のアカウントはすでに接続されているようです。もしそうでなければ、接続してから、組織をクリックし、ここで管理をクリックします。利用可能なGitHub組織がここにあります。私はvectalを追加します。これは私のスタートアップの名前です。
組織が追加されたようで、プロジェクトを選択する必要があります。「GitHubにプロジェクトを保存し、双方向同期を行います。まだ接続されていません。プロジェクトを転送します。GitHubの組織に転送します。」vectalをクリックします。「GitHub リポジトリが現在アカウントvectorの下にあります」。リポジトリに行ってリロードすると、それが見えるはずです。「David Andre AI Showcase」があります。これをクリックすると、Lovableプロジェクトの完全なファイル構造が表示されます。
はい、これで私たちのLovableプロジェクトはGitHubと完全に同期されています。これにより、バイブコーダーの95%がプロジェクトにバージョン管理を使用していないという非常に悪い習慣を持っていることを考えると、あなたは彼らよりも先を行くことになります。Lovableで構築するものを何でもGitHubに接続してください。2分ほどかかりますが、それは永遠に配当を支払うでしょう。
真剣なバイブコーダーであれば知っておくべきもう一つのことは、Lovableでシステムプロンプトを設定する場所です。プロジェクト名をクリックし、設定をクリックし、左側で「知識を追加」をクリックします。これはカスタム指示、つまりシステムプロンプトで、「シンプルで使いやすい機能を好みます。UIがクリーンでミニマリストで白黒であることを確認してください」など、このプロジェクト特有のAIに知らせたいことを何でも追加できます。
「分かった、デビッド。でも何を追加すれば良いのかどうやって知るの？」と思うかもしれません。最も簡単な方法は、自分が繰り返しているものを見ることです。チャットで特定の文や特定の指示を繰り返していることに気づいた場合、何十ものメッセージをやり取りする中で、それはおそらくシステムプロンプトに入れるべきものです。そうすれば、Lovable AIエージェントがあなたが送るすべてのメッセージでそれを認識できます。
Lovableのもう一つの大きな部分は、Superbaseとの接続です。Superbaseアカウントをお持ちでない場合は、GitHubと同様にsuperbase.comにアクセスして新しいアカウントを作成してください。1分もかからず、非常に簡単です。これらのことを恐れないでください。これらの障害の多くは実際にはあなたの頭の中にあります。これらのサイトにアクセスしてアカウントを作成すれば、以前考えていたよりもはるかに簡単だということがわかるでしょう。
奇妙に聞こえるかもしれませんが、AIでの構築やバイブコーディングでは、ある意味では自分をあまり知的にしようとしないほうがいいのです。平均的な人なら何をするかを想定して、その行動を取るようにしてください。自分を単純化して、明白な行動をとるだけです。
Lovable内で、右上の緑色のボタンであるSuperbase統合をクリックし、下にスクロールしてSuperbaseに接続をクリックします。まず、Superbaseアカウントにログインしましょう。
Superbaseアカウントにログインすると、プロジェクトが表示されます。新しいものを作成して、全体の流れを見せましょう。組織を選択し、プロジェクト名を入力する必要があります。「David Andre個人ウェブサイト」とします。強力なデータベースパスワードを選択し、あなたに最も近い地域を選んでください。新しいプロジェクトを作成します。
Lovableに戻り、リロードすると、新しいDavid Andre個人ウェブサイトのSuperbaseプロジェクトがLovable内に表示されるはずです。異なるプロジェクトをすべて読み込んでいます。接続して再読み込みした後、Superbaseアカウントを管理をクリックすると、ここに新しいプロジェクトが表示されるはずです。同じ名前が表示され、接続できます。
接続をクリックすると、この緑色のボタン「Superbase接続済み」が表示され、Lovableは自律的にデータベースの追加を開始すると思います。テーブルエディターを確認してリロードしましょう。まだテーブルはありません。必要ないからだと思います。
これで、アプリがSuperbaseに接続されていることがわかり、新しいセキュリティスキャンが表示されます。デプロイする前にアプリのセキュリティ脆弱性を簡単にチェックできますが、これはSuperbaseに接続した後でのみ可能です。このセキュリティスキャンが見つかる場所は、パブリッシュをクリックすると、ここに「Superbase：セキュリティの問題は見つかりませんでした」と表示されます。
明らかにこれは、実際のバックエンドや認証のない非常にシンプルなウェブサイトですが、認証を追加したり、バックエンドを追加したり、複数のテーブルやポリシーなどがある場合は、この機能が非常に便利になります。
では、約束通り、カスタムドメインでアプリを公開する方法をお見せします。Lovable内で、右上の大きな青いボタン「パブリッシュ」をクリックします。ここでは、Lovableが提供する無料ドメインを見ることができますが、管理ボタンをクリックしてカスタムドメインを選択できます。
これは、バイブコーディングしたアプリに簡単にカスタムドメインを追加できるようにするLovable 2.0アップデートのもう一つの新機能です。ドメインの購入と接続が今やLovableに組み込まれています。これは数週間前に初めて導入され、すでに10,000以上のカスタムドメインがデプロイされていますが、今や彼らはそれをさらに簡単にしました。
繰り返しますが、パブリッシュをクリックすると、管理ボタンがあります。これにより設定にリダイレクトされ、左側のドメインにアクセスして、所有しているドメインを追加するか、新しいものを購入することができます。私はすでに接続したいドメインを所有しているので、「所有しているドメインを追加」をクリックします。
これにより、Lovableがこれを非常に簡単にするためにEntryと提携した新しいモデルが開きます。続行をクリックしましょう。私のドメインはdavidandre.comです。続行します。ドメインを分析しています。DNSプロバイダーを見つけますが、私の場合はGoDaddyです。そして、GoDaddyのユーザー名とパスワードが必要です。しかし、GoDaddyへのログインにGmailを使用していたため、ユーザー名とパスワードを提供できません。そのため、下部で手動セットアップを行う必要があります。
今度は、これらのレコードをGoDaddyの設定に追加する必要があります。GoDaddyまたはNameCheepなど、お使いのプロバイダーに戻り、DNSの設定にこれを追加する必要があります。使用するドメインを選択し、DNSをクリックし、2つの新しいレコードを追加する必要があります。
「新しいレコードを追加」をクリックします。見ての通り、タイプはAなので、Aを選択します。名前をコピーして、貼り付け、必要な値をここにコピーし、TTLはデフォルトのままにして、保存をクリックします。
エラーが発生しています。それは、名前がwwwのレコードがすでに存在するからです。これを削除する必要があります。削除しましょう。成功しました。DNSレコードが削除されました。これで新しいものを追加できるはずです。
もう一度確認する必要があります。Lovableが提案した新しいレコードを追加しました。2つ目を追加する必要があり、それで完了です。2つのレコードを追加しました。「すべて完了しました」をクリックします。これは数分かかるかもしれません。運が悪ければ数時間かかるかもしれませんが、運が良ければどうなるか見てみましょう。
「ドメインの接続が完了しました。ドメインはプロジェクトにマッピングされています。伝播には数分かかる場合があります。」davidandre.comと入力してエンターキーを押すと、エラーが表示されます。
このエラーが示すように、最も可能性の高い問題は、所有者がCloudflareにサインアップしたばかりということです。これはLovableがバックエンドで使用しているものだと思います。このためおそらく5分から30分待つ必要があります。これが伝播するまで、カスタムドメイン（私の場合はdavidandre.com）が実際にLovableプロジェクトにマッピングされるまで待つ必要があります。
しかし今、あなたはその方法を正確に知っています。Lovable内にカスタムドメインが接続されているのがわかります。そして、それを管理して、別のものに変更したり、削除したり、何でもしたい場合は、設定から簡単に行うことができます。
ご覧のように、このLovable 2.0アップデートは巨大です。多くの新機能、多くの改善、多くの洗練、そしてブランディングも向上しています。これらのバイブコーディングアプリを何十も試してきた私として、現在Lovableが最高であると自信を持って言えます。
自分で試してみたい場合は、lovable.dev/davidにアクセスするか、説明欄のリンクを使用してください。それでは、視聴ありがとうございました。素晴らしく生産的な一週間をお祈りします。またお会いしましょう。
コメント