Firefox 4 Beta 9 – 素晴らしい機能を満載して登場

原文: Firefox 4 Beta 9 – a huge pile of awesome (2011/01/14 公開)

こんにちは。Firefox 4 Beta 9 の記事へようこそ。これを読んでいるあなたは、近々 Firefox 4 の正式版として公開される素晴らしいブラウザの最新ベータ版に含まれている機能に興味をお持ちのことでしょう。Firefox は次なるメジャーアップデートに向けて開発サイクルの終盤に差し掛かろうとしており、そろそろ Firefox 3.6 以降に投入された Web 開発者向け新機能について全般的な概要を説明できる時期になったかと思います。これまでのベータ版に関する記事を読んだ方にとっては、このうちのいくつかは既にご存じですが、Beta 9 は新しいベータ版で、開発チームが懸命に作業を行ってきたため、中にはすべての開発者にとって目新しい機能もあります。

パフォーマンス

Firefox 4 の主要課題はパフォーマンスです。このため開発チームは、起動時間から、JavaScript の実行速度、応答性に至るまで、ブラウザのパフォーマンスを全体的に向上させるとともに、ユーザインタフェースをより簡単かつ効率的に操作できるようにするため、相当な作業を行ってきました。Beta 9 までにパフォーマンス向上のため投入されてきた機能を以下で説明しましょう。

JägerMonkey

既にお気付きの通り、最新のベータ版はかなり高速になっています。この JägerMonkey [イェガーモンキー] は世界初の第 3 世代 JavaScript エンジンで、他のブラウザが採用しているエンジンと似たベースライン JIT 技術を用いて、Firefox 3.6 に搭載された「トレーシング」エンジンの性能を大幅に強化したものです。これにより、SunSpider や V8 といったベンチマークで競合に勝るだけのパフォーマンスが得られました。それだけでなく、次世代 Web アプリケーションが実装すると期待される多くの機能についても高速化が図られました。そこで Mozilla では、実環境でのパフォーマンスを測定すべく、Kraken という新たなベンチマークを開発しました。

ハードウェアアクセラレーション

Firefox 4 は、D2D、DX9、DX10 を組み合わせて利用することにより、Windows 7 と Windows Vista でハードウェアアクセラレーションに完全対応します。その結果、Canvas の描画から動画の再生まで、あらゆるものが加速されます。Windows XP でも、新たに開発した「レイヤー」基盤を DX9 とともにを用いることで、様々な処理に関してハードウェアアクセラレーションを行います。そしてもちろん、Mac 版は優れた OpenGL 対応を実現しており、Mac 環境でもこの新技術による恩恵を得られます。

コンパートメント

Beta 7 で追加された「コンパートメント」は、パフォーマンス向上のために開発された基礎技術で、より優れたセキュリティ基盤になると同時に、長期的に見れば、ガベージコレクションへ良い影響をもたらし、優れた応答性を得られます。(注: 一部の機能はまだベータ版に実装されていません。) コンパートメントの重要性に関して知りたければ、Andreas Gal のブログ記事をご覧ください。コンパートメントとはどのようなもので、どのように動作するのか、分かりやすく説明されています。

DOM とスタイル解決の高速化

DOM とスタイル解決の全体的なパフォーマンスを向上させるため、多くの改良が行われました。最近では、ページの読み込みや応答性への影響が広く認知された結果、JavaScript が非常に注目を集めていますが、その JavaScript よりも DOM とスタイル解決 (通常はドキュメントのリフロー処理に含まれます) がページの表示速度に影響を及ぼすことがしばしばあります。そのため、Firefox 4 ではこれらの処理が全体的に改善されました。いくつかのテストでは、Firefox 3.6 と比較して 2 倍という堅実な高速化が確認されています。

JavaScript 型指定配列

JavaScript でプログラミングを行い、低レベルのデータを処理したいと思っている開発者に朗報です。Firefox 4 は JavaScript のネイティブ型指定配列に対応しました。例えば WebGL や画像の操作を行う際、処理がどれほど速くなるか比較すると、顕著な差が見られます。

