Making diary / 01 · GREEN TABLE
オセロを頼んだら、
盤面の横に会話が生まれた。
最初は、ひとりか同じ端末で遊べればよかった。
「オンラインで」「チャットも」で、盤面の外側がどんどん育っていく制作日記。
制作の記録:2026年9月12日/occam.jpへの移設:9月21日/記事編集:9月22日

01 / 盤面より先に、相談から
初手は黒。制作の初手は、要件定義書。
始まりの依頼は、思いのほか堅実でした。いきなり石を置くのではなく、まず「何を作るか」を決めるところから。
わたし:オセロゲームをつくりたいので、要件定義書をつくって
AIが整理した初期案は、CPU対戦と、同じ端末を交互に使う2人対戦。オンラインもランキングも、まだ登場しません。CPUは置ける場所からランダムに選ぶ方式。最強の棋士を雇う前に、まずルールを守る対戦相手を用意します。
ところが、オセロのルールは「挟んだら裏返す」で終わりません。縦・横・斜めの8方向。置けなければパス。空きマスがあっても、両者が置けなければ終了。見慣れた盤面の裏には、意外と細かな約束が詰まっていました。
わたし:これでWebアプリ作って
AI:要件に沿って、CPU対戦・2人対戦ができるWebアプリを作ります。まず作業フォルダーを確認し、実装と動作確認を進めます。
できあがったのは深い緑の「GREEN TABLE」。名前や配色は実装の過程で具体化されました。置ける場所の目印、石の数、手番が並び、キーボードでも操作できるように。見た目は静かな盤面ですが、裏では200局分の進行テストも走っています。こちらが一局始める前に、ずいぶん対局を済ませていました。

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側の公開・検証記録を補っています。過去のテスト結果は、現在の本番性能の保証ではありません。