Numb.

Firefox を使っていて Web 制作をしている方に人気の add-on、Firebug 。 javascript 方向にも秀でているらしいのですが、私はもっぱら css チェックや xhtml の構造チェックに使ってます。

Inspect を押して画面内の調べたい場所をクリックすると、そのクリックした場所の xhtml 該当部分がすぐ見れて、 その部分にかかっている css も一覧ですぐ見れる！ その上、その css や xhtml の値や数字も変更して見た目がどう変わるかもすぐ確認できちゃったり。 仕事中は使用頻度が凄く高く、コレがあるおかげで大分作業時間も短縮できて助かってます。

表示が意図したものにならなかったり、崩れてしまったり、後から一部分変更したい時などに大活躍。 何度も何度も Inspect を押すので、最初は Firefox のツールバーに Inspect （眼鏡のアイコンのもの）を置いていました。 けど、本当に回数が多いのでそれすら面倒なくらいになってきまして、最近はマウスにショートカットを割り当てています。

Firebug のショートカット一覧
Firebug Keyboard Shortcuts

よく使うのは、以下の 3 つ。

• Open Firebug Panel : F12
• Close Firebug Panel : F12
• Toggle Inspect Mode : Ctrl+Shift+C (Mac なら ⌘+Shift+C)

サイドボタンが 2 つあるマウスなので、サイドボタン 1 に F12、サイドボタン 2 に Ctrl+Shift+C を割り当てています。 これが思っていたよりずっと快適だったので、オススメしてみます。

Photoshop で画像の切り出しをしたり、コーディングをしたりとアレコレ移動して見ている場合、左手はキーボード右手はマウスが多いです。 なので F12 はちょっと押しにくいですし（右手をマウスから離す必要があるため）、 かといって Firefox のツールバーに何度も何度もマウスを移動させるのも結構面倒で大変です。

Inspect を押したり、F12 を押すのも数回なら別に良いですが、作業中下手をすれば数百回行う作業なので塵も積もれば山となるということで… マウスのサイドボタン一発にしてしまうことでかなり楽になりました。

Firebug のショートカットを割り当てたことでマウスサイドボタンで「前のページに戻る」「次のページへ進む」などができなくなりましたが、 マウスジェスチャーかキーボードショートカットでページ移動系は行っています。 ページ制作中は、その作っているページを開いたままにしておき「Inspect を使って問題点を確認→修正→リロード」、 という作業を繰り返することが多く、ページ移動はあまりしません。 ですのでジェスチャーやキーボードショートカットでページ移動するのに不便は感じていません。

Web 制作で同じような作業をよくする方は、マウスボタン割り当てオススメですよ～

YSlow for Firebug というものが、 Yahoo! Developer Network からリリースされたようです。

これは Firefox + Firebug の環境に追加して使える add-on で、 ページの表示速度に関する様々なポイントの対策度具合によってランクを付け、改善するためのポイントをあげてくれるというもの。

YSlow を入れると、Firebug に YSlow の項目が追加されます。当然 Firebug が入っていないと動きませんので注意。

表示速度の計測をしてくれる add-on 等は今までもありましたが、 YSlow は具体的に「では、どこを改善すれば読み込みが早くなるのか？」を表示してくれる点が使いやすい。 使い慣れた Firebug に一体化するというのも、私にとっては分かりやすかったです。

私も調べてみましたが、かなり多くの改善ポイントが出てしまいました。 全てを A にすることは難しそうですが、出来るところは改善していきたいなと思います。

ちなみに、ソースはこちらです。

先日新規ウィンドウを開く手段を Valid と両立させる考察という記事で

• リンクを新しいウィンドウで開くかどうかはユーザーに選択してもらうのが良いのでは
• でも両方のリンクを書いていくのは手間がかかる、ソースも長くなる
• せめて、手間を減らすために「Firefox」+「CopyURL+」で一発リンク制作をしてみるのはどうだろう

という内容を書きましたが、その後「javascript を使いリンクに新規ウィンドウを開くたアイコンを自動追加する」という方法を公開している方を発見しまして。これが本当にすごい！

新しいウインドウを開くべき？ - LogJET

1 回設定してしまえば記事を書くときには手間いらず、しかもリンクを 2 回書かなくて良いのでソースも長くならず、本当に素敵です。 あまりに素敵だったので他の方々にも手軽に利用してもらえればいいなと思い、Fsiki さんに許可をいただき WordPress のプラグインにさせていただきました！ 有用な javascript を公開し、プラグイン化することを承諾してくださった Fsiki さんに感謝いたします

[Read more]

以前に書いた Numb. - _blank を使わない新規ウィンドウの開き方 の続きにあたる記事です。一応、もう一度おさらいしてみます。

新規ウィンドウを開かせる手段を実装したい、という場合は以下の 2 種類が有名だと思います。

• a に target="_blank" を指定する
• javascript で設定する

