Webブラウザーの機能を最大限に活用するために、ブックマークレットを使ってみたい人や自作したいと考えている人もいるでしょう。
この記事では、そのような人向けにSNSやWebページの閲覧などに役立つおすすめのブックマークレットとサンプルコードを紹介します。
ブックマークレットはWebブラウザを便利にするプログラム
ブックマークレットとは、Webブラウザ上で利用するJavaScriptで記述された簡単なプログラムです。
ブックマークからすぐに起動できるため、Webブラウザの機能を手軽に拡張したいという場合に便利。
また、拡張機能が利用できないスマホでもっとWeb検索を快適に行いたいという場合にも役立つでしょう。
この記事もオススメ
おすすめのブックマークレットとサンプルコード11選
ブックマークレットを早速使ってみたいという人向けにおすすめのサンプルを以下で紹介します。
サンプルコードは以下のWebサイトを参考にして掲載しています。必ず、自分の環境で動作確認を行ってから利用してください。
ブラウザの仕様やアップデートによって、ブックマークレットが使えないこともあります。
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&v=4&i=1338200799&u=’+e(l.href)+’&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&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のブックマークレットです。
WebページのタイトルとURLをクリップボードにコピー
閲覧しているWebページのタイトルとURLをクリップボードにコピーできるブックマークレットです。
ブログの執筆などで、出典元やリンク先を挿入したい場合に役立ちます。ちょっとした機能ですが、Webメディアに関わる人にとって、じつはかなり重宝するブックマークレットと言えるでしょう。
javascript:(()=>{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)()
ブックマークレットでWebブラウザをもっと便利にしよう
Webブラウザはブックマークレットを活用すると、情報収集の効率が大幅にアップします。
ブックマークレットだけでなく、Google ChromeやFirefoxといったをWebブラウザー利用している場合には、拡張機能をインストールして機能の拡張をするのももちろんありです。
そして、Webブラウザーに限定せず、デバイス向けのアプリをインストールして機能を拡張するという方法もあります。
大切なことは、そのような機能の向上の手段として、ブックマークレットを知っておくこと。
状況に応じてさまざまなツールを上手く使いこなせれば、自身のITリテラシーは大幅に向上するでしょう。
この記事もオススメ
はじめての転職、何から始めればいいか分からないなら
「そろそろ転職したいけれど、失敗はしたくない……」そんな方へ、テックキャンプでは読むだけでIT転職が有利になる限定資料を無料プレゼント中！
例えばこのような疑問はありませんか。
・未経験OKの求人へ応募するのは危ない？
・IT業界転職における“35歳限界説”は本当？
・手に職をつけて収入を安定させられる職種は？
資料では、転職でよくある疑問について丁寧に解説します。IT業界だけでなく、転職を考えている全ての方におすすめです。
「自分がIT業界に向いているかどうか」など、IT転職に興味がある方は無料カウンセリングにもお気軽にお申し込みください。
