🐥
図からプログラムを自動生成してくれるmakereal ( tldraw )について
まずは下記のツイートをご覧ください。
すごい便利そうですよね。これで紹介されてた機能を実際に使ってみたので紹介します。
登場人物の紹介
tldraw と draw-a-ui と makereal.tldraw.com の整理を先にしておきます。
tldraw
tldraw そのものにこの機能はありません。
tldrawはホワイトボードを作成するためのReactライブラリです。
下記がサンプルです。
miro ライクなホワイトボードを少ないコードで実装できます。
draw-a-ui
tldraw と gpt-4-vision api を使って、描いたワイヤーフレームを元にhtmlを生成するアプリが draw-a-ui です。
git cloneして下記コマンドで簡単にローカルで試すことができます。
echo "OPENAI_API_KEY=sk-your-key" > .env.local
yarn
yarn dev
makereal.tldraw.com
makereal.tldraw.com は draw-a-ui をホスティングしているサイトです。
とりあえず触ってみたい人は上のリンクから、 OPENAI_API_KEY を外に出したくないなって人は ローカルで試すのが良いでしょう。
実際に使ってみる
すぐに破棄する前提の OPENAI_API_KEY を用いて https://makereal.tldraw.com/ で試してみたいと思います。
OpenAI の APIキーを取得する
下記から取得できます。アカウントを持っていない人はアカウント作成・ログインなどが必要になります。
取得した API キーをメモしていておいてください。
APIキーを設定する
https://makereal.tldraw.com/ を開いて、画面下のところにAPIキーの入力箇所があるので、ここに先ほどメモしたものを設定します。
試してみる
早速試してみます。正直ワイヤーフレームを作るのすら面倒だったので、Xのスクリーンショットを貼り付けてみました。
スクショを貼り付け、右上の Make Real を押してみます。
とてもそれっぽいものが生成されました！すごい。
生成されたものの右上のコピーマークみたいなものを押すことで、コードをクリップボードにコピーできます。
実際に生成されたコードは下記です。
生成されたコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Additional styles if needed */
</style>
</head>
<body class="bg-gray-900 text-white font-sans">
<div class="flex h-screen">
<!-- Sidebar -->
<div class="w-64 bg-gray-800 p-6 overflow-y-auto">
<button class="text-white mb-6">
<span class="text-3xl">✕</span>
</button>
<nav>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">🏠</span>
<span>ホーム</span>
</a>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">🔍</span>
<span>話題を検索</span>
</a>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">🔔</span>
<span>通知</span>
</a>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">✉️</span>
<span>メッセージ</span>
</a>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">📚</span>
<span>リスト</span>
</a>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">👤</span>
<span>プロフィール</span>
</a>
<a href="#" class="flex items-center p-2 mb-5 text-gray-300 hover:bg-gray-700 rounded">
<span class="text-2xl mr-3">🔷</span>
<span>モア</span>
</a>
<button class="bg-blue-500 text-white px-6 py-2 rounded-full w-full">ホストする</button>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Bar -->
<div class="px-6 py-4 flex justify-between items-center bg-gray-800 border-b border-gray-700">
<div class="flex items-center">
<h1 class="text-xl font-semibold text-gray-300">おすすめ</h1>
<button class="ml-4 bg-blue-500 text-white px-3 py-1 rounded-full text-sm">フォロー中</button>
</div>
<div>
<input type="search" placeholder="検索" class="bg-gray-700 text-white px-4 py-2 rounded-full focus:outline-none">
</div>
<div>
<button class="text-gray-500">
<span class="text-2xl">⚙️</span>
</button>
</div>
</div>
<!-- Feed -->
<div class="flex-1 overflow-y-auto">
<div class="p-6 space-y-4">
<!-- Post -->
<div class="bg-gray-800 p-4 rounded-lg">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full mr-3" src="https://unsplash.it/32/32?random&grayscale" alt="Profile">
<div>
<h2 class="text-lg font-semibold">Out Of Context Football</h2>
<p class="text-gray-400 text-sm">@nocontextfooty · 9時間前</p>
</div>
</div>
<div class="mb-4">
<img class="rounded-lg" src="https://unsplash.it/600/400?random" alt="Post Image">
</div>
<div class="flex justify-between text-gray-400 text-sm">
<span>160</span>
<span>771</span>
<span>317</span>
<span>2,977</span>
</div>
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div class="w-80 bg-gray-800 p-6 overflow-y-auto">
<div class="mb-6">
<h2 class="text-xl font-semibold mb-4 text-gray-300">プレミアムにアップグレード</h2>
<p class="text-gray-400 mb-4">サブスクライブして機能強化を利用しましょう。追加された機能を使い、広告無し体験ができます。</p>
<button class="bg-blue-500 text-white px-6 py-2 rounded-full w-full">購入する</button>
</div>
<div>
<h2 class="text-xl font-semibold mb-4 text-gray-300">いまどうしてる？</h2>
<div class="space-y-4">
<!-- Trending Topic -->
<div class="bg-gray-700 p-4 rounded-lg">
<h3 class="text-lg font-semibold">トレンドトピック</h3>
<p class="text-gray-400 text-sm">トレンドトピック: 詳細の概要、公開範囲選択機能</p>
</div>
<!-- More topics... -->
</div>
</div>
</div>
</div>
<script>
// Additional JavaScript if needed
</script>
</body>
</html>
tailwindcssとかも使っているのか。
所感
ある程度動きのあるものも生成してくれるみたいですし、かなり便利なツールだと感じました。
ワイヤー以外にも状態図やテキストも渡せるらしいです。
個人開発でどんどん使ってこうかと思います！
Discussion