英次郎 bookmarklet 別ウィンドウ版 とブックマークレット開発に便利なエクステンション

以前、作った 英次郎 bookmarklet に新しいウィンドウで開くことはできないか？というご要望をいただいたので、検索結果を別窓で開くバージョンを作りました。

英辞郎 (別窓版)

リンクをツールバーにドラッグするか右クリックで「お気に入り」に登録してお使いください。

別窓を開くために、"location.href="を"window.open()"に変更しただけです。

window.open() は、広告のポップウィンドウを開くためによく使われるので、広告のポップアップを防ぐ機能を持ったブラウザやツールバー(Googleツールバーとか)などを使われていると、動作しない場合があります。ポップアップブロック機能を解除する必要があります。


余談ですが。
ブックマークレットは、手軽で、効果も高いものなので、自分でチャレンジされる人が増えるといいなと思います。

公開されているブックマークレットのソースを見て変えてみるのが早道です。
自分の作りたい機能とよく似たブックマークレットを使って改造してみるのが簡単です。僕もそれで覚えました。

できたものを公開される方は、以下のページを読んでおくことをオススメします。

Bookmarklet - ブックマークレットを作成する際のポイント

もっと興味が出てきたなら、Javascriptについては、各種リファレンスが公開されてるのでそちらを三項に。

JavaScriptビジュアル・リファレンス シーズ エムディエヌコーポレーション 2004-11 売り上げランキング : 29,745 おすすめ平均 Amazonで詳しく見る by G-Tools

開発環境について。
Firefox をお使いの方は、以下のエクステンションがオススメです。

Mozilla Update :: Extensions -- More Info:FireBug - All Releases
https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox

コマンドライン感覚で、Javascriptを実行することができるデバッガです。
簡単なブックマークレットならこれですぐ試せます。
ブラウザウィンドウの下のアイコンからいつでも呼び出せるので便利です。

ページ内の要素も参照できるので、Greasemonkey用のスクリプトを作るときにも重宝しています。

例えば、↓の英次郎の検索結果のページで、FireBugに"document.getElementsByTagName('ul')[0].innerHTML"と打ち込めば、検索結果部分だけ見ることができます。

スペースアルク：英辞郎検索結果



やる気があれば選択した文字列の訳を画面遷移なしにツールチップで表示とかも作れそうな気が。提供元に怒られるかな？

他にも、いろいろHackする時に便利です。

例えば、Google ローカルで、FireBugに"gApplication"と打ち込めば、オブジェクトが返ってきます。その際に右端の"JS"をクリックすると、オブジェクトのプロパティが参照できます。

Google Maps(Local) で座標位置を取得するブックマークレットはこの機能を使って作りました。


さらに余談。
この記事のスクリーンショットは、Going My Wayさんが紹介されていた flickr and WEBIMAGER を使ってみました。

以前に紹介した Performancing for Firefox と組み合わせることで、スクリーンショットの入った記事が簡単に書けますね。