しかし「ウィンドウを新たに開くかどうか」はユーザーが決めるべきことなので、作り手が決め手はいけない、という話もあります。 そのためか、XHTML 1.1 や XHTML Basic では target="_blank" という書き方は準拠していない、とされ NG になってしまいます。 「マークアップ言語である HTML で、ウィンドウ操作をする」という点も問題なのだと思います。マークアップ目的以外になるので。

でもユーザーの中にも新規ウィンドウを開く手段を実装しておいて欲しいという人もいます。 いやいや余計なお世話だから、こっちに決めさせてくれ、そんなことは実装しておかないでくれ、という人もいます。 実装して欲しい・欲しくない、という人が両方いる…ということで、じゃあ両方のリンクを制作しておけばいいんじゃ！と思いまして。今回はそんな方向でやってみました。

[Read more]

普通に使うなら IE6 か IE7 、どちらかの IE が入っている環境かなんて気にならないかもしれません。 しかし自分でサイトを作っていたり、仕事で WEB サイト制作に関わる方にとって IE のバージョンは悩ましいところ。 IE7 と IE6 は持っているバグが違いますし、両方のバージョンで表示チェックをしたい方は多いと思います。

両方で確認する方法には大きく分けて 3 つあります。

• IE7 をスタンドアローン版として動かす
• IE6 をスタンドアローン版として動かす
• バーチャル PC で違うバージョンの IE を入れて動かす

バーチャル PC を使う方法は日本語環境ですと色々と手間があるので、スタンドアローン版を使うのが手軽です。 以前は IE6 環境に IE7 スタンドアローン版を入れていたのですが、なぜか IE7 スタンドアローン版が上手く動かなくなってしまい… そんないきさつで、とりあえず IE7 に IE をバージョンアップし、IE6 をスタンドアローンとして動かす方法を探してみました。

[Read more]

OS を入れ直したので、XAMPP も入れ直しました。 ※XAMPPについては、「簡単にローカルサーバー環境を作れる XAMPP」をどうぞ。

しかし今回はちょっと躓いてしまいました。なぜか、Apache が起動しない…。 なぜ、なぜー！？さっぱり分からなくてインストールしなおしてみましたがダメ。

同じ症状の人はいないかなとグーグル先生で調べて判明。Skype のせいでした！ Skype はポート 80 を使うという設定にデフォルトでチェックがついており、このため Apache が起動できなかったようです。

Skype ＞ ツール ＞ 設定 ＞ 接続

ここで、「上記のポートに代わり、ポート80を使用」のチェックを外してあげると起動できました。 XAPMPP はバージョンがあがって、さらに使いやすくなっていました。おすすめですよ～

ちょっと前にモニタを買い足しました。 ナナオの FlexSacan S2110W です。21.1インチWideSXGA+！

液晶パネルは VA 系です。IPS 系のものが欲しいと思っていたのですが高いので断念。 予算の関係 17 インチでも良いなと思っていたのですが、在庫処分かなにかで少し安くなっていたので思い切って S2110W 買っちゃいました。 仕事用のモニタですが普段も使っています。

液晶パネルについて、今回買うに際して調べたので簡単にまとめてみます。

[Read more]

Bookmarklet - パソコン遊戯

こちらで紹介されていた Bookmarklet をよく使っています。 Bookmarklet とは、ブックマークに入れて使う javascript です。 リンクの上で右クリックをしてお気に入りに登録すれば OK です。

閲覧補助 > CSS ON⇔OFF これをブックマークに入れておくと、制作時にものすごい便利でした。 作者様、ありがとうございます・・！

CSS ON⇔OFF このリンクをブックマークに登録すれば OK。リンクバーにドラッグアンドドロップでもいけます。

それにしても1ヶ月更新になってしまった。 最近は仕事に趣味にと忙しい毎日なのであります。

出たのは去年のようですが、買ってみました。 Amazon でポチっとしておいたら今日届きました

まだ全部読んではないのですが、基本的な業界の流れと、色々な Web デザイナーの人たちの言葉が載っていて堅苦しくなりすぎず面白いです。 もうこれは知っていたなあとか、知らなかったよヤバイ、など色々思いつつ読んでおります。

私はきっとデザイナーより、コーダーよりなんだろうな

色々使ってみたなかで、これはいいなーと思えたもの。 ＃2/24思い出して色々追記やら修正。

ez-HTML

高機能すぎるほど高機能なので、使いこなすには最初に「ん、これどういうもの？どうするの？」 と多少ヘルプを見ないといけないかもしれません。 でも、自分が便利と思う機能だけ使いこなせればいいと思うので、そんなにたくさん学ばなくてはいけないわけでもないし、 なにより便利なので最初のヘルプを見る作業を加味しても十分使ってみる価値ありかも。

基本的には分かりやすく使いやすいソフトだと思います。 寄与歓迎のフリーウェアとなっていますが、下手な製品よりよほど良さそう

[Read more]