1. ホーム
  2. コラム
  3. ブックマークレットで、ブラウザがもっと便利に!

ブックマークレットで、ブラウザがもっと便利に!

ブックマークレットを使って、ブラウザをより便利に使う方法をご紹介します。


ブックマークレットって何?

ブラウザで動く、JavaScriptで出来たプログラムです。
通常、ブラウザでブックマークをつくると、クリックした際にブックマークしたURLに遷移しますが、URLの代わりにJavaScriptのコードを登録することで、ブックマークからその機能を呼び出すことが出来るようになります。
これにより、場合によってはアドオンやプラグインを追加するよりも便利な機能を実装できたりします。

ブックマークレット作成のざっくりした流れ!!

1.入れ物としてブックマークをつくる。
2.名前をわかりやすいものに変更し(任意)、URL欄にJavaScriptを埋め込む。
3.動作を確認する。

1.ブックマークレットの入れ物になるブックマークをつくる!!

どこでもいいので、開いているページをブックマークします。

2.JavaScriptコードの登録!!

できたブックマークを右クリックし、編集(またはプロパティ)を開きます。

名前はブックマークしたページの名前になっているので、わかりやすいものに変更します。
(IEは「全般」タブの中に名前の変更があります)
そして、URLの欄を用意したJavaScriptに置き換えます。

今回は、Instagramの画像を抽出するコードを用意しました。
以下のサンプルコードをコピペしてみてください。

javascript: var head = document.getElementsByTagName('head'); var body = document.getElementsByTagName('body'); var image = document.getElementById('pImage_0'); var src = image.getAttribute('src'); var src = src.split('?'); window.location.href = src[0];

※Chrome:53 / FF:49 / IE:11 で動作確認を行なっておりますが、
動作確認済みのブラウザーをご利用の場合でも、ご利用環境によっては正しく動作しない場合がございます。(9/27追記)

3.動作確認!!

動作確認をします。Instagramのページを開き、気に入った写真を右クリックし、別タブ(別ウインドウ)で開きます。

開いた画面で、先ほど作ったブックマークレットをクリックすると…

画像が抽出されて直接保存できるようになりました。

プラグインやアドオンを入手して追加できる機能もありますが、余計な機能は必要なかったり起動が重くなったりして嫌だというときや、とても局所的な機能で有効なものが配布されていない場合、JavaScriptを書く手間もありますが、ブックマークレットで解決出来ることがたくさんあります。

お役立ていただければ幸いです。

メールでのお問い合わせ

■コラム執筆者

第1ビジネスユニット アカウントサービス第11ユニット 小林 直登

RSS