Claudeの「Artifacts」でXでバズってたゲームを作ってみた

先日、2024年6月20日にAnthropicは「Claude（クロード）」の最新モデルとなる「Claude 3.5 Sonnet」を発表しました。その際にArtifacts機能も発表されました。今も話題となっています。

また、その数日後には「Artifacts」で作成したものを簡単に公開できる「Publish」機能が追加されました。これをうけ、ネット上では多くの作品、特にゲームが出てきています。

そこで何か作れるものないかなと思ったときにこのようなX(旧:twitter)の投稿を発見しました。

この○×ゲーム
消える機能が付いて更に楽しそう👀‼️ pic.twitter.com/sR7zy3Yyjw

— らんまる👀✨ (@Sg3Lu) July 9, 2024

〇×ゲーム（三目ならべ）です。ただ４つめを置くと一番古いものが消えるという仕様です。
そのため、引き分けなく続けれるものみたいなんです。

確かにシンプルで楽しそう。やってみたいな…そういえばこれArtifactsでつくれるのでは？
そのため、実際に作成してみました。

早速Artifactsゲームです。

https://claude.site/artifacts/e49e895a-f3a9-4bdc-a67f-aa9691466b7b

Claude Artifactを開く

せっかくつくるなら一人でできるようにCPUモードを作りました。もちろん二人でも遊べます。スマホさえあればできるので宴会などでもできますね。CPUのプレイに関しては難易度を三段階で選べます。元の動画では次消える印が少し薄くなってわかるようになっていましたが、これだとなかなか勝負がつかないので、わからなくすることで記憶力が試される感じになってます。

Artifactsで苦労したところ

正直ゲームの実装自体は一瞬でした。生成２回でゲームとして成立してました。
ただ、それよりも「文字数制限内でデザインや機能を盛り込むか」の方が時間を使いました。

というのも、Claudeに長いコードを依頼したことがあればわかりますが、だいたい３００行から４００行相当の文字数になると出力エラーが起きて途中で途切れます。
さらにArtifactsはClaudeの機能なので、自分でコードを修正できません。ちょっと変えたくても一回一回指示出さないといけないんですよね。
そのため、何度も「コードを圧縮して」と修正をさせる必要があり、Claudeの利用制限回数に引っかかりまくりました。
もちろん自分で環境作って、CodeSandboxなどで共有すれば文字数制限もないしライブラリ制限もないので。でもそういうことじゃなくて文字数制限がある中でやり切るロマンです()。
64KBに以下に詰め込むかのような気分はまさにファミコン時代。初代ドラクエはもっと大変だっただろうに。

また、Artifactsの特性上省略は許されないので「こんな機能ほしい！」と追加依頼をすると、すぐになんども文字数制限を食らいました。これが一番困りました。
デザインもファイルをわけれないので通常のCSSが使えないですし、motionもつかえません。そのためTailwind CSSで文字数を省略しながら、いかにコーディングさせるかが一番のコツでした。

難易度ロジックについて

難易度ロジックについても基本Claudeに考えてもらいました。完成後に聞いてみました。

Q:難易度ロジックについてだけ詳しく教えてください。

はい、もちろんです。このゲームの難易度ロジックについて詳しく説明します。

1. 難易度設定: ゲームには3つの難易度があります：
   • 簡単 (Easy)
   • 普通 (Medium)
   • 難しい (Hard)
2. 探索深度: 各難易度に応じて、異なる探索深度が設定されています：
   javascriptCopyconst md = d === 'easy' ? 1 : d === 'medium' ? 3 : 5;
3. AI の意思決定プロセス:
   a) 即時勝利チェック: AIは自分の即時勝利手があるかをまず確認します。
   b) 即時敗北阻止: 自分の勝利手がない場合、相手の即時勝利を阻止する手があるかを確認します。
   c) ミニマックスアルゴリズム: 上記のどちらもない場合、難易度に応じた深さでミニマックスアルゴリズムを使用します。
4. 難易度別の挙動:
   • 簡単 (Easy): javascriptCopyif (d === 'easy') { i = e[Math.floor(Math.random() * e.length)]; } ランダムに手を選択します。探索は行いません。
   • 普通 (Medium) と 難しい (Hard): 即時勝利や阻止の手がない場合、ミニマックスアルゴリズムを使用します： javascriptCopyif (!i) { let bs = -Infinity; for (let mv of e) { const nb = [...b], nm = [...m]; nb[mv] = cp; nm.push({i: mv, p: cp}); if (nm.length > 6) { const oi = nm.shift().i; nb[oi] = null; } let s = t(nb, nm, cp, 0, -Infinity, Infinity, !1, md); if (s > bs) { bs = s; i = mv; } } } この部分で、各可能な手に対して評価を行い、最も良い手を選択します。
5. 評価関数 (ev): ミニマックスアルゴリズムで使用される評価関数です。盤面の状態を数値化します：
   • 3つ並び: 10000点
   • 2つ並び（3つ目が空）: 1000点
   • 1つ置かれて周りが空: 10点
   • 相手の配置に対しては同じ点数をマイナスで評価
   • マークの「新しさ」も考慮: 5 * (6 - idx) 点
6. 特殊ルールの考慮:
   • 7手目以降、最も古いマークが消えることを考慮して評価します。
   • 勝利判定や阻止の判断時、次のターンで消えるマスは無視します。
7. 初期3手の特別考慮: ゲーム開始直後の3手については、相手の2つ並びを積極的に阻止しますが、自身の勝利手がある場合や、相手のマークが次のターンで消える場合は例外とします。
8. 簡単: 深度 1
9. 普通: 深度 3
10. 難しい: 深度 5

このロジックにより、「簡単」は完全にランダムで予測不可能、「普通」はある程度先を読むが完璧ではない、「難しい」はかなり先まで読んで最適な手を選ぶ、という難易度の違いを実現しています。

難易度「難しい」普通に考えないでやると負けます。

ロジックはClaudeだけで考えてもらったところミニマックスアルゴリズムでというところまでは持ち込んだのですが、どうしても既存のマルバツゲームのロジックにひっぱられて即時３手で負けたりするようなことがありました。そのためこちらから知恵を足してあげてロジック化しました。

ちょっとArtifactsを活用するすべはないか。

で、作ってて思ったんです。ただ公開するだけなのはなぁと。
しかも、たかだかマルバツゲームを作ったとて、別にあたらしくないとおもったのでそこでSMOOZのロゴをいれてみました。ただロゴですが、PCで開くと画像が消えます。iphoneからだと普通に画像みれました。Artifactsの仕様なのだと思います。もしかしたら対策方法があるのかもしれません。
企業によっては自社のキャラなどで簡単なゲームを作る企業もあっていいのかなと思いました。認知を高めるために。（ガラケー時代みたいですね）

例えば個人インフルエンサーの方なら、なにかしら宣伝を入れてもいいかもしれません。
悪知恵として「広告バナーを入れる」も考えました。ただ直接adsenseとか張るのは通報ボタンがあるので問題ありそうだなと思いました。
あと、そもそもリンクは基本有効になりませんでした。何度もやりましたがダメでした。

まとめ

早くChat GPTのように生成回数２回以上になってもいいからコードの続きから生成してくれる機能が欲しい！APIだけじゃなくてartifactsも出力長くなってほしい！