Mozilla Japan ブログ

Mozilla、Firefox、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 によるその他の記事はこちら

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

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 ページ にてお申込を受け付けます

WebAssembly が 1 つのマイルストーンを達成しました: 複数ブラウザによる実験的なサポートがはじまりました

[この記事は米国 Mozilla HACKS ブログの記事 "A WebAssembly Milestone: Experimental Support in Multiple Browsers" の抄訳です]

WebAsssembly は策定が進んでいる標準の一つで、その目的は安全性とポータビリティを維持しつつ、サイズとロード時間の面で効率的なバイナリフォーマットの定義です。WebAssembly はコンパイラによって出力され、ネイティブに近い性能で動作します。言い換えるならば、WebAssembly のゴールとはWeb のための仮想 CPU の定義です。現在は Mozilla、Microsoft、Google そして Apple を含むメンバーで構成される W3C のコミュニティグループ (CG) で議論されています。

WebAssembly が重要なマイルストーンへと達したことをアナウンスさせてください。それは、複数のブラウザが、WebAssembly を相互運用可能な形でのサポートを開始しました[1][2]。これは実験的なものであり、標準実装にもいくつかの未実装な機能があります。しかしこれまでの成果を公開し、フィードバックを集め、次になすべきことに関する議論をするには良い機会であると言えます。

WebAssembly を導入する理由

JavaScript の低水準な部分集合である asm.js によって、ブラウザがサンドボックスによる安全性を保ちつつネイティブに近い計算性能を出せることが示されました。同時に、これらの機能に対する需要が非常に大きいことも認識されるようになった結果、ゲームや CAD、画像処理や顔認識といった、多様で多くのアプリケーションがEmscripten コンパイラを通じて asm.js を利用するようになりました。

昨年結成された WebAssembly コミュニティグループは、バイナリフォーマットの標準化によりWeb を次の段階へと進めました。このフォーマットにより、JavaScript で可能な限界を超えてファイルサイズを小さくし、ロード時間を短縮させることが可能となりました。また独立した新しい標準となることで、WebAssembly は低水準な機能を JavaScript の進化とは別に取り入れることが可能となりました。

そうはいっても WebAssembly が Web の一部分であり続けることの重要性も認識しています。既存の Web API へアクセスや、JavaScript で定義された関数との相互呼び出しといった、JavaScript との密な結合性は維持されねばならないと考えています。古典的なプラグインモデルと異なり、WebAssembly は JavaScript によるアプリケーションやライブラリと、asm.js がそうであるように、簡単に結合できます。

WebAssembly の初期設計へと至る、Emscripten と asm.js に関する経験は [3] [4] [5] [6] [7] [8] [9] で参照できます。またモダンブラウザが asm.js を高速に動作させられるため、対応していないブラウザで WebAssembly を利用するためのポリフィルも作成されました。これを利用することで、各ブラウザの WebAssembly へ対応が十分なされるのを待たなくても、WebAssembly を利用した開発を行えます。

進捗

過去の話はこれくらいにしておいて、今日へと話を戻します。コミュニティグループは以下の目覚ましい成果を達成しています。すべてのドキュメントは WebAssemby の GitHub organization で公開されています:

さらには 4 つのブラウザエンジンを作成するエンジニアが、WebAssembly のプロトタイプ実装を行いました 10111213。Firefox に関しては、私(訳注:原文著者である Luke Wagner)が asm.js の最適化パイプラインをリファクタリングし、構文解析を行うスレッドからバックグラウンドのコンパイラスレッドへ渡される asm.js のコード表現を WebAssembly のバイナリフォーマットに変更しました。

この変更により、asm.js の並列コンパイルの性能が相当向上しました。MIR 生成とコード生成という 2 つの重たい処理を、シーケンシャルなクリティカルパスから分離できたに分けられたためです。最適化処理パイプラインのリファクタリングによって、信頼できないバイトコードの検証を行うための小さなフロントエンドを追加するだけで、WebAssembly のデコード部分が実装できました。

asm-compile-diagram.png

上記で利用した用語の定義や、JS と asm.js のコンパイルに関する背景知識については、こちらのブログ記事を参照してください。

WebAssembly の試用

すべてのピースが揃い、複数の実験的な実装上で WebAssembly のデモを動作させられるようになりました。「実験的」である 2 つの要素、バイナリフォーマットと WebAssembly に対する JavaScript バインディングには、最初の標準が出来上がるまでの向こう数ヶ月間にいくつかの変更が加わると予想されます。また現在の処理系の実装が、ベンチマークやストレステストに耐えうるレベルまで成熟しているとも思われません。しかし、すべてのブラウザが足並みを揃えたところに、今回のマイルストーンの重要性があります。今後も協調して開発を続けていけるでしょう。

