Web制作現場で使えるブックマークレット集 ～ アイデアマンズアイデア（16）
[2007月05年10日]
（宮永 邦彦 / アイデアマンズ）
ブックマークレット（Bookmarklet）をご存じでしょうか？
ブックマークレットとは、ブックマークに登録できる短いプログラムのことです。
最近はブログやソーシャルブックマークといったWeb上のサービスで、操作性を向上させるために公開されるケースが増えました。すでに実際に使ったことのある方、あるいはブックマークレットと意識しないで使われている方も多いと思います。
サービスの操作性向上という目的以外にも、実はWeb制作に役立つブックマークレットが数多く存在します。今回はその中からいくつかを紹介します。そのほとんどすべてを無料で利用できるので、気に入ったブックマークレットがあったら、ブックマークに入れて、制作業務にお役立てください。
ブックマークレットは、JavaScriptが埋め込まれたURLそのものがプログラムなので、リンクの形で公開されています。したがって、クリックするとプログラムがその場で起動してしまいます。最初は戸惑いますが、ブックマークレットをブラウザにインストールする方法は簡単です。
○IEの場合
・リンクを右クリックして「リンク先をお気に入りに登録」を選択
・または、リンクをアドレスバーの下にあるリンクバーにドラッグ＆ドロップ
○Firefoxの場合
・リンクを右クリックして「このリンクをブックマーク」を選択
・または、リンクをアドレスバーの下にあるリンクバーにドラッグ＆ドロップ
アンインストールするには、そのブックマークを削除するだけでできます。
アクセシビリティは大丈夫？
こちらのページはブックマークレットの紹介ページとしては古くからあり、内容も充実しています。
・JAVASCRIPT::BOOKMARKLET
http://bookmarklet.daa.jp/
（※紹介したブックマークレットを探すには、「」内のキーワードでページ内検索をしてください）
・CSS解除
いま見ているページのCSSを解除します。ワンクリックでテキストブラウザでの見え方を確認できます。
・ページをグレースケールにする
いま見ているページをグレースケール表示して、色弱のユーザーにも識別できる色使いかを確認できます。
アクセシビリティとは少し違いますが、ブラウザのウィンドウサイズを800×600に変更し、SVGA端末での見え方を確認するブックマークレットも存在します。
Webページの構造を暴け！
murasukeの日記 - ブックマークレットが溜まってきたのでまとめました
http://d.hatena.ne.jp/murasuke/20060726
murasuke氏によるブックマークレット集です。Web制作に役立つトリッキーなブックマークレットが多数公開されています。
・divの枠を表示＆id,class表示（色分けつき）
divタグの領域、id属性、class属性を視覚化します。CSSでのレイアウトを調べるときに便利です。
・テーブルの枠を表示（色分けつき)
tableタグによるレイアウトを視覚化します。テーブルレイアウトの構造を調べるときに便利です。
・CSS書き出し
いま見ているページのスタイル指定の一覧を書き出します。
こちらでも多くのブックマークレットが紹介されています。
・Bookmarklet - パソコン遊戯
http://pasokon-yugi.cool.ne.jp/bookmarklet/
・タイトルをコピー
ときどき地味に困るのが、HTMLタイトルの取得です。HTMLタイトルはタイトルバーに表示されますが、それをコピーすることはできません。しかしこのブックマークレットを使うことで簡単にコピーできます。
最近はAjaxの利用が増え、JavaScriptを使ってHTMLを動的に書き換えるケースが増えました。そのままソースを開くと、動的に変更される前のHTMLが表示されて不便を感じることがありますが、ブックマークレットでそれを解決できます。
・JavaScript で書き換えられた後の Webページの内容を表示する
http://groundwalker.com/blog/2007/01/javascripted_source.html （groundwalker.com）
デザインとコーディングを的確に！
再びmurasuke氏のブックマークレット集から、
・方眼紙（座標つき,最小幅40px）
ページ上に方眼紙のようなグリッドをうっすらと表示します。
グリッドが整っているかを確認したり、画像やテキストの大まかなサイズを測るのに便利です。
・前回右クリックした場所からの位置の差を表示
ページ上の違う地点で右クリックを2回すると、その差を表示します。画像やテキストの正確なサイズを測るのに便利です。
ネット上にはまだまだたくさんのブックマークレットが公開されていますので、「Bookmarklet」または「ブックマークレット」で検索し、お気に入りのブックマークレットを探してみてください。
ブックマークレットを作ってみよう！
JavaScriptの知識があれば、簡単なブックマークレットは簡単に作ることができます。「ブラウザにこんなちょっとした機能があったら便利なのに！」というニーズがあったら、自作したり、プログラミングが得意な人に相談してみてはいかがでしょうか。
ここでは、ランダムに8文字のパスワードを生成し、クリップボードにコピーするブックマークレットを作ってみます（クリップボードへのコピーはIE限定)。自分や他の人にアカウントを作成するときに便利です。
まず最初に、JavaScriptで短いプログラムを書いてみます。そして、（ちょっと手抜きして）<html>タグと<script>タグで括り、password.htmlというファイルで保存します。なるべくスペースを使わないのがポイントです。
-----ソースこの下から-----
-----ソースこの上まで-----
HTMLファイルをIEで開くと、ダイアログが表示されます。そのパスワードがクリップボードにもコピーされているはずです。セキュリティ保護のエラーが出たら、スクリプトを許可してください。
次に、<html>タグと<script>タグを取り除き、改行・タブ・スペースをすべて削除し、プログラムを1行に連結します。そして、先頭にjavascript:というテキストを付け加えます。
javascript:s="";for(i=0;i<8;i++){a=Math.floor(Math.random()*62);if(a>=0&&a<26){s+=String.fromCharCode(97+a);}else{if(a>=26&&a<52){s+=String.fromCharCode(a+39);}else{s+=String.fromCharCode(a-4);}}}clipboardData.setData("text",s);alert(s);
このテキストをIEのアドレスバーに貼り付けて、Enterキーを押してみましょう。
あとは、HTMLファイルにこのスクリプトをURLとしたタグを記述すれば、ブックマークレットの完成です。
ただしブックマークレットには、特別な制約がたくさんあり、複雑なプログラムを書こうとすると、その制約に悩まされることもあります。しかし、それが逆にパズル的なおもしろさでもあり、ちょっとした暇つぶしにもなります。みなさんもぜひブックマークレット"遊び"にトライしてみてください。
┌―――――――――――――――――――――――――――――――――――┐
■アイデアマンズ株式会社 宮永邦彦
携帯ブログ構築ワークショップにご参加いただいた皆様、ありがとうござ
いました。本日（5月10日）はシックス・アパート社のビジネスブログセミ
ナーで急遽、代打講演することになり、セミナー会場でこの原稿を仕上げて
います。携帯ブログへ寄せられる関心は依然強く、うれしい悲鳴を上げてい
る毎日です。
http://www.ideamans.com/
└―――――――――――――――――――――――――――――――――――┘
トラックバック
このエントリーのトラックバックURL:
http://dragon.jp/mt/mt-tb.cgi/950
