AIを活用してタイピングゲームを作ってみよう
こんにちは、カラフルミンツです。
弊社には熱狂的なタイピング好きがいます。
そして私もタイピングが好きなので「オリジナル単語のタイピングゲーム」を作ってみたい！ということで作っていきます。
私はHTMLとCSSを昔に齧った程度で、プログラムはもとよりjavascriptすらほぼ分からないそこらへんの一般人です。
そんな一般人でも今の時代AIに頼れば(多分)作れてしまうんです。
では早速始めていきましょう。
まずはAIを選んでいきます。ChatGPTでもいいのですが、それよりもプログラミングに強いと噂されているAIがあります。そう、皆さんご存じAnthropicによって開発・提供されているAIモデル「Claude(クロード)」です。
Claudeとは？
Claudeという名前のAI言語モデルで、Anthropic社によって開発されました。ChatGPTと同様に、幅広いトピックについて会話や支援をしてくれます。
私が今回使用しているのは、2024年6月に更新された「Claude 3.5 Sonnet（ソネット）」というAIモデルで、アプリやゲームの開発を始め、メールの文章生成や業務フローを図で可視化などを得意としています。
特に注目しているのがコード(プログラミング)の作成能力です。
個人的にはChatGPTよりもコード作成能力は上だと思っています！(2024年7月時点)
無料版もあるので、気になった方は試しに使ってみてください。
https://claude.ai/new
Claudeを使って早速作成開始
まずは本当に作れそうなのかジャブをします。
おお、すごすぎる…
噂には聞いていましたが実際に体感すると違います。たった一言「作って」と書いただけで色々補足してくれています。
これが出力したプログラムです。
どうやらコードはreactで書かれているようですね。
Claudは画面右側に書かれてるコードを表示、さらに実際に動かしてくれるのが分かりやすくて助かります。
私はreactは見たことも触ったことも無いですが、いい感じなのでそのまま進めて行きましょう。
詳細を詰めて行きます
ゲームの名前、それとビジュアル面を要望していきます。
ゲーム名は「にゃるタイピング」でいきます。
にゃるたは弊社のマスコットキャラクターです、どうぞよろしくお願いいたします。
あっという間にいい感じに動きができてきました ！
さらに細かい要望を伝えて行きます。
・入力が一致した時点で次の単語に映ってしまうため、前のタイピング状態が残ってしまいます。
・入力は日本語ではなく、ローマ字でお願いします。
・表示されるのは日本語、その下に小さく入力するローマ字を出してください。
・にゃるたが前に進む数を、タイピングしたローマ字の文字数にしてください。
・500タイピングでゴールです。
・入力は、訓令式とヘボン式、どちらも問題ないようにできますか？
・「し」はsiでもshiでも問題ないようにしてください。
・同じように日本語の出力が同じものは、どちらも問題ないようにしてください。
エラーが出た時の対処法
そうして進めていると、エラーが出るようになってしまいました。
そんなときもエラー内容をコピペして伝えることで解決してくれます。 ｶｼｺｲ
多くの場合解決してくれますが、どうしても解決できない時もあります。
解決できない場合はエラーを出す前のコードを参照して別の指示をしてみると道が開けることもあります。
細かい要望＆エラー回避を続けながら進めて行くと、形になってきました。
Claudの外で動かせる？
ここまでは全てClaudの中で動かしていましたが、
ふと、このタイピングゲームは外部で遊ぶことができるのか不安になったので、聞いてみます。
外部で動かせるようですね、しかし何を言っているんでしょう…
聞きなれない単語ばかりで頭が痛くなります。
小難しいのは分からないので、ブラウザで動かせないか聞いてみると「CodePen」というツールを提案してくれました。
さらに聞いていなくても設定方法も教えてくれます。親切！
CodePenはそのまま使うことができました。
横に座っている人に見せた所、様々な要望が出たので、
それに合わせてビジュアルや細かいルールも依頼していきます。
・背景とにゃるたにGIFを設定できるようにしてください。
・背景画像のほかに、フィールド画像を設定できるようにしてください。
・フィールド画像は横1000px縦500pxで、タイピングが進むとにゃるたが右側に移動していき、ゴールするようにしてください。
・またゴールの後ににゃるたの画像を変更できるようにしてください。
・フィールド画像が表示されました。 ・フィールド画像の赤枠を消してください。
・フィールド画像を下記進捗によって切り替わるようにしてください。
・0から50まで
・51から100まで
・101から150まで
・151から200まで
・クリアタイムでクリア後の画像を切り替えたいです。
・0秒から30秒 ・31秒から45秒 ・46秒から60秒 ・61秒から75秒 ・76秒から90秒 ・91秒から110秒 ・111秒から130秒 ・131秒以上
・こちらの仕様を追加してください。
・クリアすると背景画像が変更される
・タイピングしたときに、打鍵音を入れれるようにしてください。
・また、打鍵音は4種類から選べるようにしてください。
そしてタイピングといえばスピード、スピードと言えばランキングです。
重要なランキング機能の実装を依頼していきます。
・クリアした後に、6文字以内で名前の入力ができ、クリアの秒数がランキングに追加されるようにしてください。
・ランキングはベスト100まで記憶して、 スタート画面の右上に「ランキングを見る」ボタンを設置して、ランキングを見えるようにしてください。
そして実装後に気付きました。
ローカルストレージだと他の人のスコアは見れないのではないか…？ (ローカルと言っているので)
他の人とランキングを共有できるように設定します
質問したところその通り、他の人とランキングは共有できないとのことでした。
しかし同時に、共有する方法も教えてくれました。
1と3はよく分からないので、2にしましょう
なんと外部サービスの使い方までしっかり教えてくれました。
ただ知識が全くない状態だと説明が足らなかったので、1つ1つ操作方法を教えて貰いながら、なんとかランキング機能を実装することができました！
そしてこちらが完成した画面になります。
うーん…凄いですね！
画像は準備しましたが、細かいレイアウト指示などは特にしていません。それでもある程度いい感じにまとめてくれたのは工数が少なくできるので助かります。背景の画像も勝手に暗くして背景っぽくしてくれるClaudeセンスも光っています。
下記のリンクから実際にプレイすることもできるので、暇な方は是非プレイしてみてください！
(入力がおかしかったらすみません…)