【Firefoxアドオン】DictionaryTooltip＋Stylishでポップアップ英辞郎

2015/04/15追記：
英辞郎 on the WEB (Space ALC) のサイトデザインが更新されました。
Stylishのスタイルは次のようにするとよいです：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("eowf.alc.co.jp") {
/* common settings */
  #logo {display: none !important;}
  
/* for small window mode   */
  #search {display: none}
  .paging_left_small {display: none !important;}
  .paging_small {display: none !important;}
  #small_title {margin-top: 0px !important;
                border-top: 0px !important;}
  #content {padding: 0px !important;}
  #desc {padding-top: 0px !important;
         padding-bottom: 0px !important;}
  #resultlist {padding-top: 0px !important;}
  .desc {padding-bottom: 1px !important;}

/* for normal mode   */
  .inner {display: block !important;}
  #leftbar {display: none !important;}
  .adSuperBanner {display: none !important;}
  #pr {display: none !important;}
  #common_wrap_limit {display: none !important;}
  .cartoon {display: none !important;}
}

追記終わり

2015/02/24追記：
英辞郎 on the WEB (SPACE ALC) に、Proの体験版が無期限で試用できるようになりました。
2015年4月からは、従来の(Proではない)バージョンだと、検索結果に例文が含まれなくなります。
これを踏まえての追記です。

まず、例文が検索されないのは問題外なので、Pro体験版に登録しましょう。無期限で無料です。

登録したら、FirefoxのアドオンStylishの「新しいスタイルを書く→白紙のスタイル」を選んで、出てきたウィンドウに次のように入力してください：

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("eowf.alc.co.jp") {
/* for small window mode   */
  #logo {display: none !important;}
  .slogansmall {display: none !important;}
  #title {display: none !important;}
  .smallpage {background: none !important;}
  #content {padding-top: 0 !important;}
  .desc {padding-bottom: 0 !important;}
  div.desc ol {margin-bottom: 0 !important;}

/* for normal mode   */
  /*   #topmenu > div:nth-child(3) {display: true !important;} */
  .result_page {background: none !important;}
  #cartoon {display: none !important;}
  #common_wrap_limit {display: none !important;}
  .slogan {display: none !important;}
  #result_search {margin-bottom: 0 !important;}
}

これは、英辞郎 on the WEB の表示からいらないものを取るさるためのものです。
具体的には、画面上部のロゴやテキストをカット、検索結果のリストの間隔を詰める、などです。
名前を適当に(例えば「minieijiro」など)をつけて、保存ボタンを押してください。

これが終わったら、次はFirefoxのアドオン Dictionay Tooltip の設定です。
Preference(設定画面)を開いて、「Add/Edit Custom Sites」タブに移り、「Add new site」をクリック、
「Site」に「ALC」、「Site URL」に「http://eowf.alc.co.jp/small/search?q=$$」と入力してSaveボタンを押してください。

あとは、Dictionary Tooltip をポップアップウィンドウから先ほど設定した「ALC」を選べば完了です。

追記終わり

Firefox前提で話を進めますが、おそらくChromeにも同等のプラグインや機能が存在すると思います。
Chrome使用者の方は適宜読み替えたり調べたりしたら同じことができると思います。

DictionaryTooltip

Dictionary Tooltipの、右の方にあるオレンジ色の「Download」ボタンからインストールできます。
このDictionaryTooltipというアドオン、ちょっと触ってみればわかりますが、非常に強力です。
DictionaryTooltipの設定からダブルクリックで検索を有効にすると、意味を知りたい単語をダブルクリックすればポップアップで辞書が出現します。
しかし、デフォルトではオンラインの英英辞書や英独辞書などのみが表示可能です。
SPACE ALC提供の英辞郎 on the WEBを追加しましょう。*1

まずはDictionaryTooltipの設定画面を開きます。下半分の「Add/Edit custom sites」タブへ移動し、Add new site →　Site name:ALC、　Site url:http://eow.alc.co.jp/search?q=$$　と入力しましょう。
ここまででDictionaryTooltipの設定は終わりです。
英単語をダブルクリックするとDictionaryTooltipのポップアップ画面があらわれるので、
ポップアップ画面下の「show dictionary」から先ほど作成した「ALC」を選びましょう。
一度選択すれば次回からは記憶されます。

ところで

ここから先は、英辞郎 on the WEB Pro(有料会員)になれば必要ない作業です。
ただひとつだけする作業は、先ほどのSite urlをPro用、http://eowp.alc.co.jp/search?q=$$へと変更するだけです(「p」が増えています)
有料会員になることを強く推奨します。

Stylish

DictionaryTooltipに英辞郎 on the WEBを導入するだけでもかなり便利ですが、さらに英辞郎 on the WEBをカスタマイズして見やすくしましょう。
導入するアドオンはStylishです。
Stylish :: Add-ons for Firefox
インストールしたら、Stylishによって追加された「S」マークのボタンから、「新しいスタイルを書く」→「白紙のスタイル」としましょう。
「名前」に「simplify ALC」などと入力し、下の大きなテキストエリアに次をコピペして保存ボタンを押したら終了です。

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("eow.alc.co.jp") {
  #AreaHeaderLeft {display:none !important;}
  #searchHeader {display:none !important;}
  .pr_text {display:none !important;}
  #sw {display:none !important;}
/*   #navigation {padding:0 0 0 0 !important;} */
/*   #navigation {display:none !important;} */
  .sas {margin:0 !important; font-size:12px !important;}
  #eijiro_img {display:none !important;}
/*   .clearfix navif {display:1 !important;} */
/*   #paging {margin-top: 0px font-size: 1 !important;} */
/*   #smallredfont {display:none !important;} */
  #introduceEowp {display:none !important;}
  #AreaUpperRight {display:none !important;}
  .sns {display:none !important;}
  #AreaFooter {display:none !important;}
  .eijiro_tit {display:none !important;}
  .search_area_left {width:450px !important;}
  .search_box {width:450px !important;}
  .s_txt1 {width: 300px !important;}
  #AreaUpperLeftContainer {margin-right: 0px !important;}
  #resultsArea > div:nth-child(2) {display:none !important}
  #AreaUpperLeftInner > div:nth-child(11) {display:none !important}
}

英辞郎 on the WEBへ行ってみてください。
なんか色々消えてると思います。
ついでに、DictionaryTooltipによる英辞郎ポップアップも見やすくなります。(というかこっちが主目的です)
ちなみこの設定だと、ナビゲーションバー(ページ移動用！)もろとも消し去るので相当不便です。
復活させたい人はさっきのコピペの
#navigation {display:none !important;}
を消去してください。(2014-10-24追記：下部の広告を削除，下部のナビゲーションバーを復活させました．上部のナビゲーションバーは邪魔なので消したままです．)

おわりに

しばらくこれで使ってみて、便利だったら有料会員になりましょう。
無料版はいつ仕様がかわったりするか謎です。
この記事も怒られそうです。

ちなみにHTMLもCSSもよくわからないので、上のコードはやばいくらいめちゃくちゃだと思います。誰かちゃんと書き直して

*1:ALCの利用規約を読むと、おそらくここまではセーフです。ポップアップでALCのウェブサイトを表示しているだけですので

keisukeのブログ

乱雑です！自分用のメモです！統計や機械学習の勉強と、読み物を書く練習と、備忘録用のブログ

【Firefoxアドオン】DictionaryTooltip＋Stylishでポップアップ英辞郎

DictionaryTooltip

ところで

Stylish

おわりに