小学校2年生の算数「かけ算九九」の学習用デジタル計算カードアプリです。 本物の計算カードをめくるような操作感で、九九の練習・定着・学習習慣づくりを支援します。
- 4つのモード(カード練習・クイズ・ふたりで対戦・きろく)を、ホーム画面から1タップで始められます
- 練習の結果は端末の中だけに残り、外部への送信は一切ありません。氏名などの識別情報も持ちません
- ビルド不要・依存ライブラリなしの静的サイトで、インストールするとオフラインでも動きます
先生向けの使い方は MANUAL.md にあります。
3つの練習モードは、始める前に同じ設定画面を通ります。設定は端末に保存され、次回もそのまま使えます。
| 設定 | 内容 | 出てくるモード |
|---|---|---|
| れんしゅうする「だん」 | 1〜9の段からいくつでも選べる(最低1つ)。「ぜんぶえらぶ」「1つにする」のボタンつき | 3モード共通 |
| カードのじゅんばん | 上から(1→9)・下から(9→1)・バラバラ(シャッフル) | 3モード共通 |
| カードのむき | 「しき → こたえ」/「こたえ → しき」(逆引き) | カードでれんしゅう のみ |
| もんだいのかず | 10もん・20もん・ぜんぶ | こたえてクイズ / ふたりでもんだい |
| となえかた(ふりがな) | こたえの面に「にさんが ろく」を出すかどうか | カードでれんしゅう のみ |
「はじめる!」ボタンには、実際に出るカードの枚数が表示されます(例: 選んだ段が2つなら18まい)。
- 本物のカードのような 3Dめくりアニメーション と スワイプ操作
- タップ → カードをめくって答えを確認
- 左スワイプ →「できた!」の山へ
- 右スワイプ →「もういちど」(カードが山の下に戻り、後でもう一度出題)
- 画面下の3つのボタン(できた!/めくる/もういちど)でも同じ操作ができる
- 選んだカードが全部「できた!」になるまで終わりません。 進み具合は「できた ○まい・のこり ○まい」で表示
- カードのうらの スピーカーボタン で唱え方を読み上げ(Web Speech API)。ふりがなを消していても押せます
- キーボード操作:
←できた! /→もういちど /Space・Enter・↑めくる - 終わると結果画面に、できた枚数・かかった時間・「もういちど」にした枚数と、その一覧が出ます
- 数字キーパッドで答えを入力する確認テスト(10問・20問・全問)。答えは2桁まで、
OKで確定 - 間違えたら正しい答えと唱え方を表示し、読み上げでフォロー。「つぎへ」を押すまで次に進みません
- タイム計測とベストタイム記録。ベストタイムが更新されるのは全問正解したときだけで、 「選んだ段の組み合わせ × 問題数」ごとに別々に保存されます
- キーボード入力にも対応(
0〜9/Backspace/Enter)
- 実際の教室でのカード活動のように、友達と交代で問題を出し合える モード
- 声に出して答え → カードをめくって答え合わせ → 相手が○×判定 → 交代
- 出題数は「もんだいのかず」で選べます。得点表示と勝敗発表(同点なら引き分け)
- スタンプカレンダー: 練習した日にスタンプ。直近4週間を表示し、連続日数(ストリーク)も出ます
- 九九マスターマップ: 81マスのヒートマップ。1マスが「まだ / れんしゅうちゅう / もうすこし / マスター」の 4段階で色分けされ、3回続けて正解するとマスターになります。マスをタップすると 正解・まちがいの回数を表示し、唱え方を読み上げます
- にがてカード: 1回でも間違えて、そのあとまだ3回続けて正解していない九九を自動で集めます。 ホームのバナー・結果画面・きろく画面のボタンから、その場で重点練習(バラバラ・しき→こたえ)に入れます
- メダル: 12種類(はじめのいっぽ / 3・7・14・30日れんぞく / カード100・500まい / クイズ100もん / パーフェクト / はじめてマスター / だんマスター / 九九マスター)
画面の上部には、れんぞく日すう・めくったカード(3モードの合計)・マスターした九九(○/81)が出ます。
- 練習・クイズ・対戦の記録を、GIGA山 学習アプリ共通の形式(
study.v1)で端末に保存 - きろく画面に「この1しゅうかん」のかいすう・学習時間・1回目でできた割合と、最近10回の一覧を表示 (割合は客観採点できるモードだけで計算し、ふたりでもんだいは含めません)
- 記録が1件も無いあいだは、この欄そのものが出ません
- 保存のみで、外部への送信は一切行わない。氏名などの識別情報も持たない
- 効果音(めくる・正解・ファンファーレなど)は 「カードでれんしゅう」画面の右上のスピーカーボタン で切り替えます。設定は保存され、クイズ・対戦の効果音にも効きます
- 唱え方の読み上げは、このスピーカーボタンでは消えません。 読み上げは カードのスピーカーボタン・クイズの誤答時・マスターマップのタップのときに鳴ります
- Chromeなどのブラウザから アプリとしてインストール可能
- Service Workerによる オフライン動作
- スマートフォン・タブレット・PCのどの画面サイズでも学習領域を最大化(縦・横向き両対応)
- 新しい版が出ると画面上部に通知バーが出ます。「さいしんに する」を押すまで切り替えません (練習の途中で画面が入れ替わらないようにするため)
- 端末の「戻る」操作に対応: 画面下部のナビゲーションバーのタップ、画面の端から中央へのスワイプ(ジェスチャー操作)で、アプリ内の1つ前の階層にもどる
- 「戻る」1回でアプリが終了したり、ブラウザが前のページへ移動したりしない
- ホーム画面で「戻る」した場合は案内を表示し、続けて2回したときだけアプリを閉じる
- キーボードの
Escも同じ「1つ前にもどる」として使えます
ビルド不要の静的サイトです。そのままWebサーバーに置くだけで動きます。
- リポジトリの Settings → Pages を開く
- Source を「Deploy from a branch」にし、公開したいブランチと
/ (root)を選択 - 公開されたURLをChromeで開き、アドレスバーの「インストール」ボタンからアプリとして追加
python3 -m http.server 8000
# → http://localhost:8000 を開く※ ES Modules を使用しているため、file:// 直接開きでは動きません。HTTPサーバー経由でアクセスしてください。
- 依存ライブラリなし(Vanilla JS / ES Modules)・ビルド不要
- CDN から取る実行コードは 0 バイト。 学校のフィルタリングで外部が塞がれても起動する （Google Fonts だけは外部から読むが、これは「見た目だけ」の依存で、 届かなくても端末側フォントに落ちて動く）
index.html/css/style.css/js/(data・storage・audio・nav・app・studyLog・studySession・studyStats)install-hook.js…beforeinstallpromptの捕捉。<head>の先頭で同期読み込みする （本体のapp.jsはtype="module"で解析後に走るため、そこで待つと合図を取りこぼす）- 画面遷移は History API の履歴スタックで管理(
js/nav.js)。URLは変えないため公開パスに依存しない manifest.webmanifest+sw.js(オフラインキャッシュ) +offline.html- 学習記録は端末内の
localStorageに保存(サーバー送信なし)
index.html に <meta> で入れてある。script-src に 'unsafe-inline' は足さないこと。
インラインの <script> と onclick= は1つも無く、そのために install-hook を外部ファイルにしている。
frame-ancestors は <meta> では無視されるので書いていない。
独自ドメインや CDN を挟むときは、そちら側で HTTP ヘッダーとして設定すること。
公開先は https://kake-master.giga-school.com/（CNAME）。
独自ドメインなので、アプリはサイトの直下で配信される。
manifest.webmanifest の id / scope / start_url は、これに合わせて "./" にしてある。
公開場所を変える場合は、この3つと quality.config.json の repoPath に加えて、
icons[].src も必ず直すこと。
icons[].src に旧構成の絶対パス（/KAKE_Master/icons/…）が残ると、
アイコンが4枚とも 404 になる。Chrome は取れるアイコンが1枚も無いと
インストール可能と判断しないので、beforeinstallprompt が飛ばず、
「インストール」ボタンが出ないまま静かに壊れる（コンソールにも何も出ない）。
実際にこの形で壊れた。npm run check の E_ICON_SRC と
npm run measure:pwa の E11 が、いまはそれを止める。
旧 https://gigayama.github.io/KAKE_Master/ は GitHub Pages が新しいアドレスへ
転送するので、古いブックマークからも開ける。
ただし オリジンが変わるため、旧アドレスに保存されていた記録は引き継がれない
（docs/study-log.md §12）。
js/studySession.jsのAPP_VERSION、sw.jsのVERSION、package.json/quality.config.jsonの版を上げる（4か所とも。上げ忘れると更新が届かない）npm run checkとnpm testを通す- push
npm ci
npm run check # 品質ゲート（CI と同じもの）
npm run check:self-test # 検査そのものが動いているかを、わざと壊して確かめる
npm test # 中核ロジック（九九のカード生成）のテスト
# 実ブラウザでの実測（Chromium が要る）
npm run measure:ui # コントラスト・タップ領域・横スクロール・CSP違反・JSエラー
npm run measure:pwa # 登録・初回リロード・更新通知・キャッシュ・オフライン
npm run measure:icons # 容量・透明画素・maskable のセーフゾーン
npm run smoke # 全モードを実際に操作して壊れていないことを確かめる
npm run icons # アイコンをパレット PNG 化して軽くするmeasure:ui と smoke はローカルの HTTP サーバーが要る。既定の宛先はそれぞれ
http://127.0.0.1:8000（measure:ui）と http://127.0.0.1:8001（smoke）で、
どちらも --base で変えられる。manifest の scope に合わせて、サイトの直下で測ること。
サブディレクトリの下で測ると、本番と配置が違うため、絶対パスの取りこぼしを見逃す。
measure:pwa と measure:icons はサーバー不要（measure:pwa は自分でサーバーを立てて自分で止める）。
CI（.github/workflows/ci.yml）は main への push とすべての Pull Requestで、
npm run check → npm run check:self-test → npm test の3つを Node 22 で回す。
実ブラウザでの実測（measure:* と smoke）は CI に入れていない（手元で回す）。
実測の結果と、測っていないものは AUDIT.md に書いてある。
GIGA山 学習アプリ群の共通スキーマ study.v1 に準拠した学習ログを出力します。
詳細は docs/study-log.md を参照してください。
| 項目 | 値 |
|---|---|
| 出力スキーマ | study.v1 |
appId |
kuku-card |
| 保存キー | study.records.v1(全アプリ共通)・kuku-card-v1(このアプリ固有) |
| モジュール | js/studyLog.js(共通・不変 / ロジック版 1.1)・js/studySession.js(組み立て)・js/studyStats.js(読み出し) |
| 記録の単位 | 1回の練習=1レコード。タブを離れて5分もどらなければ aborted として締める |
| 保存件数の上限 | study.records.v1 全体で500レコード（超えた分は古いものから捨てる）・1レコードにつき設問200件まで |
study.records.v1は複数アプリ共通の学習ログです。このアプリ専用のキーではないため、 リセット処理やクリーンアップの対象に含めないでください。
- アプリは保存のみを行い、外部への送信は一切行いません
- 児童を識別する情報(氏名・出席番号・メールアドレス等)は記録しません
localStorage.clear()は使いません。「きろくをぜんぶけす」が消すのはkuku-card-v1だけです （＝スタンプ・マスターマップ・メダルは消えますが、study.records.v1の学習ログは残ります）- Service Worker が削除するキャッシュは
kuku-で始まる自アプリのものだけです
九九の唱え方(「ににんが し」「しちしち しじゅうく」など)は小学校教科書で 一般的な読み方に準拠しています。
| ファイル | 誰向け | 中身 |
|---|---|---|
README.md |
開発者 | できること・構成・CSP・公開場所・リリース手順・検査の回し方 |
MANUAL.md |
先生 | 使い方・インストール手順・うまくいかないとき |
AUDIT.md |
開発者 | GIGA Standard v5 の監査結果（実測値・未計測の明示・人間に決めてほしいこと） |
ROLLOUT.md |
開発者 | 改修を1本通した記録と、他のリポジトリにも効く知見 |
docs/study-log.md |
開発者 | 学習ログ study.v1 の仕様 |
docs/note/ |
書き手 | 紹介記事の原稿と画面キャプチャ（入稿メモつき） |
MIT License / Copyright (c) 2026 GIGAyama — LICENSE