Blood Smear Trainer

末梢血・骨髄塗抹標本の血球を 4択クイズ で学習する静的PWAです。iPhone / iPad / PC / Mac のブラウザで動作し、GitHub Pages で公開できます。フレームワーク不要（HTML / CSS / バニラJS）。

学習補助用アプリです。 臨床診断・検査判定・治療方針の決定には使用しないでください。

公開URL / QRコード

想定公開URL: https://atsu4i.github.io/BloodSmearTrainer/

使い方

1. 表示された血球画像を見て、下の4択から細胞名を選びます。
2. 選ぶと即座に正誤が表示され、正解の選択肢が強調されます（不正解時は選んだものも表示）。
3. 「答えを見る」で、回答せずに正解と解説を確認できます。
4. 「次の問題 →」で次へ進みます（回答するまで押せません）。
5. 解説には 核・細胞質・迷いやすい相手 の鑑別ポイントが表示されます。
6. 出題範囲フィルタ（全カテゴリ / 末梢血 / 骨髄）で範囲を絞れます。
7. 細胞一覧 の「この細胞を出題」や、復習エリア（誤答が多い細胞）から特定の細胞を集中的に練習できます。
8. 解答数・正答率・連続正解数はブラウザの localStorage に保存されます。

iPhone / iPad でホーム画面に追加する

1. Safari で公開URLを開きます。
2. 共有ボタン（□に↑）をタップします。
3. 「ホーム画面に追加」 を選びます。
4. 追加後はアイコンから起動でき、初回表示以降はアプリ本体がオフラインでも起動します。

外部画像（Wikimedia Commons）は、オンライン時に表示した画像から順にキャッシュされます。iPhone では全画像の完全オフライン保証は難しいため、初回はオンラインでの利用を推奨します。

収録細胞（15種 / 画像 約34枚）

画像はすべて Wikimedia Commons の再利用可能な 単一細胞主体の顕微鏡写真 を厳選（模式図・イラスト・SVG・GIF は不使用）。各問に出典リンクがあります。

細胞	English	カテゴリ
好中球	Neutrophil	末梢血
桿状核好中球	Band neutrophil	末梢血
好酸球	Eosinophil	末梢血
好塩基球	Basophil	末梢血
リンパ球	Lymphocyte	末梢血
単球	Monocyte	末梢血
血小板	Platelet	末梢血
赤血球	Erythrocytes	末梢血
形質細胞	Plasma cell	骨髄
骨髄芽球	Myeloblast	骨髄
前骨髄球	Promyelocyte	骨髄
骨髄球	Myelocyte	骨髄
後骨髄球	Metamyelocyte	骨髄
前赤芽球	Proerythroblast	骨髄
巨核球	Megakaryocyte	骨髄

ファイル構成

index.html            画面
styles.css            スタイル
app.js                データ + 出題ロジック
manifest.webmanifest  PWA マニフェスト
sw.js                 Service Worker（本体・画像キャッシュ）
icon.svg              アプリアイコン
pages-qr.png          公開URLのQRコード
README.md             本ファイル
AGENT_SPEC.md         作成仕様書

GitHub Pages で公開する

リポジトリの Settings → Pages で、Source を Deploy from a branch、Branch を main、Folder を / (root) に設定すると公開されます。相対パス構成のためサブディレクトリ公開でもパスは壊れません。

Service Worker の更新

アプリを更新したら sw.js の CACHE_VERSION を上げてください（例 v1 → v2）。古いキャッシュが破棄され、新しい本体が配信されます。

ライセンス / 出典

各血球画像の著作権・ライセンスは Wikimedia Commons の各ファイルページに従います。アプリ内の各問「出典」リンクから元ファイルを確認できます。