views]2014年3月10日Tweet昔からWeb制作者の頭を悩ませ続けているのがブラウザチェックです。ブラウザによってCSSやHTMLタグの読み込み方が違ったり、認識せず、表示崩れや動作不具合が起きるため、このブラウザチェックは欠かせません。IE6やIE7に依存する社内システムが未だ数多くあり、その所為でなかなかアップデートできずにいるユーザーがいたり、スマートフォンの普及の影響により、チェックしなくてはいけないブラウザの数はどんどん増えます。このチェックをMacのPCで行ったり(普段はwindows)、携帯端末を用意して行う事は非常に時間と労力がかかるし、用意出来ない環境のテストもしなければならないこともある為、悩みの種となっています。そんな悩みを解決してくれる、私が業務の中で使用している主なチェック方法とツールに関してご紹介したいと思います。ツールの紹介をする前にユーザーが使用している代表的なブラウザをおさらいしておきましょう。シェアの多い代表的なブラウザInternetExplorer(以下:IE)Microsoftが開発している標準的なブラウザです。Foundationが開発しているブラウザです。軽量・軽快な動作と豊富な拡張機能が特徴。v10.3以降)に標準搭載されています。デザイン性を重視し、UIにこだわりを感じるブラウザです。様々な専用ツールが配信されています。比較的よく利用されているのが、上記4つのブラウザーです。いずれも毎年のシェア発表で上位に並んでいるので、各制作会社でもお馴染みだと思います。ここから本題のチェックツールに関して紹介していきます。クロスブラウザチェックツール【IE編】ウェブ開発者ツールF12ボタンで開発者ツールを出し、ブラウザモード・ドキュメントモードでそれぞれのIEのバージョンを確認出来ます。NetRendererhttp://netrenderer.com/index.phpIE5.5~9まで、チェックしたいURLを指定するだけのお手軽なチェックツールです。Testerが不便に感じたらこちらかも。SHOTShttp://browsershots.org/様々なブラウザとバージョンでの表示を無料で確認できるサービス。Windows,Linux,BSDで動作する6.0以上のブラウザに対応しています。適度な選択で利用することをお勧めします。SHOTS」と同様に各種ブラウザを利用できるエミュレーションサービス。ローカル環境でブラウザチェックを行えるのが特徴。こちらはアカウント登録の必要がありますが、無料で使用できます。以上が一般的にも利用されているブラウザチェックツールでした。最近流行しているレスポンシブ表示をチェックするウェブサービスをご紹介します。Designhttp://www.jamus.co.uk/demos/rwd-demonstrations/URLを入力して各デバイス毎の表示を瞬時に切り替えることができます。チェックできるのは、iPhone(縦、横)、iPad(縦、横)、PCと少なめですが、動作が軽快で使いやすいです。Testinghttp://mattkersley.com/responsive/5つのサイズのブラウザサイズで確認が可能。横スクロールなので環境によっては使いにくいかもしれません。Responsinatorhttp://www.responsinator.comシンプルなUIが特徴的なチェックツールです。tab、Kindleなど様々な端末での表示確認を一覧で見ることが可能です。以上、いかがでしたでしょうか?制作者は不具合を見つけてからの対応が本番です。チェックは効率的に短時間で済ませ、制作に時間を使いたいと思っています。世の中にはもっと賢く、効率的なツールや、テクニックもあるはずです。広報担当ボクブロック株式会社EC-CUBEプラチナパートナーのボクブロック。EC-CUBEを利用したサイト構築をメインに保守や集客支援、企画、コンサルティングなど幅広く、また長期的にお客様のECパートナーとしてご一緒しております。EC-CUBEカスタマイズのプロフェッショナル【EC救部隊】も絶賛稼働中。広報担当ボクブロック株式会社EC-CUBEプラチナパートナーのボクブロック。EC-CUBEを利用したサイト構築をメインに保守や集客支援、企画、コンサルティングなど幅広く、また長期的にお客様のECパートナーとしてご一緒しております。EC-CUBEカスタマイズのプロフェッショナル【EC救部隊】も絶賛稼働中。情報まとめ1,127viewsアプリ開発不要。WEBサイトでバーコード検索を実現する。