Claude 3.5 Sonnet でお気楽プログラミング

2024年6月22日 18:09

Anthropic からClaude 3.5 Sonnet という大規模言語モデルの最新版がリリースされたので、ちょっとだけ遊んでみました。

単純にチャットをするだけではつまらないので、同時にリリースされた Artifacts という機能も試すことにします。Artifacts はチャットで作成指示した成果物をチャットの横にライブ表示する仕掛けのようです。
たとえばプログラムの生成を依頼すると生成されたプログラムが表示されるだけでなく、実行した状態でアクセスできるようになるようです。

Claude のサイトにアクセスして、右上のアイコンをクリックすると以下のようなメニューが開きます。

この "Feature Preview" をクリックすると、新しい機能を選択する画面に移動します。

現在は "Artifacts"（成果物という意味）という機能だけが選べるようになっています。右下の方にある Artifacts のトグルスイッチを On にしましょう。

ここでチャット画面で簡単な指示を出します。

Artifacts が On になっていると、このときウィンドウの右側に以下のような画面が表示されます。

この画面は実際に動作する Web アプリになっていて、「星座を選択してください」のメニューから星座を選んで「運勢を見る」ボタンを押すと実際に占い結果が表示されます。

Webアプリ画面の右上に Preview, Code というボタンが見えています。現在は Preview なので実行画面が表示されていますが、ここを Code に切り替えると生成されたコードが表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日の星占い</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        select, button {
            margin: 10px;
            padding: 5px;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>今日の星占い</h1>
        <select id="zodiac">
            <option value="">星座を選択してください</option>
            <option value="aries">牡羊座</option>
            <option value="taurus">牡牛座</option>
            <option value="gemini">双子座</option>
            <option value="cancer">蟹座</option>
            <option value="leo">獅子座</option>
            <option value="virgo">乙女座</option>
            <option value="libra">天秤座</option>
            <option value="scorpio">蠍座</option>
            <option value="sagittarius">射手座</option>
            <option value="capricorn">山羊座</option>
            <option value="aquarius">水瓶座</option>
            <option value="pisces">魚座</option>
        </select>
        <button onclick="getHoroscope()">運勢を見る</button>
        <div id="result"></div>
    </div>

    <script>
        function getHoroscope() {
            const zodiac = document.getElementById('zodiac').value;
            if (!zodiac) {
                alert('星座を選択してください');
                return;
            }

            const horoscopes = [
                "今日はラッキーな一日になりそうです。新しいことに挑戦してみましょう。",
                "予期せぬ出来事が起こるかもしれません。柔軟に対応することが大切です。",
                "友人との交流が運気を高めてくれるでしょう。積極的に連絡を取ってみましょう。",
                "仕事や学業で良い結果が得られそうです。努力が報われる日です。",
                "健康に気を付ける必要があります。十分な休息を取りましょう。",
                "金運が上昇中です。良い買い物ができるかもしれません。",
                "恋愛運が高まっています。素敵な出会いがあるかもしれません。",
                "創造性が高まる日です。アイデアを形にしてみましょう。",
                "家族との時間を大切にすると、良いエネルギーを得られるでしょう。",
                "新しい趣味や技術を学ぶのに適した日です。興味のあることに挑戦してみましょう。"
            ];

            const randomHoroscope = horoscopes[Math.floor(Math.random() * horoscopes.length)];
            document.getElementById('result').innerText = `${zodiac}の今日の運勢：${randomHoroscope}`;
        }
    </script>
</body>
</html>

CSS, JavaScript を埋め込んだ HTML が生成されていることがわかります。このコードを見るとわかりますが、運勢内容はネット検索から拾ったものではなく既に決まった文字列を決め打ちで出しているようです（笑）。

ということで、もう少し詳しい運勢テキストを出して欲しいと思ったので以下のようなお願いをしました。

その結果作成された Web アプリを実行した結果は以下の通りです。愚直にタイトルも「詳細な今日の星占い」にしているのが健気と言いますか素直と言いますか。

まあ色々な API をここで呼び出すことにすれば、もう少し複雑なアプリケーションも作れるかもしれません。しかしここまで一行もコードを書いていないのに、それっぽく動くものを作れるのは面白いと思いました。

この記事が気に入ったらサポートをしてみませんか？