過去に私が作ったサイトを Claude AI に作成して貰ったら 1 発でほとんど完成してしまった件について

Last updated at 2024-09-30Posted at 2024-09-30

AI を活用する実験として、過去に作成した
小規模の html を作成するための html に関して
Claude AI(無料版) に書いて貰いました。

たった 1 回お願いしただけで
かなり良いコードを頂けました。

かなり嬉しかったため
記事にする事にしました。

完成品は下記の URL からダウンロード頂けます。

https://uni928.github.io/ClaudeTest1/

このコードは 2 回お願いするだけで作成できたため
10 分あれば作成出来るかもしれません。

AI を活用すると
このレベルのコードが
10 分で書けるのです。

Claudeとのやりとり

まずは私とClaudeの会話を載せます。

Claudeが凄い事を実感頂けると思います。

私のコメント1

小規模のhtmlを作成するための html を作成して頂けますか？
よろしくお願いします。
要件は以下の内容です。
textarea にコードを入力して html を作成します。
textarea の下には入力補助用の便利ボタンを配置します。
例えば <h1></h1> という便利ボタンが押されると実際に textarea に入力されます。
便利ボタンはよく使う構文を幅広く作成して下さい。
textarea の初期値は以下の内容にして下さい。
<html>
<head>
  <title></title>
  <meta name="description" content=""/>
  <style>

  </style>
</head>
<body>

  <script>

    function Func1() {

    }
  </script>
</body>
</html>

Claudeのコメント1

はい、喜んでそのような HTML エディタを作成いたします。ご要望に沿って、テキストエリアと便利ボタンを含む HTML ファイルを作成します。

