ブックマークレットとは？

Last update 2018-05-07 22:24

ブックマークレットとはなんでしょう？私もつい最近までよく知らなかったのですが、実際にいじってみるとすごくこれが便利！
さて、ブックマークレットとは何か、なんですけれど、実際に簡単なブックマークレットを見てもらえばすぐにわかると思います。

動画でわかるブックマークレット

ブックマークレットとは、その名前からだいたい分かる通り、お気に入り(ブックマーク)を利用したブラウザの機能のことです。
今までブックマークというと、気に入ったサイトのURLを登録していつでも簡単にアクセスできるような使い方しかできませんでしたが、このURLの部分にJavaScriptを記入すると、あら不思議。ボタンをクリックした時にJavaScriptが実行されちゃうんです。

例えば？

例えば気に入ったページをtwitterやFacebookに投稿したいんだけれど、twitterのボタンや「いいね」ボタンが無かったり・・・なんてことがありますよね。
そんなページでも後で紹介する、つぶやきボタンのブックマークレットをクリックすると、新たにウインドウが開き、そのページに対してつぶやくことが出来ます。

最近老眼のせいか、たまにある小さな文字のサイトが読みにくくって・・・。なんて場合も、ブックマークレットに文字を大きくするJavaScriptを記載してクリックすれば、文字を強制的に大きくしたり・・・。

私はPHPと組み合わせて、ブックマークに入れるほどではないけれど、後でじっくり読みたい。なんてページをクリックすると保存して、後でPHPで作成したお気に入りページから開く。なんて使い方をしています。

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

では早速ブックマークレットを使ってみましょう。ブックマークレットはどのブラウザでも使用できますが、ここではInternet ExplorerとGoogle Chromeで使う方法を紹介したいと思います。
Firefoxでもほとんど同じ方法で使うことが出来ます。
Edgeは少し厄介で、別ページで紹介します。Edgeでブックマークレットを使うには

Internet Explorerでブックマークレット

まず、①メニューバーの「表示」をクリックし、②「ツールバー」を選択。
③「お気に入りバー」をクリックします。

するとメニューバーの下にスペースが表示されます。
ここが「お気に入りバー」と呼ばれるスペースで、お気に入りをここに表示させることが出来ます。
本来は頻繁にアクセスするお気に入りをここに登録して、すぐにアクセス出来るようにするのですが、この「お気に入りバー」にブックマークレットを登録してみます。

どのページでもいいのですが、今表示しているページのURLの左横にある小さなアイコンをマウスでクリックしたら、そのまま離さずに先ほど表示させた「お気に入りバー」にドラッグ。
「お気に入りバー」と重なったら、指を離します。

すると「お気に入りバー」に表示されたページがお気に入りとして登録されました。

続いてこの登録されたお気に入りを右クリックし・・・

「プロパティ」を選択します。

このような画面になるので、URLの部分を選択し、URLをすべて削除してください。

続いてこのURLが記載されていた部分に、

javascript:(function(){alert("こんにちは。世界！");})()

と入力し、「OK」をクリックします。

「お気に入りバー」に登録されたお気に入りをクリックします。

このようにアラートが表示され、「こんにちは。世界！」と表示されました。
本来はページにJavaScriptが記載されていないと、このようなアラートは表示させることが出来ませんが、ブックマークレットでは独自のJavaScriptを記入して、そのページに対して動作させることが出来ます。

Google Chromeの場合

Google Chromeの場合もやり方はほとんど同じ。
Chromeの右上にあるメニューボタンをクリック。

「ブックマーク」を選択し、「ブックマークバーを表示」を選択します。

どのページでもいいので表示されているページのURLの左横にある小さなアイコンをクリックしたら、そのまま離さずに・・・

ブックマークバーの位置までドラッグしたら、離します。

すると、このようにブックマークバーに表示させていたページが登録されます。

登録されたブックマークを右クリックし、「編集」をクリックします。

URLの部分に記載されているURLを削除します。

ここにJavaScriptを記載します。
例えば・・・

javascript:(function(){document.body.innerHTML="こんにちは。世界！";})()

と入力してみます。
「名前」の部分は適当に変更してください。
エンターキーを押して登録します。

