改善版：Ankiでカード上部にタグに応じた絵文字を表示する

はじめに

前に投稿したやり方をもっと簡単な方法に改善できた。

今回はそれを紹介する。

JavaScript以外は特に変わりがないので詳細は前回を参照ということで、今回は解説を省く。

手順

1. タグに絵文字を追加する

前回はJavaScriptでタグと絵文字の対応を管理していたが、そもそもタグに絵文字を含められたのでタグ自体に絵文字を入れてしまう。

例: tag1😀

2. カードのテンプレートを編集する

タグに絵文字が入っているのでその絵文字だけを取り出すようにする。

今回はその抽出条件として英数字にマッチしない文字を設定しているので、日本語とかその他もヒットするようになっている。

これは注意点ではあるが私はタグに英数字以外を使っていないしなるべく簡潔に書きたいのでこうした。

また、複数の絵文字がある場合を考慮してタグ内でいくつかある場合は連結するようにしている。

まずFront Template。

<div id="emoji-container"></div>
{{cloze:Text}}

<script>
(() => {
  const tags = '{{ Tags }}'.split(' ');

  const container = document.getElementById('emoji-container');

  tags.forEach(tag => {
    const emojiMatch = tag.match(/[^a-zA-Z0-9\s]/g);
    
    if (emojiMatch) {
      const div = document.createElement('div');
      div.textContent = emojiMatch.join('');
      container.appendChild(div);
    }
  });
})();
</script>

Back Templateについては追加部分が変わらないので省略する。

おわりに

よいAnkiライフを！ Happy Anking!

追記：Ankingに変な意味はないよなと考えて一応検索してみたら、Ankiの使い方を紹介する海外のサイトがヒットしたので既にあるんだ〜ってなった。