MD-Blog_Web Creative

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

みなさん作ったことはなくても、何かしらのブックマークレットを使ったことがある、目にしたことがあると思います。
例えば僕が結構良く使うブックマークレットに「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なので自分用ツールとしていろいろ作ってみるのも楽しいかも！？