ブックマークレットのおすすめ11選 JavaScriptのサンプルコードも紹介

Webブラウザーの機能を最大限に活用するために、ブックマークレットを使ってみたい人や自作したいと考えている人もいるでしょう。

この記事では、そのような人向けにSNSやWebページの閲覧などに役立つおすすめのブックマークレットとサンプルコードを紹介します。

この記事の目次

1 ブックマークレットはWebブラウザを便利にするプログラム
2 おすすめのブックマークレットとサンプルコード11選
3 ブックマークレットでWebブラウザをもっと便利にしよう

ブックマークレットはWebブラウザを便利にするプログラム

ブックマークレットとは、Webブラウザ上で利用するJavaScriptで記述された簡単なプログラムです。

ブックマークからすぐに起動できるため、Webブラウザの機能を手軽に拡張したいという場合に便利。

また、拡張機能が利用できないスマホでもっとWeb検索を快適に行いたいという場合にも役立つでしょう。

この記事もオススメ

【簡単4ステップ】ブックマークレットの作り方！ブラウザ作業を効率化

おすすめのブックマークレットとサンプルコード11選

ブックマークレットを早速使ってみたいという人向けにおすすめのサンプルを以下で紹介します。

サンプルコードは以下のWebサイトを参考にして掲載しています。必ず、自分の環境で動作確認を行ってから利用してください。

ブラウザの仕様やアップデートによって、ブックマークレットが使えないこともあります。

WhatFont

選択した文字のフォントの情報を取得するブックマークレットです。気に入ったフォントを見つけたときに、すぐに詳細を調べられます。

アイデアのヒントを逃さずにすぐに情報が取得できるため、デザイン系の職種の人におすすめのブックマークレットです。

WhatFont

ソーシャルてんこ盛り

対象のWebページのSNSでのシェア状況を簡単に調べられるブックマークレットです。SNSでどのくらい反応があった記事なのか、サクッと調べられます。

Web担当の人は、基本のマーケティングツールとして登録しておくとよいでしょう。

ソーシャルてんこ盛り

Twitterに閲覧中のWebページを投稿

Twitterに現在閲覧しているWebページの内容を投稿するブックマークレットです。

