chromeのブックマークレットとは?登録方法やおすすめのブックマークレットを紹介!

chromeのブックマークレットとは?登録方法やおすすめのブックマークレットを紹介!

chromeなどブラウザで利用できるブックマークレットについて解説します。ブックマークレットとは何か、chromeでの作成・登録方法はどうやるのか、またおすすめのブックマークレット5選を便利なものからネタに近いものまでご紹介していきます。


目次

  1. chromeのブックマークレット
  2. chromeのブックマークレットとは
  3. chromeのブックマークレットの作り方・登録方法
  4. おすすめのchromeのブックマークレット5選!
  5. ブックマークレットが動かない時
  6. まとめ

chromeのブックマークレット

みなさんはchromeでブックマークレット(Bookmarklet)を使った事がありますでしょうか?

ブックマークレットって何?という方から普段使っているけどもっと便利ななブックマークレットがあれば登録してみたいと思っている方まで様々かと思います。

今回の記事ではブックマークレットとは何かという話から、chromeでのブックマークレットの作り方・登録方法とおすすめのブックマークレットをご紹介していきます。

chromeのブックマークレットとは

chromeなどブラウザで「ブックマーク」は利用したことがある方が大半かと思います。ブックマークはよくアクセスするWEBサイトのURLを携帯電話の電話帳のように登録しておき、すぐにアクセスできるようにしておく機能です。

実はブックマークレットも仕組みとしてはブックマークの機能を利用しています。ただし登録するのはURLではなくJavaScriptというプログラミング言語になります。

JavaScriptはWEBページでアニメーションなど動的な表現やWEBサイト上で様々な動作を可能にする技術です。このJavaScriptのプログラムをブックマーク上に登録しておき、呼び出す事でブックマークレットとして色々な機能を動かすことができます。

特にスマホではPCと比べてもブラウザの機能は少ないです。そこで足りない機能を補うためにブックマークレットを作成して、利用している方も多いです。

chromeのブックマークレットの作り方・登録方法

それではまず自作でのchromeのブックマークレットの作り方と登録方法をご紹介します。自身でブックマークレットを1から作成する機会は中々ないかもしれませんが、簡単に作れるサンプルをご用意しました。

以下のJavaScriptをコピーしておいて下さい。内容としては今日の日付を表示するJavaScriptです。

javascript:alert(new Date());void(0);
chromeのメニュー
chromeのメニューから「ブックマークに追加...」を選択しましょう。
ブックマークの編集
立ち上がったウィンドウで「その他...」を選択すると、このようなブックマークの名前とURLと保存先を編集できる画面となります。

ブックマークレットはブックマークレット用にフォルダを用意して管理するのがおすすめです。名前には適当に「今日の日付」、URLに先程コピーしたJavaScriptを貼り付けし、保存しましょう。

それではブックマークを開き、先程登録したブックマークレットをブックマークの一覧から検索して、実行してみましょう。

サンプルのブックマークレットの実行結果
サンプルのブックマークレットが実行されると、現在の時刻が表示されるかと思います。これでブックマークレットの作成と、実行まで完了しました。

ブックマークレットの使い方はブックマークレットによって異なりますが、基本的な使い方としてはブックマークからブックマークレットを選択して実行するだけです。

chromeのブックマークレットの作り方・登録方法

  • ブックマークレットのJavaScriptを用意する
  • 通常のブックマークの追加で、URLをブックマークレットのJavaScriptにする
  • ブックマークレット用にフォルダを用意して、通常のブックマークと区別できるようにするのがおすすめ

今回Chromeのブックマークレットの登録方法をご紹介してきました。

ブックマークレットが配布されているサイトにはよく、ブックマークレットが動作するリンクやボタンが配置されていて、それをお気に入りバーにドラッグ&ドロップすることでブックマークレット登録する方法もあります。

お気に入りの登録でURLの箇所にJavaScriptを入力する、お気に入りバーにドラッグ&ドロップする方法もいずれにせよブックマーク上に登録するという事は変わりませんので、どちらの作り方でもOKです。

おすすめのchromeのブックマークレット5選!

それでは次におすすめのchromeのブックマークレットをご紹介していきます。

