ブラウザをちょっとだけ便利にするブックマークレットと使い方と、自分で作ったブックマークレットの紹介です。

目次

  • ひとつ上の階層へ
  • Amazonのアドレスを短く
  • ブックマークレットを使ってみる
  • ブックマークバーに登録する
  • 自作ブックマークレット

オッスおら悟空。
みんなブックマークレットって知ってるか?
そもそもブックマークレットとは…
とか、説明するのめんどくさいから使ってみよう。

ひとつ上の階層へ

saz_bkm_dir01

図の赤丸部分、ブックマークバーに
「ひとつ上の階層へ」というのがあるよね。
これがブックマークレット。

ん?
ただのブックマークじゃないかって?
まあ見ててよ。

saz_bkm_dir02

使うにはブックマーク同様にクリックすればいい。
「ひとつ上の階層へ」をクリック。

saz_bkm_dir03

分かったかな?
さらにクリック!

saz_bkm_dir04

クリック!

saz_bkm_dir05

まったく簡単だ

「ひとつ上の階層へ」をクリックするたびに、
アドレスの1階層上へと移動したね。
もちろんほかのサイトでも、どのページでも同じように使える。

別のを見てみよう。

Amazonのアドレスを短く

Amazonのアドレスってクソ長いじゃないですか。
例えばこんな具合。

http://www.amazon.co.jp/gp/product/400008173X/ref=s9_wishf_gw_d4_g14_t?ie=UTF8&colid=2NX72PBQWH55S&coliid=I3PFNUBRB5WQQO&pf_rd_m=AN1VRQENFRJN5&pf_rd_s=right-3&pf_rd_r=089R9JCQS6CB6NAT1YJJ&pf_rd_t=101&pf_rd_p=465866836&pf_rd_i=489986

この手の長いアドレスって、なにかとジャマ臭い。
メールで送ったら、勝手に途中で改行されて
相手に何も表示されないんだけど、とか文句言われたり。
見た目もブサイクだし。

そこでブックマークレットの出番ですよ!奥さん!

saz_bkm_amz01

あーこれはひどい。
ブラウザのアドレス欄に収まってないし。

saz_bkm_amz02

ここで「Amazonを短く」をクリック。

saz_bkm_amz03

おお!

これただのブックマークじゃないからね。
Amazonの商品ページなら、どのページでも使えるんだからね。

とまあ、こんな風に
見た目はブックマークと同じなんだけど、
なにかしらの機能を提供するのがブックマークレット。

ブックマークレットを使ってみる

ブックマークレットを使うには、

  1. ブラウザのブックマークバーに登録する
  2. 使いたい時に、登録したブックマークレットをクリック

ってすればいい。
さっそくやってみよう。

ブックマークバーに登録する

これがちょっとめんどくさい。
直接登録できないので、いったん仮のブックマークを作ってから
編集するというやり方をとる。
手順としてはこんな感じ。

  1. このページをブックマークする
  2. ブックマークレット本体をコピーする
  3. 作ったブックマークのURL欄に、本体をペースト
  4. 名前欄を書き換える

ひとつ上の階層へ

javascript:(function(){var l=location;var g=function(s){l.href=l.href.split(s).join('');};if(l.hash==''&&l.href.indexOf('#')>-1){g('#');}else if(l.hash!=''){g(l.hash);}else if(l.search!=''){g(l.search);}else{l.href=l.href.replace(/[^\/]+\/?$/,'');}})();

上のがブックマークレット本体。
これで早速試してみよう。

URLの変更するには、
Chromeなら右クリックメニューから「編集」を選べばいい。
IE、Firefoxなら右クリックメニューから「プロパティ」。

自作ブックマークレット

よく使う自作ブックマークレットを紹介。

Amazonのアドレスを短く

javascript:(function(){var a=document.getElementById('ASIN').value;document.location.href="http://www.amazon.co.jp/gp/product/"+a+"/";})();

Youtubeのアドレスを短く

Amazonのやつと同じように、アドレスを短くする。

javascript:(function(){ var l=document.location; var s=l.search; var q=s.replace('?',''); var a=q.split('&'); var h=l.hash; var e,v; for(var i=0;i<a.length;i++){ e=a[i].split('='); if(e[0]=='v')v=e[1]; } l.href=l.href.replace(h,'').replace(s,'')+'?v='+v; })();

ページタイトル+URLを表示

ページタイトル
URL

の形式でポップアップに表示します。メールとかにコピペする用。

javascript:(function(){var t=document.title;var u=location.href;var b='<textarea id="t" cols="80" rows="4">▽'+t+'\r'+u+'\r\r</textarea>';var w=window.open('','title&amp;url','width=600,height=200');w.document.write(b);var t = w.document.getElementById('t');t.focus();t.select();})();

aタグを生成

見ているページのリンクタグを生成します。

javascript:(function(){function o(s){prompt('',s)}var prefix='';var suffix='';var contents=document.title;var target='_blank';o(prefix+'<a>'+contents+'</a>'+suffix);})();

markdown形式のリンクを生成

markdownフォーマットで、見てるページのリンクを生成。

javascript:(function(){var t=document.title;var u=location.href;var m='['+t+']('+u+')';var h='<textarea id="t" cols="80" rows="4">'+m+'</textarea>';var w=window.open('','title&amp;url','width=600,height=200');w.document.write(h);var t = w.document.getElementById('t');t.focus();t.select();})();

下層ディレクトリから検索

Google検索には特定URLより下層から検索する機能があるんだけど、
これは見ているページ以下からGoolgeで検索します。
小窓に検索キーワードを入力してください。

javascript:(function(){d=document;u='http://www.google.com/search?hl=ja&amp;ie=%ie&amp;aq=f&amp;q=%s';u=u.replace('%ie',d.characterSet);k=prompt('Input Keyword');if(null!=k){u=u.replace('%s',k+escape('+site:'+d.location.href));void(window.open(u));}})();

この記事に興味をもった方

業務を改善するアイデアをお求めの方、
この記事を読んで弊社に興味を持たれた方、
こちらからお問い合わせください。


履歴

2015.06.01 初稿

近況

TDLこと東京ディズニーランドへ行くことになった。
降水確率50%。天気が心配だ…。

♪あの楽しそうなディズニーランドへ~
いっしょに行こうよって~
でも僕は行く気がしない~
なぜなら彼は気が狂ってるから~