ブラウザで使える簡易プログラムでちょっと便利な生活を!!ブックマークレットって一体何？

ブックマークといえばお気に入り機能。自分の気に入ったサイトをブックマークに登録しておけば、ブラウザのメニューバーからすぐに飛べるというもの。

僕の場合はGoogleChromeを使っているので、上の方にブックマークが並んでいます。
しかし今回はブックマークではなくてブックマークレットのお話です。

ブックマークレット

ブックマークとブックマークレット。名前は似てますが全然違います。
とりあえずWikipediaから引用。

ユーザーがウェブブラウザのお気に入りなどに設置されたブックマークレットをクリックすると、ブックマークレットに記述されたJavaScriptの小さなプログラムが、ウェブブラウザで起動する。プログラムはページの外観や表示を変更したり、他の場所にジャンプしたり、子ウィンドウを表示したり、ウェブブラウザで表示中のウェブサイトのURLを取得したり、ユーザーに追加情報の入力を促したりする。一部のプログラムはクライアント上の処理が終わった後、ネットワーク上のサーバーにあるアプリケーションのWeb APIを呼び出して情報を渡し、処理を依頼する。サーバーのアプリケーションは処理を実行し、結果をユーザーのウェブブラウザに表示する。
ブックマークレット – Wikipediaより

長々と書いていますが、要するにJavascriptの簡易プログラムをブックマーク(お気に入り)しておいて、通常のブックマークと同じようにクリック1つで簡単に実行できるようにしておく事です。

ブックマークはリンクをお気に入りに追加しますが、ブックマークレットは簡易プログラムをお気に入りに追加する。と覚えておけば問題ないです

ブックマークレットの登録方法

今回は僕が一番よく使っているGoogle Chromeで登録方法を解説していきますが、基本的に他のブラウザでも同じように登録できます。

さて、ブックマークレットの登録には2種類の方法があります。

1.入力して追加する方法

1つ目は自分で入力して(コピペして)追加する方法です。
基本的にこちらの方法でブックマークレットは登録することになると思います。

まずはChromeを開いて「ブックマークマネージャー」を開きます。
Macの場合はメニューバーの「ブックマーク」から「ブックマークマネージャー」をクリック。ショートカットはCommandOptionB
Windowsの場合は、右の設定から「ブックマーク」「ブックマークマネージャー」をクリック。ショートカットはCtrlShiftO

ブックマークマネージャーを開いたらカーソルをブックマネージャー上に持っていって右クリック→「ページを追加」を選択します。

後は左のマスにブックマークレットの名前を入力して右のマスにはJavascriptを入力します。
入力し終わったらEnterで追加完了！

しかし一行にまとめないといけないので、基本的にはテキストエディタ等を使って記述したものをコピペする事をお勧めします。

2.ドラッグ&ドロップで追加する方法

もう1つはドラッグ&ドロップで追加する方法。
ネット上には色んなブックマークレットが公開されていますが、中には親切にリンクとしてブックマークレットを設置しているサイトもあります。
そういうサイトの場合はそのリンクを自分のブックマーク欄にドラッグ&ドロップするだけで登録が完了します。

言葉だけでは分かりにくいとは思いますので、今回はWebサイトを簡単にシェアする事ができるFacebookのブックマークレットを例にします。

Facebook

Facebookにログイン | Facebook

https://www.facebook.com/share_options.php

Facebookにログインして、友達や家族と写真や近況をシェアしましょう。

「Share on Facebook」と書かれてあるボタンをブックマーク欄にドラッグ&ドロップする。
それだけです。

便利なブックマークレット一覧

ここから先は僕が登録しているブックマークレットを幾つか紹介します。

FBにサイトをシェアする

まずは先ほども紹介したFacebookにサイトをシェアするブックマークレットから。
Facebookに何かサイトをシェアしたい時、シェアしたいWebサイトでこのブックマークレットを起動すると自動でサイトリンクが貼り付けられた状態のFacebookの投稿画面が開きます。

追加はhttps://www.facebook.com/share_options.phpより行えます。

Facebook

Facebookにログイン | Facebook

https://www.facebook.com/share_options.php

Facebookにログインして、友達や家族と写真や近況をシェアしましょう。

これを登録しておくとわざわざシェアするためだけにFacebookを開く必要がなくなります。

What Font Tool

