HTMLに貼りつけた画像のサイズが実際のサイズと異なっていたら赤枠を付けてconsole.logに書くブックマークレット


どうもお久しぶりです。

FlashDeveloperだったんですが、最近はHTMLも書くようになりました。

HTMLを作ってると、細かいところで面倒だなぁーと思うことが多いです。慣れてないだけかもしれませんが…。

変数が使えないというのが一番大きな問題で、ヘッダフッタを変更しようものなら全部変更というのがね…。慣れない。うまいやり方を見つけたいです。

それはさておきとして、表題の件です。imgのサイズはやはり指定したほうが良い、ということなので、全部指定しているのですが、コピペしたり、変更があったり、間違って入力してたりで、実際のサイズとは違うサイズがimgタグのwidth/heightに入ってたりします。大きい画像で少ないpixelであればそんなに目立ちませんが、やはりデザイン通りに配置しないと、ということで。

で、これを何とかできないかと思って、ブックマークレットを作ってみました。FirefoxでFirebugを使ってる前提の作りになっていますが、他の環境でもconsole.logを確認できれば使えると思います。

追加するには、適当にどこかのページをブックマークした上で、タイトルをわかり易い名前に変更し、以下のリンクのURLをコピーしてください。そのまま下のリンクをブックマークにドラッグ&ドロップでも大丈夫なブラウザもあるかもしれません。

画像サイズチェック

使い方:

  1. 調査したいページを開く
  2. FirebugのJavaScriptコンソールなど、console.logを見れる画面を開く
  3. ブックマークレットを実行
  4. 画像サイズが実際のサイズと異なるものがあれば、赤く枠がつき、コンソールに現在の画像サイズと、実際の画像サイズが表示されます。(now:現在の表示サイズ, real:実際の画像のサイズ)

ブラウザによっては動作しないかもしれませんが、Win7+Firefox16,Mac10.6+Firefox17では動作してくれました。

jQueryを使うために1秒待つ、ということをしています。読み込み完了が検知できればもっといいんですが…。このあたりは機能向上も含めて考えてみようと思います。

HTMLをやり始めるに当たって環境を整えたりしたので、次回はそれについて何か書こうとおもいます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です