本文へジャンプ

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

Posted by MD

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

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

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr