ものスゴく便利なグリッド表示用ブックマークレット登場
Web担編集部の安田です。Web担のはてブ件数1万件超え()を記念して、ご愛読のみなさんのお役にたてる便利なツールを作りました。名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。ウェブデザインをする人なら日常的にdivの幅や隙間の長さを測ったりしていることでしょう。そういうときに手放せなくなるツールです。
akiyanさんが作った便利なグリッドオーバーレイのブックマークにインスパイヤされて、さらに便利な機能を盛り込んでみました。
名付けて、「位置調整可能なグリッドオーバーレイ」ブックマーク。
使い方その1
普通のブックマークレットです。以下のリンクを右クリックして「お気に入りに追加」(IEの場合)または「このリンクをブックマーク」(Firefoxの場合)してください。
IEでは「追加しようとしているお気に入りは安全でない可能性があります。続行しますか?」とのセキュリティ警告が出ますので、「はい」をクリックしてください。
すると、ブラウザのお気に入り(ブックマーク)に「グリッド表示」という項目ができます。
あとは、グリッドを使いたいページをブラウザに表示した状態でそのお気に入りをクリックするだけで、そのページにグリッドが表示されます。
使い方その2
ブックマークレットを実行すると、グリッド、コントロールボックス、ヘルプの3つが表示されます。
2007/05/21 14:03 「ヘルプがうざい」との意見が私以外にもありましたので、初期状態ではヘルプを表示しないようにしました。[?]ボタンをクリックするとヘルプが表示されます。
2007/05/22 00:57 ↑のようにヘルプが出ないようにしてたんですが、社内事情により巻き戻ってヘルプが出る状態になっていました。気づいてまたヘルプが出ないように戻しました。
ヘルプは読んだら消してください。今のところブックマークレットを実行するたびに表示されます。邪魔ですいません。しばらくしたら、ヘルプは標準では出ないようにします(だれか、ブックマークレットでどのページにも共通するクッキーを管理する方法を教えてください)。
をクリックするとグリッドの色が変わります。現在用意されているのは次の5パターンです。
グリッドのマス目のサイズは50pxで、補助目盛りは短い方が5px、長いほうが10pxごとです。
グリッドはドラッグして自由に動かせます。
グリッドの位置の微調整にはコントロールボックスのボタンを使います(上下左右に1ピクセルごとまたは10ピクセルごと)。
コントロールボックスの左右下側の表示は、グリッドの移動カウンターです。5ピクセル以下を測りたい場合などに使います。
カウンターを使った測り方
- 測りたい対象の左端や上端にどこかのグリッドを合わせます(この場合、Web担のロゴの幅を測るとします)。
- グリッドを初期位置に合わせたら、コントロールボックスの左下の[reset]ボタンをクリックします。すると、X軸のカウンターが0にリセットされます。
- グリッドをドラッグするかボタンを使って、最初に左端に合わせたグリッドの線を対象の右端まで移動させます。コントロールボックスのX軸カウンターに表示された数値がグリッドを動かした長さ、つまり測りたい対象の幅になります。
- 測りたい対象の左端や上端にどこかのグリッドを合わせます(この場合、Web担のロゴの幅を測るとします)。
コントロールボックスのをクリックするか、グリッドをダブルクリックすると全部消えます。
コントロールボックスはタイトルバー部分をドラッグして邪魔にならない場所に移動できます。
コントロールボックスはをクリックすると最小化できます。
コントロールボックスのボタンをクリックするとヘルプが表示されます。
※コントロールボックスを閉じられないなどの問題が発生した場合はページ全体を再読込(F5キー)してください。
特徴
- グリッドの色を何パターンかに変えられるので、どんなデザインのサイトでも便利に使えます
- グリッドをドラッグすると位置を変えられます
- ボタンを使って1ピクセル単位または10ピクセル単位でグリッドの位置を微調整できます
- ボタンやドラッグで移動した距離をX/Yで計測するカウンターが付いています
- グリッドのコントロールボックスは邪魔にならない場所に移動したり、最小化したりできます
動作環境や注意点その他
Windows版のFirefox 2、IE 6、Opera 9で動くはずです。Mac版のFirefoxでも動くようです。Safariではうまく動作しないようです。Safariの人すいません。時間ができたら動くように修正します。
IE Developer ToolbarやFirefoxのDOM Inspectorを開いている状態でブックマークレットを実行すると、フリーズする場合があります。DOM構造をリアルタイムに関しするユーティリティは閉じておいてください。
IEでは、IE Developer Toolbarがインストールされていると、グリッドの移動などがひっかかる場合があります。
このブックマークレットでは、prototype.js 1.5.1、script.aculo.us 1.7.1 beta2、Prototype Window Class 1.3を利用しています。そのため、開いているページでこれらのライブラリの異なるバージョンが読み込まれている場合、うまく動作しないことがあります。
スクリプトの中身に興味があるとか、コーディングに赤入れしてくれるという奇特な方のために、JavaScriptを圧縮してないこちらをグリッド表示full。でもコードは素人仕事ですのでお手やわらかに。
謝辞
akiyan.comのオーバーレイ版グリッドレイアウトブックマークレットがなければこのツールはできませんでした。インスパイヤありがとうございます。グリッド素材はakiyanさんの作ったものをベースに作っています。
akianさんはグリッドの素材をSmiley CatのUsing a Background Image Grid to Lay Out Your Web Site | Smiley Cat Web Designを元に作っています。Smiley CatのChristian Watsonさん、いい素材をありがとうございます。
prototype.js、script.aculo.us、Prototype Window Classの各ツールの作者さんにはすてきなライブラリの提供に感謝します。
フィードバックをお待ちしております
うまく動かなかった、こういう機能があるとうれしいなど、フィードバックをいただけると、作者としてうれしいです。このエントリーにコメントする形でお送りください。
コメント
デザインだけじゃなくてもおもしろい
非常に気に入りました。すごい便利です。
デザインするときだけじゃなく、他人のサイトを見ながら「あ、ここずれてる」とか見つけてニヤっとするのにも使えますね。
使わせてもらいます!
Re: デザインだけじゃなくてもおもしろい
編集部の安田です。コメントありがとうございます。
デザイナーさんだけでなく、ウェブマスターの方も上がってきたデザインに対して「ここ揃ってないじゃん」とか突っ込めますね。
いろんな使い方ができると思います。
IE7.xでも動作OKでした
すごいイイです!
ツールの作成とご紹介ありがとうございます。
デザイナーさんとのミーティング時などに、画面に定規あてながら話を進められるとはやいんだけどな・・・とか、思っていたりしていたので、重宝しそうです。
IE7.x系でも動作OKでした。
Re: IE7.xでも動作OKでした
編集部の安田です。コメントありがとうございます。
> デザイナーさんとのミーティング時などに、画面に定規あてながら
> 話を進められるとはやいんだけどな
だいたい画面キャプチャをとって画像編集ソフト上で幅を測って、とかやりますが、それが面倒なんですよね。
IE 7では少しエラーが出ている(ステータスバーにエラーが表示される)ようですので、折を見て修正しておきます。
今後も使いやすくしていきますよー。
非常に楽しいです!
Opera@USB 8.54でもOKでした。いやぁ、なんか楽しいなぁ。
Re: 非常に楽しいです!
編集部の安田です。コメントありがとうございます。
OperaはJavaScriptが変だとか言われますが、元々のPWCとかがちゃんとクロスブラウザに対応してくれているので、意外と問題なく動くものですね。
> なんか楽しいなぁ
そうなんですよ。なんか楽しいんですよ。
作った本人が楽しくて使ってますので、みなさんぜひ楽しんでください。