Lovable と Gitpod と Cline と OpenAI でアプリ作って Vercel にデプロイするのが最速説
やったこと
やったことはほぼタイトルそのまんまです。
ただしバックエンド無しのアプリケーションなのでそこはご注意を。
概要図↓
実際に作ったもの↓ (OGPが lovableのままになっている..w)
どういうアプリ作ったかというと、こちらの記事
で描いてたドット絵の色付け部分をGUI でできるようにするアプリを作りました。
当時もかなり面倒だったんで GUI で作業できるようにしたかったんですが、それを作る時間と
実際に色付けやる時間鑑みたらまぁトントンかなと思って諦めてました。
だがしかし最近の LLM の進化はめざましいので、これならアプリもサクッとできるんじゃ？
と思ってやってみたらすんごい爆速でしたという内容の記事です。
アプリ構築部分(Lovable)
だいたい以下のような指示で Lovable に作らせて、Github にリポジトリ作ってもらいました。
- グリッド表示してそれぞれのマスに色選べるようにする
- マスの色に応じてファイル出力できるようにする
- ファイル出力の形式を、 mermaid でドット絵描く時の形式にしてもらう
2の工程で気を効かせて csv/json でも出力できるようにしてくれたんですが
まぁ正直今回は要らないです 😇
今後何かに使えるかもしれないので残しておきました。
3の終盤、フォーマット例として mermaid コード全文を投げ込んでしまってコンテキストウインドウを越えたためか、いまいち指示を達成できなくなっていったのでここらへんで Gitpod へ移ることにしました。
Lovable でできなかった部分を手直し(Gitpod, Cline, OpenAI)
OpenAI というか正確には ChatGPT ですかね
まずは Lovable の右上の Github アイコンからリポジトリ作成＆コードを配置してもらいます
できたら Gitpod 拡張(既に入れてた)で表示できるボタンから Gitpod のインスタンスを開く
〇－ムキューブみたいなマークの「Open」で開けます
Gitpod はほぼ 「VSCode +シェル」 のように使えるので当然ながら拡張機能を入れれば Cline が使えます。
今回は LLM 部分は OpenAI のものを使いました。
(Cline の設定で、モデル選択出ないんですがこれ勝手に最新の使ってくれるんですかね 🤔?)
(気のせいでした、GPT-4.1 を使っていました)
なんか mermaid 出力の部分の謎減算があったのを直させました。
(直した後にスクショ撮ったので、それっぽくチャット履歴と Git差分を表示してますが実際に直す時は勝手に色々やってくれます)
Vercel へデプロイ
※私は既にアカウントを持っていたのでアカウント作成部分は省略します
ほぼやることないですが、 Vercel へ先ほどのリポジトリからデプロイするように連携しましょう。
vercel ログインしたら右上らへんのここから Project 作成を選び
デプロイしたいさっきのリポジトリを探し 「import」を選び
後は 「Deploy」をクリックして完了
Vite とか勝手に検出して選んでくれるので設定は基本的にいじらなくてもデプロイできると思います。
はいおわり 🎉
おわりに
んー爆速ですね！フロントエンドだけのアプリならもうほんとに要件さえちゃんと書ければ1時間ぐらいでデプロイできそう。
DB 周りも Supabase とか Neon とか使えばそれなりのもの作れるのでは？(未検証)
また、アプリ構築部分はコンテキストウインドウ越えない範囲で収まるよう工夫すれば Lovable だけでも済むかもしれないです(とはいえ現状だとまだまだ Cline とかで直したい場合多い...はず)。
あと、多分フロントエンドやってる人とかそれなりに興味持って記事読んでくれた方はお気づきかと思いますが、これは面白かったのであえて残してます 😂
Discussion