上述した通り、複数のブラウザ上で実際に動作するデモが用意されています:

AngryBots-2.png

特にこのデモには感傷的な価値があります:AngryBots は Unity のチュートリアルプロジェクトで、我々は Unity の WebGL 出力を作り上げる際にスモークテストとして利用していました。懐かしい、良い思い出です :)

このデモを動かすためには、Firefox の Nightly ビルドをダウンロードし、about:config で javascript.options.wasm に true を設定してください。

リリースまでの道のり

さて次は?安定した最初のリリースを行う前に、やるべきことがまだまだあります。コミュニティグループは、以下に挙げる事柄を大きなタスクだと考えています:

  • オフィシャルな WebAssembly のテキスト表現の定義
  • バイナリフォーマットのサイズのさらなる縮小。現在のバイナリフォーマットは圧縮されていない asm.js と比べて 42% 小さくなっています(gzip 圧縮時は 12%)。以前行ったバイナリフォーマットに関する作業の結果、さらに大幅に小さくできることがわかっています
  • WebAssembly JavaScript API の改善。現在の実験的なビルドには、Wasm.instantiateModule という同期的な関数一つだけが定義されています。これはコンパイルと、インスタンスの作成の二つを行います。暫定的な計画では、これら二つの処理を分離し、構造化され複製可能なコードオブジェクトを出力する関数を用意することになっています。新たに用意される関数は、同期的に実行するものに加えて、非同期的に実行されるものも同様に用意されます。これにより、現在の暗黙的に行われる asm.js のマシンコードのキャッシュよりはるかに柔軟にコンパイルとマシンコードのキャッシュをコントロールできるようになります。
  • コンパイラ作者、ツール製作者、ハッカーそして学生にとって、より読みやすいドキュメントの整備
  • テストスイートの充実

Firefox に関しては、以下を計画しています:

  • デバッガとプロファイラを含む、開発ツールの WebAssembly 対応。JavaScriptでは、Firefox に組み込まれている開発ツールと Firebug のチームは協力して、新しく、抽象的で、単体テスト可能な Debugger API を利用す方向に進んでいます。私たちはこの API を WebAssembly 向けにも実装しようとしています。実装はすでに始まっており、前述のデモを実行中にデバッガのタブを開くと、バイナリフォーマットから生成されたテキストフォーマットを見るためのプレースホルダーが置かれていることに気づくかと思います(オフィシャルなテキストフォーマットが定義された時点で、それに置き換わります)
  • コールドロードにかかる時間の短縮。16 個の 2.4 GHz のコアを持つ Linux マシンで測定した結果、WebAssembly になった AngryBots のコンパイル時間は、asm.js のそれに比べて 52% 減少しました。これは最初としては良い結果で、WebAssembly のデコードでコードは asm.js の構文解析より 10 倍程度高速であることによる結果です。コンパイルパイプラインの他の部分を改良することにより、コールドロードのさらなる短縮が見込めます
  • WebAssembly で定義されている演算子の実装の完了と、テストスイートの導入

全速で進みます

WebAssembly の進歩は、これまでのところ常に前向きなものでした。WebAssembly コミュニティグループのコラボレーションを促す空気には驚きと感謝が絶えません。より詳しく知りたい方は、GitHub のページをご覧ください。ここから始めるのが最善です。Happy hacking!

Luke Wagner について

Luke Wagner は Mozilla のリサーチエンジニアで、WebAssmebly と asm.js を Mozilla の JavaScript エンジンに組み込む活動を行っています。

Luke Wagner による、その他の記事はこちら

Mozilla が牽引する "ゲームプラットフォームとしての Web"、いよいよ新たな段階へ

[ この記事は、米国 Mozilla Blog に投稿された "Mozilla Pushes the Web to New Levels as a Platform for Games" の抄訳です ]

Web は、ゲーム開発のプラットフォームでもあります。それを実際にご覧いただくため、Mozilla は今年もサンフランシスコで行われる Game Developers Conference に出展します。 Web は、ますますパワフルに進化し、 Web ゲームの技術が成熟するにつれ、開発者とゲームプレイヤー両者の注目を集めています。

  • Mozilla が先駆けとなって開発した WebGL、WebVR、asm.js といった技術も勢いを増しています。
  • 次世代 asm.js の WebAssembly は、本日より、Firefox の Nightly 版で、テスト用の実験的機能としてお試しいただけます
  • GDC にて今週公開する Open Web Games は、開発者やブラウザメーカー向けのサイトで、最新の Web ゲーム技術の紹介やブラウザでストレステストを実行するための機能、Web games stack の安定と発展に向けた相互協力を醸成するための場を提供するもので、実際のゲームやデモが数多く用意されています。
  • WebGL 2、SIMD.js、Shared Array Buffer のような次世代 Web 技術も、 Firefox の Nightly 版でどなたでもお試しいただけます。
  • WebVR 推進のために、 Mozilla では最近、WebVR API プロポーザルのバージョン 1.0 を公開しました。
  • Mozilla では Mozilla Developer Network (MDN) や直接の技術的サポートを通じてプラグインベースのゲームタイトルを Web 技術に移植する開発者を支援しています。

