ReplitAgentを使ってオリジナル・ミニゲームを作ってみる

はじめに

【内容】
　ワンアイデアによるゲーム制作をAIエージェントに依頼し、デプロイまでを試験的に行った結果を記録する

【想定読者】
　・ReplitAgentがどんなものなのか？ どの程度コストがかかるのか興味を持っている方
　・ゲーム作りたいけど、環境整備やら実装の時間を考えると…と尻込みしていた方

時間がない方向けの説明

・内容を凝らなければ半日程度、20ドル前後でデプロイまでいける
・やりたいアイデア部分は具体的にしておくと、AI側も意図を汲み取りやすくなる
・まったくプログラムを読めない段階だとどこかで詰むと思われる（不備が指摘できない）ので、基礎力は必要
・大作は難しいと思われるが、土台を作ってくれるのは大きい

本題

• 順を追ってやったことを記載

【前提】ReplitAgentとは？

• オンライン統合開発環境「Replit」で登場したAIエージェント
• 自然言語で作りたいアプリの要望・特徴を入力することで、アプリのコーディングからデプロイまでを自動で実行してくれる（2024年12月時点では、新規作成のみに対応し、既存のプロジェクトに対してエージェントは適用できない）
• Replitに入った直後は無料プランであるため、Agent機能を利用することはできず、有料プラン（Core以上）にアップグレードする必要あり
• Coreには月プランと年プランがあり、月プランは月額25ドル、年プランは月額15ドルとなっている
• 当検証では1グレード上のTeams（月額40ドル）を適用しているが、個人開発の上ではCoreと大きく変わらない

ゲーム要件設計

• どういうゲームを作りたいかを検討する

  • 今回はReplitの機能確認を前提としたサンプルであり、簡単に済みそうなものにする

    • 複雑なゲーム（動的な操作が入ったり、複数の要素が同時に変動する）は避ける
    • 終了条件（勝利条件）が明確なゲームを選ぶ

  • ただし、既にあるようなゲームのクローンを作るのも面白くないので、独自の要素を加える

  • 上記の経緯より、テーブルゲームをベースとした以下ゲームを作成することにする

オリジナルゲーム「数吟」ルール

• 概要：ブラウザ上で操作する2人対戦用ボードゲーム
• 目的：相手よりも高い点数を取れたら勝ち
• 外見：
  • 7×7のマス目がある（以降は便宜上、縦軸をA～F、横軸を1～7とする。左上はA1）
  • 先攻後攻はランダムに決める
  • 先攻は赤色、後攻は青色とする
  • A7、D7、G7に赤色の1、A1、D1、G1に青色の1という数字を初期配置とする
• 手番でやれること：
  • プレイヤーが手番でやれることは、自分の色（先攻なら赤、後攻なら青）の数字から、将棋の銀将の移動方向（前方と斜め四方向）に同色の数字を置くことのみ
    • 例えばA7に置かれた数字を対象にすると、A6（前方）またはB6（右斜め前）に該当するマスに数字を置くことが出来る
    • 元の数字は残ったままなので、どちらかというと木の枝が伸びていくイメージである
  • 配置した数字の値は周囲1マス（斜め含めて8マス）の数値の合計。それは自分の色と相手の色を問わない
  • 既に数字（自他問わず）が置かれている場所に数字を置くことは出来ない
  • 数字を置いたら相手の手番で同様のことする
• その他ルール：
  • 1手20秒以内、打たなかった場合はランダムな位置に打つ
  • 基本的に置く場所が一切ない場合以外を除き、パスは許さない。どんなに不利になっても置かなければならない
  • 置く場所がない場合はパスとなり、同じプレイヤーが連続して置く
• 終了／勝敗条件：
  • ゲームの終了条件は、自分と相手の打った手の合計数が42手になった場合。パスをした場合、1手とは見なさないため、空白が1マス余るまではどちらかが打ち続けることになる
    打ち終わった時、最大値を持っていたプレイヤーが勝者

• ゲーム例

  • 実際開発時には画像はなかったが、読者がイメージを掴むために作成
  • ゲーム開始図

  

  • ゲーム終了図
  • この局は6310 VS 9719で青の勝ち
    

完成品

• ミニゲーム数吟
  • ログインパスワードは「PlaySGN12」
  • スマホ・PC環境で動くのも確認済み。スマホは少し位置関係がおかしくなるがゲームプレイに支障はない
  • 後述するデプロイ設定では一番貧弱なサーバ設定としたため、一気に集中すると想定外の挙動を示すかもしれない

指示出し

1. 初期指示

• 上記のゲーム概要をそのままAIエージェントに連絡する

• 「Improve prompt」ボタンを押下することで、よりAIエージェントに伝わりやすい文面（英語に変換＋補足情報）になるので、適用したうえで「Start building」ボタンを押す
  

• その際の返答が以下の通り。追加オプションの提案があるものの、特に指定せずに進める

• 自動的にコーディング、ビルド、画面表示がされ、テスト実行が出来るようになっている

  • 環境構築時にビルドエラーなどが出た場合は修正、リトライも自動で動いたりもする

2. 作成された成果物点検

