2013年8月2日

ブックマークレットとは? ワンクリックで便利な簡易プログラム

bookmarklet_250

今回はブックマークレット(Bookmarklet)についてのお話です。

パソコンはインターネットを見るぐらい……って方には馴染みが無い言葉だと思います。ですが、我々ブロガーにとっては、ブックマークレットのない記事投稿なんてあり得ない!ってレベルのものですし、ブログを書いてなくてもむちゃくちゃ役に立つものです。

ということでブックマークレットって何?という初心者に向けたお話をしてみたいと思います。

で、ブックマークレットってなに?

さてブックマークレットって何なのでしょう?

Wikipediaを見てみると、こんな風に書かれています。

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである[注釈 1]。携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

ブックマークレット - Wikipediaより引用しました。

ブックマークレットのことを知っていると、これを読むと、ああそうだよねってなるんですが、前提知識がない場合はティンプンカンプンなハズです。

簡単に言うと、ブラウザのお気に入り(ブックマーク)に登録できる、ちょっとしたプログラムのことです。プログラムってどういうことかと言うと、ブラウザ上で複雑な動作がボタン一つで可能になるようなものです。

という訳でブックマークレットでどんなことが出来るのかを簡単に見てみましょう。

一瞬でこんなことが!?

例えば、神ブックマークレットと呼ばれ、最も有名なブックマークレットの一つShareHtmlを例に見てみましょう。

一瞬でこれだけのことが出来ます

このshareHtmlの場合、一瞬でこれだけのことができます。

  • ページのスクリーンショットが作られ、小さく縮小される(クリックするとページに飛ぶ)。
  • ページのタイトルが表示される(クリックするとページに飛ぶ)。
  • 登録されている「はてなブックマーク」数が表示される。
  • ひと言コメントも入力できる(ポップアップウインドウで入力)。

箇条書きで書きましたが、分かりにくいですね……。現物を見れば一目瞭然です。こんな感じ!!

ブックマークレットで作ったやつ
ブックマークレットで作った「記事紹介」のコーナー

そうです。主にブログで見かける、参考サイトなどを表示しているやつです。これは「ブックマークレット」という簡易プログラムを使って作っていたんです。

これ、普通にやったら……

まさに神ブックマークレットです。もしブックマークレットを使わずに、画像のスクリーンショットを撮って、画像編集ソフトで開いてトリミングして……という風に普通にやろうとすると3~5分ぐらいかかるのではないでしょうか?

それがお気に入り登録の中にある「ShareHtml」という文字をクリックするだけで出来るようになるんです! ちなみにブックマークレットを使っている動画も撮ってみました。7秒間ですが。

分かりにくいですが、左上のブックマーク(ブラウザはGoogle Chromeを使ってます)をクリックすると一瞬で起動して、htmlタグが取得できます。

う~ん。フルスクリーンで見ないと分からないですね。すみません。

ブックマークレットの登録・使い方

それではブックマークレットの登録の仕方から使い方までを見て行きましょう。

「ブックマークレット」を登録

ブックマークレットは作成した方のページ上で無料で手に入ります。大抵がこんな感じで、普通のリンクテキスト(クリックするとリンク先に飛ぶ文字)のように置かれています

リンク先がプログラムに
クリックするとブックマークレットが起動します。

上記の画像で言うと「ShareHtml」という文字のリンク先にプログラムが配置されています。なので、クリックするとこのプログラム、つまりブックマークレットが起動するようになっています。

なので、このリンク先をお気に入り登録すれば良いのです。

1ブックマークレットのテキストをドラッグ

ブックマークレットのテキストの上にカーソルを合わせ、ドラッグします。

ブックマークレットのテキストをドラッグ
ドラッグしてブックマークバーへドロップ。

そしてブックマークバーの上でドロップします。Google Chromeのブックマークについては以下の記事をご参考に! あ、↓ここでもブックマークレットを使ってこれを作っています。

2ブックマークレットの登録完了

はい、完成です!! ブックマークバー上に「ShareHtml」っていう文字が入りました。

ブックマークレットの登録が完了
ブックマークバーに登録されました!

インターネット・エクスプローラーの場合は、テキスト上で[ マウスの右クリック ] → [ お気に入りに追加 ] で登録できます。

ブックマークレットの使い方

では今度はブックマークレットの使い方です。……とは言っても説明するまでもありません。

ブックマーク(お気に入り)に登録したやつをクリックするだけです。お気に入りのページに行くのと同じやり方です。

動画(ShareHtmlというブックマークレットの例です)も参考に。

そうなんです。ブックマーク(お気に入り)に入れて使うから「ブックマークレット」という名前なんですね。

補足1: ブックマークレットをショートカットで起動する方法

このブックマークレットですが、そのままだといちいち「お気に入り」からブックマークレットを選ばなくてはなりません。超面倒ですよね。

こちらで紹介する技を使えば、ショートカットでブックマークレットを起動できます。詳しくは下記にて。

補足2: ブックマークレットをマウスジェスチャーで起動する方法

上で、ブックマークレットをショートカットにしましたが、さらに踏み込んで、マウスジェスチャーで起動させる技も紹介します。

マウスジェスチャーをご存じない方にも、これを機に知ってほしいですー! もう便利すぎですんで。

あ! ちなみに、マウスジェスチャーに設定したい場合は、まず上で紹介している「ショートカットの設定」を済ませてから行いますので!

さて今回はブックマークレットとはなんぞや?!ということについてお話しました。

いまさら……って感じもするのですが、冒頭でも書いたように、ブックマークレットって、ブロガーの中では常識です。なのに一般的には認識度が激低いものの一つだと思います。なので、ぜひブロガーじゃない方にもオススメしたくて記事を書きました。

↓ オススメのブックマークレットの記事も書きました。ぜひこちらもチェックしてみて下さい!

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!