はじめに
プロンプトで指示を出すだけでWebアプリを作ってくれる生成AIは数多くありますが、今回あまり耳馴染みのないLovable AIというサービスを使ってみました。
Lovable AIとは
公式サイトの言葉を引用すると、以下の記載があります。
あなたのアイデアをあなた自身の言葉で表現するだけで、それが美しさと完全な機能を備えたアプリケーションに生まれ変わります。
実際にサービスを使ってみて、割とこの言葉通りのことが実現可能だと感じました。
作りたいサービスの概要と必要な機能を箇条書きで書いて指示を出したところ、数十秒でサイトが構築され、画面の動きを試すことができました。
使い方
会員登録は無料でできます。GitHubやGoogleアカウントでの会員登録も可能です。
ログインしたら、画面中央のテキストボックスにプロンプトを入力し、Createボタンを押下すればあとは自動でWebアプリを生成してくれます。
ちなみに、テキストボックス下の文字が書かれた丸いボタンを押下すると、文字に書かれた内容のプロンプロが自動的にテキストボックスに入力されます。試しにweather dashboardというボタンを押してみると、自動的に以下のプロンプトが入力されました。
作ったWebアプリ
今回は災害時に避難場所や避難所の収容人数、掲示板の役割を果たすWebアプリを作ってくださいという指示を出してみました。
日本語で書いたプロンプトをChatGPTで英語に翻訳してもらい、指示を投げました。
プロンプトはこちら。
災害時に使えるアプリを作ってください。アプリには以下の機能を作成してください。・避難マップ・各地域の掲示板（誰でも書き込み、返信可能）・誰がどこに避難しているかが一目でわかる地図・インターネットに接続した瞬間に情報の取得、表示・避難場所ごとに避難ルールを表示
Please make an app that can be used in times of disaster. Please create the following functions for the app. Evacuation map BBS for each town (anyone can post messages) Anyone can reply to the posts on the bulletin board. Map to check at a glance who is evacuating and to which location. ・Information is retrieved and displayed the moment the Internet is connected, even when the Internet is not available. Rules for each evacuation site are displayed for each evacuation site. Translated with DeepL.com (free version)
左側のChat部分でプロンプトを投げ、数十秒後出来上がったWebアプリです。
先ほどのような適当な指示でもこれだけのものがすぐに作成されました。(※最初は英語で作成されたため、日本語に翻訳してほしいというプロンプトを再度投げています。)
コミュニティ掲示板のページにはコメントが投稿できそうだったので、実際にコメントを書いて投稿するボタンを押してみます。
コメントが投稿されました。出来上がったアプリの動きを画面上ですぐに試せる点がとても良いと思いました。
画面や機能の修正をしたければ、画面左下から支持を入力すればすぐに修正したコードを画面を表示してくれます。実際に英語から日本語への翻訳や、タイトルの文言修正などを指示したところすぐに修正されました。
Githubと連携すれば、すぐにソースコードをクローンすることができます。(画面右上の <> Edit codeを押下)
無料プランでは１日5回まで、１か月で50通まで指示を出すことが可能です。以下料金プランです。
最後に
最後までお読みいただきありがとうございました。
気軽にWebアプリを作ってみることができるので、気になった方はぜひ試してみてください。
仲間を募集しています！
ARIではエンジニア・ITコンサルタント・PM職全方位で仲間を募集しております。
カジュアル面談、随時受付中です！
ご興味ある方はこちらをご覧ください。