chromeのブックマークレット
みなさんはchromeでブックマークレット（Bookmarklet）を使った事がありますでしょうか？
ブックマークレットって何？という方から普段使っているけどもっと便利ななブックマークレットがあれば登録してみたいと思っている方まで様々かと思います。
今回の記事ではブックマークレットとは何かという話から、chromeでのブックマークレットの作り方・登録方法とおすすめのブックマークレットをご紹介していきます。
chromeのブックマークレットとは
chromeなどブラウザで「ブックマーク」は利用したことがある方が大半かと思います。ブックマークはよくアクセスするWEBサイトのURLを携帯電話の電話帳のように登録しておき、すぐにアクセスできるようにしておく機能です。
実はブックマークレットも仕組みとしてはブックマークの機能を利用しています。ただし登録するのはURLではなくJavaScriptというプログラミング言語になります。
JavaScriptはWEBページでアニメーションなど動的な表現やWEBサイト上で様々な動作を可能にする技術です。このJavaScriptのプログラムをブックマーク上に登録しておき、呼び出す事でブックマークレットとして色々な機能を動かすことができます。
特にスマホではPCと比べてもブラウザの機能は少ないです。そこで足りない機能を補うためにブックマークレットを作成して、利用している方も多いです。
chromeのブックマークレットの作り方・登録方法
それではまず自作でのchromeのブックマークレットの作り方と登録方法をご紹介します。自身でブックマークレットを１から作成する機会は中々ないかもしれませんが、簡単に作れるサンプルをご用意しました。
以下のJavaScriptをコピーしておいて下さい。内容としては今日の日付を表示するJavaScriptです。
javascript:alert(new Date());void(0);
ブックマークレットはブックマークレット用にフォルダを用意して管理するのがおすすめです。名前には適当に「今日の日付」、URLに先程コピーしたJavaScriptを貼り付けし、保存しましょう。
それではブックマークを開き、先程登録したブックマークレットをブックマークの一覧から検索して、実行してみましょう。
ブックマークレットの使い方はブックマークレットによって異なりますが、基本的な使い方としてはブックマークからブックマークレットを選択して実行するだけです。
chromeのブックマークレットの作り方・登録方法
- ブックマークレットのJavaScriptを用意する
- 通常のブックマークの追加で、URLをブックマークレットのJavaScriptにする
- ブックマークレット用にフォルダを用意して、通常のブックマークと区別できるようにするのがおすすめ
今回Chromeのブックマークレットの登録方法をご紹介してきました。
ブックマークレットが配布されているサイトにはよく、ブックマークレットが動作するリンクやボタンが配置されていて、それをお気に入りバーにドラッグ＆ドロップすることでブックマークレット登録する方法もあります。
お気に入りの登録でURLの箇所にJavaScriptを入力する、お気に入りバーにドラッグ＆ドロップする方法もいずれにせよブックマーク上に登録するという事は変わりませんので、どちらの作り方でもOKです。
おすすめのchromeのブックマークレット5選！
それでは次におすすめのchromeのブックマークレットをご紹介していきます。
ブックマークレットは自分で１から作成しなくてもすでに世界中のエンジニアやブックマークレットを使って便利に操作したいと考えている方が作成しているものがインターネット上にあります。
今回はおすすめのブックマークレットをピックアップしてご紹介していきます。
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翻訳の機能として、言語の選択などは後でも行なえます。デフォルト英語→日本語です。
MouseLight.js
こちらに掲載されているブックマークレットです。
https://github.com/Krazete/bookmarklets
以下の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」をご紹介していますので、ぜひ一度見てみて下さい。
