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

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

関連記事

Anki

Anki: 次回の間隔[日]を算出するページを作りました

Ankiアプリにおける、次回の間隔[日]を算出するページを作りました。

WSL

WSL 2 の Kali Linux で Win-KeX (kali-win-kex) を使う場合の注意点

目次1. はじめに2. Win-KeX の使い方と注意点(1) Kali Linux の導入(2) kali-win-kex パッケージのインストール(3) 注意事項注意点 その1注意点 その2(4) …

Anki

Anki: JavaScript を使って「解答を表示」ボタンを押す

Anki: JavaScript を使って「解答を表示」ボタンを押す方法を紹介します。

Linux

前回 ./configure を実行した時に指定したオプションを確認する

目次1. 前置き (configure, make, make install)2. config.status ファイル(1) 前回 configure を実行した時の引数を表示する(2) 前回 c …

Linux

nvm を使っているUbuntu 16.04 LTS 環境に、yarn をインストールする

GitHub – creationix/nvm を使っている Ubuntu 16.04 LTS 環境に、Yarn をインストールする手順を紹介します。 Installation | Yar …