暗記カード生成器

単一ファイル(HTML+CSS+JavaScript)のクライアントサイドWebアプリケーションです。CSVを貼り付けるだけで、印刷・切り取り可能な暗記カード(両面印刷対応)を自動的に生成します。ダウンロードすればオフラインでも利用可能です。

動作環境としてJavaScriptが動作するモダンなWebブラウザー(例: Chrome, Firefox, Edge)が必要です。

NodeJSが利用可能な環境では暗記カードCLIを用いてコマンドラインからPDFファイルを生成可能です。

主要な特徴

• 単一HTMLファイルで完結(オンライン・オフライン利用可)。
• CSVを貼り付けるだけでプレビュー・印刷可能。
• 表(表面) / 裏(裏面)に個別のインラインCSSを適用可能(CSVの3・4 列目)。
• 両面印刷時に裏面の並び順を制御する「反転方向」の設定(水平 / 垂直 / 両方 / 無)。
• 行数・列数、表のサイズ(mm)、フォントサイズ(pt)、罫線幅(mm)、グリッド線間隔(mm)などのカスタマイズ。

インストール / 開始方法

https://purl.org/meta/anki-card/にアクセスするか、リリースページからダウンロードしてください。NPMからインストールする場合、次のコマンドを実行してください。

npm install anki-card

使い方

1. HTMLページをWebブラウザーで開き、上部のテキストエリアにCSVを貼り付けます。
2. 行・列・表の幅(mm)などの設定を調整します。
3. 必要なら「HTMLタグを有効」にチェック(注意: 安全なデータのみ)。
4. Webブラウザーの印刷プレビューで確認後、プリンター側の両面印刷設定を調節し印刷します。
5. 印刷後に罫線に沿って鋏などで切り取ります。

CSVフォーマット

最大4列までサポート(カンマ区切り、改行でレコード区切り)。内部にカンマがある場合は引用符で囲んでください("...")。

• 列1: 表面のテキスト(必須)
• 列2: 裏面のテキスト(必須)
• 列3: 表面用のCSS(任意)
• 列4: 裏面用のCSS(任意)

例

H,水素,color:blue;
O,酸素
C,炭素,font-style:italic;

3列目・4列目を省略するとデフォルトのスタイルが適用されます。1列目・2列目に含まれるHTMLタグを有効にする場合は、「HTMLタグを有効」にチェックしてください。

UIの主要設定項目

• 行: 1ページあたりの行数。
• 列: 1ページあたりの列数。
• 反転方向: 両面印刷で裏面をどのように並べ替えるか(水平 / 垂直 / 両方 / 無)。
• 表の横幅 / 表の縦幅: カードテーブルのサイズ(mm)。
• 外側の線 / 内側の線: 罫線の太さ(mm)。内側はカード間の切り取り線。
• 表のフォントサイズ / 裏のフォントサイズ: 各面のフォントサイズ(pt)。
• グリッド線の間隔: 背景のグリッド線の表示間隔(mm)。
• HTMLタグを有効: CSV内のHTMLをそのまま挿入(信頼できるデータのみ)。

両面印刷

両面印刷時はプリンタードライバー側の「短辺で綴じる / 長辺で綴じる(flip on short / long edge)」設定が重要です。プリンターによって用語や挙動が異なります。

まずは1ページだけでテスト印刷を行い、切り取り後に表裏が合っているか確認してください。

「反転方向」設定を切り替えながら、プリンター設定(短辺 / 長辺)を合わせると正しい配置となります。

セキュリティと注意点

HTMLタグを有効にすると任意のHTML(およびスクリプト)が挿入されます。外部からの未検証CSVを入力するとXSSなどのWebブラウザー上での悪意のある動作を招く可能性があるため、必ず信頼できるデータのみで有効にしてください。

このアプリはクライアント側で完結し、入力データはサーバーに送信されません(ただしブラウザーや拡張による影響は受けます)。

トラブルシューティング

• 反応がない: WebブラウザーでJavaScriptが無効になっている可能性があります。JavaScriptを有効にしてください。
• CSVが正しく解析されない: 引用符やカンマの扱いを確認してください。内部解析はPapaParseを利用しています。
• 裏面の順序が合わない: プリンターの両面印刷設定(短辺 / 長辺)を変えてテスト印刷を行うか、あるいは「反転方向」の値を変更して再試行してください。

よくある質問(FAQ)

Q. CSV内に画像を入れられますか。 A. HTMLを有効にすると<img src="data:...">や<img src="https://example.com/...">などの画像が埋め込み可能です。ただし、オフライン時は外部画像にアクセスできない点に注意してください。

Q. 印刷したページの縁の余白をなくせますか。 A. 「表の横幅」と「表の縦幅」を用紙サイズに合わせ、印刷設定で縮尺は100%、余白を最小(0)に設定すると良いですが、多くのプリンターは物理的に端に余白が残るため完全にゼロにはならないことがあります。プリンターの仕様によってはトリムマークやトンボを活用してください。

利用例

• 九九
• 周期表