Webサイトのデザイン崩れやJavaScriptの動作不良…不具合をいかにして未然に防ぐか。

Webサイトの制作でのトラブルとして、OS やブラウザの組み合わせごとに異なる挙動が挙げられると思います。Webサイトのデザイン崩れや JavaScript の動作不良を未然に防ぐためには、各種動作環境でどの機能がサポートされているか、既知の落とし穴を知っておくことが有効です。そのような情報は http://caniuse.com/ などで検索することができます。

リセット

まず、最初におさえるのはブラウザ間の基本的な表示差異の吸収です。

差異の吸収方法はいろいろありますが、
HTML5 Boilerplate を使うのは良い方法の 1つです。

HTML5 Boilerplate は Webサイトのひな形として機能し、
ブラウザ間の表示差異をよい感じにリセットしてくれます。
Google、Microsoft、NASA、Nike…などが使用しています。

試しにひな形をサーバにアップしたのに閲覧できない…
という方は、同梱されている .htaccess を取り除いてみて下さい。
とりあえず見れるようになると思います。

もう一つ、知っておくと良いのは index.html の
lang属性 (lang=””) を削除することです。

lang属性によって使用言語を明記することは
HTML の設計上、とても良いことです。
しかし、Android のバグによって文字化けを生じることが
あるため、これを避けるためにやむを得ず削除します。

やむを得ない場合について
詳細をお知りたい方は以下をご参考ください。

Android の Chrome で コピーライト (©) や 円マーク (¥) などが文字化けする (正しく表示できない) 原因と対処法

その機能は使えるのか

リセットが済んだならば、そのページ独自の
デザインや機能を CSS や JavaScript で作り上げて行きます。

新しい機能を使えば、より簡潔に美しく高機能な
Webサイトを制作することができますが、その一方、
古いブラウザで不具合が起きるかもしれません。

CSS 3、HTML 5、JS API など、それぞれ
どのブラウザのどのバージョンでどこまで使えるのか、
不具合を未然に防ぐためには、
これを予め知っておく必要性があります。

とはいえ、W3C の勧告と、各ブラウザの実装状況を
事細かに実際にテストするのは現実的ではありません。
そんなとき、http://caniuse.com/各ブラウザの対応状況を調べることができます

color-1

例えば、上記のように color で検索すると
カラービッカーを input要素で実現できる
input[type=color] は IE や Safari を
考慮すると使用できないことが分かります。

css3-colors

opacity で要素を半透明化すると、
その子要素も共々が半透明になります。
モーダル風の表現など、背景は半透明にしたいが、
(その子ノードとなる) 文字は半透明にしたくない場合など
background-color: rgba(0, 0, 0, 0.25)
のように CSS3 Colors を親要素に適用すると
(子は半透明にならないため) 意図を体現できます。

color-2

この方法を使う場合は IE8 への完全な対応を
あきらめる必要があると分かります。

download-attr

download で検索すると Download attribute
について知ることができます。
download 属性とはブラウザにダウンロードすべきファイルと、
ダウンロード時に (制作者が意図する) そのファイル名
指定するための設定項目です。
つまり、ユーザがクリックやタップした際、
制作者が意図するファイル名で、
スムーズにダウンロードされるようになります。

Firefox では download属性に same-origin policy
が適用されるため、ダウンロード対象をWebページと
同一ドメインのサーバに置く必要があると分かります。

余談ですが、現在の IE では download属性を使えません。
しかし、実装して欲しい機能のリクエストの上位
にあるため、そのうち実装されるかもしれません。

さらに余談ですが、Chrome では途中で
バグが入ったため、バージョンによっては
デグレードのために正しく動作しません。
※指定のファイル名が無視されてしまいます…

その他の機能はどうでしょうか。

スマホが高解像度化し、画素密度も多様になった
ことでベクタ画像が好適となりました。
SVG で検索すればどのくらいの範囲で
利用可能かを知るヒントが得られます。
古いブラウザを除き、主要なブラウザでは使用できそうです。

WebGL – 3D Canvas graphics はどうでしょう。
Android 4.4.x が現役の間は使えそうもありません。

woff

ウェブフォントには

  • TTF (True Type Font)
  • OTF (Open Type Font)
  • EOT (Embeded Open Type)
  • WOFF (Web Open Font Format)
  • SVG Font (Scalable Vector Graphics Font)

など色々な種類があります。
例えば、EOT は Microsoft の IE 用です。
SVG は画像こそ広くサポートされていますが、
フォントとなるとそのサポートは限定的です。
標準的な地位を確立しつつある WOFF ですが
IE 8 や Android 4.3 以下を切り捨てる必要があると分かります。

まとめ

http://caniuse.com/ でいろいろと検索して見ると
概ね以下の 3つに特別な配慮が必要ということが分かります。

  • IE 9 とそれ以下のバージョン
  • Android 4.3 とそれ以下のバージョン
  • Android の Browser (標準ブラウザ)

このあたりのブラウザを完全な動作対象とする
場合、使用可能な機能を予め調べて絞り込んで
おくと、不具合を減らすことができます。

以上、最新機能を使った Webサイトを
制作される方のご参考になれば幸いです。

お問い合わせについて

業務として技術コンサルティングやシステム設計・開発を行っております。
気になることがありましたらご相談下さい。
ご相談のみで完結する場合、コンサルティング費用の目安は
内容によりますが1時間で5千円〜1万円ていどです。
コンサルティングや開発を検討されるその前に、
まずはお気軽にコメントやメールでご連絡下さい。
ご契約前のコメントやメールでのやりとりは無料です。

お問い合わせフォーム

お急ぎの場合など、ただちに業務対応が必要な場合は、こちらのお問い合わせフォームをご利用ください。かきしちカンパニーお客様窓口が直ちに対応いたします。
※窓口へのお問い合わせ、お見積もりは無料です。


お名前 (必須)

メールアドレス (必須)

題名

メッセージ本文 (必須)

Share

コメントを残す

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

*