What Font Toolは使用したWebサイトで使われているフォントが一体なんなのか分かるブックマークレットです。Chrome拡張機能と、Safari拡張機能にもあるのですが、そこはお好みでお選びください。

追加はhttp://www.chengyinliu.com/whatfont.htmlより行えます。

www.chengyinliu.com

WhatFont Tool - The easiest way to inspect fonts in webpages « Chengyin...

http://www.chengyinliu.com/whatfont.html

少しページを下へスクロールしていくと「HOW TO USE IT?」という項目があります。最初はChrome拡張機能が表示されているので「Bookmarklet」をクリックしてブックマークレットのタブに切り替えて、「WhatFont」と書かれたボタンをブックマークバーにドラッグアンドドロップすれば追加完了です。

Chrome拡張機能もしくはSafari拡張機能として使用したい方はそれぞれの項目に切り替えて、インストールしてください。どちらもできる事はブックマークレットと変わりはありません。

気になるWebサイトでWhatFontToolのブックマークレットを押して使用します。
カーソル部分のフォントが何なのか教えてくれますし、クリックすれば上の画像のように更に細かい情報まで表示してくれます。

文字サイズ(Font Size)だけじゃなくて行間(Line Height)まで表示してくれるし、文字色まで見れます。
開発者用ツールを使えばフォントもサイズも行間も調べられますが、WhatFontToolだと手軽に調べられるのがオススメのポイントです。
最近はWebフォントも流行ってきてますしね。これからますます活躍しそうです。

Kick Ass

便利なブックマークレットとか言っておきながらこれを入れるのはどうかと思ったのですが、お遊び要素も必要でしょうって事で3つ目はKick Assというブックマークレット。

こちらは起動するとWebサイト上に自分の飛行機が出現して、キーボードの矢印キーで移動してスペースキーで弾を発射してWebサイトを破壊するゲームが楽しめます。

追加はhttp://kickassapp.com/より行えます。

kickassapp.com

Kick Ass - Destroy the web

http://kickassapp.com

ページのど真ん中にある「KICK ASS」と書かれたボタンをブックマークバーへドラッグ&ドロップすれば追加完了です。

ブックマークレットを起動すると上の画像のようにページに白い三角形が表示されます。
矢印キーで移動、スペースキーで弾を発射。さて僕のブログを破壊していきましょう。

Webサイトの端っこに行った機体や弾はサイトの反対側から出てきます。ですのでスペースキー長押しだけでも破壊はできちゃう。
まあたまにはこういうので息抜きもしつつ、ちゃんと作業しましょう。

OGPタグの確認

今度はOGPタグの確認に便利なブックマークレットです。
OGPタグというのはSNSにリンクを共有した際に表示される画像やタイトル、文章などを設定するタグのことです。
それがきちんと表示されるのかどうかチェックしてくれます。
ブログを公開する前なんかに念のために1度チェックしておくと安心です。

追加はhttp://sinap.jp/blog/2012/05/ogp.htmlより行えます。

ブログ

OGPタグ確認に便利！ブックマークレットで手早くチェック | ブログ | SINAP - 株式...

http://sinap.jp/blog/2012/05/ogp.html

サイト公開前のSNS連携チェックに吉報！ブックマークレットでそのページに埋め込まれているOGPタグを視覚的に確認できるツールを作成しました。地味に大変なOGPタグの確認作業がこれでぐっと楽になります。

Webサイトを開いてこのブックマークレットを使用すると、そのサイトのOGPタグがちゃんと設定されているか上の画像のように確認できます。

ブックマークレットはSpellBookと合わせて使う

GoogleChromeを使っている人はChromeの拡張機能である「SpellBook」を追加しておくと、ブックマークレットの使用が便利になります。SpellBookは日本語に訳すと「魔法の書」的な意味ですかね。

[appbox chromewebstore ihckioenbbjedpocnnennnehjaacojil]

この拡張機能を追加すると新しくブックマークバーに「Bookmarklets」というファイルが追加されます。
このファイルの中にブックマークレットを入れておけば、右クリックしたときに新しく表示されるようになる「SpellBook」という項目に、ブックマークレットが一覧になって表示されるので、使用したいブックマークレットを選択してクリックすればブックマークレットが起動します。

わざわざブックマークバーにマウスを持っていく事がなくなりますし、サッとブックマークレットを起動できるので便利です。