ブラウザで遊べるオセロを作った理由
「開いてすぐ遊べること」を最優先にして、インストール不要・ログイン不要の**ブラウザ版オセロ（リバーシ）**を開発しました。スマホでもPCでも快適に動く軽量な1ファイル構成を目指し、難しすぎないけれど“それっぽく強い”CPUも用意。ちょっとした空き時間に遊べて、Webサイトのコンテンツとしても置きやすいミニゲームを目指しています。
開発方針と技術スタック
方針はシンプルです。
- 軽さ：外部ライブラリ不使用（Vanilla JS + CSS）。
- 分かりやすさ：最小限のUI、手番・石数・結果表示を常時可視化。
- 壊れにくさ：単一HTMLで自己完結、依存を極力なくす。
- 埋め込み前提：WordPressの固定ページにiframeで簡単に置ける。
スタックは HTML/CSS/JavaScript のみ。盤面は8×8のグリッドをDOMで生成し、クリック（タップ）イベントで着手→反転→手番切替→合法手チェックの流れを処理します。
盤面レンダリングとルール判定
初期配置（黒2・白2）から開始し、各マスへ置いた際に8方向へ相手石を走査。自石で挟めるラインが1つでもあれば合法手です。反転処理は「候補セルを配列に一旦ためて、最後にまとめて反転」。こうすることで、途中判定の漏れや二度反転を防げます。置ける手が無ければパス、双方とも置けないときは終局。終局時は黒白カウントの結果と勝敗をモーダルで表示します。
CPUの思考（3段階）
難易度はLv1〜Lv3の三段階。短時間で応答し、体感に差が出るよう設計しました。
- Lv1（簡単）：合法手からランダム。まずルールに慣れたい人向け。
- Lv2（普通）：最大反転数ヒューリスティック。ひっくり返せる枚数が多い手を好みます。序盤〜中盤で強さを体感しやすい。
- Lv3（強い）：位置評価を加点・減点。角は+100、辺は+20、危険なX打ちは−50。反転枚数との合算でスコア最大の手を選びます。読みは浅めですが、角を意識するため「らしい手」が増えます。
本格的なαβ探索や開放度評価まで入れると重くなりやすいので、軽量さと応答速度を優先しました。
UI/UXとアクセシビリティ
盤面は正方形レイアウト（aspect-ratio）で常に美しく縮尺。石は陰影を付け、手番表示・石数・ステータスを上部に集約しました。終局時は結果のタイトル／スコア／メッセージをモーダルで提示し、**「もう一度」**で即再戦可能。ボードには aria-label を付与し、ボタンセル化でキーボード操作にも対応しやすくしています。CSSはダーク基調で、WordPressのテーマと並べても浮きにくい配色です。
WordPressでの公開構成
SEOと運用を両立するため、説明ページとゲーム実体を分けました。
- 説明ページ（主役・index）：
/games/othello-reversi/
特徴・遊び方・FAQ・内部リンクを掲載。ここが検索流入の受け皿。必要に応じてVideoGameスキーマやFAQスキーマを付与。 - ゲーム実体（noindex）：
/play/othello.html
実際に動く1ファイル。<meta name="robots" content="noindex,follow">を<head>に入れて検索露出は抑え、説明ページからiframeで読み込みます。これにより評価の分散や重複を避けられ、更新もファイル差し替えだけで完了。万一iframeがブロックされても、「全画面で遊ぶ」リンクを補助導線にできます。
パフォーマンスと保守
依存ゼロのため初回表示が速いのが利点です。更新時はローカルでテスト→othello.html.new をアップ→サーバ側でリネームして切り替えれば、原子的に差し替えられて安全。旧版は othello.prev.html として1つだけ残し、即時ロールバック可能にしています。/play/ ディレクトリは .htaccess で Options -Indexes をセットし、直叩き時に一覧が出ないよう配慮しています。
埋め込みサイズとデザイン調整
ボードが大きすぎる場合は .board の width を指定すればOK（例：width: clamp(280px, 70vw, 480px);）。iframeの高さも620〜760px程度に調整可能。スマホでは幅いっぱい、PCでは最大幅を抑えると読み物としての整合性が高くなります。
今後のアップデート予定
- 手の候補表示（着手可能マスのハイライト）
- アンドゥ/リドゥ（一手戻す）
- より賢い思考（浅いミニマックス＋安定石評価）
- 戦績のローカル保存（ブラウザストレージ）
- オンライン対戦（実装コストが高いため要検討）
段階的に追加しつつ、読み込みの速さと使いやすさを損なわない範囲で拡張します。
まとめ
今回のオセロは、軽量・即遊べる・埋め込みやすいことを軸に、WordPressサイトのコンテンツとして扱いやすい設計にしました。オセロゲームに内容のある説明ページを置いてSEOを取り、オセロ本体 にnoindexな実体を置く二段構成は、評価の集中と運用のしやすさのバランスが良好です。ゲームとしての完成度はもちろん、サイト運営の現実的な手間まで含めてチューニングしています。ぜひ実際に触ってみて、改善点のフィードバックをお寄せください。
コメント