さらに、XMLHttpRequest を使う際、高速な処理を行える mozResponseArrayBuffer を使って、JavaScript のネイティブ型指定配列としてデータを取得することが可能になりました。

JavaScript アニメーションスケジュール API

JavaScript でアニメーションのタイミングを設定できる各種イベントに対応しました。これは、基盤となる Gecko レンダリングエンジンがまだ描画の準備を完了していないにもかかわらず、できる限り高速にアニメーションを表示させようとして、CPU やバッテリーを浪費してしまう、といった問題を回避するものです。(Gecko は、すべての描画に関して内部タイマーを実装し、最高でも人間が認識できる限界となる 60fps で描画を行うようになりました。また、前面に表示されていないタブについては、このタイマーを 1fps まで下げます。ぜひ活用してください。) これは、ライブラリの開発者にとっては特に便利な機能ですが、Gecko でアニメーションを表示させるときにより良い方法があるということは、一般の Web 開発者も知っておくべきでしょう。

留保レイヤー (Retained Layers)

上記の通り、Firefox は、様々な種類の Web ページで描画のパフォーマンスを向上させるため、内部「レイヤー」システムを実装しました。ハードウェアアクセラレーションを活用できるよう、画像、固定背景画像、インライン動画などは内部レイヤーに描画された後、ページの他の部分と合成されるようになりました。これにより、多くのページで読み込み時間や応答性が向上します。

非同期プラグイン描画

Windows と Linux では、プラグインが非同期に描画されるようになりました。これまでは、プラグインコンテンツを含む Web ページを描画する際、まずプラグインにデータの描画を求めていました。このため、プラグインの動作が遅かったりハングしたりすると、ブラウザの体感速度が低下するという問題がありました。Firefox 4 ではデータを非同期で取得できるようになったため、ブラウザの全体的な応答性が改善されました。

キャッシュの大幅な改善

Firefox 4 ではディスクキャッシュの仕組みが大幅に改善されました。これにより、ブラウザの起動時や実行中のパフォーマンスが向上しました。Firefox 4 では、ユーザのハードディスク空き容量に応じてキャッシュサイズが動的に設定されるようになったため、キャッシュのヒット率が格段に上がります [キャッシュが見つからずに再度ファイルがダウンロードされてしまう状況が少なくなり、無駄なアクセスが減るということです]。これはサイト運営者に恩恵をもたらすことが期待されます。

WebGL

Firefox 4 では、WebGL が初期設定で有効化されています。Vladimir Vukićević による 3D Canvas 提案を元に策定された WebGL は、主要なブラウザで実装が進んでいます。WebGL の仕様は正式公開が近づいており、私たちは実際のサイトで利用されるのをとても楽しみにしています。

すごいデモを見たいですか？ Flight of the Navigator [字幕付き動画解説] を試してみてください。これは、Firefox 4 に含まれている HTML5 video、Audio API など様々な技術と WebGL を組み合わせて作られたもので、Twitter や Flickr からリアルタイムに取得した情報が統合されています。

JavaScript

Firefox 4 の新しい JägerMonkey エンジンはただ速いだけではなく、いくつかの新機能を搭載しています。開発チームの目標は、開発者に新たなツールを提供するすることで、それには JavaScript 言語の進化も含まれています。

ECMAScript 5

Firefox 4 Beta 9 には JavaScript 言語仕様の新バージョンで追加された機能が数多く含まれています。Firefox 4 の目標は、新しい strict モードをはじめとする ECMAScript 5 への対応を業界トップレベルに引き上げることです。開発の進捗状況は ES5 のトラッキングバグで見られます。

Web コンソール

Firefox 4 には Web コンソールが搭載されています。これは、Web ページのリアルタイム調査、ネットワーク状況の監視、console.log で出力されたメッセージの確認、CSS の警告チェック、その他様々な作業を行える新しい開発ツールです。

