Mozilla Japan ブログ

Mozilla、Firefox、Firefox OS、Thunderbird の最新情報をお伝えします

最新の記事

Webkit を念頭に作成されたサイトで起きるブラウザ互換性問題に対する Firefox の対応

[この記事は米国 Hacks ブログで公開された "Firefox 49 fixes sites designed with Webkit in mind, and more" の抄訳です]

最近 Hacks で公開したいくつかの記事で、ブラウザ互換性を意識したウェブ制作の重要性と、優れた開発者がブラウザ互換性を考慮してどのようにウェブを制作しているかについて述べてきました。全ての人がウェブを利用できるかどうかは、開発者にかかっています。今日の時点で、多くの互換性に関する機能が Firefox のレンダリングエンジンである Gecko に搭載されています。これはWHATWG の定める最新の互換性標準によるものです。

Firefox の今回行われた更新で、特筆すべき変更が加えられました。それはいくつかの -webkit- のついた属性と、WebKit に固有なインタフェースのサポートです。いずれも標準化されていないブラウザベンダ固有のものであるにも関わらず、多くのサイトで利用されているものです。

標準化されていない、つまり互換性の損なわれた CSS を利用するということは、標準にそって設計されたユーザーエージェントが正しく振舞えなくなること意味します。そんな技術を用いて作成されたサイトを、Firefox 48 以前に代表される -webkit- プレフィックスに対応していないブラウザで閲覧すると、サイトが壊れているように見えるでしょう。この状況はサイト側の CSS が更新されるまで続きます。だからこそ、今回の更新で Firefox には以下の変更を加え、WebKit でのみ動作するコンテンツに対する配慮を行いました。

  • WebKitCSSMatrix() インタフェースへの対応
  • -webkit-gradient() への対応
  • -webkit- プレフィックスのついたものを、相当する標準的な機能へ適切に対応させる機能の追加
  • 古い -webkit- プレフィックスのついた flexbox のうち、いくつかを -moz- プレフィックスのついたものに対応させる機能の追加
  • 接頭辞のないものが定義されていない以下の CSS 属性への対応

よくある(?)質問

Q. 私にはどういう意味がある変更なのですか?

A. 利用者にとっては、モバイルサイトに良くある WebKit のためだけに作られたサイトの互換性が向上します

WebKit のためだけに作成されたサイトを WebKit とそれ以外とで表示させた図。非 WebKit のブラウザでは表示崩れが起きています。

開発者にとっては、-webkit- だらけの CSS を作らなくても、それと相当する接頭辞のない属性も追加できることを意味します(過去に戻って追加したいと思う人もいるはずです)。これらの接頭辞は、(理論的には)いつの日かウェブプラットフォームから削除されます。

プロ向けの TIPS:接頭辞なしの属性は、常に最後に書きましょう。

Q. 以前のバージョンでは、私の作ったサイトは壊れて表示されていたのですか?

A. そうではなかった、と期待しています。壊れていたかどうかは、以下の設定を変更することで確認できます。

about:config?filter=layout.css.prefixes.webkit

もし違いがある場合は、バグとして bugzilla.mozilla.orgmitaylor@mozilla.org を CC に入れてご報告ください。もしくは webcomapt.com へご報告いただいても結構です。

Q. -webkit- プレフィックスのついたものだけ使えば良いのですか?

A. いいえ。やる必要のないことですし、お勧めできるものでもありません。ウェブ標準を使い、複数のブラウザでの動作を確認し続けてください。以前と比べてそうしなければならない理由は随分と少なくなっていますが、どうしても -webkit- プレフィックスのつく属性を CSS で利用する時には、必ずプレフィックスのついていない属性よりも上の行に書くようにしてください。

完全な情報公開のために:この記事を執筆した Mike は、WHATWG の互換性に関する標準を策定しています。しかしあなたが貢献できる余地は十分にあります。

mitaylor について

Mike は Mozilla のウェブ互換性エンジニアです。テキサス州オースティン在住。

mitaylor によるその他の記事はこちら

Justin Crawford について

Justin Crawford は Mozilla のプロダクトエンジニアで、ディベロッパーマーケティングとグロースを担当しています。未来について考え、ものを作り、バイクに乗ることを好みます。

Justin Crawford によるその他の記事はこちら

最新版 Firefox : マルチプロセス化の対象範囲が拡大し、デスクトップ版および Android 版に新機能が追加されました

[ この記事は、米国 Mozilla Blog に掲載された記事 "Latest Firefox Expands Multi-Process Support and Delivers New Features for Desktop and Android" の抄訳です ]

季節の移り変りとともに、Mozilla では、デスクトップと Android を通して Firefox での最高の体験をお届けできるよう、最新版 Firefox リリースに向けての努力を重ねてきました。

マルチプロセス化対象者の範囲を拡大

先月より、 Firefox 史上最大のアップデートであるマルチプロセス化を一部のデスクトップ版ユーザーに向けて順次提供を開始しています。これによりデスクトップ版 Firefox の反応性が向上し、フリーズすることも稀になります。実際に Mozilla で行ったテストのデータによれば、反応性は 400% も向上しました。

先日行ったマルチプロセス有効化の第一段階では、アドオンを利用していないユーザーを対象に展開しました。本日のアップデートでは、この対象範囲を拡大し、正常な動作が確認されている一部アドオンを利用しているユーザーにも提供を開始します。今後も対象範囲を更に拡大し、2017 年には全 Firefox ユーザーを対象にマルチプロセスを有効化します。

デスクトップ版でリーダービューが改良されました

リーダービューに 2 つの大きな改良が加えられます。これはウェブページ上のボタンや広告背景画像などを取り除き、文字の大きさやコントラスト、レイアウトを調整することで記事を読みやすくする機能です。今回の更新で、テキストを読み上げる機能がオプションとして追加されました。このオプションを利用することで、リーダービューでのブラウジング中に邪魔なものを除いた状態で、自由にお気に入りの記事の読み上げを聞けるようになります。

本日追加されたの 2 つ目の変更点は、 リーダービューによって生成されたページのテキストやフォント、読み上げの音声を調整する機能です。さらに、夜、暗い部屋の中で記事を読むのが好きな方には、 リーダービューのテーマを「ライト」から「ダーク」に変更することで読みやすくなります。

Android 版 Firefox でオフライン時のページ閲覧が可能になりました

Android 版 Firefox では、オフライン時や通信状況が不安定な際でも、以前開いた一部のページにアクセスすることが可能になりました。これにより、たとえ電波が届かない場所にいたとしても、少し前に開いていたページのコンテンツを閲覧できます。お使いのデバイスの性能によって大きく左右されますが、この機能は多くのウェブページで利用できます。デバイスを機内モードにした状態で Firefox を立ち上げて、この機能を試してみてください。

english ff49 cache offline content Screenshot_20160907-104644 29525245795_2b6324f467_o.png

Mozilla では、今後も Firefox の使い心地をより良いものにするため、様々なアップデートや新機能を提供していきます。まずは最新版の Firefox をデスクトップや Android 端末にダウンロードし、使い心地をお聞かせください。

詳細情報

Firefox のリリースチャンネルはご存じですか?

Firefox には、よく知られているものの他に、青いキツネのアイコンや、濃紺のものなどがあるのはご存じですか?これらを私たちはリリースチャンネルと呼んでいます。今回は、それぞれのリリースチャンネルの位置付けと特徴についてご紹介します。

まず、よく見かけるオレンジ色のアイコンの Firefox は、「リリース版」と呼ばれています。Firefox の新機能は、作成されてすぐリリース版に搭載されるわけではありません。新しい機能は、まず Nightly 版へと実装されます。そのあと各リリースチャンネルでさまざまな方に使っていただき、不具合の発見と修正が行われ、問題があらかた修正されるとリリース版へと組み込まれます。

firefox-release-channels@0.75x.pngそれぞれのリリースチャンネルは、テスト用という以外にも特徴があります。それらを順番にご紹介します。

Firefox Beta

公式リリースの前に次期バージョンをテストするためのチャンネルで、最も安定したテストビルドです。このバージョンをお使いいただくだけで、ベータテスターとして Firefox 開発に貢献でき、製品のクオリティ向上に役立ちます。
Firefox Beta のダウンロード

Firefox Developer Edition

ウェブ開発をされている方向けのバージョンで、開発に便利な最新の機能をいち早くお使いいただけるのが特徴です。JavaScript で開発をされるエンジニアの方はもちろん、ウェブデザイナーの方にとっても便利な機能が多く搭載されています。以前は Aurora という名前で Beta 版ひとつ手前のバージョンという位置付けでした。2014 年からコンセプトを変更し、ウェブ開発者のためのブラウザとして提供されています。
Firefox Developer Edition のダウンロード

Firefox Nightly

ブラウザのプラットフォーム開発者を対象にしたビルドで、毎晩更新され、最先端の新機能をいち早くお試しいただけるバージョンです。ただし、完全に開発者向けのビルドですので安定性は低いものとなります。

Firefox Nightly のダウンロード

これら、リリース版を含めた 4 つのチャンネルは、現在、およそ 6 週間から 8 週間のサイクルで、各プロセスを経て安定版へと進んでいきます。ウェブ開発に携わる方には、Firefox Developer Edition は特におすすめですので、ご興味のある方はぜひお試しください。

なお、Firefox のリリース版を使いつつ、他のチャンネルも試したいという方は、プロファイルを分けて起動することをおすすめします。詳しくは Mozilla Support の記事でご紹介しています。(Developer Edition に関しては、リリース版との併用を想定しており、自動的に Developer Edition 用のプロファイルが作成されます。)

大幅な改良が加えられた デスクトップ版および Android 版の Firefox が本日リリース

[ この記事は、米国 Mozilla Blog に投稿された記事 "Exciting Improvements Delivered Today in Firefox for Desktop and Android" の抄訳です ]

本日は、マルチプロセス化された Firefox が一般のユーザ向けに初めて届けられる記念すべき日です。これはデスクトップ版 Firefox にとって、大きな前進です。この更新により Firefox の素晴らしい機能や体験はそのままに、フリーズのリスクが減り、ユーザのインプットに対する反応も良くなります。

Firefox 48 では、一般ユーザに向けて、少しずつマルチプロセス Firefox (Electrolysis や e10s という名前で知られています) を有効化させていきます。まずは全ユーザの 1% から始め、問題がなければ徐々に全体の半分ほどにまで増加させていく予定です。 e10s は Web コンテンツの処理と Firefox のユーザインタフェースの処理とを、別のプロセスに分けることで、 Web の閲覧体験を格段に向上させます。たとえ特定の Web ページがコンピュータのプロセッサの処理能力を大幅に消費していたとしても、ブラウザのタブやボタン、メニュー等がフリーズすることはありません。お使いの Firefox で e10s が有効になっているかを確かめるには、 URL バーに "about:support" と入力します。有効になっている場合、マルチプロセスウィンドウの項目に、Windows や Linux では「 1/1 (既定で有効) 」、Mac では「 1/1 (デフォルトで有効) 」 と表示されます。

AboutSupport.png

また本日のアップデートでは、デスクトップ版 Firefox の根本的な動作方法の改良に加え、より簡単にコンテンツを見つけるため、ブラウザのデザインにもいくつか変更を加えています。その一つがアドレスバー (ローケーションバー) の改良です。検索キーワードを入力した際の結果が、画面上に幅広く表示されるようになり、候補の表示件数も増えました。これにより検索キーワードの候補結果がより見やすくなりました。また、ブックマークや開いているタブ内のサイトをおすすめする場合は、それを示すアイコンが表示されるようにもなりました。

apple_pie.png

"about:addons" 内のアドオン入手パネルもデザインが刷新されました。アドオンのインストールがワンクリックでできるようになり、見やすいイメージやテキストによって Firefox のカスタマイズやアドオンの検索がより簡単になりました。

Add-ons_Manager.png

最後になりますが、 Firefoxでダウンロードする際の安全性を高めるための改良も行いました。詳しくはこちらをご覧ください。

Android 版 Firefox にも新機能が搭載されました。 今年の 3 月にブックマークの刷新について実験を行なっていることをお伝えしましたが、今回は、その成果を製品版に反映します。今回のアップデートで、リーディングリストがブックマーク内に、また同期されたタブが履歴パネルに、それぞれ統合されました。これにより、リーディングリスト内の項目はブックマークと同じ様に端末間で同期されるようになりました。使用する端末が変わっても自分の見ているコンテンツへ簡単にアクセスできるようになったため、 Firefox を複数の端末でお使いの方にとって更に使いやすくなりました。

最近は、以前よりも多くの人が Web で動画を見るようになってきています。この状況に合わせて、Andorid でのメディアの再生機能を改善しました。 Android 版 Firefox 内で動画の閲覧中に通話の着信があった場合、自動的に動画が一時停止されるようになりました。またアプリ内で直接音量を調整したり、どんな動画でもタッチ操作で再生位置を変更できるツールバーを追加しました。

Electrolysis は、向こう数カ月にわたって徐々に展開していきます。まずは最新版のデスクトップ版および Android 版の Firefox をダウンロードし、ぜひ使い心地をお聞かせください。

詳細情報

iOS 版 Firefox のユーザ体験が向上しました

[ この記事は、米国 Mozilla Blog に投稿された記事 "Mozilla Delivers Improved User Experience in Firefox for iOS" の抄訳です ]

iOS 版 Firefox が昨年末にリリースされた際、たくさんの反応とダウンロードをいただきました。 iPhone や iPad を使用している Firefox ユーザからたくさんの喜びの声が上がりました。そのような中、 iOS 版 Firefox のユーザエクスペリエンスを大幅に向上させるアップデートを本日公開しました。今回の変更によって、 Mozilla が大切にしている「速度」「カスタマイズ性」「選択肢」の三つの点が改良されます。

Firefox がより速く

Mozilla は現在、サマーインターンの時期を迎えています。 iOS 版 Firefox エンジニアチームのインターンTyler Lacroixが今月、全力を尽くして力を注いだ個人プロジェクトは、 Firefox の速度向上でした。彼が最新版の Firefox をテストした結果によると、 CPU 使用量は約 40% も削減され、メモリ使用量も 30% の改善が見られました。これにより Firefox のページ読み込みは高速になり、電池使用量も抑えられます(もちろん、人もデバイスもそれぞれなので実際の結果もそれぞれですが)。いずれにせよ、これらのアップデートを本日リリースできることは、 Mozilla としてとても光栄なことです。

特定のサイト用のサーチエンジンを簡単に追加できるようになりました

iOS 版 Firefox には人気の検索エンジンが既に組み込まれていますが、アドレスバーから直接検索したいサイトが他にある場合もあるでしょう。今回のアップデートによって、例えばロードバイク用に新しいハンドルを探しているなら、 Craigslist や eBay 内をアドレスバーから直接検索できるようになりました。雑学マニアになりたい人は、ワンタップで Wikipedia 内を検索することもできます。検索機能が付いている任意のサイトにアクセスして、キーボード上に表示される虫めがねアイコンをクリックすれば、簡単に検索エンジンのリストに追加することができます。

1-addsearchcustom.jpg

新しいメニューでナビゲーションも簡単に

デスクトップ 版 Firefox と同じシームレスなナビゲーションを期待していたユーザにとっては、 iOS 版 Firefox のナビゲーションは使いづらいものでした。今回の更新では、ツールバーに新たなメニューが追加されナビゲーションが簡単になりました。これによりブックマークの追加やページ内検索などよく使う機能へ素早くアクセスできるようになりました。

2-menu button cropped.jpg

閉じたタブの復元と、開いているタブ間のナビゲーション

これまでのモバイル版ブラウザ内でのタブブラウジングは、どれも使いにくいものでした。見づらくて管理も難しく、一度閉じてしまったタブを元に戻すことはできませんでした。最新版の iOS 版 Firefox では、閉じたタブをすべて復元できるようになり、開いているタブの移動も可能になりました。

3-undo closed tabs.jpg

よく使うサイトをワンタップで表示するホームページ機能

ブラウザを立ち上げてまずアクセスし、またブラウジング中も頻繁に戻ってくるサイトがあるはずです。今回の更新でお気に入りのサイトをホームページとして設定可能なり、、 iOS 版 Firefox のカスタマイズ性が更に拡張されました。設定されたサイトは、「ホーム」アイコンをタップするだけで瞬時に表示されます。この機能によって、お気に入りのサイトへのアクセスはに簡単になりました。

4-homepage-button.jpg

これら iOS 版 Firefox の新機能は、すべてユーザからのフィードバックを元に生まれました。今回の更新に関してもさらなるフィードバックをお待ちしています。 iOS 版 Firefox の最新機能を試すには、こちらから App Store にアクセスし、ダウンロードしてください。

iOS 版、 Android 版、 Windows 版、 Linux 版と、 Mozilla では Firefox を通して健全でオープンな Web を推進しています。これは、世界中にいる数億人の Firefox アクティブユーザや Firefox コミュニティ無しでは不可能なことです。今後も Firefox をよろしくお願いします!

詳細情報

Firefox 内での Adobe Flash 使用量を削減します

[この記事は、米国 Mozilla Future Releases ブログに投稿された記事 "Reducing Adobe Flash Usage in Firefox" の抄訳です。]

ブラウザのプラグイン、とりわけ Flash は、動画やインタラクティブコンテンツなど、様々な Web 上の体験を可能にしてきました。一方、ブラウザの安定性やパフォーマンス、セキュリティ面で問題を起こすこともあります。Web 上の体験と安定性はどちらか一方だけが成立すれば良い、というものではありません。

