LoginSignup
1
4

More than 3 years have passed since last update.

Ankiの回答画面にGoogleの検索リンクを追加する

Last updated at Posted at 2019-08-12

暗記学習用アプリ「Anki」について

Anki」は、Damien Elmes氏によって開発されたオープンソースの学習用アプリです。
問題文と解答をペアにした暗記カードの問題集を自作、もしくは他のユーザーによって作成された問題集をダウンロードして学習に利用できます。
正答するごとに次回出題までの期間が伸びるのが特徴で、間違えた問題は答えられるようになるまで頻繁に出題される一方、簡単な問題の出題頻度は下がっていくという設計になっています。

Googleの検索リンクを追加

私は現在同アプリを世界史の学習に利用していますが、回答したキーワードの詳細を検索したくなることがよくありました。
Ankiの出題/回答画面では素のJavaScriptを実行できるらしく、回答をクリックするとGoogleの検索ページに遷移するリンクを埋め込む機能を作ったので公開します。

ちなみに、以下に紹介する方法は、問題タイプが穴埋め問題(cloze)のみで利用可能です。「Front + Back」のようなシンプルなカードの場合の手順は、最後に記しておきます。
また、以下の手順の実行前には念の為バックアップをとって、自己の責任においてご利用ください

手順

まず、PC版のアプリから「ブラウザ」を起動して下記のような画面から編集したいカードタイプが使われている問題を選択します。
image.png
「カード…」というボタンをクリックすると、下記のような編集画面が出てきます。
image.png
今回は上記画像の「裏面のプレビュー」に表示されている回答画面で、「クレマンソー」をクリックしたら、Googleの検索結果をChromeやSafariなどのブラウザで開くリンクを挿入します。
そのためには、「裏面のテンプレート」欄に下記のスクリプトを追加してください。

<script>
var clzElms = document.getElementsByClassName('cloze');
  for(var i = 0; i<clzElms.length; i++) {
  var searchWord = clzElms.item(i).textContent;
clzElms.item(i).innerHTML = '<a href="https://www.google.com/search?q=' + searchWord + '">' + searchWord + '</a>';
}
</script>

すると、下記のように「クレマンソー」がリンクに変化したのがわかると思います。
image.png
クリックしてみると、検索結果がブラウザで開くようになりました。
image.png
もし、リンクの書式が見にくい場合には「書式(カード間で共有)」の欄に以下のCSSを追加します。

a:link{
 color: lightblue;
 text-decoration: none;
}

リンクを下記のように任意の書式で上書きできます。
image.png

穴埋め問題以外の場合

上記で紹介した方法は、出題タイプが穴埋め問題(cloze)のみで利用可能ですが、「Front + Back」のようなシンプルなカードの場合、「裏面のテンプレート」欄を以下のようにするだけで回答画面に検索結果のリンクを追加できます。

<a href="https://www.google.com/search?q={{Back}}">{{Back}}</a>

おわりに

Ankiは中身がPythonで書かれているらしくアドオン作成などは私には難しいと思いますが、今後もAnkiにゴミ機能を追加できたら随時お知らせしていこうと思います。

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4