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

メールアドレスが公開されることはありません。

関連記事

Web Programming

Webプログラミングに役立つサービスたち

目次全般HTML, CSS, JS をすぐに試せるWebサービス他のサービスが使っている技術・ツールを知る多言語対応デザインレイアウトフォント関連ロゴ作成HTMLパーツジェネレーターオンラインエディタ …

Git

ファイル(もしくはディレクトリ)を Git による管理から外す手順

Git を使ってファイルやディレクトリの履歴を管理してきたけれど、特定のファイル(もしくはディレクトリ)を Git による管理から外す場合の手順です。 1. ファイル ファイルを実際に削除しつつ、イン …

Anki

Anki: テンプレート内でのみ使う画像ファイルとマスターとしての画像ファイル

Ankiにおける、テンプレート内でのみ使う画像ファイルと、マスターとしての画像ファイルについて書きました。

Windows

Putty でスクリーン上のやりとりをログファイルに保存する方法

目次1. はじめに2. Putty でログをとる手順3. ログファイルが既に存在していた場合の挙動設定4. おわりに 1. はじめに PuTTY とは、Windows用のターミナルエミュレータです。 …

Vim

vi (vim) の終了手順について

私の vi (vim) 終了手順について書いています。