なお、これは Firefox 4 に標準装備される機能で、アドオンではありません。

(アドオンの Firebug も Firefox 4 の最終版に対応すべく開発作業が進められています。)

HTML5

Firefox はこれまでも優れた HTML5 対応を誇ってきました。その歴史は Firefox 3.5 にまで遡ります。Firefox 4 はそれを踏まえて、様々な HTML5 関連の新機能を実装しました。

フォーム

HTML5 フォームの大部分の実装が進められました。Firefox 4 は、input 要素の新 type、datalist、autofocus や placeholder といった input 要素の新属性、分離フォーム、フォームオプション、入力値の検証や制約検査、新しい CSS セレクタに対応しており、それらを適宜組み合わせて利用することができます。Firefox 4 の HTML5 フォーム対応についてまとめた素晴らしい記事がありますので、詳しく知りたい方はご覧ください。

パーサ

Firefox 4 には HTML5 対応のパーサも搭載されています。このパーサには、特に注目すべきインライン SVG など各種新機能が含まれていますが、独自プロセッサ上で構文解析アルゴリズムを実行することでパフォーマンスも向上しています。また、アルゴリズムをより標準に近づけ、ブラウザ間での構文解析の一貫性を高めるための基礎を築きます。

WebM 対応

Firefox 4 は、Web 向けの新しいロイヤリティフリーの動画形式として発表された WebM に対応しました。YouTube では、HTML5 ベータプログラムへ参加するか、新しい iframe 埋め込み API を使った場合に、WebM 形式の動画を再生できます。(ベータプログラムに参加して、この記事の最後にあるサンプルを見てみてください。)

動画バッファ API

HTML5 video の buffered 属性に対応しました。これにより、動画がどれだけバッファされたか、ダウンロードの割合やストリーミングの現在位置から推測する代わりに、正確な測定値をユーザへ示せるようになりました。

動画の `preload` 対応

HTML5 video の廃止された autobuffer に代えて、新しい preload 属性に対応しました。この新属性は、単純に有効・無効を切り換えるだけだった、Firefox 3.5 で実装された古い仕様を置き換えるもので、動画をページに埋め込んだときにどれだけバッファするかをより柔軟に調整できます。

履歴の `pushState` と `replaceState`

Firefox 4 は、HTML5 の履歴変更機能である pushState と replaceState に対応しました。これらのメソッドを用いることで、ユーザの閲覧履歴項目を追加、変更できます。URL の末尾にハッシュを加えることで履歴項目を生成する Web アプリケーション (例えば HTML ベースのスライドショーなど) では非常に便利な機能です。既にこれらの API を採用しているサイトでは、サイト内の URL が HTTP リファラに含まれて他のサイトへ送信されるのを防ぐために、履歴情報を隠すといった用途も見られます。

音声のサンプリングと生成 API

Firefox 4 には、Mozilla が提案している Audio Data API が実装されています。この API を使うと、HTML5 の audio と video 要素からデータを取得したり、そのデータを編集して書き込んだりといった操作を行えます。これは既に様々な場面で実験され、非常に美しいデモが作られています。

DOM

Firefox 4 には、前述のパフォーマンス改善に加えて、様々な DOM 関連の新機能が含まれています。

ファイルアップロードコントロールの `click` 対応

隠しファイルコントロールに対して click メソッドを呼び出し、OS 標準のファイル選択画面を開くことが可能になりました。つまり、ブラウザごとに異なる (不細工な) ファイルアップロードコントロールを隠して、サイト側で独自実装を行えるということです。新しい File API や進捗イベントとこれを組み合わせれば、とても快適なファイルアップロード手順を実現できます。

File API の `slice` 対応

Blob API と、その slice メソッドに対応しました。これは JavaScript で巨大なファイルオブジェクトの一部を処理したいときに、ファイル全体をメモリに読み込まずに済むため、便利です。

