Anki

back.html

{{FrontSide}}
<hr id="answer">
{{answer}}

<div id="search-container">
  <a class="search" id="bing-img-search" href="https://www.bing.com/images/search?safeSearch=Strict&setLang=en&mkt=en-US&q={{text:word}}&tsc=ImageBasicHover&qft=+filterui:license-L1">
    Bing
  </a>
  &nbsp;
  <a class="search" href="https://www.google.co.jp/search?q={{text:word}}&tbm=isch">
    Google
  </a>
</div>

<a id="auto-click-link-iOS" href="mkdictionaries:///?text={{text:word}}&category=en"></a>
<a id="auto-click-link-macOS" href="dict://{{text:word}}"}></a>

<script>
  function isIOS() {
    return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  }
  if (isIOS()) {
    document.getElementById("auto-click-link-iOS").click();
  } else {
    document.getElementById("auto-click-link-macOS").click();
    document.getElementById("bing-img-search").click();
  }
</script>

front.html

<div class="word">{{word}}</div>

style.css

.card {
  font-family: arial;
  font-size: 25px;
  text-align: center;
  color: black;
  background-color: white;
}

#auto-click-link-iOS { display:none; }
#auto-click-link-macOS { display:none; }

#search-container {
  text-align: left;
}

a.search {
  text-align: left;
  font-size: 0.8em;
  background-color: dimgray;
  padding: 0.3em;
  border-radius: 0.3em;
  color: white;
  text-decoration:none;
}

macOSでは画像検索と、辞書を同時に開く。Anki, ブラウザ、辞書が全部画面内に収まるようにレイアウトする。レイアウトはhttps://www.spectacleapp.com/ などを使ってショートカットキーでやると楽。

• 左上にAnki
• 右下に辞書
• 右半分にブラウザ(LImit Tab拡張でタブが無限に開くのを制限)

課題: ブラウザにフォーカスが移ってってしまうので、キーボードだけで操作ができない。