2009.05.15

ブラウザチェックとコーディングにおける効率化

イメージ：ブラウザチェックとコーディングにおける効率化

「やるな！」と思われるデザイナーに ♯37
Quattro（mBlog）

暑くなってきましたね。杉花粉はとっくに終わってるのに、なぜか例年にない変な時期に花粉症になってるmBlogのQuattroです。ヒノキ花粉なんでしょうか。打ち合わせ中にクシャミ連鎖が始まると、クシャミ終了待ちになっちゃうので色々不便です。

さて今回は、コーダーの宿命とも言えるブラウザチェックに関するお話です。IE, FireFox, Safari, Google Chrome, Operaと、世の中にはたくさんのブラウザがありますが、それらでウェブサイトが動作するかをチェックする上での便利ツールと、CSSレベルでのブラウザ固有の癖を吸収するCSSフレームワークについてご紹介したいと思います。キーワードは効率化と使い回しです。

旧IEを1つのマシンに同居インストール - http://tredosoft.com/Multiple_IE

コーダーが最も恐れるソフトウェア、それは言うまでもなくIEでしょうｗ。バグが多く、なぜかIEだけでレイアウトが崩れる経験は誰もが経験するものです。だけどシェアを考えると当然サポートはしなきゃならない。しかしWindowsのオペレーション全体に深く関係しているIEは、1台のマシンの中で共存させづらいソフトウェアでもあります。そこでこのMultiple IEを使えば、複数のバージョンのIEを1つのマシンに同居させることができます。インストールも簡単で、各バージョン名にチェックを入れるだけで、IE本体はネットからダウンロードしてくれます。通常のコーディングであれば、5.5, 6.0, 7.0あたりを入れておけば一通りのチェックができますね。

Webでスクリーンショットを一括出力 - http://browsershots.org/

コーダーの多くは確認用にWindowsを使ってたり、またWindowsでコーディングする人も多いと思います。けれどメインマシンがマックで、かつ手元にウィンがない場合、上記方法で頻繁に確認するのは難しいですね。そんな時に使えるのがBrowserShots。URLを入力するだけで、ウェブページを各種ブラウザで見た時のスクリーンショットを見る事ができます。用意されているブラウザの種類も非常に多く頼りになるウェブサービスです。ただしキューを出してからスクリーンショットが出力されるまでにタイムラグがあるので（通常5分程度）、頻繁なチェックには向きません。コーディング作業終了後の確認作業に向いています。

ラーメン日記：山頭火＠新宿南口

山頭火＠新宿南口ちょっと前に行ってめっちゃウマかった山頭火というラーメン屋さん。結構多くチェーン展開してるようですが、東海圏には名古屋に1店舗あるだけなので、東京で初めて食べました。上品な味のしおラーメンがおすすめ。チャーシューがウマ過ぎます。

CSSフレームワークの導入

ブラウザ間での差異を吸収するために、よくCSS Reset（CSS初期化）が使われますが、この数行ってみなさんわりと使い回してますよね？　ようするにコーダーにとって自家製のライブラリとも言えるものですが、オープンソースで公開されているものも世の中には数多くあります。今回はその中から2つをチョイスしてご紹介します。

blueprintcss - http://www.blueprintcss.org/

BlueprintCSSは、レイアウトやフォントなどにおけるブラウザ間の差異を吸収するだけでなく、ヘッダ、コンテンツ、サイドバー、フッタなどの各要素をクラス指定するだけで簡単にレイアウトできるというCSSフレームワーク。グリッドレイアウトを簡単に導入できる点が最大のポイントです。

960 Grid System - http://960.gs/

次にご紹介する960 Grid Systemは、ソリッドレイアウト（横幅固定。フローズンレイアウトとも言いますね）に適したCSSフレームワークです。その名の通り、基本Width : 960pxでのデザインを前提としたものなのですが、サイト内のサービスであるVariable Grid Systemを使えばどんなサイズにでも対応できます。960pxを12、もしくは16の細かいグリッドに分割し、1カラムにつき何グリッド横幅を使うか、という仕組みでクラス指定してレイアウト作業を行います。

コーディングという作業は、以前はデザイナーが片手間に行うものでした。だけど今では専門のコーダーがHTMLとCSSをガリガリ書くというスタイルが一般的になってきているように思えます。つまりはそれだけ専任スタッフが必要とされている現場なのでしょう。動作確認とCSSフレームワークの導入による効率化。短い時間でサクっとコーディングして、仕事はキッチリというのが理想ですね。それではまた来月お会いしましょう！

（MANTIDDESIGN／mBlog　Quattro）

Quattroさんプロフィール

ウェブ技術の新しモノ好きデザイナー兼ブロガー。iPhone AppでSkypeが公開されて以来、どこでもメッセンジャーが使えるって素晴らしい！としみじみ思ってます。けど電池の減りも激しいので、いざ電話しなきゃって時に「バッテリーの容量は残り10％です」って表示が出て残念な感じになることが多いです。
http://mantiddesign.com/

このエントリーをブックマークする

このエントリーにトラックバックする

このエントリーのトラックバックURL
http://withd.jp/mt/mt-tb.cgi/3686

» [SITE INFO] withD連載37回目 | ブラウザチェックとコーディングにおける効率化 from Webデザイン, CSS, Javascript, Flash, ウェブサービス | mBlog
withDでの連載、37回目が公開されました。今回はコーダーの天敵、IEでの動作チェックに関するお話です。また個人的に最近アツい分野、CSSフレームワー... [続きを読む]

トラックバック時刻: 2009年05月20日 13:23