Skip to content

Repository files navigation

Core Recall

端末内で完結する Anki 風の間隔反復フラッシュカード PWA。ビルド不要・依存ゼロ。 iOS HIG に沿ったミニマル / 高コントラストの見た目。デザイントークン(配色・字送り・角丸・余白)は app.css 冒頭の CSS 変数が唯一の定義元で、ライト / ダークの 2 パレットを持つ。

起動

python3 -m http.server 8080   # 任意の静的サーバでよい
# → http://localhost:8080  (iOS Safari では「ホーム画面に追加」でスタンドアロン起動)

Service Worker のキャッシュを使うため、ファイルを更新したら sw.jsCACHE を上げる。

テスト

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 めくる・普通、14 評価、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 本のリスト側にある。状態を表す意味のある色で、 テーマに追従させると衝突する(緑系で「新規」と「復習」が同色になる)ため。

テーマを追加する

  1. app.css に 1 行足す
.theme-rose { --base: #f7eaea; --tint: #8c3a3f; --on-tint: #ffffff; }
  1. 明暗どちらのリストに属するかを、同じ app.css の 2 本のセレクタリストの どちらかに名前を足して指定する(これで本文が黒か白かが決まる)

  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

About

No description, website, or topics provided.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages