[この記事は、米国 Mozilla HACKS ブログに投稿された記事 "Make the Web Work For Everyone" の抄訳です。]
数多くの Web サイトがブラウザ互換性の問題を抱えたまま運営されています。特定のブラウザでしか正しく動作しないという状況は、ユーザ体験を大きく損なう要因となります。そして、この問題は Web 開発者のコミュニティが修正できるものなのです。
この 20 年で Web は全く異なるものになりました。1996 年の時点で Web サイト数は 100 万程度。これが今では 10 億を超えるサイトが運営されています。そしてインターネットの利用者数も 5 千万人から、30 億人へと膨れ上がっています。私たちはかつて想像されたよりも、はるかに膨大なコンテンツと接しています。それにアクセスする端末も、810 億台と膨大で、その種別は 24,000 以上と非常に多様になっています。
インターネットの爆発的な成長により、1996 年の時点と比較して、ブラウザ互換性の問題はより本質的な問題となりました。Stack Overflow には "cross-browser" という文字列を含む質問が 55,000 件程度あり、「なんとかっていうブラウザならうまく動くんですが」という質問は 10 万件単位で寄せられています。特定のブラウザで、特定のサイトをうまく使えないことへの質問は、潜在的にブラウザ互換性に関する質問です。
以上の状況から、ブラウザ間での互換性維持は、いまだに重要な問題であると言えます。この問題は Mozilla にとっての問題であるだけでなく、Web を作成する一人一人が考えなくてはならない問題でもあります。なぜ Web 開発者が、この問題について考えなくてはならないのでしょうか。それはこの問題が 「あなたのサイトを利用する人は、あなたと同じブラウザを利用していない」から、そして「利用者の能力は均一ではなく、その目的も同じものではない」からであり、「あなたのサイトを利用できないという理由では、利用者は使うブラウザを決して変えたりしない」からです。裏を返せば、利用者が快適に利用できるサイトを作成できるということは、あなたの腕の良さの証明なのです。そしてツールを適切に利用することで、より簡単にそのようなサイトを作成できます。
ブラウザ間での互換性に問題が起きるのはなぜでしょうか。その理由はいささか複雑ですが、主要なものをあげると次のようになるでしょう：
- ベンダプレフィックス付きの機能のような、特定のブラウザが提供する機能だけを使ってサイトを実装してしまい、代替機能やポリフィルを使うといった、その機能を持たないブラウザへの対策がとられていないため
- 開発者が必要とする機能を、ブラウザベンダが標準化を待たずに実装してしまうため
- ブラウザベンダによる標準仕様の実装や、バグの修正に時間がかかるため
- サイトがユーザエージェントの値によって、異なるコンテンツを配信しているため
- 開発者が一つのツールに、特に 1 種類のブラウザでしか安定して動作しないようなツール、に頼り切ってしまって、ブラウザ互換性に関する問題を見逃してしまうため
- 業界の成長によって新しい開発者の需要が増大した結果、平均的な開発者の経験が、数年前のそれよりも劣ってしまっているため
上記に挙げた問題のいくつかは、Web の初期から存在しています。しかし現在の Web 開発は、その時と比べて大きな進歩を遂げています。ベストプラクティスと、最新のツールによって、すべてのブラウザ上での多様な体験の実現は当時よりも簡単に行えるようになりました。
そこでこの記事では、開発者の皆さんに向けて、次に作るサイトをすべての人が快適に利用できるようにするための心がけを、いくつか紹介します。
自分が思っているものとは違うブラウザを使っている人は、思ったよりも多い
自分の使っているブラウザを他の人もみんな使っていると固く信じている Web 開発者はたくさんいます。その結果、彼らの作るサイトは、彼らの使っているブラウザのためだけに作られてしまいます。ある調査によれば、70% の Web 開発者はデスクトップ環境で Chrome を使用しているそうです。Chrome の使用人口は、すべての端末の種類を足しても、全体の 57% でしかありません。デスクトップで Chrome を使用しているのは、全体の 45% です。つまり Chrome だけで開発と検証を行うということは、全ユーザのうちの半数を無視することを意味するのです。
地域によっても、ブラウザの使用状況は変化します。Chrome、Firefox、そして IE / Edge は多くの地域で、最もよく使われています。しかしその分布は地域によって異なるのです。例えばドイツでは Chrome よりも Firefox の方が多く使用されています。日本では IE はとても多くの人に使用されています。またオーストラリアで Safari を使用している人はごく少数です。ベトナムでは 5 人に 1 人以上の人が、Chromium から派生した Cốc Cốc と呼ばれるブラウザを使用しています。1 つのブラウザだけで開発と検証を行うと、このような市場ごとの差異も無視してしまうことにもなります。
自分のブラウザで利用できる機能が、他のブラウザでは利用できないこともあります。各ブラウザベンダは、それぞれ異なるスケジュールで機能実装を行っています。そのため、自分が利用しているブラウザでは使えるイケてる機能は、他の多くの人が使っているブラウザでは使えない、ということは十分に起こりえます。
上記の要素は予期しない形で組み合わされてしまうことがあります。例えばこのようなシナリオで：すべてのブラウザで実装されていない API を利用して機能を実装し、1 つのブラウザでだけ動作の検証を行われたサイトを、そのブラウザが支配的な地位にいない市場でサービスインしてしまいます。その結果として、潜在的な顧客の半数以上を除外してしまい、彼らから得られるはずの利益を逃してしまいました。少しの労力でこのような状況を避けられるなら、それは惜しくない労力ではないでしょうか。
ブラウザ互換性をあげることで、アクセシビリティも向上する
複数のブラウザで正しく動作する Web サイトを作るためには、その動作環境に何の仮定もせず、可能なかぎり最大の人々が利用できるように、デザインして、コードを書く必要があります。そしてその利用者の中には、当然障害を持つ人々も含まれます。しかも、あなたの想定を超える障害を持つ人々が。全てのブラウザで快適に利用できたとしても、スクリーンリーダを使用していると利用できないのなら、それは大きな機会損失です。
障害を持つ人たちのマーケットシェアは巨大です。アメリカだけをとっても、カナダ全体のインターネット人口よりも多くの視覚に障害を持つ人々がインターネットを利用しています。モダンな Web ブラウザは彼らのニーズの実現に取り組んでいます。Web 開発者は、それを実装するだけで良いのです。
アクセシビリティを考慮して実装することは、障害を持つ人だけではなく、次の例のように持たない人に取っても有益です。
- スクリーンリーダーで使いやすいサイトは、検索エンジンにとっても処理しやいサイトとなります。画像へ代替テキストを付与し、リンクに対しても解説文をつける。また CSS によって意味の追加を行わなず、HTML5 の文章構造を表すタグを利用する。こういった単純なテクニックを利用するだけでも、ページの SEO が大きく向上します。
- 動画に字幕をつけると、聴覚に障害を持つ人だけでなく、例えば帯域が狭く動画をダウンロードできないような場合や、騒音がひどく音声を聞き取りづらい場合でも動画の内容を理解できるようになります。また字幕からもキーワードを拾うことができるため、SEO の面でも有効です。
利用者はブラウザを変えません。そのサイトを使うのをやめます
あなたのサイトの利用者は、あなたのサイトを見るためにブラウザを切り替えてくれると考えるかもしれません。しかし多くの場合、そのようなことはありません。
利用しようとするものが動作しない状態に、利用者は耐えられません。そして競合する他のサイトへ移動するでしょう。重要な場面でうまくいかないと、潜在的な利用者を永久に逃してしまいます。Akamai によると
- サイトの利用に問題のあった利用者が、そのサイトで取引をする確率は、そうでない場合と比べて 32% 少なくなります。
- 35% は、その運営会社に対して悪いイメージを抱きます。
- あなたのサイトに再びアクセスする傾向は 45% 減ります
- 5 人に 1 人以上（22 %）は、2 度とアクセスしなくなります。
多くの人は、新しいブラウザのインストール方法を知りません。ブラウザとは何かすら知らず、ブラウザと検索エンジンと Web サイトとの違いがわからないという人も多く存在します。
ブラウザのインストール方法を知っていて、インストールしたいと思っている場合でも、インストールできない場合というのも多くあります。例えば会社によって使用するブラウザが決められている場合や、図書館のような公共の場所にあるコンピュータを利用している場合などが、該当します。
例えば Microsoft は 2016 年 1月 12 日を期限に、新バージョンへの切り替えを推し進めました。しかし 3 月の時点でも、IE ユーザの 3 分の 1 以上はセキュリテイ更新がなされない古い IE を利用しています。そして全 IE ユーザの 2.07 % は、Microsoft もセキュリティ更新を停止した IE 8 を利用しつづけています。全 IE ユーザの 1.59% を占める IE9 ユーザのうち 4 分の 3 は、そのまま IE9 を利用し続けています。同じく 全 IE ユーザの 10.95% に当たる人々が、先月 IE 10 を起動しています。
正しく動作しない Web サイトからは、利用者が離れます。利用者の半数が異なるブラウザを利用していて、彼らを利用者として止めておきたいなら、それらのブラウザでの動作検証は必須となります。
互換性が保たれていること == 腕の良さ
Web コンテンツの作成は、決して単純労働ではありません。熟練した技術を必要とする専門的な分野です。誇りを持ち、腕を磨いて、自分のスキルを見せつけたいと開発者なら思うでしょう。
- 最先端の技術、フレームワーク、技法を駆使する
- ブラウザ間や、プラットフォーム間での互換性を注意深く検証し、機能が足りないブラウザ向けの回避策を用意する。この体験は許せますよね？
- 障害をもつ人でもコンテンツを利用できるよう検証を行う
- 製作物のビジュアルや体験が、魅力的で、開発者自身やクライアントのブランドにあっていることを確認する
Web 開発者にとって、開発したサイトは履歴書の代わりです。質の高い体験は、そのサイトの利用者、顧客にとって重要なだけなく、開発者自身の現在と未来の上司にとっても重要ですです。
しかしながら、時間とビジネスの制約によって思い通りにいかないことも多々あります。必ず守らなくてはならない締め切りや、持っている iPad で動けばいいと思っていてアクセシビリティなんて注意を払うつもりのない上司、修正する時間が残されていないIE のバグ。ほとんどの時間はやりたいことよりも、できることをこなすのに費やされます。
ブラウザの互換性やチェックは諦めてしまおう。きっとフレームワークがどうにかしてくれるさ。締め切りが迫ってきたら、そう思いたくなる時もあるでしょう。しかし作っているサイトは、完全にフレームワークだけでできているわけではありません。その部分を含んだ全体に対して、開発者は責任を持たなくてはならないのです。自分の書いたコードがブラウザが変わっても正しく動くことを保証するためのテストは、なんとしてでも守らなくてはならない作業です。
時を超えても生き残るコード、欲しい人になら誰にでも届けられる情報、すべての人が利用できるようなリッチな機能。こういったものは優れた Web 開発者にとっての崇高な目標です。
ツールを使って効率のよい開発を
ここまで、ブラウザ互換性を保つ理由を述べてきました。でもそれは、どのように達成すればいいのでしょうか？
- まず他の人の開発したサイトに互換性上の問題を発見したら、webcompat.com にバグとして登録しましょう。自分のサイトを修正する場合の方法は以降で説明します。
- 異なるブラウザを使って、利用者がするようにサイトを閲覧しましょう。エラーがあれば開発ツールのコンソールに表示されます。ほとんどのモダンなデスクトップ用ブラウザには、デスクトップサイトだけでなくモバイルサイトのデバッグに有用な機能を備えた開発ツールが組み込まれています。
- サイト内に問題がない場合、ブラウザがバグの原因かもしれません。その場合は、ブラウザベンダにバグ報告をしてください。ブラウザの開発者なら、その問題を解決できます。
- クロスブラザテストを行うツールを、開発プロセスに組み込みましょう。そうすれば、ブラウザ互換性のテストを自動化できます。
- API やブラウザの機能をサイトの実装に利用する前に、各ブラウザでの実装状況を把握しておきましょう
- ブラウザ互換性の向上に役立つツールを探しましょう
- Autoprefixer, CSSNext, Oldie に代表される PostCSS プラグインを利用すると、古いブラウザへの対応を気にすることなく最新の CSS を利用できます。
- Modernizr を利用すると、ブラウザごとの実装の違いの判定と処理が簡単になります。ユーザエージェントによる判定や振り分けを行うのではなく、こちらを利用しましょう。
- @supports は、プログレッシブエンハンスメントに関する情報を提供しています。こちらの情報を利用すれば、機能の多いブラウザに対しては、よりリッチな体験を提供できるようになります。
- 機能や、振る舞いの違いなどを多く学びましょう。深く知れば、それだけ愛着を持ってその機能を使えるようになります。
Web 本来の使命を果たすために
どんな人でも、使用しているブラウザや、使用している端末が異なっていても、コンテンツにアクセスできる、というのが Web 本来の使命です。自己決定、自由、教育、そして発見。これら人間性を構成するいくつかの重要な要素が、この使命には織り込まれています。ブラウザが変わっても使えるように設計することで、開発したサイトは最大限の利用者と市場に向けてのものになります。そして開発者としての腕も大いに磨かれ、素晴らしいものを作れるようになるでしょう。
最近のデバイスや、ブラウザによって生じる多くの困難がある一方で、それらの問題を解決するツールも多く存在します。ウェブの利用者は 30 億を超えます。その彼らが、あなたの作ったサイトを見るのです。その準備はよいですか？