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

# Mouse Dictionary

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

ダウンロード:
- [Chrome版](https://chrome.google.com/webstore/detail/mouse-dictionary/dnclbikcihnpjohihfcmmldgkjnebgnj)
- [Firefox版](https://addons.mozilla.org/ja/firefox/addon/mousedictionary/)


とりわけ、ブラウザでよく技術文書を読む人に最高の体験を提供できるように設計していますが、もちろんどなたでもご活用いただけます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/106401/57de929d-5f4b-22d1-2cfc-3c2cd78ee509.gif" width="600" />

PDFも対応
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/864a7856-f968-0633-dd0d-eff7dd48e2b8.gif" width="600" />

## 特徴

Mouse Dictionaryが最重視していること:

1. とにかく高速な体験を提供。1/60秒で辞書引き完了(たぶん理論上最速)
1. 単語や熟語の検出に強い
1. 好きな辞書データを簡単にインポートできる(熟語データの豊富な英辞郎オススメ)

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

その他、以下のような特徴もあります。

- **PDF文書にも標準対応**
- YouTube等の英語字幕にも使える
- テキストボックス内の文章にも使える
- 日英や英英にも対応(後述)
- 日本語解析もそこそこ賢い
- 技術文書にありがちなcamelCase, snake_caseみたいな表記にも問題なく使える


**「単語や熟語の検出に強い」** については、以下のような感じです。


| 例                                 | マウス下のテキスト      | 引ける語            |
| ---------------------------------- | ----------------------- | ------------------- |
| 単語にバラす                       | camelCase               | camel case          |
| 単語にバラす                       | snake_case              | snake case          |
| 不規則変化な過去形を含む           | dealt with              | deal, deal with     |
| 単語が繋がっていても熟語として認識 | spinout                 | spin out            |
| 途中に形容詞などが挟まる場合       | make some modifications | make a modification |
| 所有格                             | changed our mind        | change one's mind   |
| 綴りスタイルの違い                             | programme        | program   |
| 上記の他にもいろいろ                 | pros/cons | pros and cons |




## 経緯
もともと[MouseoverDictionary](https://addons.mozilla.org/ja/firefox/addon/mouseoverdictionary/)という素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。

## ソースコード

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

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

※詳細は「Mouse Dictionaryの技術的な話」をご参照ください
https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb


## 使い方

### インストール

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





### 辞書データの作成

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106401/b4c82442-d165-a5f1-5646-ff66db04bfcd.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/081557c1-c1d9-e483-917a-ddea5cdd8fb9.png)


OKを押すと、自動的に辞書データが作成されます。
([ejdic-hand](https://github.com/kujirahand/EJDict)データが添付されています)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/aa616da4-9143-7b7c-dfe5-a76e2307086d.png)


こうなったら成功です。

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106401/43cf3bf6-7173-6a33-1acc-15436ba9967b.png)

こんな感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/b7dabca0-e215-8501-1d6e-2ab0a7adba00.png)


### 英辞郎

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

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

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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/69a74a47-8323-9d07-5272-20097c57d184.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/b398cd02-fbf4-b041-9652-3b0086ecab3a.png)


終わりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/7888beb5-1d88-cddd-d920-11407dae65ab.png)


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

![md_10.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/a1cc7a8a-6abb-3393-e823-957ed182727e.gif)


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

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

chrome://extensions/shortcuts

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106401/45872162-4d2e-aab3-300e-4a5c767d477a.png)

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



## PDFでの利用

Mouse DictionaryはPDF文書に対しても使うことができます。これは他の辞書ツールにはない機能かと思います。

→この機能をどのように実装したかの技術的な話は[こちら](https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb#%E5%86%85%E8%94%B5pdf%E3%83%93%E3%83%A5%E3%83%BC%E3%82%A2)


Web上のPDF文書に使いたい場合は、通常通りMouse Dictionaryを起動してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/57de29d2-fdb7-a5b5-1446-979bb927829a.gif" width=600/>

ローカルのPDF文書に使いたい場合は、オプション画面からPDFビューアを起動して、ドラッグ&ドロップで開いてください。
(頻繁に使う場合はPDFビューアをブックマークしておくと便利)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/36377d3b-53e4-9398-92a3-aac5e7469e0d.gif" width=400/>


## 日英データや英英データ

Mouse Dictionaryは日本語テキストもそこそこうまく解析します。

(これはカーソルを右端の「ア」にかざしているのにもかかわらず「ウィキペディア」という語を認識して第一に表示してくれているの図)

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/6bcfcd96-b57a-ea64-0405-3f1f5660136f.png"/>


簡単にインポートできる日英データ:
- [EDICTベースのデータ](https://mouse-dictionary.netlify.app/data/)
- [和英辞郎](https://edp.booth.pm/items/2066537)



英日/日英のコンビネーション利用例:
![md_04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106401/32ae1e39-cb98-42be-dce7-dcc72d713b96.gif)


その他の簡単にインポートできるデータの情報はこちら。

https://github.com/wtetsu/mouse-dictionary/wiki/Download-dictionary-data

私は、上記の日英、英辞郎(英日)、略語郎をインポートしています。

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


## その他
### Kaggleで動かない

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

[KaggleでもMouse Dictionaryを使えるようにする](https://qiita.com/wtetsu/items/ec2b0fd0c5e379e9bb1a)

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


そももそKaggle以外のiframeなサイトにも対応したい場合は、こちらをインストールしてください。

- [Mouse Dictionary iframe support](https://chrome.google.com/webstore/detail/mouse-dictionary-iframe-s/nigglogmamjbcnljijokibobpcfgmdfn)


### Evernoteで動かない / 編集モードのConfluenceで動かない 

同上の理由です。↓をインストールすれば動きます。

- [Mouse Dictionary iframe support](https://chrome.google.com/webstore/detail/mouse-dictionary-iframe-s/nigglogmamjbcnljijokibobpcfgmdfn)


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

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

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

詳しくはこちら。
[HTML templates](https://github.com/wtetsu/mouse-dictionary/wiki/HTML-templates)

## リンク

- [公式サイト(日本語)](https://mouse-dictionary.netlify.app//ja/)
- [公式サイト(英語)](https://mouse-dictionary.netlify.app//en/)
- [Getting started](https://github.com/wtetsu/mouse-dictionary/wiki/Getting-started)
- [HTML templates](https://github.com/wtetsu/mouse-dictionary/wiki/HTML-templates)
- [Advanced features](https://github.com/wtetsu/mouse-dictionary/wiki/Advanced-features)