本アプリは、ボードゲーム『ゴブレット・ゴブラーズ（Gobblet Gobblers）』（発売元 Blue Orange Games、日本語版 すごろくや）のルールを題材にした、個人制作の非公式アプリです。権利者とは一切関係がありません。 ルール（アイデア）そのものに著作権はありませんが、駒やパッケージの意匠・ロゴは権利者のものです。 なお、GOBBLET は株式会社すごろくやの登録商標（登録第6334148号・第28類） です。ラテン文字表記「Gobblet」を単独のアプリ名として使うことは避けてください。
Webブラウザだけで動作する、3x3マスの戦略ボードゲーム「ゴブレット」風のアプリケーションです。PWA(プログレッシブウェブアプリ)に対応しており、Chromeなどのブラウザから端末にアプリとしてインストールしてオフラインでも遊べます。
- 公開URL：https://gobblet.giga-school.com/
- 先生向けの使い方 → MANUAL.md
- 品質基準への適合状況 → AUDIT.md
このゲームは、1つの端末を使って2人で遊ぶ対戦用のボードゲームです。自分の色の駒を、相手よりも先に「縦・横・斜め」のいずれか1列に3つ並べることを目指します。
-
駒のサイズ: 各プレイヤーは「大・中・小」の3種類のサイズの駒をそれぞれ2つずつ持っています。
-
被せる: 盤面上にある駒よりも「大きい」サイズの駒であれば、上から被せて隠すことができます(相手の駒にも自分の駒にも被せられます)。
-
移動: 自分の手番では、手持ちの駒を置くだけでなく、既に盤面に置いた自分の駒を別のマスへ移動させることもできます。※駒を持ち上げた結果、下から現れた駒で相手の3つ並びが完成した場合は、その時点で相手の勝ちになります。
-
勝利条件: 先に3つ自分の駒を並べたプレイヤーの勝利です。
-
外部依存ゼロ: 外部ライブラリ・CDN・Webフォントの読み込みは一切なく、オフラインでも完全に動作します。初回に読み込むファイルは合計 60KB 程度です。
-
PWA対応: Web App Manifest (
manifest.webmanifest) と Service Worker (sw.js) により、ブラウザからホーム画面/デスクトップにインストールできます。2回目以降はオフラインでも起動できます。 -
レスポンシブ対応: スマートフォン(縦・横)、タブレット、PC、電子黒板のいずれでも、盤面が画面内で最大の正方形になるように自動レイアウトされます。横向き画面では手駒が左右に配置されます。横320px・縦568pxまで、横スクロールも縦の見切れも発生しません。
-
提示モード: 右上の ⛶ ボタンでフルスクリーンになります。1600px以上の画面では盤と文字がさらに大きくなり、教室の後ろの席からでも読めます。
-
ふりがな: 画面に出るすべての漢字に、ルビ(ふりがな)を付けています。低学年でも自分で読んで遊べます。 読み上げソフトが読みを二重に読まないよう、
<rp>を添えています(GIGA Standard v4 §4)。 -
音の演出: Web Audio APIによる効果音付き(ヘッダーのボタンでON/OFF切り替え可能)。
-
アクセシビリティ: キーボード操作、スクリーンリーダー向けのARIA属性、
prefers-reduced-motion、forced-colors(ハイコントラスト)に対応しています。タップ領域はすべて44px以上を確保しています。
index.html 画面の骨格。CSS/JS はインラインに書かない（CSP のため）
css/style.css ゲーム画面のスタイル
css/offline.css 圏外画面のスタイル
js/pwa-install.js インストールの合図を <head> 最上部で捕まえる
js/rules.js 勝敗・配置の判定（画面に依存しない。テスト対象）
js/furigana.js ふりがな。{漢字|かんじ} 記法を <ruby> に組み立てる
js/app.js ゲーム本体
js/offline.js 圏外画面のボタン
sw.js Service Worker（キャッシュ）
offline.html 圏外のときに出る画面
manifest.webmanifest PWA の設定
icons/ 192 / 512 / maskable 192 / maskable 512 / apple-touch-icon
server.js 開発用サーバー（配信物には含まれない）
scripts/check-project.mjs 品質ゲート（npm run check）
tests/ 勝敗判定とふりがなのテスト
npm install
npm start # http://localhost:3000/Gobblet/本番(GitHub Pages)と同じ /Gobblet/ の下で配信されます。manifest.webmanifest の
scope / start_url はリポジトリ名の絶対パスなので、ルート直下で開くと
「インストールできない」と誤って判定されます。必ず /Gobblet/ を開いてください。
index.htmlをファイルとして直接ダブルクリックして開く方法は、CSP と Service Worker が 効かないため推奨しません。上記のコマンドか、公開URLを使ってください。
npm run check # GIGA Standard v4 の機械チェック（表示・PWA・セキュリティ・性能）
npm test # 勝敗判定（js/rules.js）とふりがな（js/furigana.js）のテストリポジトリのファイル一式をそのまま静的ホスティングに置くだけです。
GitHub Pages の場合、main ブランチのルートを公開設定にします。
リリースのたびに sw.js の APP_VERSION を上げてください。
上げ忘れると、児童の端末に古い版が残り続けます。
- フロントエンド: HTML / CSS / Vanilla JavaScript(外部依存なし)
- PWA: Web App Manifest / Service Worker(静的ファイルはキャッシュファースト、画面遷移はネットワークファースト)
- サウンド: Web Audio API
- アイコン/駒: インラインSVG
- 開発用サーバー: Express (
server.js、任意)
画面に出る漢字には、かならずふりがなを付けてください。 付け忘れは npm run check
(D14 / D15)と npm test で落ちます。
-
HTML に直接書く文章（あそびかたの説明など）は
<ruby>をそのまま書きます。 JavaScript が動く前でもふりがなが見えるようにするためです。<ruby>相手<rp>（</rp><rt>あいて</rt><rp>）</rp></ruby>
-
JavaScript から出す文言（トースト・ダイアログ）は
{漢字|かんじ}と書きます。js/furigana.jsが<ruby>に組み立て、読み上げ用にはFurigana.strip()で 素のことばに戻したものをaria-labelに入れます。notice('もっと{大|おお}きい{駒|こま}なら、そこに{置|お}けます');
-
aria-labelなどの属性は画面に出ないので、ふりがなは付けません（付けると読み上げが濁ります）。
- 個人情報を一切扱いません。 氏名・出席番号・メールアドレスの入力欄はなく、
localStorageも使っていません。対局の内容はページを閉じると消えます。 - 外部との通信がありません。 外部CDN・外部フォント・アクセス解析・広告はゼロです。
そのため CSP の
connect-srcは'self'のみで足ります。 - CSP:
index.html/offline.htmlの<meta http-equiv="Content-Security-Policy">で、 自分自身以外からの読み込みと、インラインの script / style を禁止しています。 この制約があるため、CSS と JS をインラインに書き戻さないでください。 - Service Worker は他アプリのキャッシュに触れません。 旧配信元の
gigayama.github.ioは 複数のアプリで同一オリジンを共有しているため、caches.keys()の結果を そのまま削除してはいけません。CACHE_PREFIX(gobblet-)で始まるものだけを掃除しています。 - Service Worker は
localStorageを操作しません。
- 記録は残りません。 途中で再読み込みすると対局は最初からになります(仕様)。
- 同じ端末を2人で使う前提です。ネットワーク越しの対戦機能はありません。
- サーバーもデータベースもありませんので、同時アクセス数の制限はありません。 GitHub Pages の制限(ソフト帯域 100GB/月、1リポジトリ 1GB)の範囲内で使えます。 初回1回あたりの転送量は約60KBで、40人が一斉に開いても2.4MB程度です。
- iOS Safari では
beforeinstallpromptが発火しないため、アプリ内に 「インストール」ボタンは表示されません。手順は MANUAL.md を参照してください。 - フルスクリーンAPIに対応しない端末(iPhone の Safari 等)では、⛶ ボタンは表示されません。
manifest.webmanifestのid/start_url/scopeは"./"です。 独自ドメインgobblet.giga-school.comへ移り、アプリはドメイン直下に 置かれているためです。shortcutsのurlも同じく相対にします。 旧構成（gigayama.github.io/Gobblet/）のようなリポジトリ名の絶対パスに 戻すと、scopeがページの URL を含まなくなり、manifest ごと無視されて PWA としてインストールできなくなります。 オリジンがアプリごとに分かれたので、識別子が他アプリと衝突する心配も なくなりました。- アイコンは
icon.svgを正本として生成しています。差し替えるときは 192 / 512 / maskable 192 / maskable 512 / apple-touch-icon の5枚をまとめて作り直してください。 maskable は中央80%の安全地帯に収める必要があります(角が丸く切られるため)。 - 更新は自動では適用されません。新版は待機したまま 「あたらしい バージョンが あります」を表示し、利用者が押したときだけ切り替わります (対局中に画面が作り直されるのを防ぐため)。
MIT License — LICENSE を参照してください。