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

Mouse Dictionary

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

ダウンロード:
- Chrome版
- Firefox版 (設定変更未サポート)

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

md_05.gif

特徴

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

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

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

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

  • camelCase → camel case にバラす
  • snake_case → snake case にバラす
  • 不規則変化な過去形を含んでも問題なし(例: dealt with → deal with)
  • 単語を繋げてしまっているケースも熟語として認識(例: spinout → spin out)
  • 途中に形容詞などが挟まっても問題なし(例: make some modifications → make a modification)
  • 他いろいろ(例: changed our mind → change one's mind 等)

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

  • YouTube等の英語字幕にも使える
  • テキストボックス内の文章にも使える
  • ひと手間でPDF文書にも使える(後述)
  • 日英や英英にも対応(後述)

経緯

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

ソースコード

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

使い方

インストール

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

英辞郎

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

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

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

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

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

image.png

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

image.png

終わりました。

image.png

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

md_10.gif

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

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

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

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

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

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

その他

Kaggleで動かない

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

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

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

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

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

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

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

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

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

詳しくはこちら。
HTML templates

リンク

wtetsu
自作ゲーム勢
http://katatema.main.jp/
ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
コメント
この記事にコメントはありません。
あなたもコメントしてみませんか :)
すでにアカウントを持っている方は
ユーザーは見つかりませんでした