ここ一年で、業界各社の Open Web 技術への関心も高まっています:

  • 業界最大でかつ最良とされるゲームエンジン Unity は、先日、これまで「プレビュー版」としていた WebGL や asm.js を使った出力機能 WebGL exporter を正式にサポートされたビルドターゲットに昇格するとの発表を行い、 Web スタック の有用性を後押ししました。
  • 3D デザインとアニメーションツールのリーダー的存在である Autodesk が、ゲームエンジ Autodesk Stingray に Web 出力機能を技術プレビューとして追加しました。
  • EVERYDAYiPLAY のような若いモバイル開発会社も、Heros of Paragon のようなゲームを Web 版に移植することで収益を成長させています。 EVERYDAYiPLAY 社のレポートによると、 Web 版の一日当たり一人当たりの売上高 (Daily Average Revenue per user: DAPRU) は、Android の Play Store での売上よりもずっと高く、 iOS 版にも追いつく勢いです。
EVERYDAYiPLAY-DARPU.png

Web ゲームが前進するために必要な API がメジャーブラウザによって次々と採用されています。ゲーム業界のトップブランド各社も続々と Web への対応を押し進めており、 Web プラットフォーム向けの開発がしやすい環境がますます整いつつあります。これにより、 Web プラットフォームでの成功も、開発者の手に届くものとなりました。

timeline.jpg

詳細情報

  • GDC にお越しの方は、南ホールの Lower Level 、ブース 936 の Mozilla ブースまでお立ち寄りください。
  • プレスによる取材や質問に関しては、 press@mozilla.com までお願いします。
  • Mozilla の GDC での活動や、 開発者よる最新記事、また、この取り組みへの参加方法などについては、 games.mozilla.org をご覧ください。

Mozilla の A-Frame がアムネスティ・インターナショナルの新しいバーチャルリアリティのサイト #360Syria に採用されました

[この記事は米国 Mozilla ブログに投稿された "Mozilla A-Frame Powers New Amnesty International Virtual Reality Website #360Syria" の抄訳です]

アムネスティ・インターナショナルは、本日、新しい #360Syria というサイトを作成したことをアナウンスしました。こちらのサイトでは、シリア政府によってアレッポ周辺の都市へ投下された樽爆弾による破壊の様子を、仮想的なツアーによって閲覧できます。この "Fear of the Skey" (www.360Syria.com) というサイトは、Mozilla の作成したライブラリ A-Frame を利用して作成されています。

アレッポ周辺のサイトへの仮想的なツアーを体験できる #360Syria のようなサイトは、WebVR の新しい有用なユースケースです。テクノロジによって、このような表現が可能になりました。新しいレベルの可視化と、実世界の状況に対する共感が可能になりました。

#360Syria は、特別に作成された全天周写真、ナレーション、音声、3D グラフィック、そしてアムネスティによって訓練されたシリアのメディア活動家によって収集された動画によって構成されています。このサイトはサンフランシスコのデザイン・テクノロジーカンパニーである Junior (www.junior.io) によって製作されました。

A-Frame はオープンソースの WebVR 用フレームワークで、Mozilla の仮想現実に関する研究グループである MozVR によって設計およびメンテナンスされいます。HTML によって簡単に WeVR コンテンツを作成でき、その構成要素は拡張可能で、組み合わせ方に制限がないため、高いレベルで自由にコンテンツを作成できます。VR 技術に不慣れ開発者であっても簡単に利用できるため、より熟練した開発者になるための間の学習にも最適です。

ハイパフォーマンスで、レスポンシブな VR 技術をオープン Web に実現することは、Mozilla のゴールの一つです。Mozilla の開発したオープンソースライブラリ A-Frame を利用することによって、WebGL のような複雑な 3D プログラミングをすることなく、VR 体験ができる Web サイトを作成できます。

A-Frame によって WebVR 開発ツールが豊かになり、それによって VR を作成する Web 開発者と、彼らによって作成される WebVR 体験が増えることを願っています。

関連情報:

以前の記事