本文へジャンプ

オレオレブックマークレットを作ろう!

Posted by MONSTER DIVE

個人的に前から作ってみようと思っていた「ブックマークレット」をこれを機に作ってみたので、共有です。

みなさん作ったことはなくても、何かしらのブックマークレットを使ったことがある、目にしたことがあると思います。
例えば僕が結構良く使うブックマークレットに「SEOチェキ!」というものがあり、これを使うと簡単に自分のブログのGoogleページランクを調べるなど出来ます。一応使い方は以下のリンクをブラウザのブックマークに追加し、任意のページ上で実行。すると、SEOチェキ!というサイトの検索結果ページにダイレクトに飛ぶことができます。

SEOチェキ! (ブックマークレット)

どういう仕組かというと、ブックマークのページURLの欄に、javascriptの処理が書かれていて、ブックマークが押されたタイミングで実行されるというわけ。ただしその書き方にちょっとコツが。

  1. 「javascript:〜」で書き始める
  2. 改行無しで1行で書く

特別難しくも無いですね。これさえ覚えれば結構お手軽に作れるぜ!

...というわけで今回は「任意のページで実行すると、そのページのURLをTwitterで検索した結果のページを新規で開く」というブックマークレットを作ってみました。それがこれ。

上記のjavascriptをブラウザのブックマークに登録する(ページURLの欄にそのまま突っ込む)と使えます。これを例えば、http://shiawase-pan.asmik-ace.co.jp/cafe-mani/twitter/twitter.html のページ上で実行すると、このページのURLが含まれるtwitter上のつぶやきが見れたりします。

何をしてるかというと、

  • javascriptのlocation.hrefで今いるページのurlを取得
  • twitter検索結果ページurlのフォーマット(https://twitter.com/#!/search/検索文字列)に取得したurlを埋め込む
  • その際埋め込むurlはuriエンコード済みの文字列であることに注意(twitterの場合)
  • window.openで作成したurlを新規ページで開く

です。

今回は「今いるページのurlをtwitter上で検索する」というブックマークレットを作って、簡単にブックマークレットの説明をしてみましたが、書き方さえ覚えれば、あとはいつものjsなので自分用ツールとしていろいろ作ってみるのも楽しいかも!?

Recent Entries
MD EVENT REPORT
What's Hot?