【ITニュース解説】I Built an AI That Roasts Your Drawings
2025年09月05日に「Dev.to」が公開したITニュース「I Built an AI That Roasts Your Drawings」について初心者にもわかりやすいように丁寧に解説しています。
ITニュース概要
開発者がAIがお絵描きを採点するオンラインゲームを開発。最大8人が同時にお題を描き、AIが公平にスコアを判定する。WebRTC技術でリアルタイムの描画共有を実現し、Next.jsで構築。AIによる音声実況機能も特徴で、現在ベータ版を公開中。
ITニュース解説
オンラインのお絵描きゲームにおいて、プレイヤーの描画を人間が主観的に評価することから生じる不公平感を解決するため、ある開発者がAIによって描画を即時かつ公平に採点する新しいマルチプレイヤーブラウザゲーム「Artbitrator」を開発した。このゲームは、最大8人のプレイヤーが同時に同じお題の絵を描き、AIがその出来栄えを数秒で評価してスコアを付ける仕組みである。プレイヤーは他の参加者が描いている様子をリアルタイムで確認しながら競い合うことができ、人間の推測や人間関係に左右されない純粋な描画スキルが試される。
このリアルタイムゲームを実現している中核技術の一つがWebRTC(Web Real-Time Communication)である。WebRTCは、Webブラウザ間でサーバーを介さずに直接データをやり取りするための技術であり、ビデオ通話やオンライン会議などで広く利用されている。このゲームでは、各プレイヤーの描画データ、つまりペンをどのように動かしたかといった情報を他のプレイヤーに送信するためにWebRTCのデータチャネルが活用されている。これにより、100ミリ秒未満という非常に低い遅延で、他プレイヤーの描画が自分の画面に反映される。また、通信帯域を節約するために、描画イベントの差分のみを送信するデルタ圧縮という手法も取り入れられている。ネットワークが不安定な場合でも、TURNサーバーを経由して接続を維持するフォールバック機能も実装されており、安定した通信環境の提供が図られている。
プレイヤーが絵を描く画面は、HTML5のCanvas APIを用いて構築されている。Canvasは、ブラウザ上で図形や画像を描画するための標準技術であり、JavaScriptを介して動的に描画内容を操作できる。このゲームでは、8人分のCanvasが同時に表示されるが、パフォーマンスを維持するために複数の最適化が施されている。例えば、メモリ効率を高めるためのCanvas仮想化や、描画内容が変更された部分だけを再描画するセレクティブレンダリングといった技術が採用されている。これにより、多くのプレイヤーが同時に描画しても、スムーズな操作感を実現している。
描画の評価を行うAIは、REST APIを介して連携する仕組みとなっている。プレイヤーが描画を終えると、ブラウザ側でCanvasの内容が画像データに変換され、そのデータがAIサーバーに送信される。AIサーバーは受け取った画像を解析し、お題に対する正確性、創造性、技術といった複数の基準に基づいてスコアを算出する。この採点プロセスは2秒以内に完了し、プレイヤーは即座にフィードバックを受け取ることができる。これにより、待ち時間なくゲームが進行する。
さらに、ゲーム体験を豊かにする要素として、AIによるライブ実況システムが搭載されている。この機能は、Microsoft Azureの音声合成サービスであるAzure Speech Servicesを利用している。ゲームの進行状況やプレイヤーのスコア、アクションに応じてAIが動的にコメントを生成し、それをリアルタイムで自然な音声として読み上げる。これにより、プレイヤーはまるでスポーツ中継を見ているかのような臨場感を味わうことができる。
アプリケーション全体の骨格には、ReactベースのフレームワークであるNext.js 14が採用されている。Next.jsは、サーバーサイドレンダリングなどの機能を持ち、リアルタイム機能との親和性が高いことが特徴である。フロントエンドの開発言語にはTypeScriptが使用され、静的型付けによってコードの品質と保守性を高めている。UIのデザインにはTailwind CSSが用いられ、効率的なスタイリングを実現している。クライアント側の状態管理にはZustand、ユーザー認証にはClerk、データの永続化にはPostgreSQLデータベースがそれぞれ利用されており、モダンなWeb開発の技術スタックで構成されている。これらのコンポーネントはDockerコンテナとしてまとめられ、クラウドインフラ上で運用されている。
現在、このゲームはベータ版として公開されており、開発者は広くフィードバックを募集している。現状では、WebRTCによる接続の安定性や8人同時描画のパフォーマンス、AI採点の速度などは良好に機能している。一方で、スマートフォンのタッチ操作への対応、AIの認識精度の向上、ネットワーク切断からの復帰処理の改善など、いくつかの課題も残されている。このプロジェクトは、一個人のゲームに対する不満をきっかけに、WebRTC、Canvas、AIといった現代のWeb技術を組み合わせることで、いかに高度で創造的なマルチプレイヤーアプリケーションを構築できるかを示す好例である。Webプラットフォームが持つ高い潜在能力を証明する試みといえる。