Claude が出力したコード1

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Editor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #editor {
            width: 100%;
            height: 300px;
            margin-bottom: 10px;
        }
        .button-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px;
        }
        button {
            padding: 5px 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>HTML Editor</h1>
    <textarea id="editor">
<html>
<head>
  <title></title>
  <meta name="description" content=""/>
  <style>
    
  </style>
</head>
<body>
  
  <script>
    
    function Func1() {
        
    }
  </script>
</body>
</html>
    </textarea>
    <div class="button-container">
        <button onclick="insertTag('h1')">h1</button>
        <button onclick="insertTag('p')">p</button>
        <button onclick="insertTag('div')">div</button>
        <button onclick="insertTag('span')">span</button>
        <button onclick="insertTag('a')">a</button>
        <button onclick="insertTag('img')">img</button>
        <button onclick="insertTag('ul')">ul</button>
        <button onclick="insertTag('ol')">ol</button>
        <button onclick="insertTag('li')">li</button>
        <button onclick="insertTag('table')">table</button>
        <button onclick="insertTag('form')">form</button>
        <button onclick="insertTag('input')">input</button>
        <button onclick="insertTag('button')">button</button>
        <button onclick="insertTag('script')">script</button>
        <button onclick="insertTag('style')">style</button>
    </div>
    <button onclick="previewHTML()">Preview HTML</button>
    <div id="preview"></div>

    <script>
        function insertTag(tag) {
            const editor = document.getElementById('editor');
            const start = editor.selectionStart;
            const end = editor.selectionEnd;
            const text = editor.value;
            const beforeText = text.substring(0, start);
            const afterText = text.substring(end);

            if (tag === 'img' || tag === 'input') {
                editor.value = beforeText + '<' + tag + ' />' + afterText;
            } else {
                editor.value = beforeText + '<' + tag + '></' + tag + '>' + afterText;
            }

            editor.focus();
            editor.selectionStart = start + tag.length + 2;
            editor.selectionEnd = start + tag.length + 2;
        }

        function previewHTML() {
            const editor = document.getElementById('editor');
            const preview = document.getElementById('preview');
            preview.innerHTML = editor.value;
        }
    </script>
</body>
</html>

このHTMLファイルは、ご要望に沿って以下の機能を実装しています：

テキストエリアにHTMLコードを入力できます。
テキストエリアの下に便利ボタンを配置しました。
便利ボタンをクリックすると、対応するHTMLタグがテキストエリアに挿入されます。
テキストエリアの初期値は指定された内容になっています。
よく使用される構文のボタンを幅広く用意しました。

また、追加機能として：

"Preview HTML" ボタンを追加し、入力されたHTMLをプレビューできるようにしました。

このHTMLファイルをブラウザで開くと、シンプルなHTMLエディタとして機能します。ユーザーは便利ボタンを使ってHTMLタグを挿入し、コードを編集できます。また、プレビュー機能を使って、作成したHTMLの表示を確認することができます。
必要に応じて、さらにカスタマイズや機能の追加が可能です。例えば、より多くのHTMLタグやCSS属性を追加したり、コードの保存機能を実装したりすることができます。

私のコメント2

ありがとうございます。
かなり使い勝手が良いコードでした。
大変感謝します。

Claudeのコメント2

ありがとうございます。ご満足いただけて嬉しいです。このHTMLエディタがお役に立てて光栄です。

このエディタは基本的な機能を備えていますが、さらに機能を追加したり、カスタマイズしたりする余地がまだあります。例えば：

シンタックスハイライト機能の追加
ファイルの保存や読み込み機能
より多くのHTMLタグやCSS属性のサポート
レスポンシブデザインの改善

もし特定の機能の追加や変更をご希望の場合は、お気軽にお申し付けください。喜んでサポートさせていただきます。

また、このようなツールを使用しながらHTMLやWeb開発について学ばれる場合、何か具体的な質問やアドバイスが必要でしたら、遠慮なくお聞きください。Web開発の学習をサポートできれば幸いです。

私のコメント3

お手数ですが、先ほど作成頂いたコードにダウンロードボタンを実装頂いてよろしいでしょうか？
ダウンロードボタンを押すと html ファイルがダウンロードできるイメージです。
よろしくお願いします。

Claudeのコメント3

もちろんです。ダウンロード機能を追加するのは素晴らしいアイデアですね。テキストエリアの内容をHTMLファイルとしてダウンロードできるボタンを実装します。

Claude が出力したコード2

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Editor</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #editor {
            width: 100%;
            height: 300px;
            margin-bottom: 10px;
        }
        .button-container {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px;
        }
        button {
            padding: 5px 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>HTML Editor</h1>
    <textarea id="editor">
<html>
<head>
  <title></title>
  <meta name="description" content=""/>
  <style>
    
  </style>
</head>
<body>
  
  <script>
    
    function Func1() {
        
    }
  </script>
</body>
</html>
    </textarea>
    <div class="button-container">
        <button onclick="insertTag('h1')">h1</button>
        <button onclick="insertTag('p')">p</button>
        <button onclick="insertTag('div')">div</button>
        <button onclick="insertTag('span')">span</button>
        <button onclick="insertTag('a')">a</button>
        <button onclick="insertTag('img')">img</button>
        <button onclick="insertTag('ul')">ul</button>
        <button onclick="insertTag('ol')">ol</button>
        <button onclick="insertTag('li')">li</button>
        <button onclick="insertTag('table')">table</button>
        <button onclick="insertTag('form')">form</button>
        <button onclick="insertTag('input')">input</button>
        <button onclick="insertTag('button')">button</button>
        <button onclick="insertTag('script')">script</button>
        <button onclick="insertTag('style')">style</button>
    </div>
    <button onclick="previewHTML()">Preview HTML</button>
    <button onclick="downloadHTML()">Download HTML</button>
    <div id="preview"></div>

    <script>
        function insertTag(tag) {
            const editor = document.getElementById('editor');
            const start = editor.selectionStart;
            const end = editor.selectionEnd;
            const text = editor.value;
            const beforeText = text.substring(0, start);
            const afterText = text.substring(end);

            if (tag === 'img' || tag === 'input') {
                editor.value = beforeText + '<' + tag + ' />' + afterText;
            } else {
                editor.value = beforeText + '<' + tag + '></' + tag + '>' + afterText;
            }

            editor.focus();
            editor.selectionStart = start + tag.length + 2;
            editor.selectionEnd = start + tag.length + 2;
        }

        function previewHTML() {
            const editor = document.getElementById('editor');
            const preview = document.getElementById('preview');
            preview.innerHTML = editor.value;
        }

        function downloadHTML() {
            const editor = document.getElementById('editor');
            const content = editor.value;
            const blob = new Blob([content], { type: 'text/html' });
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'index.html';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    </script>
</body>
</html>

以下の変更を行いました：

"Download HTML"ボタンを追加しました。このボタンはpreviewHTML()ボタンの隣に配置されています。
downloadHTML()関数を追加しました。この関数は以下の処理を行います：

テキストエリアの内容を取得します。
その内容を使用してBlobオブジェクトを作成します。
動的に＜a＞要素を作成し、BlobオブジェクトのURLを設定します。
ファイル名を'index.html'に設定します。
作成した＜a＞要素をクリックして、ダウンロードを開始します。
ダウンロード後、作成した要素を削除します。

この実装により、ユーザーは"Download HTML"ボタンをクリックするだけで、エディタの内容をHTMLファイルとしてダウンロードできるようになりました。ファイルは自動的に'index.html'という名前で保存されます。
この機能を使用することで、ユーザーは作成したHTMLコードを簡単に保存し、後で使用したり共有したりすることができます。
ご要望に応じて、さらなる機能の追加や既存の機能の調整も可能です。他に何かご質問やご要望がありましたら、お気軽にお申し付けください。

私のコメント4

凄いです！期待していた内容です！
ありがとうございます。

Claudeのコメント4

ありがとうございます。ご期待に沿えて大変嬉しいです。このHTMLエディタが、あなたのWeb開発作業やHTML学習に役立つことを願っています。

このツールは、簡単なWebページの作成から始めて、より複雑なHTMLやCSSの実験まで、幅広い用途に使えます。また、作成したコードをすぐにダウンロードできるので、ローカル環境でのさらなる開発や、他の人と共有するのにも便利でしょう。

今後、このエディタをさらに発展させたい場合のアイデアをいくつか挙げておきます：

CSSやJavaScriptのエディタタブを追加する
コードの自動フォーマット機能
エラーチェックや文法ハイライト機能
テンプレートの選択機能

Web開発やHTMLについて、さらに質問やアドバイスが必要な場合は、遠慮なくお聞きください。あなたの学習や開発プロジェクトを全力でサポートさせていただきます。

このツールを使って、楽しくクリエイティブな開発ができることを願っています！

以上、たった 2 回で凄い html を作ってくれた！
という成功体験を載せてみました。

「初期カーソル位置を body タグの直下にする」
「入力できるタグの種類・パターンを多くする」
「名前を付けて保存に対応する」
など改善点はあるかもしれませんが
このレベルの html が
たった 2 回で出力されるのは
凄いと言わざるをえません。

気を使って「Preview HTML」ボタンを
差し込んでくれた事は
AI の進化を感じました。

皆さんは AI を活用していますか？

Claude AI は Google アカウントと
電話番号があれば簡単にログインできますし
ChatGPT はログインすら必要ありません。

まだ AI を使って
コードを出力していない人は
是非体験頂けると嬉しいです。

うまく出力できると
ドーパミンが湧き出るのを
感じる気がします。

皆さんの開発の助けになれますように。
閲覧ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up