また、巨大なファイルを確実にアップロードさせたい場合にも役立ちます。簡単なサーバサイドプログラムと JavaScript コードを書けば、巨大なファイルを小さな単位に分割し、アップロードの失敗に備えた再試行セクションも含めて細切れにアップロードさせたり、いくつかのセクションを同時にアップロードさせることさえも可能です。

File API の URL 対応

File API の url 属性に対応しました。File API で取得したオブジェクトを、画像、動画、HTML、その他 URL が割り当てられたオブジェクトに用いることができます。

タッチ関連イベント

Firefox 4 は、DOM を通じて取得できる、タッチイベントとマルチタッチイベントの両方に対応しています。この機能は Windows 7 で使えます。

クリックとタッチの判別

イベントの生成元がマウスなのか指なのかを、mozInputSource プロパティで確認できるようになりました。これは、タッチイベントやマルチタッチイベントを取得する際に便利で、タッチとマウスの入力を別々に扱うアプリケーションを開発できます。

IndexedDB

Firefox 4 には、超初期バージョンの IndexedDB 実装が含まれています。このローカルストレージの新標準はまだ改良が続けられており、仕様が安定するまでは接頭辞付きの実装となります。IndexedDB に関する初期の API ドキュメントをいくつか公開していますが、ドキュメントが最後に更新されてから、仕様と Firefox 4 の実装がそれぞれ変更されていることに注意してください。最終版のリリースが近づいたら、ドキュメントを更新し、実装状況について詳しく説明する予定です。当面は、IndexedDB API の基本的な使い方を解説した IndexedDB 入門をご覧ください。

FormData

Firefox 4 は、HTML フォームの操作を簡単にする、新しい FormData オブジェクトに対応しています。他にも、File API を通じて取得したファイルをフォームに含めて簡単にアップロードできるようにするなど、いくつかの新機能を利用できます。

SVG アニメーションと SMIL

Firefox 4 では、SMIL を使って SVG をアニメーションさせることが可能になりました。

SVG を画像や CSS 背景画像として扱えるように

SVG を img 要素のソースとして指定できるようになりました。SMIL を使ってそれらをアニメーションさせることさえ可能です。SVG を CSS の背景画像として用いることも可能になりました。

Canvas を File オブジェクトとして取得

アップロードなどのために、Canvas をファイルオブジェクトとして取得できるようにして欲しいという要望が多く寄せられていました。それに応える形で、mozGetAsFile メソッドを canvas 要素上で用いて、画像ファイルを取得することが可能になりました。

リサイズ可能なテキストエリア

既にベータ版をお使いの方は、テキストエリアが標準でリサイズ可能になっていることに気付いたかもしれません。これは CSS の新しい resize プロパティで無効化できます。

CSS

Firefox 4 は、様々な CSS の新プロパティに対応しており、さらに CSS の仕様が成熟してきたことで、プライベート名前空間から実際の名前空間へ昇格されたプロパティも数多くあります。

CSS トランジション

Firefox 4 は CSS トランジションに対応しています。仕様がまだ初期段階であることから、これらは -moz 接頭辞付きの拡張となっています。

calc()

calc の初期バージョンに、プライベート名前空間の -moz-calc として対応しています。長さを値として指定したいあらゆる場面で、シンプルな数式を使えるようになります。これにより、ページの CSS レイアウトが格段にシンプルになるでしょう。(スペースを空けるためだけに余分な div 要素を追加する必要はもうありません。)

-moz-any()

非常に便利な CSS 拡張を新たに実装しました。それは、セレクタのグループ化を可能にする -moz-any() です。これは HTML5 のマークアップでは特に便利です。詳しくはリンク先の記事をご覧ください。

-moz-element()

-moz-element は、あらゆる要素を他の要素の背景として指定できる、background-image プロパティ用の拡張です。これもまた大変便利かつ強力なもので、他のブラウザでも採用が広がることが期待されます。

-moz-placeholder()

