リアルタイム五目並べゲームを作る

ファイルをアップロードしてスキーマをデプロイしたら、ブラウザーを2つ開いてみてください。一方で作成したルームに友人が参加し、石を置いた瞬間に、もう一方の画面にも同じ手が表示されます。勝敗とランキングは、サーバーが自動的に記録します。

別途フロントエンドのビルドツールは必要ありません。完成済みのサンプルでまず1局実行してから、データ構造、リアルタイム機能、ゲームのルールを1つずつ変更してみることができます。

1. まず1局実行してみる

最初は、サンプル一式のZIPから始めるのが最も早い方法です。スキーマと画面のファイルを同じフォルダにアップロードしてスキーマをデプロイすれば、すぐに対局を開くことができます。

• リアルタイム五目並べのサンプル一式のZIPをダウンロード：スキーマ、index.html、style.css、app.js、READMEを含む
• 五目並べのスキーマファイル（.sfn）をダウンロード：バックエンドの構造だけを確認したい場合や、自分で作成した画面と接続する場合

サンプルを実行すると、次の場面を実際に確認できます。

• ルームコードを使った2人のユーザーの対局
• 最後の手、自分の石、現在の手番の表示
• 1手ごとに計り直される3分の制限時間
• 進行状況を知らせるリアルタイムの対局中継
• 勝ち・負けの表示と、最近の対局、プレイヤーランキングの自動更新

スキーマには、19×19の盤面、石を5つ並べると勝ち、勝ち3点・引き分け1点・負け0点というルールがあらかじめ入っています。ユーザー1人につき最大3つの待機ルームを作成でき、30分間参加者がいない待機ルームは整理の対象になります。

ゲームの中で動作する機能

五目並べの1局には、WebSpaceの主な機能が自然に組み込まれています。

重要なのは、ブラウザーが勝利を宣言したり、スコアを直接書き込んだりしないという点です。サーバーが現在の盤面と手番を確認し、正常な着手だけを保存してから、2人のユーザーに同じ結果を送ります。

2. ワークスペースにアップロードする

スキーマファイルだけをダウンロードした場合は、チームまたは個人のワークスペースのプロジェクトフォルダにアップロードします。サンプル一式のZIPをダウンロードした場合は、フォルダのアップロードまたは圧縮ファイルのアップロードで、5つのファイルを同じフォルダに置きます。

五目並べ対局場/
├── gomoku-realtime.sfn
├── index.html
├── style.css
├── app.js
└── README.md

スキーマファイルを開き、DB構造で3つのテーブルを確認します。

対局と戦績を分けて保存しているため、画面を開き直しても、最近の記録とランキングをもう一度読み込めます。

3. APIとリアルタイム機能を確認する

上部のAPIビルドを開き、次の項目を確認します。

1. データベース名がgomokuであることを確認します。
2. リアルタイムソケットが使用するになっていることを確認します。
3. サーバー提供機能がターン制ボードゲーム（turn-based-board）であることを確認します。
4. 送信と受信の権限が会員のみであることを確認します。
5. 3つのテーブルの登録APIと修正APIが無効になっていることを確認します。

登録APIと修正APIをオフにするのには理由があります。参加者がREST APIで勝利回数や着手の記録を直接変更できないようにし、ゲームの状態の変更をすべてサーバーのイベントプロセッサーに通すためです。

4. SQLite3でデプロイする

初めて実行するときは、ストレージでSQLite3を選択します。別途データベースのアドレスやアカウントを用意する必要がないため、例を確認するには最も簡単です。

配布するを押す前に、画面に表示される変更内容と権限の要約を確認します。すでに同じ名前のデータベースに記録がある場合は、サーバーの上書きポリシーに応じて、管理者またはデプロイ担当者の承認が必要になることがあります。

デプロイが終わると、次のアドレス形式のREST APIとWebSocketが準備されます。

GET /api/web/gomoku/gomoku_games/list
GET /api/web/gomoku/gomoku_players/list
WS  /api/web/gomoku/realtime-ws

本番サーバーがHTTPSの場合、ブラウザーは同じドメインの安全なwss://接続を使用する必要があります。アドレスを特定の開発用ドメインとしてコードに固定せず、現在のページのホストをもとに組み立てることをおすすめします。

5. 五目並べの画面を開く

スキーマファイルはゲームのデータベースとバックエンドを作成し、index.html、style.css、app.jsは碁盤とユーザー体験を担当します。この2つを分けておくと、対局の記録を維持したまま、画面だけを新しく作り変えることができます。

サンプル一式をアップロードした場合は、index.htmlを選択してプレビューを開きます。スキーマファイルだけを使用する場合は、自分で作成したHTMLから、上記のREST APIとWebSocketに接続します。

クライアントは、board-game.create、board-game.join、board-game.moveのような動作をWebSocketで送信します。石とスコアは、サーバーから返ってきた確定イベントをもとに表示します。

6. 2人で実際に対局する

1. 異なるメンバーアカウントで、同じindex.htmlを開きます。
2. 1つ目のアカウントで新しい対局を作成を押します。
3. 作成されたルームコードを、2つ目のアカウントに伝えます。
4. 2つ目のアカウントでコードを入力し、参加を押します。
5. 交互に石を置き、2つの画面に同じ手が表示されることを確認します。
6. 石が5つ並んだ後、勝利の表示、最近の対局、ランキングが更新されることを確認します。

通常のウィンドウとシークレットウィンドウのように、ログインセッションが分かれたブラウザーを使用すると、1台のコンピューターでもテストしやすくなります。

結果はサーバーが記録します

横、縦、または斜めに石が5つ並ぶと、サーバーが対局を終了し、勝者とスコアを保存します。1手の制限時間を過ぎた場合も、サーバーの時刻を基準に時間切れ負けが決まります。

最近の対局とランキングがすぐに変わらない場合は、ボタンを押し直すのではなく、WebSocketの終了イベントを受け取った後に一覧を照会し直す流れになっているかを確認してください。画面の開発情報を展開すると、送受信したJSONとサーバーの処理時間も確認できます。

ここから自分のゲームを作る

turn-based-boardは、五目並べという名前に固定されたプロセッサーではありません。スキーマファイルのプロセッサー設定で次の値を変更すれば、別のターン制ゲームの出発点として使用できます。

小さな盤面の短いゲームに変えたり、スコアのルールを組織のイベントに合わせて調整したりしてみてください。同じリアルタイムの基盤の上に、観戦画面、シーズンランキング、チーム対戦を追加することもできます。

五目並べは、完成した例であると同時に、新しいゲームの出発点でもあります。石の代わりにモンスターとアイテムを表示すればターン制のバトルになり、マスの代わりに問題と選択肢を表示すればリアルタイムクイズになります。データとルールはスキーマに置き、画面には作りたいゲームの面白さを加えてみてください。

問題が起きたときは

おわりに

五目並べの例では、スキーマファイルから作成したデータベースとREST API、ログインしたメンバーだけが参加できる権限、サーバーが直接判定するリアルタイムのゲーム状態を、1つのサービスにまとめました。応用編のほかの例では、AIで作る業務システム、フォルダのファイルを使った資料掲示板、共同モンスターレイド、AI相談チャットを扱います。必要な機能に応じてこのうちのいくつかを組み合わせれば、ほとんどの社内向け・顧客向けのツールをWebSpaceだけで作ることができます。

次に試すこと

• APIをビルドしてデータベースをデプロイする
• パフォーマンスとスケーリング
• サービスと容量