Anki のカードで、フィールドの値によって文字の色を変える

投稿日：2021年12月15日更新日：2021年12月17日

Anki のカードに何らかの「分類を表す文字列」を表示するとします。

例えば、学校の勉強内容を記述するカードを作成するのであれば、”数学”、”英語”、”国語” などといった教科の種類を表示することが考えられるでしょう。

では、このとき、この「教科の種類」によってカード上の特定部分の色を変えるにはどのような方法があるでしょうか？

１つの方法は、フィールドの値に「識別用の情報」を含めた HTML をセットしておくというものです。

例えば、以下のように class 属性を指定した span 要素をそのままデータとしてフィールドにセットしておきます。

<span class="math">数学</span>

そして、カードのテンプレートに class 毎のスタイルを記述しておけば、確かに目的を達成することができます。

しかし、このフィールドのデータとしては、本来 “数学” だけがセットされていればよいわけであり、HTMLの記述まで追加するのは、なんだか余計な作業をしているように感じます。表示用のフィールドを追加するにしても、割と面倒です。

ということで、本記事では、フィールドにHTMLを追加することなしに、JavaScript で色を変化させる方法を紹介します。

サンプル

以下がその例で、これをカードの表面のテンプレートに記述します。

<!-- フィールド Foo を表示する -->

<span id="foo">{{Foo}}</span>

<!-- フィールド Bar を表示する -->

<span id="bar">{{Bar}}</span>

<!-- 省略 -->

<script> 
(() => {
  // キー：Foo のそれぞれの値（文字列）
  // 値  ：それに対応する「色（16進数表現）」
  /// というペアのオブジェクトを用意する
  const fooColorMap = {
    'Foo_Value_1': '#AB5429',
    'Foo_Value_2': '#30497F',
    'Foo_Value_3': '#AE4361',
    'Foo_Value_4': '#3D7F15'
  }

  try {
    // {{Foo}} を囲んでいる span要素を取得します
    const foo = document.querySelector('#foo'),
      // 表示される {{Foo}} の値（文字列）を取得します
      fooText = foo.textContent,
      // {{Bar}} を保持する span要素を取得します
      bar = document.querySelector('#bar');

    // {{Foo}} に対応する色を fooColorMap オブジェクトから取得して
    // {{Bar}} のテキストの色として適用します
    bar.style.color = fooColorMap[fooText];
  } catch (e) {
    // do nothing
  }
})()
</script>

{{Foo}} というフィールドの文字列によって、{{Bar}} というフィールドの文字色を変えています。

何をやっているかについては、テンプレートに書いたコメントを読んで下さい。

こちらの方法がオススメです。

執筆者：labo