【Anki】カードにSkeLLを表示させようと思ったら躓いた話

僕は日頃からAnkiにお世話になっています。もうこれ無しじゃ英単語覚えられない。お陰様で学校の単語テストも全く苦じゃない。

さて、僕はテンプレートにガンガン手を入れて自分流のカードを作るのが好きなのですが、ある日SkeLL (優秀なコーパス) をiframeで表示させようと、

<iframe class="skell" width="100%" height="500" frameborder="0" 
src="https://skell.sketchengine.eu/#result?f=concordance&lang=en&query={{query}}">
</iframe>

というコードを裏のテンプレートに挿入したわけですね。

しかし何故か表示がバグっている！？！？　完全にアクセス拒否されたわけじゃないからX_Frame_OptionsがDENY/SAMEORIGINって訳じゃないし、Chromeで同じコードを動かしてみたら普通に動くから脳内？？？でした。

別にSkeLLじゃなくてCOCAでも良いかなーって思ってCOCAで実装しようと思ったら、URLでqueryの指定できないじゃん！！ってなったので諦めてSkeLLと戦うことに。

そこでRedditで質問してみたところ(何気にReddit初体験)、--disable-web-securityを追加してAnkiを起動してみたらどうか、というコメントが返ってきたが、CORSの問題ではなかったので解決せず。

そしたら素敵なアドオンを紹介してくれて、それで調査してみたところ原因は↓

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

なるほどCookieを読み込めてなかったのか。
ということでCookie Monsterをインストールして一件落着。

と思ったらAnkidroidでCookie読んでくれない。
仕方ないのでAndroidではDictionary.comのExamplesにお世話になることにしました。このサイトはしっかりExamplesのアンカー (#examples-section) があるから便利。他のサイトは大体X_Frame_Options入ってたので断念。

ここまでの一連の流れで丸3日持ってかれました。おかげで600個くらい期日カード溜まったわ。

結論: Redditは便利。期日カードは毎日こなさないとすぐ溜まるからやる。