オセロから、オンライン対戦へ。

Making diary / 01 · GREEN TABLE

オセロを頼んだら、
盤面の横に会話が生まれた。

最初は、ひとりか同じ端末で遊べればよかった。
「オンラインで」「チャットも」で、盤面の外側がどんどん育っていく制作日記。

制作の記録:2026年9月12日/occam.jpへの移設:9月21日/記事編集:9月22日

GREEN TABLEの対戦モード選択画面
2026年9月22日に保存されたローカル版を撮影。初期開発当日の画像ではありません。

01 / 盤面より先に、相談から

初手は黒。制作の初手は、要件定義書。

始まりの依頼は、思いのほか堅実でした。いきなり石を置くのではなく、まず「何を作るか」を決めるところから。

わたし:オセロゲームをつくりたいので、要件定義書をつくって

AIが整理した初期案は、CPU対戦と、同じ端末を交互に使う2人対戦。オンラインもランキングも、まだ登場しません。CPUは置ける場所からランダムに選ぶ方式。最強の棋士を雇う前に、まずルールを守る対戦相手を用意します。

ところが、オセロのルールは「挟んだら裏返す」で終わりません。縦・横・斜めの8方向。置けなければパス。空きマスがあっても、両者が置けなければ終了。見慣れた盤面の裏には、意外と細かな約束が詰まっていました。

わたし:これでWebアプリ作って

AI:要件に沿って、CPU対戦・2人対戦ができるWebアプリを作ります。まず作業フォルダーを確認し、実装と動作確認を進めます。

できあがったのは深い緑の「GREEN TABLE」。名前や配色は実装の過程で具体化されました。置ける場所の目印、石の数、手番が並び、キーボードでも操作できるように。見た目は静かな盤面ですが、裏では200局分の進行テストも走っています。こちらが一局始める前に、ずいぶん対局を済ませていました。

黒の初手で置ける4か所に目印が表示された対局画面
9月22日のローカル版。最初に置ける場所には目印が付きます。

02 / 盤面の外に、最初の壁

石は裏返る。でも、公開はひと筋縄ではいかない。

動くゲームができたら、そのまま公開できる。そう言い切れれば話は早いのですが、記録には公開手順の参照ファイルが見つからない問題や、作業環境・認証まわりのエラーも残っています。相手の石より先に、環境の問題をひっくり返す必要がありました。

AI:スマートフォン幅でも盤面が収まり、CPUの応答と無効な着手の防止を確認しました。公開処理で問題がありましたが、接続は復旧し、最後の仕上げを進めています。

ここは「ゲームが動いた」と「公開先で遊べた」を分けて読むところ。この時点の記録だけでは初期版の公開完了までは断定せず、公開先での確認は、次のオンライン版の記録へと続きます。

03 / 同じ画面から、離れた相手へ

「オンラインで」の一言で、盤面に審判が必要になる。

わたし:オンラインで対戦できるに変更したいので、そのような要件定義書を新たに作って

最初の要件では対象外だったオンライン対戦が、ここで主役に。CPU対戦と同じ端末での2人対戦は残し、招待リンクで相手を呼ぶ方式になりました。自動で世界中の誰かと当たるのではなく、「このリンクで一局どうぞ」という小さな対戦部屋です。

わたし:この要件定義書でオンラインオセロのWebアプリを作って

AI:招待リンクで参加できるオンライン対戦を追加します。CPU対戦と同じ端末での2人対戦も残し、接続切れからの復帰や再対戦まで実装します。

離れた2人が、それぞれの画面で好きに盤面を進めたら大変です。そこで、正しい盤面・手番・勝敗はサーバーが決める構成に。サーバーは石を打ちませんが、誰の番かを見張る審判役を務めます。

作成者は黒、参加者は白。双方が準備完了にして開始し、再対戦では合意のうえで白黒交代。再読み込みをしただけで即投了にならないよう、切断を判定してから120秒の復帰猶予も設けました。「ちょっと画面を開き直しただけなのに負けた」は避けたいところです。

当時と現在の仕組みを、少しだけ

初期のオンライン版はCloudflare Workers・D1を使用しました。その後、9月21日にoccam.jpへ移設し、現在の公開版はPHPとSQLiteで動いています。この記事の初期開発の話と、現在のサーバー構成は別の時点の記録です。

04 / 無言の対局に、ひとことを

オセロに、口がつく。

わたし:対戦相手とチャットする機能をつけて

AI:オンライン対戦のルーム内に、対戦相手とメッセージを送り合えるチャットを追加します。対局中も盤面を見ながら使える形にします。

オンライン版の要件では、チャットはまだ対象外でした。でも、離れた相手とつながると、次は話したくなる。要件定義書の「今回はやらない」は、「永遠にやらない」ではなかったのです。

ここでも、入力欄を置いたら完成、とはいきません。日本語を変換するEnterで送信しない。通信に失敗したら、書いた文章を残す。送り直しても、同じ発言を二重に並べない。対戦相手に届く前のひとことを、地味な仕組みで守ります。

チャットと着手が重なっても対局を進められるか、という確認も加わりました。話が弾んだせいで石を打てなくなっては、盤面付きのチャットになってしまいます。

05 / できたはずのチャットが、いない

最後の相手は、昨日の画面でした。

テストを通し、公開したあとにも、もうひと山ありました。新しい機能を置いたはずなのに、ブラウザーが古い画面のファイルを覚えていたのです。

AI:公開後の確認で、ブラウザに古い画面のファイルが残る問題が見つかりました。更新後にチャット欄が確実に表示されるよう修正しています。

修正は、画面のCSSやJavaScriptのURLに、更新を見分ける印を付けること。中身を作り直すだけでなく、「新しい方を読んでください」とブラウザーにも知らせる必要がありました。実装の最後に待っていたのは、強いCPUではなく、記憶力のよいブラウザーです。

その後、別々のブラウザーでチャットの送受信を確認した記録が残っています。「作った」で終わらず、「相手の画面にも出た」まで見届けて、ようやくひと区切り。

06 / occam.jpへお引っ越し

住所は変わっても、盤面は続く。

9月21日には、ゲーム本体とオンライン対戦・チャットをoccam.jpへ移しました。サーバーに合わせてPHPとSQLiteで構成し直し、最後までの対局、チャット、再対戦などを確認。ここでもSQLiteで使える書き方の違いに合わせて、保存処理を調整しています。

最初の「オセロをつくりたい」から、オンラインでつながり、会話までできる盤面へ。欲しいことを一つ言葉にするたび、必要な仕組みが一つ増える。小さなゲームのつもりが、画面の外側の方にもずいぶん仕事がありました。

大人数で使った場合の本番性能や、アクセスがない間の定期データ削除は、引き続き確認事項です。「動いた範囲」と「まだ試していない範囲」も、日記の余白として残しておきます。

この日記の記録について

Occam_contentにまとめた制作記事、9月12日の実際の相談・実装記録、変更履歴(32ddb43、8f152be、489b474、7ad74fb)をもとに編集しました。会話は記録された発言の抜粋で、合間の比喩は読み物としての表現です。9月21日の移設はoccam.jp側の公開・検証記録を補っています。過去のテスト結果は、現在の本番性能の保証ではありません。

タイトルとURLをコピーしました