:-moz-placeholder は、HTML5 フォームのプレースホルダーとなっている既定文字列の属性を変更できるものです。例えば文字色などを変更することが可能です。実際のテキストボックスのスタイルを変更していて、既定文字列にマッチさせたいときに便利です。

border-radius

-moz-border-radius 属性は border-radius 属性に置き換えられました。

box-shadow

-moz-box-shadow 属性は box-shadow 属性に置き換えられました。

-moz-font-feature-settings

Firefox 4 では、-moz-font-feature-settings プロパティにより、TrueType フォントの様々な機能が Web へもたらされます。例えば、カーニング、リガチャ、異体字、本当のスモールキャップス、文体セットなど、あらゆるフォント機能を活用できるようになります。

一貫性のある CSS 単位

ピクセルサイズの処理を、Internet Explorer、Safari、Chrome に合わせました。これにより、1 インチは常に 96 ピクセルに相当するようになります。この変更に関しては Robert O’Callahan のブログ記事をご覧ください。

物理 CSS 単位への対応

物理単位を本当に使用したいという場面がごくまれにありますが、そのために新しい CSS 単位 mozmm を導入しました。この新単位についても、同じく Robert の記事をご覧ください。

device-pixel-ratio

Firefox 4 は、CSS ピクセルごとのデバイスピクセル数を得られる -moz-device-pixel-ratio メディアクエリを実装しました。

resize

前述の通り、テキストエリアのリサイズを無効化する resize CSS プロパティに対応しました。

-moz-tab-size

文字列を描画する際にタブ文字 (U+0009) をどのように表示するか、スペース文字の幅を指定できる -moz-tab-size プロパティを実装しました。

-moz-focusring

新しい CSS 疑似セレクタ -moz-focusring を使えば、フォーカスの当たっている要素のスタイルを変更できます。

-moz-imagerect

新しい -moz-imagerect は、background もしくは background-image に使われている画像の一部を切り出して使えるようにする拡張です。

セキュリティ

最後になりますが、重要なことを解説します。Firefox 4 は、ユーザと開発者双方に役立つ、たくさんの新しいセキュリティツールを備えています。以下は、既に実装されている新技術の簡単な概要です。

Content Security Policy

Content Security Policy (CSP) は、Web 開発者が各種攻撃を防ぐために利用できる一連のツールです。具体的には、クロスサイトスクリプティング (XSS)、クリックジャッキング、パケット盗聴といった問題を緩和するツールを提供します。

CSP のもうひとつの重要な機能は、設定されたルールにひとつでも違反があったときに、Firefox がその違反に関する情報を Web サイトの運営者へ通知できるというもので、他のブラウザのセキュリティを向上させるためにも役立ちます。

X-Frame-Options

Firefox 4 は、クリックジャッキングに対するひとつの防衛策となる X-Frame-Options ヘッダに対応しました。このレスポンスヘッダは他のブラウザでも採用されています。(これは Firefox 3.6 にもマイナーアップデートの一環として追加されていますが、3.6 のリリース以降に実装されたものなので、ここに追記しておきます。)

HSTS (ForceTLS)

Firefox 4 は、単純な名前が付けられた HTTP Strict Transport Security (HSTS) ヘッダに対応しました。サイト運営者は、これらのヘッダを使うことで、暗号化されていない HTTP を通じてそのサイトとの通信を行わないよう、ブラウザに知らせることができます。

Firefox ユーザは、STS UI というアドオンを使えば、HSTS にネイティブ対応していないサイトも HSTS リストへ追加することができます。

CORS の改善

Cross-Origin Resource Sharing (CORS) 実装に関するいくつかのバグを修正しました。

:visited への変更

Firefox 4 は、Web 上でのプライバシーを向上させるために必要な変更として、Web サイトがユーザの閲覧履歴を調べられてしまうという、古くからある CSS の問題を解決しました。この重要な変更は WebKit ベースのブラウザでも既に採用されており、IE9 でも採用されると噂されています。

本当に多くの機能が含まれていますね

はい、その通りです。皆さんにきっと気に入ってもらえるものと思います。