Claude：Artifacts のゲームをシェアしよう
はじめに
Claude の Artifacts でコードの動作を Claude 上で確認できるようになりましたね。
単なる HTML だけでなく React にも対応しており、ゲームなどのダイナミックなコンテンツ作りにもってこいです。
ですが、2024/06/22 現在、Artifacts にシェア機能はないとのこと。（Claude 談)
プレビュー画面の iframe の URL シェアすればいいか、と思ったらセッションで弾かれました💦
生 HTML ならホスティングサービスにアップロードするだけですが、
React では node.js の設定が必要で少々面倒。
そこで簡単にシェアする方法を思いつきましたので書き残します。
流れ
- Claude に React でゲーム作らせる
- CodeSandbox にデプロイ
1. Claude に React でゲーム作らせる
Feature Preview 画面で Artifacts をオンにしておいてください。
注意点は React で作らせること。
いくどの LLM は大好きな言語は Python なので、
普通に「シューティングゲーム作って」とお願いすると高確率で Python + Tkinter でコード出力してきます。※ Artifacts 未対応
必ずチャットの開始時には「Reactでシューティングゲーム作って」と依頼しましょう。
Claude 上でシューティングゲームが始まったら完了です。
エラーなどで動かなかったり、もっと面白くしたい場合は Claude に修正を指示してください。
2. CodeSandbox にデプロイ
ホスティングにはCodeSandboxを使います。
React などのプロジェクトを Web 上で開発できるサービスです。
node.js 環境用意の手間が省けます。
注意点は free アカウントで問題ないので必ずサインインしてください。
無しでもサイトは利用できますが、後に出てくるnpm のライブラリインポートができません。
2.1. プロジェクト作り
右上の + Sandbox し、 All templates の中から React を選択
設定で Visibility を Public(everyone can view) にして Create Sandbox を押下 ※未サインインの人でゲームをプレイできるようになります。
するとプロジェクト画面が現れます。
2.2. コード貼り付け
Claude のゲームプレビュー画面右下のクリップボードボタンを押してゲームのコードをコピーします。
CodeSandbox 側で App.js を開き、コード欄に貼り付けます。
すると右画面にエラーが表示されました。
ライブラリのインポートが必要のようです。
サインインしていればボタンを押すだけですので、押しましょう
ゲームが始まりました。あれ？おかしい…
Claude に聞いたところ「tailwind-css 使ってるから index.js に読み込み設定を追加しろ」、とのことでした。
生成されたコードによっては別途作業が必要な場合があります。
Claude に追加質問したりエラーを見て手修正したりして解決しましょう。
2.3. シェア
無事エラー対処をして Artifacts と同じ画面が表示されるようになりました。
CodeSandbox のプレビュー上の URL、これをシェアするだけです。
注意点としては右下に CodeSandbox のリンクが常に表示されます。
これを消したい場合は、やはりしっかりした node.js 環境用意する必要があるかな💦
最後に
手順に出てくる「可愛い魔法少女のシューティングを創ってくれ」と Claude 3.5 sonnet にお願いして作らせたゲームです。
Magical Witch Shooter
※ ライフが 3 ありますが、1 回でもミスしたら即ゲームオーバー😿
Artifacts のおかげで AI にゲーム作らせるのがより手軽になりましたね
（生成されたゲームの質の問題はありますが…
どんどんガチャ回して面白いのができたらどしどしシェアしていきましょ
Discussion