https://github.com/wtetsu/mouse-dictionary/wiki/HTML-templates, WebExtensionsはChrome専用ではなく共通規格のようなものなので、FirefoxでもEdgeでも動かすことができます。, ...という名目になっているのですが、同じビルドが複数ブラウザでなにもせずに動くとかそんなうまい話があるわけはないと確信していたので、Mouse DictionaryはChrome専用機能として開発していました。その予想は半分合っていて半分間違っていました。, 意外と互換性あるな!という感じで嬉しい誤算でした。ただ、ユーザ設定の保存がいまいち安定できていないので、いまのところFirefoxビルドではユーザ設定は利用できなくしています。, 他の落とし穴としては、Firefoxではmanifest.jsonのversionが"0.9.0Beta"みたいな表記も許されるのですが、Chromeだとアルファベットを混ぜることができないというものがあります。, Safari拡張は互換性ぜんぜんない模様。対応予定はないです。 ejdic-handテキスト形式(UTF-8) パブリックドメイン、6万5600項目以上; 本ソフトに同梱; 英辞郎テキスト形式(Shift-JIS) ¥495、198万9500項目; おすすめ Chromeブラウザ内で高速に動作する辞書ツールです。 以下のような特徴があります。 ・とにかく高速な体験を提供(たぶん理論上最速) ・単語や熟語の検出に超強い ・好きな辞書データをインポート可能 ・オフラインでも利用可能 ・表示を柔軟にカスタマイズ可能 ・YouTube字幕 … 今回は、Google Chrome・Firefoxで使用できる英語辞書ツール「Mouse Dictionary」の紹介と使い方を説明していきます。 Chromeに英和辞書機能を追加するChrome拡張「 Mouse Dictionary 」がとても便利です。 マウスカーソルを英単語に合わせるだけで、瞬時に訳語を表示してくれます。 https://github.com/wtetsu/mouse-dictionary/issues/25, テンプレートを編集するとリアルタイムでプレビューが変更されます。ただ、キーボードを高速に叩いた時など、1キーごとにプレビューを更新するのは無駄なので、高頻度で変更した場合は、そのうちの最後の一回に更新が入るようになっています。これはdebounceで実現しています。, iframe対応のために、Cross-extension messagingを活用しています。詳細はこちら。, 小窓を移動したりリサイズしたりする仕組みです。仕組みと行っても既存の軽くていい感じのライブラリは見つからなかったので、完全に自前で実装しています。自前で書いた分、自分の好きなように挙動をつくることができました。実は端っこをダブルクリックでワープする機能とかもあります。, ソースはこの辺: Help us understand the problem. https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/storage.js, asyncにするためとアプリケーションコードから使いやすくするために、軽くラップしています。, そんなchrome.storage.localですが、たくさんのデータが入っている状態でも参照は高速です。どのくらい高速かというと、私の環境では、200万件以上のデータが入った状態で、50件のデータを取り出すのに6msとかで完了できるようです。実用上、一度に50件も取り出す必要はないので、Mouse Dictionaryの目標(1/60秒=約16ms)を考えても十分に高速と言えます。, 注意点として、getのAPIがこんな感じなので、50件のデータを引く場合はgetを50回呼ぶのではなく、一回だけ呼ぶようにしましょう。それさえ守れば高速に処理できます。, 前述の通り、辞書データの参照は、見出し語候補が数十個あっても一度に引けば十分な速度が出ることが期待できます。, そのため、Mouse Dictionaryは「多少無駄になってもいいので、ルックアップ候補を雑にたくさん作って一度に引いてアタリだけ表示する」という方針を採用できます。アタリがありそうな候補を慎重に生成するよりも、この雑な方針の方がずっと高速で便利なためです。, ルックアップ候補をつくるというのは、動詞の過去形を原型に戻したり、myをsomeone'sとかone'sにしたりとか、そういうのです。たとえば以下のような感じになります。, 当たり前ですが、辞書データの見出しにはふつう"dealt with"とも"on my own"とも書かれていません。"deal with"や"on one's own"なら見出しにある可能性があります。そのため、ルックアップ前に自動的に変換をしています。, 各ルックアップ候補の優先順位は自明ではないのですが、Mouse Dictionaryは以下のルールで作っています。, よきにはからって変換した方の文字列は、優先度を下げてルックアップします。その上で、長い表現このルールなら、おかしな順序で説明が表示されると感じる場面はあまりないと思います。, たとえば、dealt withにカーソルを合わせた際に、dealtがdeal withより上に表示されているのは、このルールに従っているためです。, 「多く」から「多く」「多い」「多」と、活用もまあ扱えます。これはdeinjaを利用して実現しています。まあこれも私がつくったやつですが…。(いい感じの既存ライブラリが見つからなかった), あと、日本語の単語をちゃんと認識して、カーソル位置が最初の文字に合わさっていなくても良きにはからってくれます。たとえば↓はカーソルを端にかざしているのにもかかわらず「ウィキペディア」という語を第一に表示してくれているの図です。, これは、たまたまなんとなくうまく動いているわけではなく、上記のような場所でも動くように工夫して作られているためです。, たとえば以下のYouTubeの字幕に使用している画像を御覧ください。"get"と"a very good commission"は(場所的な意味でもDOM的な意味でも)離れているのに、問題なく"get a commission"の意味を表示することができていますね。, ※ついでにいうと"get a very good commission"から見出し語の"get a commission"をとれるよう、うまく判断していますね, ※動画はThis is what happens when you reply to spam email | James Veitchより, ※EvernoteやConcluence上で動かすには、Mouse Dictionary iframe supportのインストールが必要です。, ソースはこの辺: オンマウスで英語辞書を表示するようになるブラウザー拡張機能「Mouse Dictionary」の評価とレビュー、ダウンロードや使い方を解説します。ウェブページ閲覧中に気になった英単語の意味をオンマウスで表示できるようにする Chrome / Firefox 対応のブラウザー拡張機能です。 What is going on with this article? https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/draggable.js, 一回マウスが通ったテキストと、そこからいろいろ処理して生成したDOMの対応を、短期的にメモリにキャッシュする、ShortCacheという仕組みを動かしています。, これにより、カーソルが同じテキストを複数回通過したときは、ストレージへのアクセスも必要なしに超高速で処理が完了します。, という目的で作った処理だったのですが、そもそもキャッシュなしでも処理が一瞬で完了するので、幸か不幸か期待していたほどの効果はありませんでした。しかし前述の通りMouse Dictionaryの負荷は少なければ少ないほどいいという考えがあるため、この仕組は残しています。, ソースはこの辺: ほとんどのArm IPが試し放題でスタートアップは年会費無料!?Arm Flexible Access, https://qiita.com/wtetsu/items/c43232c6c44918e977c9, https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/storage.js, This is what happens when you reply to spam email | James Veitch, https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/traverser.js, https://github.com/wtetsu/mouse-dictionary/blob/master/src/main/generator.js, https://github.com/wtetsu/mouse-dictionary/wiki/HTML-templates, https://github.com/wtetsu/mouse-dictionary/pull/1, https://github.com/wtetsu/mouse-dictionary/pull/3, https://github.com/wtetsu/mouse-dictionary/issues/25, https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/draggable.js, https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/shortcache.js, "dealt with"にカーソルを置く → ルックアップ候補は["dealt with", "dealt", "deal with", "deal"], "on my own"にカーソルを置く → ルックアップ候補は["on my own", "on my", "on", "on one's own", "on one's", "on someone's own", "on someone's"], you can read useful information later efficiently. ローカルに辞書データを持つので高速(重要) 2. Chrome拡張の高速な英語辞書ツールをつくりました 好きな辞書データを簡単にインポートできる(英辞郎オススメ) 4. camelCaseとかsnake_caseみたいな表現も単語にバラして個々の意味を表示 ブラウザの辞書ツールは1と2の特徴が本当に重要だと思っていて、これができると知らない表現を覚えることができる機会が圧倒的に増えます。 その他、以下のような特徴もあります。 1. https://github.com/wtetsu/mouse-dictionary おおまかにいうと、ただのWebExtensionsプロジェクトです。が、とくに速度を出すために、ちらほらバッドノウハウ的なものも必要になりました。 下記の辞書データに対応しています。dictionaryフォルダに入れておくと起動時に読み込みます. YouTube等の英語字幕にも使える 2. https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/shortcache.js. Mouse Dictionary is a super fast dictionary for Google Chrome. Mouse Dictionaryが最重視していること: 1. By following users and tags, you can catch up information on technical fields that you are interested in as a whole, By "stocking" the articles you like, you can search right away. 複数単語から成る熟語の検出に強い(重要) 3. Why not register and get more from Qiita? https://github.com/wtetsu/mouse-dictionary/blob/master/src/main/generator.js, イメージ検索や類語検索に飛ばす例: https://github.com/wtetsu/mouse-dictionary/blob/master/src/lib/traverser.js, ルックアップして発見した説明文字列からHTMLを生成する際には、テンプレートエンジンを利用しています。, で、速度を計測してみたら(Mouse Dictionaryの用途においては)Hogan.jsが高速で、APIも一度コンパイルした結果を再利用できるようになっていてかつ使いやすかったので、速度重視の方針からHoganを選びました。もうほぼメンテされていないという点は気になりましたが、とくにセキュリティリスクが報告されているわけでもないので良しとしました。, ちなみに説明テキスト表示部分のテンプレートはこんな感じになっています。これはオプション画面からカスタマイズできるので、多少HTMLの知識があれば、たとえば見出し({{head}})をクリックするとその単語をGoogleで検索する、といったことも可能です。キミだけのMouse Dictionaryを作り上げろ!, ソースはこの辺:

ǭぐるめ Ľ験版 ō刷 4, Âント Cm ŭ役 ťの子 9, Ãルク Ʌ Âクテル 11, ɬ滅の刃人気投票 Áがき ƛき方 4, Ãク ū Âれ Ű説 4, Desire ɖジャニ Mp3 21, Ő言 ȋ語 ĸ言 4, Ȉ空 Pso2 Ãロップ 10, ɫ校教師 11話 Áらすじ 11, ǫ内涼真 ļてる ĸ般人 35, Ɲ進 Ǝ点バイト 2ch 12, Ǜ性占い 2020 Ȫ生日 15, ļ那 Ȱ Âャンパー Â Ãレッジ Ãンタル 4, Ãインレイ 2020 4月 9, Âッカー 4種 ş玉 ť子 4, Âくわく Âーケストラ Ʌ置 4, ȳ状 Ɖ作り ŏ愛い 6, Ź野紫耀 Áっくりさん ļてない 48, Ãナソニック ɖ真 ŷ場 ɖ鎖 8, Âド戦記 Ÿ還 Áらすじ 5, Ō欧 ǔ性 Ƿみ物 5, Ņ生 ŏ愛い Ŀ護者 5, Âノス ƌパッチン ǔき残り 4,