最強のAnki用単語学習Cardを作った

Mon, 17 Mar 2025 10:30:00 +0900

はじめに

皆さん、Ankiは使っていますか？ Ankiは、間隔反復学習システム(SRS)を採用した、非常に強力な暗記ツールです。私も長年Ankiを愛用しており、特に語学学習には欠かせない存在となっています。

今回、私がAnkiで英語の語彙学習をするにあたり、「こんな機能があったら最高なのに…」と思う理想のカードタイプを形にし、 GitHubで公開しました。この記事では、そのカードタイプ「Super Vocab」の紹介と、開発の経緯、そしてAnki/Emacsユーザーには嬉しい、 anki-editor を使ったカード作成方法について解説します。

理想の単語カードに求める機能

私が単語学習用のフラッシュカードに求める機能は、以下の5点です。

双方向学習: 単語を見て意味を答えるだけでなく、意味を見て単語を答える、両方向の学習ができること。
意味→単語カードでの例文表示: 意味から単語を答えるカードでは、定義だけでなく、例文や用例も表示すること。
- 理由：
  - 単語は例文や構文とセットで覚えることで、記憶に定着しやすくなる。
  - 同義語の微妙なニュアンスの違いを理解し、区別して覚えられる。
- ただし、例文中のターゲット単語は隠したい (ここがポイント！)
  - 理由：答えが見えてしまうとフラッシュカードの意味がないからカードの意味がないから。
単語→意味はシンプルに: 単語から意味を答えるカードでは、単語以外の情報は極力表示しないこと。
- 理由: 例文などがあると、単語の意味を推測できてしまい、フラッシュカード本来の目的（想起訓練）が損なわれるため。
簡単に単語を追加でき、経験と結びつけられる: 読書などで出会った単語を、その文脈（例文）ごと簡単にカードに追加できること。
- 理由: 自分の経験と単語を結びつけることで、より深く記憶に刻み込むため。
柔軟な情報追加: 発音記号、品詞、関連語、語源、メモ、ヒント画像など、単語に関するあらゆる情報を簡単に追加できること。

既存のカードとの比較、そしてSuper Vocab誕生へ

AnkiWebを探しても、上記の機能を全て満たすカードタイプは見つかりませんでした。特に、2番目と3番目の要件（文脈付きの意味→単語カードで、ターゲット単語を自動的に隠す）を満たすものは皆無でした。

Ankiの標準機能であるクローズ削除（穴埋め問題）を使えば、この要件に近いものは作れます。しかし、例文が増えるほど手作業でのクローズ削除は大変です。

「JavaScriptなどを使って、自動的に単語を隠せないか？」

そう考えていた時、English vocab (note type) という素晴らしいカードタイプに出会いました。このカードタイプは、まさに私が求めていた自動クローズ削除機能を備えていました！しかし、惜しいことに、上記の要件を全て満たしているわけではありません。

そこで、私はこの「English vocab (note type)」をベースに、自分の理想とする機能を全て盛り込んだ、究極の単語カード「Super Vocab」を作ることにしました。

anki-editorとEmacs、立ちはだかる壁、そしてPull Requestへ

私は普段、Ankiのカード作成にanki-editorというEmacs packageを使っています。 org-modeで構造化されたノートをAnkiに簡単に取り込める、非常に便利なツールです。

Super Vocabのカードタイプも、anki-editorを使ってEmacsからAnkiに送信しようとしました。しかし、ここで問題が発生しました。

通常、anki-editorはorg-modeのノートをHTMLに変換してAnkiに送信します。しかし、HTMLに変換してしまうと、Super VocabのJavaScriptによる自動クローズ削除機能が動作しなくなってしまうのです。

anki-editorには :ANKI_FORMAT: nil というオプションがあり、これを使うとHTML変換を無効にできます。しかし、このオプションは全てのフィールドに適用されてしまい、カードの見た目（HTML/CSSによる装飾）も失われてしまいます。

「特定のフィールドだけ、HTML変換せずに生のテキストとしてAnkiに送りたい…」

しかし、anki-editorにはそのような機能はありませんでした。

emacsをupgradeしたらankiの数式が汚くなったので直した

Sun, 24 Nov 2024 15:41:00 +0900

導入

こんにちは。私は日頃からanki-editor を使ってAnkiのカードを作成しているのですが、 Emacsをupgradeすると、数式が汚く表示されるようになってしまいました。

症状としては、

デスクトップ版のAnkiのBrowserで各Fieldのプレビューで数式が数式として表示されない (plain latex codeとして表示される)
数式がpng画像として表示される (もともとはMathJax inlineで表示されていた)

というものでした。

デスクトップ版のAnkiでcardを編集することはほぼないので、1の症状についてはまだ許容範囲でしたが、 2のほうについては、数式の解像度だけ低くなったり、他の文字とのサイズが合わなくなったりして、かなり気になりました。

解決策

以下を config.org に追加することで解決しました。

(use-package! anki-editor
  :after org
  :init
  (setq-default anki-editor-latex-style 'mathjax))

この解決策に至った背景

anki-editor でpushされたカードは、HTMLに変換された状態でカードとして保存されます。うまく数式が表示されるカードのHTMLを見ると、数式は以下のように anki-mathjax というタグで囲まれていました。

<anki-mathjax block="true">1 + 1 = 3</anki-mathjax>

一方、今回の問題が発生したカードのHTMLを見ると、数式は以下のように p タグと [$$] で囲まれていました。

<p>[$$] 1 + 1 = 3 [/$$]</p>

したがって、anki-editorがorgテキストをHTMLに変換する部分で、問題が発生していることがわかりました。 anki-editor.el の中を見てみると、以下のように anki-editor-latex-style という変数によって、latexのスタイルを変更できるようになっており、今回の解決策に至りました。

(defun anki-editor--translate-latex-env (latex-code)
  (setq latex-code (replace-regexp-in-string "\n" "<br>" (org-html-encode-plain-text latex-code)))
  (cl-ecase anki-editor-latex-style
    (builtin (concat "[latex]<br>" latex-code "[/latex]"))
    (mathjax (concat "\\[<br>" latex-code "\\]"))))

読んでいただきありがとうございました。

Anki on かおるのブログ