テックキャンプのキャリア相談
資料請求はこちら

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

更新: 2021.03.02

>>No1エンジニア養成プログラム テックキャンプ

初めてのIT転職で読むべき!お役立ちebook3点セット

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

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

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

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

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

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

おすすめのブックマークレットとサンプルコード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&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のブックマークレットです。

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デザイナー転職を実現するスクール。教室でもオンラインでも学習が可能です。

テックキャンプには「徹底したサポート」と「やりきらせる学習環境」があるので、転職成功率は98%以上!実際に受講した人の体験談はこちら

今後のキャリアに迷っているなら、一度無料カウンセリングで相談してみませんか?無理な勧誘は一切致しませんので、お気軽にどうぞ。

ブックマークレットでWebブラウザをもっと便利にしよう

Webブラウザはブックマークレットを活用すると、情報収集の効率が大幅にアップします。

ブックマークレットだけでなく、Google ChromeやFirefoxといったをWebブラウザー利用している場合には、拡張機能をインストールして機能の拡張をするのももちろんありです。

そして、Webブラウザーに限定せず、デバイス向けのアプリをインストールして機能を拡張するという方法もあります。

大切なことは、そのような機能の向上の手段として、ブックマークレットを知っておくこと。

状況に応じてさまざまなツールを上手く使いこなせれば、自身のITリテラシーは大幅に向上するでしょう。

はじめての転職、何から始めればいいか分からないなら

「そろそろ転職したいけれど、失敗はしたくない……」そんな方へ、テックキャンプでは読むだけでIT転職が有利になる限定資料無料プレゼント中!

例えばこのような疑問はありませんか。
・未経験OKの求人へ応募するのは危ない?
・IT業界転職における“35歳限界説”は本当?
・手に職をつけて収入を安定させられる職種は?


資料では、転職でよくある疑問について丁寧に解説します。IT業界だけでなく、転職を考えている全ての方におすすめです。

限定資料を無料プレゼント中

この記事を書いた人

Kimura Hiroto
音楽・ITをはじめとするさまざまなジャンルのライティングを行っています。ITエンジニアの経験を生かし、テックキャンプ ブログでの執筆・編集を担当。好きな食べ物は豆腐。

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement