03 医学生向けのAnkiテンプレート：学習環境を整えるための設定（後編）
Ankiの設定の中で最もカスタマイズ性に富むだろうものがこのテンプレート設定です。
vol2のAnki for meで大体のカードの情報に関する設定などは終えているので、既に演習の方法などに関する設定は終わっています。
しかし、テンプレートの設定をすることで勉強する内容や使っている機器に合わせて覚える内容の表示方法を変えることができます。このため、人により度合いは異なりますが、やっておけば必ず勉強の効率を変えてくれるだろう設定です。
このnoteを購入してくださった方には僕の使っているものの中で大衆向けに配布できるであろうテンプレートを配布します。
🔰 言語についてはとりあえず良いので、そこそこ良い感じなやつを使いたいと思う人はとりあえずテンプレートをダウンロード(購入者特典)して下さい。
また、Ankiのテンプレートについての簡単な説明は以下の記事で行っているのでそちらも合わせて参照ください。
更新履歴
2021-01-01 公開
2022-05-02 大幅改訂 テンプレート追加
テンプレートを使うべきメリット
見た目を改善することで学習効率をあげる
タグや自分が学習する内容の位置を変更できる
テキスト寄せや配色などを整えられる
iPadやスマホでのテキストや画像の大きさの変更
他のサイトやサービスへのリンクを貼ることができる
🔥 リンク遷移の自動化
アドオンを有効に使うことができる
見た目を改善することで学習効率をあげる
Ankiテンプレートはウェブ言語である、HTML/CSSで書かれます。完全ではないですが、Javascriptにも対応しています。
ウェブページなどと同じようにブロックを追加して、その見た目を変えることができます。
毎度使うようなものはそこで追加しておけば入力せずに済みます。また、最初の設定はただ平坦なテンプレートしかありませんが、カードの中の項目ごとに表示方法や色を変えることもできます。
iPadやスマホでのちょっとどうにかならないのをどうにかできる
Ankiは、元々パソコンで使うように作られています。そのため、デスクトップ版ではある機能も一部iPadやiPhoneでは使えません。
その際たる例としてアドオンがあります。僕はPC上ではアドオンで画像のサイズ変更をしていましたが、iPadではそれができません。
iOSショートカットを使えば同様の処理ができますが、全ての画像にやるのは大変です。しかし、もしやらなければ、スマホではある程度の画像の大きさ、iPadでは文字に対して画像が大きすぎる…なんて事態に陥りかねません。
それテンプレートの設定で改善できますよ
という1番の例です。
アドオンを上手く使える
アドオンの中にはテンプレート上での設定が必要なものもあります。
詳しくは後に説明します。
テンプレートの編集方法について
そもそもAnkiのテンプレートは、どのような仕組みになっているかわかりづらいです。
テンプレートは、カードタイプごとに作成することができ、カードタイプ内のフィールドを使用することができます。
カードタイプについて
Image occlusion enhancedを使用している場合には、カードタイプは主に下記の3つがあります。
表裏型
穴埋め型
image occulusion
このうちimage occulusionは性質上元々のテンプレートをそのまま使っています。また、表裏型のテンプレートは用途に応じて2種類に分けられます。今は面倒なので僕は同じテンプレートを使っています。
cloze用
image occulusion
CSV用、質問用
カードタイプの以下の項目をカスタマイズすることでテンプレートのカスタマイズを行うことできます。
フィールド
HTML/CSS
それぞれのカードタイプについて、入力項目であるフィールド、テンプレートの見え方を変えることのできるHTML,CSSを変更することで、テンプレートを変更します。
フィールドの編集や、HTML/CSSの編集画面の説明は以下の記事を参考にして下さい。
色は僕が選んだものなので気に入らないものもかなりあると思います。その辺りは以下のようなサイトを参考にして変更して下さい。カスタマイズ版は紹介してもらえるとセンスのない作者なので大変嬉しいです。
フィールドの項目
テンプレート上に常に表示したいものなどを表示するにはHTMLで項目を表示する必要があります。
そのうち、よく入力する項目などはフィールドとして管理することをおすすめします。
英語の勉強などでは複数を使うのが良いのですが、医学の勉強で複数を使うのは難しかったので、基本的に必要最低限のみを追加しています。
フィールドをテンプレートに作れば、特定の入力項目に対する表示方法などを変えることができます。
僕が元々のテンプレートに追加しているような項目には以下のようなものがあります。
- フィールドの設定（コメント、ノート欄）
- ボタン、Obsidian等のリンク（あれば）
- タグ（タグで詳細を説明）
このうち、内容を入力するコメント、ノート欄（clozeタイプのテンプレートの初期設定でExtraとなっているもの）のみフィールドで追加しています。
HTMLとCSSについて
他の項目は全てHTMLで追加、修正しています。そして、テンプレート上に存在する全ての項目をCSSで修飾しています。
色は僕が選んだものなので気に入らないものもかなりあると思います。その辺りは以下のようなサイトを参考にして変更して下さい。カスタマイズ版は紹介してもらえるとセンスのない作者なので大変嬉しいです。
※ 現在clozeのver 0.9としていますが、front/backや、今後cloze版の改良などを行う予定です。
テンプレートを編集する方法（総論）
新しいカードタイプを使用したい場合には、今回みたいに他の人からもらったものを読み込むか、新しくカードタイプをクローンする必要があります。
カードの欄からひらけば、エディターの画面が表示されます。
また、パソコン版ではカードから、アプリ版では書式からの変更ができます。
Anki特有の設定も多くあるので確認はこのエディター上で行なう方が良いのですが、編集がしづらいので、もし編集する場合には、AtomやVisual studio codeなどのエディターを使った方が良いと思います。
Anki特有のカード全体のカスタマイズ（HTML）
基本的なHTMLの使い方は…
などを参考にして下さい。
Ankiフィールドの扱い方
先ほど追加したフィールドを含め、全てのAnkiフィールドは、{{fieldname}}のような形で表されます。
自分が入力した項目を表示したい順にこれを並べれば、画面にフィールドが表示されます。
逆にいえば、フィールドを追加しても、記述しなければ表示されないので注意が必要です。
フィールドについて覚えておきたいことは主に
- フィールドにclassを設定してCSSを適応する方法
- フィールドが必要ないときに表示しない方法
- フィールドの内容を変数に組み込む方法
です。
このうちフィールドにCSSを適応する方法については、CSSの項目で併せて説明します（HTML/CSSが分かっていれば難しくないです。）
フィールドに書き込みが無いとき表示しない方法
フィールドにCSSを適応して、装飾を加えるとそのフィールドに書き込みがない際にただ邪魔な装飾のみが残ってしまいます。
先述した通り、医学の勉強では多くのフィールドを使い分けることはないかもしれませんが、一応知っておいて損はないと思います。
{{#fieldname}}{{fieldname}}{{/fieldname}}こんなふうに先ほどHTMLに記述したフィールドを囲い込むように書けば、入力がない時に表示されなくなります。
フィールドの内容を変数に組み込む方法
先ほどのフィールドの表し方をそのまま、コードに埋め込めば変数として扱うこともできます。
検索のボタンへのリンクや、特定の語を使ったブロックなどに使います。
Addonを使うための設定（HTML）
フィールド以外のHTMLの設定として、アドオンの対応があります。
パソコンを一切使わない人はしなくても構わないですが、パソコンを使うのであれば、便利なアドオンの導入をおすすめします。
僕が使っているアドオンの中でテンプレートに設定が必要なものには以下の2つがあります。
- edit
- hint（連続問題などに使える）
Edit field during review
Ankiのカードを演習している際に特定のフィールドだけ編集を加えることのできるアドオンです。
Ankiは1度作ったその後も必要に応じて知識や問い方などを変えていくことがあります。Edit field during reviewを設定しておけば、そのフィールドを演習画面で編集できるようになります。
{{edit:fieldname}}hint hotkey
少し負荷が大きめの問題を作る時にはヒントが使えます。ただし、モバイル版で開く方法がないので使用には注意が必要です。
※ ヒント自体はヒント項目として出てきます。
{{hint:fieldname}}少し応用して連続問題を作ることもできますが、上記の理由から少し難しいです。
トグルを導入する方法もありますが、ObsidianやNotionといったツールで導入して、Ankiでは必要に迫られた場合のみ直接記述するのが良いかもしれません。
辞書登録しておけば、すぐに入力することができるのであまり入力の手間もかかりません。
フィールドの項目を設定したら次はCSSの設定です。
CSSは何種類かに分けて設定します。
基本的には対象が多ければ多いほど上の方に書きます（僕の配布分でもそうなっています。）
CSSで指定する内容は大きく分けて以下のようになります。
- カード全体をカスタマイズする
- 項目の見た目を変える
- 個別にCSSを設定する
カード全体のカスタマイズ（CSS）
通常のCSSと同じようにclassを設定して、
HTML
<div class="classname">目的の場所</div>CSS
.classname{ }こんな風に書けば目的の場所にCSSが適応されます。
一般的なHTML/CSSの書き方と同じです。
Ankiでカード全体にカスタマイズを適応するためには、以下のように書きます。
.cardで始めるのはAnki特有です。
.card{}nightMode
まずはダークモードです。機器や人により好みが別れることと思いますので好みに併せて設定してください。
本体自体の設定とAnkiの設定は分けて設定できるので、普段設定しているものに関わらず、Anki上で使いやすいものを選ぶと良いと思います。
.nightModeと指定するとnightModeでの色を変えることができます。
また、アプリ上ではバーの色などはある程度変えられます。
機器別の設定の切り替え
基本的に端末での表示の変え方はメディアクエリを使うことが多いですが、.mobile、.ipadと個別に設定すれば困らないのでそのようにしています。
僕が機器ごとに変えているのは、文字の大きさと絶対のカードの配置、画像の大きさです。
- パソコンでの利用
- iPadでの利用
- スマホでの利用
この3つは解離しすぎて表示方法が全く違うので前々から困っていました。Ankiでは、モバイルとiPadは、それぞれ以下のように設定できます。
.mobile
.ipad文字の大きさは自分で設定するのが大変だったので少し特殊な方法で設定していますが、それぞれの文字の大きさを指定することもできます。
また、それ以外にもカードの周りの余白などを機器に応じて設定しています。
背景
背景の色を変えることができます。また必要に応じて画像にすることもできますが、あまりおすすめしません。
background-color:
background-image:;
文字寄せ
全体の文字寄せを設定できます。
基本的に医学のカードでは左寄せにするのがおすすめです。表裏の質問タイプのカードではcenterにしても良いのかなと思いますが。
text-align : left / center ;文字の大きさを変える
文字の大きさを全体として、また個別に変えることができます。
text-sizeのプロパティの設定は以下を参考にして下さい。
追加フィールドや危機によって、もしくはタイトルごとに文字の大きさを設定しておけばカードの演習時に、字の大きさに困ることもありません。
文字フォント切り替え
フォント周りの話は以下の記事が参考になるかと思います。
設定している項目は以下の3つです。
上2つは個々で設定、font-familyは全体に同じものを設定しています。
- font-style
- font-weight
- font-family
font-style、font-weightはそれぞれb,u,iでのみ変えているので後述します。
font-family
font-familyを指定すれば、Ankiカード上で表示するフォントを変えられます。デフォルトでは、Arialのみになっていますが、英語・日本語、機器などによって最適なフォントは違うので一応設定しておきましょう。
配布しているテンプレートでは、Androidでも表示されるようにしていますが、基本的にどの端末でも綺麗に映ると思います。
場所によってフォントを変えたいと思う人や別のフォントがいい人は順番だけ守って変更して下さい。
フォントは前から順に、英語→日本語の順で適応されます。このため、前半を英語フォントとして、Mac→Windowsの順で書きます。これでokです。
font-family:'Avenir','Helvetica Neue','Helvetica','Arial','Osaka','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic', Roboto ,'Droid Sans',sans-serif;入力項目のカスタマイズ
以下ではカード内に入力する項目について個別にカスタマイズしています。
cloze
.clozeとすれば穴埋め部分の文字を変えられます。
元々の設定では青文字になっていますが、ここは背景などに合わせて好きな色にすればいいと思います。元々の色をリスペクトして青系統の色を選んでいます。
b.u.i
b,u,iは、太字、アンダーライン、イタリックの意味です。元々ある何かを変えるというよりは、自分でそれぞれの内容を入力したものの太さや色を変えるために使っています。
僕は、goodnotes5などで赤青緑、黒の4色を利用していますが、Ankiでそのように色を変えるのは少し大変です。
なので、
b→赤色、太さ据え置き
cloze→青
i→フォントスタイルをノーマル、緑
このように3つ変えています。
使い方については詳しくは次のnoteで紹介します。
font-weight
font-weightは、文字の太さを変えるプロパティです。太字の部分は標準でBlodになっているので、解除しています。
（赤太字ってちょっと見にくいんですよね…）
font-style
font-styleには、normal、italic、obliqueの3つがあります。日本語ではほとんどイタリックを使わないので、イタリックの部分をnormalに変えています。
このようにすることで、ショートカットで決まった色に変更できるシステムが出来上がりました。
list
リストの色を自由に替えられます。
項目を羅列する際に使うlistも変えています。ここは変えても変えなくてもそれほど変わらず気持ちの問題かなと思います。"点"は、fontawesomeを使えば自由にアイコンを変えられます。また、今までと同じように色も変えられます。
自分の好みに合わせて変更すると楽しいと思います。
img
Ankiに挿入した画像はそのままの状態で表示されます。
元の画像が大きかったらかなり大きく表示されてしまうので、制限のかからない、パソコンやiPadで字とのバランスが崩れてしまいます。
そこで、端末に合わせて画像の大体の大きさを設定しています。
🔰 Ankiデッキテンプレート（cloze）
いただいたサポートは、今後の活動への資金として使わせていただきます！