Mozilla 含め、 Flashへの依存を減らす努力がなされています。その一環として、8月以降 Web の利用に不必要な Flash コンテンツのブロックされます。古いサイトの閲覧上必要な Flash コンテンツは、引き続きサポートされます。これにより、セキュリティの向上、電池使用量の改善、ページ読み込み速度の短縮、ブラウザのレスポンスの改善などが見込まれます。

ここ数年間で Firefox は数々の Web API を取り入れて、プラグインでのみで提供されていた機能を置き換えられるよう努めてきました。これには音声や動画の再生、ストリーミング機能、クリップボード統合、2D 及び 3D の高速グラフィック、 WebSocket による通信、マイク及びカメラへのアクセスなどが含まれます。 Web サイトが Flash から Web 技術に移行したにつれて、プラグインのクラッシュ率は大幅に減少しました。
Plugin-crash-rate-in-Firefox.jpg
こうした流れを引き継いで、 Firefox ではページ上に表示されない Flash コンテンツをブロックします。これにより、 Flash が原因のクラッシュやプチフリを 10% ほど減らすことができます。 Web サイトの互換性に関する問題を未然に防ぐため、現段階でブロックする Flash コンテンツは HTML と置き換え可能なものに限られます。このリストは今後増やしていく予定です。

広告の効果測定のために Flash を利用してコンテンツの閲覧可能性をチェックする手法が広く使われています。これも今年度中にブロックされる方針です。これにより Firefox のパフォーマンスとデバイスの電池持ち時間の向上が見込まれます。このブロックは、同等の機能を持つ HTML Intersection Observer API (https://bugzilla.mozilla.org/show_bug.cgi?id=1243846) がリリースされる段階で行います。 Flash を利用した測定を行っているコンテンツプロバイダはこちらの API への移行をおすすめします。

また 2017 年以降 Firefox で全ての Flash コンテンツは、閲覧のためにユーザのクリックによるアクティベーションが必要になります。現在 Flash や Silverlight を使用したゲームサイトは速やかに HTML 技術に移行してください。暗号化された動画の再生できるよう Firefox では現在 Adobe PrimetimeGoogle Widevine をサポートしています。

今後もユーザに最適な Flash の体験をしてもらえるよう、 Adobe 社と密接に関わりながら努めていきます。両社のエンジニアリングパートナーシップによって、 Windows での 高DPI サポートや サンドボックス機能の強化、Flash レンダリングパイプラインの加速など、数々のパフォーマンスと安定性の向上が実現してきました。

これらの努力はすべて、快適な Web 体験を犠牲にせずにブラウジングの安全性と速度を向上させる Mozilla の挑戦の一部です。昨年発表したとおり、 Firefox は 2017 年 3 月を以て Flash を除くすべての NPAPI プラグインのサポートを廃止します。同時期に予定されている次回のFirefox ESR (延長サポート版) のリリースでは引き続き Silverlight や Java といったプラグインのサポートをし、移行に時間を要するユーザのためにも、 2018 年初旬までサポートを続けます。

Firefox が発見とコラボレーションのプラットフォームとなるよう、今後も様々な機能を実験的に導入していきます。ユーザのみなさんのフィードバックや機能のリクエストをお待ちしています。

「ブラウザ技術の組み込み」について語る会

Mozilla Japan では、7 月 27 日 (水) に、「ブラウザ技術の組み込み」に関するミートアップイベントを開催します。このイベントでは、ブラウザ技術を製品に組み込むことに興味のある個人や企業の方に集まっていただき、情報交換を行うことを目的にしています。

SoC ベンダーや、組み込みベンダーが多い日本では、既にコミュニティレベルで、 Firefox (Gecko) を 組み込みボードに移植する活動なども始まっており、今回、教育機関や企業、個人問わず、こうしたトピックに関心を持つ皆さんがクロスで集まれる場を設けようということになりました。

今回は、この時期に来日を予定している Mozilla Corporation の Connected Device 担当者にもイベントに参加してもらい、皆さんとの意見交換を行う予定です。

カジュアルなコミュニティミートアップイベントですので、組み込み技術に携わっているエンジニアの方はもちろん、技術者以外で個人で興味があるという方もぜひお気軽にご参加ください。

(なお、当日は、Mozilla Japan スタッフが逐次通訳を務める予定です)

  • 日時: 2016 年 7 月 27 日 (水) 18:30 ~ 20:30
  • 場所: Mozilla Japan オフィス (東京都港区六本木 7-5-6)
  • 参加費: 無料
  • 定員: 20 名
  • お申込方法: Doorkeeper ページにてお申込を受け付けます

APPS JAPAN 2016 で配布した「ブラウザ歴史年表」のデータとオープンステージのアーカイブを公開しました

6/8 - 6/10 に幕張メッセで開催された APPS JAPAN (アプリジャパン) 2016 特設ブース「Web Browsers - A Historical Archive -」で配布を行ったブラウザ歴史年表のパンフレットが大変好評でしたので、PDF とイラストレーターのデータを公開しました。

DSC_0315.JPG

このパンフレットのデータは、クリエイティブ・コモンズ 表示 - 非営利 4.0国際 ライセンスの下で公開していますので、Mozilla Japan という作者名を表記して、非営利目的の利用であれば自由にお使いいただけます。

なお、APPS Japan のブース内に設置されたオープンステージでは、会期中、豪華なゲストの皆様にご登壇いただき、トークセッションを行いました。

APPSJAPAN3.jpg

こちらも見逃した方のために、各ステージの動画アーカイブを公開しておりますのでよろしければご覧ください。( 一部の動画で音声が途切れている部分があります。ご了承ください。)

すべての人が使える Web を開発しよう

[この記事は、米国 Mozilla HACKS ブログに投稿された記事 "Make the Web Work For Everyone" の抄訳です。]

数多くの Web サイトがブラウザ互換性の問題を抱えたまま運営されています。特定のブラウザでしか正しく動作しないという状況は、ユーザ体験を大きく損なう要因となります。そして、この問題は Web 開発者のコミュニティが修正できるものなのです。

この 20 年で Web は全く異なるものになりました。1996 年の時点で Web サイト数は 100 万程度。これが今では 10 億を超えるサイトが運営されています。そしてインターネットの利用者数も 5 千万人から、30 億人へと膨れ上がっています。私たちはかつて想像されたよりも、はるかに膨大なコンテンツと接しています。それにアクセスする端末も、810 億台と膨大で、その種別は 24,000 以上と非常に多様になっています。

webcompat_blog_graphics_600x800-01.jpg

インターネットの爆発的な成長により、1996 年の時点と比較して、ブラウザ互換性の問題はより本質的な問題となりました。Stack Overflow には "cross-browser" という文字列を含む質問が 55,000 件程度あり、「なんとかっていうブラウザならうまく動くんですが」という質問は 10 万件単位で寄せられています。特定のブラウザで、特定のサイトをうまく使えないことへの質問は、潜在的にブラウザ互換性に関する質問です。

webcompat_blog_graphics_600x800-02.jpg

以上の状況から、ブラウザ間での互換性維持は、いまだに重要な問題であると言えます。この問題は Mozilla にとっての問題であるだけでなく、Web を作成する一人一人が考えなくてはならない問題でもあります。なぜ Web 開発者が、この問題について考えなくてはならないのでしょうか。それはこの問題が 「あなたのサイトを利用する人は、あなたと同じブラウザを利用していない」から、そして「利用者の能力は均一ではなく、その目的も同じものではない」からであり、「あなたのサイトを利用できないという理由では、利用者は使うブラウザを決して変えたりしない」からです。裏を返せば、利用者が快適に利用できるサイトを作成できるということは、あなたの腕の良さの証明なのです。そしてツールを適切に利用することで、より簡単にそのようなサイトを作成できます。

ブラウザ間での互換性に問題が起きるのはなぜでしょうか。その理由はいささか複雑ですが、主要なものをあげると次のようになるでしょう:

  • ベンダプレフィックス付きの機能のような、特定のブラウザが提供する機能だけを使ってサイトを実装してしまい、代替機能やポリフィルを使うといった、その機能を持たないブラウザへの対策がとられていないため
  • 開発者が必要とする機能を、ブラウザベンダが標準化を待たずに実装してしまうため
  • ブラウザベンダによる標準仕様の実装や、バグの修正に時間がかかるため
  • サイトがユーザエージェントの値によって、異なるコンテンツを配信しているため
  • 開発者が一つのツールに、特に 1 種類のブラウザでしか安定して動作しないようなツール、に頼り切ってしまって、ブラウザ互換性に関する問題を見逃してしまうため
  • 業界の成長によって新しい開発者の需要が増大した結果、平均的な開発者の経験が、数年前のそれよりも劣ってしまっているため
webcompat_blog_graphics_600x800-03.jpg

上記に挙げた問題のいくつかは、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 を利用しています。過去1年間の統計によると、全インターネットユーザのうち 2.07% は Microsoft もセキュリティ更新を停止した IE 8 を利用しつづけており、1.59% を占める IE9 ユーザのうち 4 分の 3 は、そのまま IE9 を利用し続けています。同じく 全 IE ユーザの 10.95% に当たる人々が、IE10 を利用しています(付記:これらの使用率は 3 月から大きく下がっています)

正しく動作しない Web サイトからは、利用者が離れます。利用者の半数が異なるブラウザを利用していて、彼らを利用者として止めておきたいなら、それらのブラウザでの動作検証は必須となります。

webcompat_blog_graphics_600x800-04.jpg

互換性が保たれていること == 腕の良さ

Web コンテンツの作成は、決して単純労働ではありません。熟練した技術を必要とする専門的な分野です。誇りを持ち、腕を磨いて、自分のスキルを見せつけたいと開発者なら思うでしょう。

  • 最先端の技術、フレームワーク、技法を駆使する
  • ブラウザ間や、プラットフォーム間での互換性を注意深く検証し、機能が足りないブラウザ向けの回避策を用意する。この体験は許せますよね?
  • 障害をもつ人でもコンテンツを利用できるよう検証を行う
  • 製作物のビジュアルや体験が、魅力的で、開発者自身やクライアントのブランドにあっていることを確認する

Web 開発者にとって、開発したサイトは履歴書の代わりです。質の高い体験は、そのサイトの利用者、顧客にとって重要なだけなく、開発者自身の現在と未来の上司にとっても重要ですです。

しかしながら、時間とビジネスの制約によって思い通りにいかないことも多々あります。必ず守らなくてはならない締め切りや、持っている iPad で動けばいいと思っていてアクセシビリティなんて注意を払うつもりのない上司、修正する時間が残されていないIE のバグ。ほとんどの時間はやりたいことよりも、できることをこなすのに費やされます。

ブラウザの互換性やチェックは諦めてしまおう。きっとフレームワークがどうにかしてくれるさ。締め切りが迫ってきたら、そう思いたくなる時もあるでしょう。しかし作っているサイトは、完全にフレームワークだけでできているわけではありません。その部分を含んだ全体に対して、開発者は責任を持たなくてはならないのです。自分の書いたコードがブラウザが変わっても正しく動くことを保証するためのテストは、なんとしてでも守らなくてはならない作業です。

時を超えても生き残るコード、欲しい人になら誰にでも届けられる情報、すべての人が利用できるようなリッチな機能。こういったものは優れた Web 開発者にとっての崇高な目標です。


ツールを使って効率のよい開発を

ここまで、ブラウザ互換性を保つ理由を述べてきました。でもそれは、どのように達成すればいいのでしょうか?

  • まず他の人の開発したサイトに互換性上の問題を発見したら、webcompat.com にバグとして登録しましょう。自分のサイトを修正する場合の方法は以降で説明します。
  • 異なるブラウザを使って、利用者がするようにサイトを閲覧しましょう。エラーがあれば開発ツールのコンソールに表示されます。ほとんどのモダンなデスクトップ用ブラウザには、デスクトップサイトだけでなくモバイルサイトのデバッグに有用な機能を備えた開発ツールが組み込まれています。
  • サイト内に問題がない場合、ブラウザがバグの原因かもしれません。その場合は、ブラウザベンダにバグ報告をしてください。ブラウザの開発者なら、その問題を解決できます。
  • クロスブラザテストを行うツールを、開発プロセスに組み込みましょう。そうすれば、ブラウザ互換性のテストを自動化できます。
  • API やブラウザの機能をサイトの実装に利用する前に、各ブラウザでの実装状況を把握しておきましょう
    • Caniuse
    • MDNのブラウザ実装状況表
    • Kangax's ECMAScript compatibility tables
  • ブラウザ互換性の向上に役立つツールを探しましょう
    • Autoprefixer, CSSNext, Oldie に代表される PostCSS プラグインを利用すると、古いブラウザへの対応を気にすることなく最新の CSS を利用できます。
    • Modernizr を利用すると、ブラウザごとの実装の違いの判定と処理が簡単になります。ユーザエージェントによる判定や振り分けを行うのではなく、こちらを利用しましょう。
    • @supports は、プログレッシブエンハンスメントに関する情報を提供しています。こちらの情報を利用すれば、機能の多いブラウザに対しては、よりリッチな体験を提供できるようになります。
  • 機能や、振る舞いの違いなどを多く学びましょう。深く知れば、それだけ愛着を持ってその機能を使えるようになります。

Web 本来の使命を果たすために

どんな人でも、使用しているブラウザや、使用している端末が異なっていても、コンテンツにアクセスできる、というのが Web 本来の使命です。自己決定、自由、教育、そして発見。これら人間性を構成するいくつかの重要な要素が、この使命には織り込まれています。ブラウザが変わっても使えるように設計することで、開発したサイトは最大限の利用者と市場に向けてのものになります。そして開発者としての腕も大いに磨かれ、素晴らしいものを作れるようになるでしょう。

最近のデバイスや、ブラウザによって生じる多くの困難がある一方で、それらの問題を解決するツールも多く存在します。ウェブの利用者は 30 億を超えます。その彼らが、あなたの作ったサイトを見るのです。その準備はよいですか?

絵文字を使って暗号の基本について学べるゲーム "Codemoji" を公開しました

米国 Mozilla より昨日公開されたばかりの暗号の基本を皆さんに知ってもらうためのツール "Codemoji" をご紹介します。

メッセージを書いて、暗号化の鍵となる絵文字を 1 つ選択すると、書いたメッセージが絵文字の暗号となって表示されるツールです。残念ながら日本語は使えないので、暗号にできるのは英文もしくはローマ字で書かれた文に限られますが、暗号化されたメッセージは SNS やメールを通じて友達とシェアできます。暗号を送り合って、暗号とそれを使った通信について考えてみましょう。

個人で使用する以外に、学習教材としても有用なコンテンツです。ぜひご利用ください。


[以下は、米国 The Mozilla Blog の記事 "Meet Codemoji: Mozilla's New Game for Teaching Encryption Basics with Emoji" の抄訳です]

==================================================


msg1.png


上のメッセージは、一見ランダムに羅列された絵文字の並びに見えるかもしれません。しかし実は、解読すると「Encryption Matters (暗号って大切)」と書いてあります。

本日、 Mozilla は Codemoji という、暗号の基本となっている「サイファ(暗号)」について、絵文字を使って楽しく学べるツールを公開しました。

Codemoji で遊ぶ»

遊び方

Codemoji とは、書いたメッセージを絵文字を使って暗号化し、その暗号を友人に送ることができる Web 上のプラットフォームです。

codemoji.gif

注意: Codemoji は学習支援ツールであり、個人情報を共有するためのツールではありません。幸い、今日の暗号化技術は絵文字を使ったサイファ (暗号) よりもずっと強力なので、個人情報のやり取りを行う際は、より高度なセキュリティツールを利用しましょう。

Codemoji の狙い

Codemoji は Mozilla が イタリア・トリノにベースを置くデザイン・クリエイティブエイジェンシー TODO との協力の上で制作しました。 その目的は、日常的にインターネットを利用するユーザに、暗号化通信やサイファ (暗号) の基本について知ってもらうことです。

Mozilla の エグゼクティブ・ディレクター Mark Surman は以下のように述べています。

「より多くの人が暗号のしくみや、自分にとっての意義について理解すれば、然るべきタイミングが来た時に一斉に立ち上がることができるでしょう。世界の各地で暗号化通信が脅かされている今、みなさんのこうした理解は極めて重要になってきます。フランスに始まり、オーストラリアやイギリス等、暗号の安全性を弱めるような政策が各国の政府によって提案されています。アメリカでも最近、FBI がアップルに自社製品のセキュリティを弱めるよう要請する事件がありました。」

暗号はインターネットをより安全なものにしていくにあたって最も大切な武器であると Mozilla は信じています。そして、より安全なインターネットづくりは Mozilla のユーザにとって、経済にとって、そして国家の安全にとって欠かせない要素でもあります。

暗号は私たちの日常生活や日々の買い物の一部となっています。暗号が利用されるのは、貯金や買い物など、とても重要な場面です。暗号の力を弱めることは、これらの行為を危険に晒すことを意味します。

Codemoji がインターネットユーザが暗号について理解するための第一歩になることを Mozilla は願っています。暗号の重要性やそれを守るためにできることについては、 advocacy.mozilla.org/encrypt をご覧ください。

最後まで読んでいただき、ありがとうございます。
msg2.png


(Codemoji の訳: "Thanks for reading")
week1_codemoji_03.jpg