はじめに
Claude3がすごいと聞いていたところ、Claude3.5をローンチしたと聞き、早速やってみました！
作ったブラウザゲーム
手札から、同じマークか数字のカードを出せます。
なるべく多くのカードを出したら勝ちというものです。
こちらからアクセスできるようにしてあります。
（ドメインを買っていないです😢）
作り方
Claudeにユーザ登録をして、ブラウザで作成しました。Claudeのchatsで作成できます。
Googleアカウントで登録しました。
Future PreviewのArtifactsを有効にしました。
↑ここからClaudeに登録、ログイン
作成中画面
日本語で指示をしていきます。
まずルールを説明して、あとはひたすら指示をしていきました。24回の指示でここまで出来ました！
手順いくつか
「上に、出したカードを一覧にしてください。行にカードのマーク、列にカードの数字を表示します。同じマークか同じ数字は出せるようにしてください。」
「ラベルの列と、各マークごとの表示の列がずれないようにしてください。最初カードを出す前は、カードを出す場所を白紙のカードにしてください。」
「上の表で、置ける場所を薄い黄色い背景色にしてください。」
「手札の上にマウスカーソルがあるときは、上の表の対応するマスをハイライトしてください。マスの背景色を黄色にしてみてください。」
かなり適当ですね、、、
作成したもの
S3+CloudFrontに置いて、公開状態にしています。
html+js+cssを1枚のhtmlで作成しました。「html, js, cssで作ってください」と書いたらそうなったまでです。
（再掲）
https://d9nx570ssp66t.cloudfront.net/
ブラウザのデバッグツールからソースを見ることが出来ます。
感想
- ClaudeブラウザのArtifactsがすごく便利！ 左側のチャットで指示をして、右側で動作を確認しながら作っていけます。
- 無料枠はすぐなくなりました。Pro登録しました。
- アウトプットがVersionで管理されています。右画面の左下に選択があります。 指示がうまくいかなかったときに、「Version14に戻してください」と、ロールバック出来ました。
- Pro枠でも制限があり、途中からあと何回使えるのかが出ていることに気づきました。「もう少し黄色を濃くして」とかで１ターン使っていたのはもったいなかった。
- 画面レイアウトは、頑張って言葉で伝えるのではなく、ラフなスケッチを描いてインプットしたほうが早かったです。
- このゲームは難しくてクリアできないので、少々ルールを変更しようと思います。
- 結局、伝える力、日本語力が大事だと思いました。
さいごに
これ、使いこなせば生産性が爆上がりしますね。もっと使いこなせるように精進していきます。
6/20のAWS Summit Japanの基調講演で、Anthropicの方の話も聞けました。同社のブースでデモ展示も見ることが出来て、興味が高まりました。ありがとうございます！