makerealでWebページ生成してみた

西村拓海

開発

＃Advent Calendar 2023 ＃ChatGPT

西村拓海

最終更新日2023/12/16 投稿日2023/12/16

この記事はレコチョク Advent Calendar 2023 の16日目の記事となります。

はじめに

はじめまして！株式会社レコチョクでサーバーサイドエンジニアをしている西村です。最近の音楽ブームはPeople In The Boxです。Billboard live tokyoでのライブ最高でした。

最近AIに関する技術で何か面白そうなものがないか探している際に「 makereal」を見つけました。それがかなり衝撃的な内容だったので、今回そちらを紹介しようと思います。

makerealとは？

makerealとは「tldraw」というホワイトボードを作成するReactライブラリと ChatGPT-4Vを利用して作成された、ワイヤーフレームからWebページ（HTML）を生成するアプリです。 ※ 作成者はFigmaのエンジニアで、ホスティングする形でtldraw社がアプリを公開しています。

実際にtldraw社のX（旧:Twitter）にはこんな映像が上がっていました

https://twitter.com/tldraw/status/1724892287304646868?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1724892287304646868%7Ctwgr%5E7d3fcbe00f54cccf92f0a4d4b3d23d5b9225c7dd%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fembed.zenn.studio%2Ftweetzenn-embedded__cd49ded7cd9

このようにワイヤーフレームからWebページが生成できます！またHTMLコードも生成することが可能で、とてつもなく便利な代物の予感です。

利用手順

1. OpenAI APIのKey取得

makerealを使用するためにはOpenAIのAPIキーが必要です。OpenAIのサイトにログインし、左メニューAPI keysからcreate new sercet keyでキーを生成しましょう。生成するとAPIキーが発行されるので、安全な場所に保管してください。 ※ makerealを利用するにはOpenAI APIの有料プランに変更が必要です。

2. makereal

生成したAPIキーを画面中央下のフォー厶に入力すると設定完了です。 ※ 利用するにはサイト側にAPIキーを登録する必要があります。 ※ ご利用する際は自己責任となりますのでご注意ください。 ※ APIを外部サイトに登録したくないという方はdockerを利用してローカルで環境構築できるそうなので、もしよければ調べてみてください。

あとはワイヤーフレームを作成し、右上MakeRealボタンを押すとWebページの生成ができます！

実践

今回は簡単な掲示板アプリのワイヤーフレームを作って、Webページを生成してみました。写真左が自分が作成したワイヤーフレームで、写真右が makerealで生成したWebページになります。

ログイン画面

Goodポイント
- 指定通りの画面を生成した
- Google＆Facebookの画像&リンクを設定した
- Passwordの最大文字数を15文字で設定した
Badポイント
- 特になし！！