• 作成された成果物を点検し、問題点を指摘する
  • 今回の場合、最大値の数字を持っていた人が勝者のはずが、数字の合計値が勝敗に影響している
    

3. 修正指示～再点検

• 再度の点検を行い、問題が解消されているか確認する

  • 今回の場合、数字の合計値が勝敗に影響しないように修正を指示
  • その他、勝敗判定のロジックも修正を指示
  • 修正後の成果物を再度点検

• 基本的にはこのステップの繰り返しで、完成形に近づけていく

4. 修正ループ発生時の手動修正

• 実装指示した内容によっては、適切な修正がされない場合もある
  • その場合は手動で修正を行う
  • 修正後は「RUN」ボタンを押すことで、その内容でデプロイが行われる
  • 修正するほど状況が悪くなるケースもあるため、その場合は各ステップごとに用意された「ロールバック」ボタンを使って元に戻すことも可能
• 下記画像を見れば分かる通り、replit agentにはファイル添付も可能で、画像を添付して問題点を指摘することも可能である

• 自分で原因を判断し日本語で伝えることで、適切な修正を促すことも出来る

5. 追加要望

• 3と4を繰り返して完成形に近づけたら、追加要望があればその内容も指示すれば同時に取り込んでくれる
  • 今回の場合、勝敗判定の際に、勝者の色を表示するように指示
  • その他、勝敗判定のロジックも修正を指示
  • 「初めての人でも分かるようにゲーム説明をつけてほしい」といった問い合わせにも対応
  • 修正後の成果物を再度点検

6. CPU対戦モードの追加

• 疑似的なCPUに関しても依頼することで作成してもらうことは可能
• ただし、無から考えるのもあって、定石や戦略は前もってこちらから伝えた方が効率よく強いものを作成してもらえそう
  • 今回の対応では、あくまでサンプルのため、ある程度の強さが担保された時点で終了とした

7. ログイン画面追加

• 画面追加といった指示も可能である
  • ログイン画面に限らず、ロジックがシンプルなもの、既存のシステムとして良く用いられコーパスが多くあるものは得意と見てよい

8. デプロイ作業

• 満足いく形になったら、デプロイを行う

8-1. 設定画面へのアクセス

• 右上の「Deploy」ボタンを押す

8-2. デプロイ設定画面１

• どのモードでデプロイするかを選択する（常時リリースや定時バッチなど、形式がある）
  • 基本的には「Autoscale」を選択すればいいはず

• 「Set up your deployment」を押す

8-3. デプロイ設定画面２

• マシンパワーや同時アクセス可能数などの設定をする
  • 作り込んだ資材の規模やアクセス数によって切り替える

• 試験運用のためリソース少なめに設定、あまり費用はかからない
  

• 設定が終わったら「Approve and build settings」を押す

8-4. 最終確認画面

• 基本的には表示されている内容を確認して「Deploy」を押せばよい

• 1点のみ「Private Deployment」のみ検討が必要

  • 通常（public）の場合、URLが分かれば誰でもアクセス出来る
  • Private Deploymentを選択すると、他のユーザーからのアクセスを制限できる（組織のメンバーであり、チームの資格情報でログインしたReplitユーザーのみアクセス可能）
  • ベータ版などの限定公開、センシティブな情報を取り扱っている際に利用する
  • Coreプランでは選択不可、Teamsプラン以上で選択可能

  

• 準備が終わったら「Deploy」を押す

8-5. デプロイ実行

• 当システムの初回デプロイは10分程度で完了
• 2回目以降（Redeploy）はそんなに時間がかからなくなる
• URLが表示されるので、そこにアクセスして動作確認を行う

• Deploy範囲をprivate →　publicに、その逆に切り替える場合は、一度デプロイ設定を破棄し再設定する
• 前回の実行設定は保存された状態でデプロイ設定画面に遷移する

8-6. デプロイ管理画面

• いつ、どの程度のアクセスがどこからやってきたなどの情報を確認できる

• どこから来たのかは世界地図形式で出てきて、見栄えがいい

感想

• これやってみたら面白いかな、というアイデアをDIY感覚で実現できるのは嬉しい
• 現時点でエージェントの操作だけで100点取れないのは事実。あくまでサポートとして扱った方が無難
• ただゼロベースから考えるよりかははるかに楽。特に関連ライブラリ入れる手間が省けるのは爽快
• 可能性は感じられた。ただ昨今のAIツール関連は、競合が瞬く間に追い抜いていくのが常態化してるので年間プランに手が伸びにくい…

補足事項

• 全体のソースコードはおよそ1000～1100ステップ
• 1回の指示（既存ファイルの追加／変更／削除が関わる＝チェックポイント生成）につき0.25ドルがかかる
  • 上記プランの費用と別に取られるわけではなく、プランごとに定期刷新されるクレジットから差し引かれる形式
  • 現状の確認、問い合わせなど、ファイルの追加／変更／削除が関わらない指示は課金対象外
• この指示は1ファイルでも10ファイルでも同じ価格、修正行の量も問わない
• 上記のシステムを初期から作るのに20ドル分（約80回の指示）をかけている
  • 作業時間としては5時間程度。凝ったりすると長くなりそうだが、基本的には短時間で作業が進む