javascript:(function(){window.location=’twitter://post?message=’+encodeURIComponent(document.title)+’%20-%20’+encodeURIComponent(document.URL)})()

Facebookに閲覧しているWebページをシェア

Facebookに現在閲覧しているWebページをシェアするブックマークレットです。

javascript:var d=document,f=’http://www.facebook.com/share’,l=d.location,e=encodeURIComponent,p=’.php?src=bm&amp;v=4&amp;i=1338200799&amp;u=’+e(l.href)+’&amp;t=’+e(d.title);1;try{if (!/^(.*.)?facebook.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+’r’+p,’sharer’,’toolbar=0,status=0,resizable=1,width=626,height=436′))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

Webページを翻訳する

Bingの翻訳サービスである「Bing Translator」を起動するブックマークレットです。

javascript:(function(){var s=document.createElement(‘script’);s.setAttribute(‘src’,’//labs.microsofttranslator.com/bookmarklet/default.aspx?f=js&amp;to=ja’);s.setAttribute(‘type’,’text/javascript’);document.body.insertBefore(s,document.body.firstChild);}());

スマホでWebページ内を検索する

パソコンだと簡単に行えるWebページ内検索をスマホでも行えるようにするブックマークレットです。

javascript:void%28s%3Dprompt%28%27%E3%81%93%E3%81%AE%E3%83%9A%E3%83%BC%E3%82%B8%E3%82%92%E6%A4%9C%E7%B4%A2%3A%27%2C%27%27%29%29%3Bs%3D%27%28%27+s+%27%29%27%3Bx%3Dnew%20RegExp%28s%2C%27gi%27%29%3Brn%3DMath.floor%28Math.random%28%29*100%29%3Brid%3D%27z%27%20+%20rn%3Bb%20%3D%20document.body.innerHTML%3Bb%3Db.replace%28x%2C%27%3Cspan%20name%3D%27%20+%20rid%20+%20%27%20id%3D%27%20+%20rid%20+%20%27%20style%3D%5C%27color%3A%23000%3Bbackground-color%3Ayellow%3B%20font-weight%3Abold%3B%5C%27%3E%241%3C/span%3E%27%29%3Bvoid%28document.body.innerHTML%3Db%29%3Balert%28%27%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%20%27%20+%20document.getElementsByName%28rid%29.length%20+%20%27%20%E4%BB%B6%27%29%3Bwindow.scrollTo%280%2Cdocument.getElementsByName%28rid%29%5B0%5D.offsetTop%29%3B

YouTubeをリピート再生

通常はできないYouTubeのリピート再生を可能にするブックマークレットです。

javascript:location.href=location.href.search(‘youtube.com’)!=–1?location.href.replace(‘youtube.com’,‘youtuberepeat.com’):location.href.replace(‘youtuberepeat.com’,‘youtube.com’);

選択したキーワードをWikipediaで検索

選択したキーワードをWikipedia で検索するブックマークレットです。気になったキーワードの詳しい情報を手軽に知りたいときに役立ちます。

javascript:(function()%7Bvar%20f=function()%7Bvar%20t=getSelection().toString();if(t!==”)%7Bopen(‘http:%2F%2Fja.m.wikipedia.org%2Fwiki%3Fsearch=’+encodeURIComponent(t));return%20true;%7D%7D;f()%7C%7Cdocument.addEventListener(‘gesturestart’,f,false);%7D)();

Scrible

Webページへの書き込みと、そのファイルの保存や書き出しが行えるScribleのブックマークレットです。

Scrible

WebページのタイトルとURLをクリップボードにコピー

閲覧しているWebページのタイトルとURLをクリップボードにコピーできるブックマークレットです。

ブログの執筆などで、出典元やリンク先を挿入したい場合に役立ちます。ちょっとした機能ですが、Webメディアに関わる人にとって、じつはかなり重宝するブックマークレットと言えるでしょう。

javascript:(()=&gt;{var d=document,b=d.body,c=d.createElement.bind(d),t=c(“p”),p=c(‘p’);p.style.userSelect=’auto’;t.appendChild(p).textContent=d.title+“ | ”+location.href;b.appendChild(t);d.getSelection().selectAllChildren(t);d.execCommand(“copy”);b.removeChild(t)})()

参考：Qiita

Google マップで検索

Googleマップでの検索をスピーディーに行えるブックマークレットです。

Google 検索で場所を調べて、マップを開くという行程を短縮できてとても便利。

javascript:(function()%7Bvar%20t%3D%27%27%2B(window.getSelection%20%3F%20window.getSelection():%20document.getSelection%20%3F%20document.getSelection():%20document.selection.createRange().text)%3Bif(!t)%7BL%3Ddocument.location.href%3Bif(L.match(/(yahoo%5C.).%2B%3F.*p%3D(%5B%5E%26%5D%2B)/)%7C%7CL.match(/(amazon%5C.).%2B%3F.*field-keywords%3D(%5B%5E%26%5D%2B)/)%7C%7CL.match(/(%5C.wikipedia%5C.).%2B%5C/wiki%5C/(%5B%5E%5C/%5D%2B)/)%7C%7CL.match(/(youtube%5C.).%2Bsearch_query%3D(%5B%5E%26%5D%2B)/)%7C%7CL.match(/(%5C%3F.*%5Cb)q%3D(%5B%5E%26%5D%2B)/)%7C%7CL.match(/(%5C%23search%5C/)(%5B%5E%5C/%5D%2B)/))t%3DdecodeURIComponent(RegExp.%242)%3B%7Dif(!t)t%3Dprompt(%22%E6%A4%9C%E7%B4%A2%E3%83%95%E3%83%AC%E3%83%BC%E3%82%BA%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84:%22,%22%22)%3Bif(t)open(%27http://maps.google.co.jp/maps%3Fq%3D%27%2BencodeURIComponent(t)%2B%27%27,%27_blank%27)%3B%7D)()