生成されたHTMLコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: 'Open+Sans', sans-serif;
        }
        .social-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 22px;
            margin-right: 0.5rem;
        }
        .social-btn img {
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body class="bg-gray-50 flex items-center justify-center h-screen">
    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-sm">
        <h2 class="text-2xl font-semibold mb-6 text-center">Sign up</h2>
        <form>
            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" id="email" name="email" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" required>
            </div>
            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password" id="password" name="password" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" maxlength="15" required>
            </div>
        <button type="submit" class="w-full bg-indigo-600 text-white rounded-md py-2 font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">SIGN UP</button>
        </form>
        <div class="flex items-center justify-center mt-6">
            <a href="https://google.com" class="social-btn bg-blue-600 text-white" title="Sign up with Google">
                <img src="https://img.icons8.com/color/48/000000/google-logo.png" alt="Google">
            </a>
            <a href="https://facebook.com" class="social-btn bg-blue-800 text-white" title="Sign up with Facebook">
                <img src="https://img.icons8.com/color/48/000000/facebook-new.png" alt="Facebook">
            </a>
        </div>
    </div>
</body>
</html>

画面遷移(ログイン画面 → 投稿画面)

Goodポイント
- 表示崩れがない画面を生成した
- ログイン → 投稿画面への遷移を実現した
Badポイント
- 要件を満たすWebページになるまでに2回、生成を失敗した(HTML要素の表示 & 遷移)
- 実用的ではないコードが生成された(HTML要素の表示・非表示で遷移を再現)

生成されたHTMLコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login and Post Page</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Open+Sans', sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">

    <!-- Login Page -->
    <div class="min-h-screen flex items-center justify-center">
        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-2xl font-semibold mb-6 text-center">Sign Up</h2>
            <form>
                <div class="mb-4">
                    <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email</label>
                    <input type="email" id="email" name="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                </div>
                <div class="mb-6">
                    <label for="password" class="block text-gray-700 text-sm font-bold mb-2">Password</label>
                    <input type="password" id="password" name="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" maxlength="15" required>
                </div>
                <div class="mb-4">
                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline w-full">SIGN UP</button>
                </div>
            </form>
            <div class="flex items-center justify-between">
                <a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-bold py-2 px-4 rounded inline-flex items-center justify-center">
                    <span class="mr-2">G</span> Google
                </a>
                <a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-bold py-2 px-4 rounded inline-flex items-center justify-center">
                    <span class="mr-2">F</span> Facebook
                </a>
            </div>
        </div>
    </div>

    <!-- Post Page -->
    <div class="hidden min-h-screen flex items-center justify-center">
        <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-2xl">
            <form>
                <div class="mb-4">
                    <textarea id="postContent" name="postContent" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" maxlength="100" placeholder="What's on your mind?"></textarea>
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">POST</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // Handle form submission to switch between pages
        const loginForm = document.forms[0];
        const loginPage = document.querySelector('.min-h-screen.flex');
        const postPage = document.querySelectorAll('.min-h-screen.flex')[1];

        loginForm.addEventListener('submit', function(event) {
            event.preventDefault();
            loginPage.classList.add('hidden');
            postPage.classList.remove('hidden');
        });
    </script>

</body>
</html>

投稿画面

Goodポイント
- メッセージを送信・表示できる画面を生成した
- 投稿内容を良しなに表示してくれた
Badポイント
- 投稿日時箇所の生成に複数回失敗した

生成されたHTMLコード

<br><br><br><br><br>    <title>Post Page</title>

        /* Additional styles if needed */

    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">Post Page</h1>
        <div class="bg-white shadow rounded p-4">
            <h2 class="text-xl font-semibold mb-2">Timeline</h2>
            <div id="posts" class="space-y-2">
                <!-- Posts will be added here dynamically -->
            </div>
            <div class="mt-4">
                <textarea id="postInput" class="border-2 border-gray-300 rounded w-full p-2"></textarea>
                <button id="postButton" class="mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    POST
                </button>
            </div>
        </div>
    </div>

        const postsContainer = document.getElementById('posts');
        const postInput = document.getElementById('postInput');
        const postButton = document.getElementById('postButton');

        postButton.addEventListener('click', () =&gt; {
            const postMessage = postInput.value.trim();
            if (postMessage) {
                const postDate = new Date().toISOString().replace('T', ' ').substring(0, 19);
                const newPostHtml = `
                    <div class="border-b-2 border-gray-200 pb-2">
                        <div class="text-sm text-gray-500">${postDate}</div>
                        <div class="text-gray-700">${postMessage}</div>
                    </div>
                `;
                postsContainer.innerHTML = newPostHtml + postsContainer.innerHTML;
                postInput.value = '';
            }
        });

まとめ

今回は makerealを使ってWebページを生成してみました。簡単な内容であれば理想通りのWebページ(HTML)を作成してくれました。テキスト指示による生成と比べて、直感的かつ具体的に指示できるのでとても使いやすかったです。

内容が複雑なものに関してはまだまだ上手く生成されないことが多いのですが、コンポーネント単位で生成するなど、利用者が工夫することで業務にも活かせるのではないかと思いました。

他にも makerealに遷移図などの情報を与えて、凄いアプリを作られている方がいたので、もしよければそちらも調べてみてください。

明日のレコチョク Advent Calendar 2023 は17日目「【JavaScript】Svelteを触ってみた」です。お楽しみに！

RecoChoku Engineering Blog

目次

makerealでWebページ生成してみた

はじめに

makerealとは？

利用手順

1. OpenAI APIのKey取得

2. makereal

実践

ログイン画面

生成されたHTMLコード

画面遷移(ログイン画面 → 投稿画面)

生成されたHTMLコード

投稿画面

生成されたHTMLコード

まとめ

参考文献

目次

カテゴリーから見つける