Tools

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

投稿日:2021年12月15日 更新日:

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

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

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

1つの方法は、フィールドの値に「識別用の情報」を含めた 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}} というフィールドの文字色を変えています。

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

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

📂-Tools
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Vim

Vim: 行番号の表示

Vim の行番号表示機能について説明します。 目次1. 前提とする環境2. 行番号表示に関する設定項目number (もしくは nu)relativenumber (もしくは rnu)3. この設定項 …

Evernote

Android 用 Evernote 8.9 で検索ができない問題

Android 用 Evernote バージョン 8.9 で検索ができない問題についての対応策を書いています。

Vim

Vim で複数行の先頭に連番を挿入する

Vim で複数行の先頭に連番を挿入する手順を紹介します。

Anki

Anki: 学習の流れを図にしました

Ankiにおける学習の流れを図にしました。

Chrome

DevTools の snippet をキーボード操作のみで実行する

DevTools の snippet をキーボードから実行する方法を紹介します。