ブックマークレットは自分で1から作成しなくてもすでに世界中のエンジニアやブックマークレットを使って便利に操作したいと考えている方が作成しているものがインターネット上にあります。

今回はおすすめのブックマークレットをピックアップしてご紹介していきます。

Googleの検索結果で自分の好みを消す

googleの検索結果は人によって変わりますが、自分の好みをgoogleが把握していて、それにあわせて検索結果をかえています。

SEOの運用などでメディアに携わっている方は常にシークレットウィンドウで見ている方も多いかと思います。

下記のブックマークレットを登録すると、Googleの検索結果ページで「pwd=0」というパラメータをつけた状態になり、自分の好みが消えるので便利です。

javascript:(function(){location.href=location.href+'&pws=0'})();

Layout Grid

サイトのレイアウトをグリッド表示してくれるブックマークレットです。

開発やデザイン時に要素同士の間隔を数値で出したいときに便利。

javascript:void(myDiv=document.createElement('div'));void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));

Wikipedia

カーソルでアクティブになっているワードをWikipediaで検索してくれます。Wikipediaのサイトを開かなくても一発で検索できるので便利です。

javascript:s=document.getSelection();for(i=0;i < frames.length;i++)%7Bif(s)break;s=frames%5Bi%5D.document.getSelection();%7Dif(!s)void(s=prompt('Enter%20search%20terms%20for%20Wikipedia',''));wikiw=open('http://ja.wikipedia.org/'+(s?'w/wiki.phtml?search='+encodeURIComponent(s):''));wikiw.focus();

単語をフォーカスした状態でブックマークレットを実行しましょう。

Google翻訳

現在見ているサイトをまとめてGoogle翻訳するブックマークレットです。

javascript:var u=location.href;location.href='http%3a%2f%2ftranslate%2egoogle%2ecom%2ftranslate%3flangpair%3den%7cja%26u%3d'+u;
Google翻訳
英語サイトにアクセスして、ブックマークレットを起動すると、翻訳のページに遷移します。

もちろんGoogle翻訳の機能として、言語の選択などは後でも行なえます。デフォルト英語→日本語です。

MouseLight.js

こちらに掲載されているブックマークレットです。
https://github.com/Krazete/bookmarklets

MouseLight.js
マウスの動きにあわせてサイト上にライトを表示してくれれるブックマークレットです。

以下のJavaScriptで動作します。
javascript:(function(){var js=document.body.appendChild(document.createElement("script"));js.onerror=function(){alert("Sorry, the script could not be loaded.")};js.src="https://rawgit.com/Krazete/bookmarklets/master/mouselight.js"})();

ブックマークレットが動かない時

ブックマークレットが動かない場合は原因は様々です。

  • JavaScriptにエラーがあるブックマークレット
  • ブラウザが対応していない
  • Chromeの拡張機能など外部要因でエラーになる
  • ネットワークのエラー
  • 正しくブックマークレットを起動できないない

などなどいくつかあります。一度ブックマークレットを登録しなおしてみたり、ブラウザをかえてみたり、再読込などをして試してみましょう。

まとめ

いかがでしたでしょうか。便利なものから、ネタに近いものまでおすすめのブックマークレットをご紹介しました。

今回ご紹介したおすすめのブックマークレット以外にもネット上にはとても便利なブックマークレットが落ちています。一度ご自身でも探してみると面白い発見があるかもしれません。

ブックマークレットはJavaScriptを動かしているだけなので、同じくJavaScriptから出来ているChromeの拡張機能も同じようなものです。

また今回ご紹介した機能と近い事を実現するランチャーなどを入れてもいいかもしれません。ランチャーの場合はChromeのアプリの外でも使えますので、便利です。

Macでおすすめのランチャーである「Alfred」をご紹介していますので、ぜひ一度見てみて下さい。

Macの神アプリ「Alfred」の使い方をマスターしよう!使い方と設定を優しく解説!

Macの神アプリ「Alfred」の使い方と設定を解説していきます。Macユーザーに人気のランチャーアプリAlfredを使うことでファイル/Webでの検索、作業効率を高める事ができます。Alfredの導入から基本的な使い方・ワークフローまでご紹介していきます。

Thumb

関連記事