登録したブックマークレットをクリックしてみます。

するとページが真っ白になって上の方に小さく、「こんにちは。世界！」と表示されました。

便利なブックマークレット集

上のサンプルだと、「それが出来たからってなんなの？」と言われそうなので、便利な私が考えたブックマークレットを紹介しておきます。

twitterに投稿ボタン

Twitterに投稿したいページに、ツイートボタンがない場合でもつぶやくことが出来ます。

javascript:(function(){window.open("https://twitter.com/intent/tweet?url="+encodeURI(document.location.href)+"&original_referer=" + encodeURI(document.location.href) + "&text=" + encodeURI(document.title))})()

Facebookに投稿

いいねボタンがないページをFacebookに投稿したい場合に使用します。

javascript:(function(){window.open("://www.facebook.com/sharer.php?u="+encodeURI(document.location.href)+"&t="+encodeURI(document.title))})()

はてなブックマーク

気に入ったページをはてなブックマークに保存したい場合に使用できます。

javascript:(function(){window.open("https://b.hatena.ne.jp/entry/"+encodeURI(document.location.href))})()

Pocketに保存

Pocketに保存したい場合に使用できます。

javascript:(function(){window.open("https://getpocket.com/edit?url="+encodeURI(document.location.href))})()

ページのリンクタグを取得

私のようにブログを書いている人は、とあるページヘリンクを貼りたい時に、ページのURLを取得し、ページタイトルをアンカーとするタグを作成してくれるブックマークが非常に便利です。

javascript:(function(){window.prompt("リンク" , '<a href="'+document.location.href+'" target="new">'+document.title+'</a>');})()

フォントを大きくする

CSSでフォントを小さく指定しているサイトってありますよね。そんなサイトでも文字を大きくするブックマークレットです。

javascript:(function(){document.head.innerHTML+="<style>body,h1,h2,h5,h3,h4,p,div,li{font-size: 24px !important;}</style>";})()

文字を強制的にメイリオに

ヤフーのトップページや、最近多い「游ゴシック体」のサイトを強制的に「メイリオ」にしてしまうブックマークレットです。

javascript:(function(){document.head.innerHTML+="<style>body,h1,h2,h5,h3,h4,p,div,li{font-family: 'メイリオ' !important;}</style>";})()

リンクを大きく

タブレットなどタッチ操作ができる端末でサイトを見ていると、リンクをタップしようとしたら、別のページを開いてしまった。なんてことありますよね。
そんな時にAタグで囲まれたアンカーの文字を大きくしてくれるブックマークレットです。

javascript:(function(){document.head.innerHTML+="<style>p a{vertical-align:middle; font-size:150% !important;}</style>";})()

ページ内の画像を削除

ページ内にある画像を全て削除します。
ただし、background-image などスタイルシートで指定された画像や、IFRAMEで外部のサイトをページ内に表示させている場合は、削除されない画像もあります。

javascript:(function(){document.body.innerHTML=document.body.innerHTML.replace(/<img[^>]+>/g , "")})()

まとめ

このようにある程度JavaScriptができる人であれば、ブックマークレットを利用して、ちょっと便利に使うことが出来ます。
JavaScriptができなくてもコピペだけで登録完了できるので、色々なサイトで公開されている便利なブックマークレットを登録しておけば、よりネットサーフィンが便利になると思います。

さて、私は、先程も書いたとおり、ブックマークレットとPHPを組み合わせて、ボタンをクリックするだけで、どんどんPHPにページのURLとタイトル、説明文を送信し、保存するプログラムを自作して便利に使用しています。
ブックマークに登録する程でもないけれど、後でチェックしておきたいページが有る場合、そのブックマークレットをクリックすれば、裏でPHPに送信してガンガン保存してくれる便利なプログラムになっています。
私はタブを40個や50個ぐらい平気で開いたままにしてしまうのですが、困るのがWindows Updateとかで再起動しなければならない時。
ブックマークに登録してしまうと後で整理が大変だし、ブックマークに入れるほどでもないし、かと言って再起動後にじっくり読みたいし・・・。
なんてときに役立っています。

いずれ機会があればソースを公開したいと思います。

ブックマークレットとは？