Edited at

Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)


Mouse Dictionary

Chrome拡張の高速な英語辞書ツールです。

https://chrome.google.com/webstore/detail/mouse-dictionary/dnclbikcihnpjohihfcmmldgkjnebgnj

※Firefox版

https://addons.mozilla.org/ja/firefox/addon/mousedictionary/

とりわけ、ブラウザでよく技術文書を読む人(含自分)に最適かと思いますが、どなたでもご活用いただけます。

md_05.gif


ソースコード

https://github.com/wtetsu/mouse-dictionary

実装に関わる技術寄りの用語: Babel, React, webpack, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, deinja, クロスブラウザ, など。

※詳細は「Mouse Dictionaryの技術的な話」をご参照ください

https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb


特徴


  1. ローカルに辞書データを持つので高速(重要)

  2. 複数単語から成る熟語やイディオムの意味も自動的に表示(重要)

  3. 好きな辞書データを簡単にインポートできる(英辞郎オススメ)

  4. camelCaseとかsnake_caseみたいな表現も単語にバラして個々の意味を表示

  5. YouTube等の英語字幕にも使える

  6. ひと手間でPDF文書にも使える(後述)

  7. 日英データや英英データにも対応(後述)

  8. 小窓が邪魔

ブラウザの辞書ツールは1と2の特徴が本当に重要だと思っていて、これができると知らない表現を覚えることができる機会が圧倒的に増えます。


経緯

もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの死亡とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。


使い方


インストール

https://chrome.google.com/webstore/detail/mouse-dictionary/dnclbikcihnpjohihfcmmldgkjnebgnj


辞書データの作成

Mouse Dictionaryのアイコンを右クリック→オプションで設定画面を開く。

image.png

初めて設定画面を開くとき、こういうことをきかれます。

image.png

OKを押すと、自動的に辞書データが作成されます。

(ejdic-handデータが添付されています)

image.png

こうなったら成功です。

適当なページで、Chromeの右上に表示されていると思われるこの拡張のアイコンを押すと、

image.png

こんな感じになります。

image.png


英辞郎

このままでも45,586語のデータが入り便利にご活用いただけますが、熟語などもたくさん含んだ辞書データをインポートすると、格段に便利になります。

英辞郎が大変おすすめです。

https://booth.pm/ja/items/777563

というかむしろこの拡張は英辞郎を使うことを目的に作りました。なんとこんな素晴らしいものが500円以下です。。。

「Shift-JIS」「英辞郎テキストデータ」を選択し、辞書データファイルを選択して「LOAD」を押してください。

インポートにはさすがにちょっと時間がかかります。

image.png

終わりました。

image.png

これで熟語もザクザクひけます。

image.png


起動ショートカットキーの設定(追記)

Chromeで↓を開いてください。

chrome://extensions/shortcuts

あとは、こんな感じで設定できます。

image.png

個人的には、右手でマウスを操作しながら起動したいので、左手だけで押しやすいショートカットキーにしています。


PDFでの利用(追記)

いまのところ、以下のような方法が発見されています。


  • PDF.js + ローカルHTTPサーバ

  • PDF.jsのデモページを利用

  • Google Documentを利用する

  • Dropboxを利用する

「PDF.js + ローカルHTTPサーバ」がローカルで完結する点で便利かと思いますが、HTTPサーバを動かす必要があります。できない場合や面倒な場合は他の方法でも。


PDF.js + ローカルHTTPサーバ

PDF.jsとMouse Dictionaryで最高を手に入れる

どこかにPDFをアップロードする必要がないので便利です。こちらの例ではPHPが利用されていますが、HTTPサーバさえ立っていればいいので、Apacheでもnginxでもpython -m http.serverでもnodeのhttp-serverでもなんでも良いかと思います。


PDF.jsのデモページを利用

(引用。私のツイートではありません)


Google Document

(私のツイート)


Dropbox

DropboxにPDFファイルを入れてWeb経由で開く。


日英データや英英データ

簡単にインポートできる日英データを用意しました。UTF-8 + TSVでインポートしてください。

Dictionary data for Mouse Dictionary

(使用例)

md_04.gif

他、Mouse Dictionaryで使えれば便利そうなデータがあったら教えていただければ幸いです。


その他


Kaggleで動かない

iframeのせいです。Cross-extension messagingという仕組みで解決したので、詳しくはこちらをご覧ください。

KaggleでもMouse Dictionaryを使えるようにする

この仕組を利用すれば、別の拡張からMouse Dictionaryにテキストを送ることができます。これを応用すれば、たとえばですが、画像内のテキストを取得してMouse Dictionaryにテキストを送る、みたいな別拡張があれば、Mouse Dictionaryはそれ自身の機能拡張なしに、画像テキスト対応することができるようになるわけです(想像上の話です)


表示をカスタマイズしたい

見出し語をクリックすると画像検索とかSkELLとかに飛ぶようにすると便利です。

HTMLの知識があれば、mustacheスタイルのテンプレートでいろいろいじれるようになっています。内部的にはHogan.jsを利用しています。

詳しくはこちら。

HTML templates


リンク