ブログ

Web 閲覧中に分からない単語を調べるときは Goo 辞書を使っているので、goo 辞書で簡単に単語を調べることができるブックマークレットを作ろうとおもったら、うまくいかなかったので Greasemetal を利用して作った。

国語辞典 英和辞典 和英辞典 – goo辞書

ブックマークレットを諦めた理由

例のごとく下記のような感じでブックマークレットを作ったのですが、検索結果が文字化けを起こす。

<a href="javascript:var%20x=window.open('http://ext.dictionary.goo.ne.jp/srch/all/'+encodeURIComponent(window.getSelection())+'/m0e/','')" class="bookmarklet">goo 辞書で調べる</a>

goo 辞書で調べる

原因

キーワードの文字コードが EUC-JP で渡しているようで、単純に UTF-8 で URL エンコードをして渡しても文字化けを起こしてしまう。

URL エンコードの対処

JavaScript で EUC-JP の URL エンコードをする方法を調べていると Shift_JIS エンコードや EUC-JP エンコードなども可能な escape エンコード・デコード関数のライブラリを見つける。

【本家】
Escape Codec Library: ecl.js

【改良版】
ecl.js (Escape Codec Library) と Sleipnir の相性が悪い件について :: Drk7jp

これを流用して EUC-JP の URL エンコードをしようと試みたけど、ソースコードが長すぎて Google Chrome のブックマークできる URL の長さ制限に引っかかり断念。

ブックマークレットで外部jsファイルを読み込む

ブックマークレットで外部ファイルを読み込むことができるか調べてみるとどうやら可能らしい。
ブックマークレットで外部jsファイルを読み込む – perl 覚え書き日記 – Hatena::Group::Perl

その矢先に Greasemetal の存在を知り Greasemetal を試すことにする。

Greasemetal のユーザスクリプト

Greasemetal のダウンロード

下記から Greasemetal をダウンロードする。
Greasemetal – an Userscript Runtime for Google Chrome

ソースコード

下記のはてなブックマークカウンターのユーザスクリプトを参考に、Escape Codec Library の改良版の使う部分と組み合わせて作った。
Greasemetal, GreaseKit で使える UserJavaScript (自作中心) – 0x集積蔵

長くなったので、ユーザスクリプトをそのまま置いておきます。
goo 辞書で簡単にキーワードを検索する Greasemetal ユーザスクリプト

使い方

文字を選択して、右下に表示されている goo のアイコンをクリックすると選択した文字をを goo 辞書で検索してくれる。

問題点

• Greasemetal がユーザスクリプトを読み込むのが遅いのか、goo のアイコンが表示されるまでに時間がかかる。
• アイコンが右下に表示しているが、ちょっと使いづらい。※右クリックのメニューから選択とかできるようにしたい。
• たまにアイコンが表示されないときがある。※goo に限らず、はてなブックマークカウンター等のアイコンも同じように表示されない。

その他の参考になったメモ

今回調べ物をしていて、直接ではないけど参考になったリンク集。

encodeURIの問題点 – Java Script#30
JavaScriptでEUC-JPやSJISでのURLエンコードをしたい(出来るだけ軽く) – 文殊堂
window.getSelection と document.getSelection – hogehoge
Safari: window.getSelection() が返すオブジェクト (groundwalker.com)
[JavaScript] dataスキームURI生成（画像データのBase64変換）