端末内で完結する Anki 風の間隔反復フラッシュカード PWA。ビルド不要・依存ゼロ。
iOS HIG に沿ったミニマル / 高コントラストの見た目。デザイントークン(配色・字送り・角丸・余白)は
app.css 冒頭の CSS 変数が唯一の定義元で、ライト / ダークの 2 パレットを持つ。
python3 -m http.server 8080 # 任意の静的サーバでよい
# → http://localhost:8080 (iOS Safari では「ホーム画面に追加」でスタンドアロン起動)Service Worker のキャッシュを使うため、ファイルを更新したら sw.js の CACHE を上げる。
node test.cjs # FSRS スケジューラと CSV パーサの自己チェック| ファイル | 役割 |
|---|---|
index.html |
全画面のマークアップ + SVG アイコンスプライト |
app.css |
デザイントークン(ライト / ダーク)と全スタイル |
core.js |
純粋ロジック:FSRS-5、間隔表記、CSV/TSV パース |
app.js |
状態・描画・イベント |
sw.js |
オフライン用キャッシュ |
- スケジューラ: FSRS-5(既定重み)。「もう一度」は 1 分後に再出題、それ以外は目標保持率(既定 90%)から間隔を算出。
- 保存:
localStorageの単一 JSON。端末外へは一切送信しない。 - バックアップ: 設定から JSON 出力 / 復元。7 日出力がないとホームに警告バナー。
- インポート: CSV / TSV(1 列目=表, 2 列目=裏)。ファイル名がデッキ名になる。ヘッダ行は自動でスキップ。
- キーボード:
Space/Enterめくる・普通、1〜4評価、Esc終了。
設定はテーマ 1 つだけ(ドロップダウン)。ライト / ダークの二択ではなく、 5 つのカラーセットから選ぶ。ライトとダークもその一員でしかない。
| テーマ | 面 | アクセント |
|---|---|---|
| ライト | #f2f2f7 |
#0a66d0 |
| ペーパー | #f6efe1 |
#a1552a |
| ダーク | #000000 |
#7fb0ff |
| スレート | #262b35 |
#88c0d0 |
| フォレスト | #16241d |
#7fd0a5 |
テーマが持つ値は 3 つだけ:面の色 --base、アクセント --tint、
その上に乗る文字色 --on-tint。カード・区切り線・本文・押下状態は
すべて面の色から color-mix() で導出されるため、ランプは全テーマ共通で
CSS に 1 か所しかない。明暗の違いはどちら向きにコントラストを付けるか
(--ink)とカードがどれだけ白へ持ち上がるか(--raise)の 2 値だけで、
これはテーマ名を並べた 2 本のリストが与える。
デッキ一覧の 新規 / 学習中 / 復習 のカウントと評価ボタンの 4 色は、 テーマではなくこの 2 本のリスト側にある。状態を表す意味のある色で、 テーマに追従させると衝突する(緑系で「新規」と「復習」が同色になる)ため。
app.cssに 1 行足す
.theme-rose { --base: #f7eaea; --tint: #8c3a3f; --on-tint: #ffffff; }-
明暗どちらのリストに属するかを、同じ
app.cssの 2 本のセレクタリストの どちらかに名前を足して指定する(これで本文が黒か白かが決まる) -
index.htmlの#set-themeに<option value="rose">ローズ</option>を足す
追加したらコントラストを確認すること。既存テーマがカード面に対して 満たしている値は次のとおり。
| 対象 | トークン | 基準 | 実測 |
|---|---|---|---|
| 本文 | --on-surface |
7:1 | 8.68〜18.11:1 |
| 副次テキスト | --on-variant |
4.5:1 | 5.48〜8.83:1 |
| アクセント | --primary |
4.5:1 | 5.03〜7.76:1 |
| アイコン・チェブロン・入力欄の枠 | --outline |
3:1 | 3.18〜4.53:1 |
| ヘアライン | --outline-variant |
— | 1.35〜1.77:1 |
--outline-variant はカード枠・リスト区切り・ナビ下線に使う 0.5px の
ヘアラインで、意図的に 3:1 を満たしていない。WCAG 1.4.11 が 3:1 を
求めるのは「理解に必要な UI 部品」で、隣接する行を隔てるだけの装飾的な
区切り線は対象外にあたる。参考までに iOS 標準の区切り線 #c6c6c8 は
白背景に対して 1.71:1 で、ライトテーマの 1.73:1 とほぼ同じ。ここを 3:1 まで
上げると全カードに濃い枠が付いて意匠が変わるため、上げていない。
一方、入力欄(input / textarea / select)の枠には --outline を使う。
これらは塗りが背後の面と 1.05〜1.22:1 しか違わず、枠がコントロールを識別する
唯一の視覚情報になるため、WCAG 1.4.11 の 3:1 が適用される。アイコンや
チェブロンも同様に --outline。