補足: この記事では HTML5 の History API の仕様に問題があり、Firefox 4 では改善された API を提案・実装した事が書かれています。これだけ読むと互換性が心配になるかと思いますが、この提案はすぐに他のブラウザベンダーからも賛同が得られ、仕様 にも他のブラウザの実装にも反映されています。より詳しくは WHATWG ML での議論などをご覧ください。

原文: History API changes in Firefox 4 (公開: 2011-03-02)

この記事は Gecko 開発者 Jonas Sicking によるゲスト投稿です。

もうご存知でしょうが、私たちは Firefox 4 のリリース直前という段階に来ています。Firefox 4 では HTML5 の History API (pushState(), replaceState() などを定義) を実装しています。この API は Safari, Chrome でも実装されていますが、Firefox 4 の実装はそれらと異なっています。これが重要なことなので、このポストで説明します。

少し前に、pushState API に重大な欠陥があることが分かりました。欠陥とは、 pushState() や replaceState() に state 引数を渡したページで、ユーザーがその状態にあるままページをリロードした際に、load イベントが発火するまでその状態にアクセスできないというものです。これはその状態にアクセスする手段である popstate イベントが load イベントが発火するまで発火されないことにあります。

つまり、state 引数を利用するページは、与えられた状態について知らないままページを描画しなければならず、さらに適切な状態がユーザーに表示されるのはページが完全にロードされた時になってしまうのです。

ここでいう「状態」とは、pushState()/replaceState() に渡された state 引数になります。URL (pushState()/replaceState() にもっと使い勝手の良い引数) は document.location や window.location など普通の API からアクセスできます。

この問題を解決するため、私たちは現在の HTML5 の定義と異なる実装を Firefox に施しています。変更点は次の 2 点です。

• 現在の state を window.history.state から常に参照できるようにした。これによって popstate の発火を待たずともページの状態にすぐアクセスできます。
• popstate イベントを load イベントの直後に常には発火しないようになった。代わりに、実際にセッションヒストリーが遷移したとき (ユーザーが戻るボタンや進むボタンをクリックした、history.back()/forward()/go() が呼び出された、など) にのみ発火するようにしています。popstate イベントの目的はページの状態を得るために存在していましたが、window.history.state の導入でその必要がなくなりました。また、ページはこのイベントを予期せぬものとして扱い、さらにバグの温床であることもわかりました。

最初の変更はただ機能を追加しただけですから、後方互換であると言えるでしょう。このプロパティを利用していませんから、既存のコードに影響することはありません。

しかし、2 番目の変更は懸念する必要があるでしょう。あなたのコードが popstate イベントが常に発火されることを想定している場合問題が起こる可能性があります。しかし、この変更がリスクを和らげる側面もあります。Safari 5 はどうやらこの機能について誤った実装を行っているらしく、state が pushState()/replaceState() に指定されたときのみ popstate が発火するようなのです。つまり、state 引数を与えない限り、Firefox 4 からは Safari 5 と同じような挙動となります。

そしてもうひとつ加えようとしている変更があります。

• popstate をページのロード中に発火することを許可する。

HTML5 は現時点でページの load イベントの後にしか popstate イベントを発火させないという、よく分からない制限がかけられています。これがどう悪いのかというと、たとえば pushState で動くリンクを持つページがあります。重い画像があるなどロード時間が長く、その最中にユーザーがリンクをクリックし、その後戻るボタンを押しても、popstate イベントが発火しないのです。私たちはこの制限を取り除き、戻る/進むボタンが押された際や history.back()/forward()/go() が呼び出された際には常に popstate イベントが発火されるようにしました。

私はいくつかのテストをしましたが、これらの変更で問題を見つけていません。この問題が見つかるのが遅すぎたため、Firefox 4 RC までこの変更は反映されません。テストビルドがある ので、それで試すことはできます。

原文:Firefox 4 Demos: 3 new demos!(2011/03/11 公開)

Firefox4RC版はここからダウンロードできます！！

先週約束していた、より多くのデモは、弊社のWeb O’ WonderのWebサイトで動作しています！ここでは3つの新しいデモを紹介します！

360° Video

Try it yourself

Source code

Motivational Poster Editor

Create your own motivationnal poster.

Try it yourself

Source code

Letter Heads

By @simurai

Human silhouette built with CSS3 shadows.

Try it yourself

Source code

原文:Firefox 4 Demos: 3 new demos!(2011/03/11 公開)

Firefox4RC版はここからダウンロードできます！！

先週約束していた、より多くのデモは、弊社のWeb O’ WonderのWebサイトで動作しています！ここでは3つの新しいデモを紹介します！

360° Video

Try it yourself

Source code

Motivational Poster Editor

Create your own motivationnal poster.

Try it yourself

Source code

Letter Heads

By @simurai

Human silhouette built with CSS3 shadows.

Try it yourself

Source code

原文: Firefox 4 Web Demos: announcing Web O’ Wonder (2011/03/03 公開)

Firefox 4 のリリースが近づいています。新しい特設サイト「Web O’ Wonder」で、いくつかの素晴らしいデモを見てみてください。スクリーンキャストもこの記事の最後にあります。

Web O’ Wonder

まもなく公開される Firefox 4 には、Web 開発者のための たくさんの素晴らしい機能 が満載されています。

これらの技術的な新機能を解説するため、いくつかのデモを集めました。Firefox 4 の最終版が出るまで、毎週新しいデモを公開していく予定です。新しいデモサイト Web O’ Wonder で、第 1 弾となる 3 つのデモを公開しました。

注: 一部のデモには WebGL が使われており、互換性のあるハードウェアでしか動きません。お使いのパソコンのグラフィックスカードが最新のドライバに更新されているか確認してください。

オープンなデモ

これらのデモは Firefox 4 専用に作られたものではありません。Mozilla は、Web が特定のブラウザに支配されるものではないと考えていますので、これらのデモは Chrome など他のモダンブラウザでもできる限り動くようにしてあります。

もうひとつ、HTML5 の技術を紹介するデモとして大きな一歩と言えるのは、これらがオープンソースであるということです。ぜひ改良にご協力ください。各デモのソースコードは Github で公開しており、フォークしていじってみることをお勧めします。

4 億人のユーザのための新たな技術と展望

これらのデモでは、新技術を試し、Web の未来を想像しようとしています。HTML5、CSS3、WebGL、SVG、超速 JavaScript、そして様々な新しい API を活用しています。開発者にとってはどれも面白そうですが、ユーザにとっては一体どのような意味を持つのでしょうか？

それは、Web アプリケーションを使う新たな可能性と方法です。より高度で美しいアプリケーションによって、よりスムーズで快適なユーザ体験を享受できる時代がやって来たのです。私たちがこれらのデモで実証したいのはそうしたことです。

Web O’ Wonder では、Web 開発者が新技術を使う意欲を高めてもらえればと考えています。これは次世代 Web アプリケーションの始まりに過ぎません。Web 開発者はインターネットの姿を変えるツールを手にしました。それらを実際どのように活用すべきか、このサイトから学んでください。

謝辞

これらのデモの作成には多くの人が関わりました。Mozilla コミュニティには、多くの素晴らしい成果を残し、こうしたデモを作り上げることができる、才能ある人たちがたくさん集まっています。そうした人たち全員に大きな感謝の気持ちを述べたいと思います。(デモのクレジットを忘れずに確認してください！)

スクリーンキャスト

• 原文: People of HTML5 – Bruce Lawson (Chris Heilmann著)

今後のHTML5の普及にあたり、主導的に普及を進める人々の存在は必要不可欠である。今回私達Mozillaでは、現在この役回りを演じる人々をインタビューと短いビデオにより紹介する。インタビューの形式は、我々が予め用意した10の質問に対する文字ベースの回答と、彼らの自己紹介及び回答に対する詳細を含むビデオによって構成される。

我々が最初に紹介するのは、Opera所属、Introducing HTML5共著者であり、HTML5 Doctorの監督者であるBruce Lawson(@brucel)である。

ビデオインタビュー

ビデオインタビューはYoutube、もしくはArchive.orgより以下の形式にて閲覧可能である。WebM (45MB)、OGG (70 MB)、MP4 (70 MB)。

Bruce Lawsonへの10の質問

1) あなたの考えるHTML５は何か、また今後のWeb開発を考えたときのHTML5の持つ意味合いは？

HTM5はwebアプリケーション開発用の言語であり、アプリケーションをより堅牢かつ互換性のあるものにする、また、webブラウザの可能性を最大限に発揮することにより、webをよりネイティブなアプリケーショに近づける可能性を持っている。

2) HTML5の世界と関わることになったきっかけ、及びHTML５への貢献を行う際のモチベーションは？

私の背景はアクセシビリティとマークアップ言語の記述にある。よって、webにおける新しい言語の開発作業へは嬉々として参加した。また、現在働くOperaがHTML5の立ち上がりに大きく関わっていたため、（仕事の時間を使った）HTML5への開発従事を私のボスは喜んで承認してくれた（笑）

3) 最もエキサイティングだと考える最新技術は？

もちろんHTML5！また、DAP (Device APIs and Policy Working Group)に対しても最近は大きな関心を持っている。DAPはGeolocationがブラウザ経由で嬉々のGPS情報を取得することが可能であるように、カメラや手帳、カレンダーといった実世界におけるデバイスをWeb上で利用する為のAPIの策定を行っている。HTML5のように、DAPでは既存の優れたAPIを包括し、DAP促進の為にデバイスの生産者等によるサポートも受け付けている。

4) HTML5に関する書籍(Introducing HTML5)を執筆するにあたり、最も困難だと感じたことは？そもそも現段階ではHTML5の定義はまだ曖昧なのでは？

時代遅れな出版プロセス（全ての文章はMicrosoft Wordにて執筆されなければいけない！）以外は、執筆作業と同時進行でHTML5の仕様が動的に更新されたことが困難だと感じた。例えば、ビデオに関する章の構成と目次付が行われたのと同時に、webMのフォーマットが発表され、我々は再執筆を余儀なくされた。とはいえ、我々の本で対象とした多くの根本的な事柄に関しては読んですぐに実用可能であると思う。

5) HTML5に対する新しい名称として”NEWT”を提唱されているが、そもそもの言葉の意味合いと、HTML5でいけない理由は？

クライアントやジャーナリストは、CSS3、iなんとか上で視聴可能な動画、地理情報を使用可能なアプリケーション、をHTML5と称するだろう。確かにこれは新しいWeb2.0だが、CSS記述のセマンティックスが存在しないように、HTML5では画像のトランジションは存在しない。

DAP、CSS 3、HTML5、Geolocation, SVG, WebGLを総称するネーミングが必要ならば、Open Web Stack と命名するべきだ。しかし、人々は往々にしてシンプルかつキャッチーなネーミングを好むため、私はこれに対する皮肉も込めてNEWT(New Exciting Web Technologies)と命名した。

6)  HTML5普及に伴う最大の弊害は？

開発者の勉強不足が大きな弊害だと感じる。”完成されてない規格だから使えない”、”IE6のサポートをする必要があるから使えない”等が主な言い訳としてあげられる。この内私は前者の言い訳が最も嫌いだ。完成されていないから使えないのであれば、人々は英語という未完成の言語を使うのを辞めて、1799に完成したと思われるフランス語を使えば良い。

IE6サポートの問題に関しては、javascriptが使用可能な環境であれば、HTML5のエレメントをIE6上で実現することは容易である。そもそもjavascript無しで現在のWebをサーフィングすること自体、ユーザ体験を劇的に低下させかねないため、これは言い訳として不適切である。

7) 古いブラウザへのHTML5の普及に関する修正が盛んに行われているが、サポートに伴う余分なコードやファイルが多数存在する。これは、本当に必要なことなのだろうか？あなたの”polyfills (アドオンによる非互換性の穴埋め)”に関するスタンスは？

RemyのHTML5 Shimを用いれば、大体の古いブラウザへのHTML５の互換性は確保することが可能である。プロジェクトによって個別のpolifillを用いることは確かに面倒ではあるが、同機能のコードをスクラッチから書くことに比べたら随分楽である。

Polifillは古いブラウザのみを対象としており、HTML5互換の新規のブラウザに関してはそもそもpolifillの存在すら知られていない。polifillはエレガントなものではないが、ユーザの締め出しやブラウザのスニッフィングを防ぐためにも必要なものであると考えている。

8)  HTML5の推奨デザインパターンのうち、望ましくないと考えるものは何か？

Canvasへのアクセシビリティに関して、開発初期の段階でより細かい規定がされていれば良かったと思っている。現在多くの人々が独自の手法に基づいてユーザインタフェースの構築の際にCanvasを用いており、使用法に関して一貫性がない。今後の普及に伴い、一つの大きな問題になるのではないかと考えている。また、人名の周りにCITEを使用することが出来ないのは、馬鹿げだ仕様だと考えている。

9) HTML5に関して学ぶ場合、最適なスターティングポイントはどこか？

HTML5の入門に関して素晴らしい書籍はたくさん存在する。Mark Pigrimのオンライン書籍は導入として素晴らしい。私が共著したHTML5 Doctorは初級者を対象とした単発の記事が多数含まれている。

10) HTML5はHTML4.01やXHTMLに比べてマークアップの記述により寛容である。例えば、大文字と小文字タグの組み合わせや、アトリビュート周りのクォートを省略することが可能である。コードの品質を考えたときに、これは望ましくないのでは？

一言で言えば、そんなことはない。XHTML1やHTML4からHTML5へ移行することは容易であるし、そもそもブラウザの歴史上コードシンタックスに関してはあまり重要視されていない。プログラマーは自分にとって馴染むスタイルでコードを記述できるべきであるし、スタイルの統一に最してはHTML Lint等を用い、プロジェクトで使用するスタイルを決定することが可能である。

ボーナス：今後のWeb、及びWeb開発をより良いものとするための大きな課題は何か？

より分かりやすいCSSレイアウトのメカニズム、canvasやwebGLへのアクセシビリティの向上、そしてnude Open Standards evangilistsのより精力的な活動が必要不可欠である。

• 原文: Firefox 4: OpenType Font Feature Support (John Daggett著)

Firefox 3.5への@font-faceサポートの導入は、webサイト上におけるフォントの表現手法をより豊かなものとすることを可能にしました。これに加えて、近年のメジャーなブラウザのWOFFフォントの対応やフォントベンダーの多様化に伴い、現在の開発者は二年程前と比べると比べものにならない量のフォントを取り扱うことが可能です。

OpenTypeのフォーマットは、長い間フォントデザイナーがデザインしたフォントに対して、合字、ゆらぎ、小キャップ、タブ図など、多様なバリエーションを施すことを可能にしてきました。一方、OpenTypeの規定はこれらのデザインバリエーションを実現するためにこれらのデザイン一つ一つに対して一意なタグを用意していますが、Adobe InDesign等専用のソフトウェア上のみで使用可能でした。これらのデザインが文字列に対して適用され、レンダリング可能な状態になる際にはデザインのセレクション及び配置位置の情報が適用されます。Firefoxは現在フォントのデフォルトの値を用いてレンダリングを行いますが、フォントのデザインをCSSを用いて変更することが可能になれば、より幅広い表現手法が可能となります。

これを実現するために、Firefox4ではCSSによるOpenTypeフォントの操作が可能です。-moz-font-feature-settingのCSSプロパティを用いることにより、フォントのカーニング、合字、反転、小キャップ、stylisticセットに代表される様々な装飾が可能になりました。

CSS3によるフォントの規定では、フォントの種類に関する様々なサブプロパティを含みます。これらは開発と共に、webページ製作者によるフォントの操作を可能にすることを目的としていますが、現状のFirefox4においてはより低レベルの -moz-font-feature-settingsのCSSプロパティのみがサポートされています。これを用いることにより、ページ製作者は直接OpenTypeのフォントのページ内における有効/無効を切り替えることが可能です。

.altstyles {
  /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
  /* dlig = discretionary ligatures, ss01 = stylistic set 1 */
  -moz-font-feature-settings: "dlig=1,ss01=1";
}

参考として、このリンクより利用可能な全てのOpenType装飾が参照可能です。FontFontではOpenTypeフォントの装飾をビジュアルと共に分かりやすく提示しています。

合字と代用文字

フォントデザイナーは往々にして簡単な合字やカーニングデータをフォントに埋め込みますが、更なるデザインの向上のためにより複雑な合字表現や代用文字がフォントセットに用意されている場合もあります。以下の図には，Underwareによる多数の合字表現を含むブラシ調のデザインであるBello Pro script fontによるデザインが使用されています。

上記の図では、”and”と”by”に対して合字表現が使用されており、見出しには小キャップが使用されています。唯一のフォントのスタイリングは”Smooching”における文字の連結を行うために使用されています。画像のリンク先にて、これらのフォントは全て選択及びコピー可能であることが確認できます。

数字表記

以下の図は、Typekitより入手可能なAdobeのMinion Proを用い、数字を用いたモノスペースの表組みを表現した例を示しています。プロポーショナルフォントを用いた数字表記を行う場合、同じ桁数でも数字によってサイズが異なります。これを防ぐために、本来ならばモノスペースのフォントを用いることが必要ですが、OpenTypeフォントの場合文字間隔のフォーマッティングは自動で行われます。

デフォルトの設定として、フォントは等間隔、あるいはプロポーショナルであるかの指定を行うことが可能ですが、これらの設定を動的に変更することが可能なため、インラインテキストにはプロポーショナルフォントを、表組みには等間隔フォントをといった使い分けが可能です。

分数表記の自動化

料理のレシピにおいて材料の使用量を分数で表したい場合等、OpenTypeの自動分数表記を用いることにより自動的な分数表記が可能です。

上記のそれぞれの分数表記は、通常のテキストフォーマットで記述されており (例: 2 1/2)、特別なユニコードポイントは使用されていません。自動分数表記をサポートするフォントに関しては、OpenTypeのレイアウトエンジンが自動的にスラッシュ(/)で分割された分数表記を生成します。一方、これらの表現は比較的単純な分数のみを対象としており、複雑な数学表現を分数で表現する際にはMathML等の専用ライブラリを用いることが推奨されます。

言語依存の表記

多くの言語には、他の言語と同様なようで異なる文字表現が含まれます。例えば、セルビア語、マケドニア語、ブルガリア語における表現は、キリル文字をベースとしたそれぞれ異なる表現手法が用いられています。OpenTypeのフォントは、言語依存の表現を用いる場合、ベースとなる言語フォント（例ではキリル文字）に対して言語別の装飾オプションを指定することにより、対象とする言語のレンダリングを行うことが可能です。

オリジナルな装飾の作成

OpenTypeはプリミティブな装飾タイプを用いて、上位レイヤの様々な装飾を実現します。フォントデザイナーはこれらのプリミティブなタイプを用い、独自の装飾を生成することが可能です。-moz-font-feature-settingsを設定することにより、これらの装飾はCSS経由で変更することが可能です。

下記の例では、LettErrorの著者であるErik van Bloklandによるプリミティブな装飾タイプを用いたフォントのアニメーションエフェクトを示しています。

OpenTypeの形状変換エンジン、HARFBUZZ

これまでフォントに対する装飾の選択や位置の決定は、Uniscribe (Windows)やCoreText(OSX)などのプラットフォーム依存のライブラリによって行われてきました。Firefox4ではオープンソースのHarfBuzz OpenType shaping engineを用い、全てのプラットフォームにおいてこれらの操作を可能にしました。これにより、これまで複雑さのためサポートを受けることが難しかったインド語の記述や西南アジアの言語をサポートすることを今後の展望として目指します。

TYPEKIT使用に関する注意点

Typekitのウェブフォントサービスより入手可能なAdobeの全てのフォントにおいて上記で説明したOpenTypeの装飾が可能ですが、これらの機能を使用するためにはキットエディタの”言語サポート”カテゴリ以下の”全てのキャラクタ”オプションを有効にすることが必要です。

その他の例

(一年前のブログポストより更新分):

• 代用文字及び装飾に関する例
• 材料レシピの例
• 表組みの例
• トルコ語のレンダリング
• 歴史文字のレンダリング

原文: 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 でも採用されると噂されています。

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

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

原文: Firefox 4: hardware acceleration (2010/09/07 公開)

Firefox 4 Beta 5 が公開されました。このベータ版では、Direct2D アクセラレーションが初期設定で有効になっています。

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

「ハードウェアアクセラレーション」とは基本的に、可能であれば (CPU に代えて) GPU を使用する、ということです。これにより、ページの描画動作が高速になります。

2 つのレベルのアクセラレーションがあります。

• コンテンツアクセラレーション: 文字、画像、CSS ボーダーなど、実際のページコンテンツのレンダリングを高速化します。また、2D HTML canvas を高速化することもできます。Windows Vista/7 では、コンテンツアクセラレーション用に Direct2D が使用されますが、この新しいベータ版では初期設定で有効になっています。
• コンポジットアクセラレーション: トランスフォームの高速化などにより、すでにレンダリングされているコンテンツ (レイヤー) の断片をまとめて、ウィンドウへ最終的に表示する動作をスピードアップします。たとえば、回転やフェードイン、フェードアウトなどの CSS 効果が適用されている HTML5 動画を再生する場合、コンポジットアクセラレーションを使用して処理を高速化することができます (この機能はまだ初期設定で有効になっていません)。

ここでテストができます: ハードウェアアクセラレーションのストレステスト

写真のクレジット: Paul (dex)

OS ごとのハードウェアアクセラレーション

これらの最適化は、互換性のあるハードウェアとドライバをお使いの場合のみ適用されます。

[1]: Quartz は基本的に CPU のみです。QuartzGL (Quartz 2D API の GPU アクセラレーション) は、現在のところ Firefox では有効になっていません (他のブラウザでも同様です)。

重要な注意: ハードウェアアクセラレーションは WebGL とは違います。WebGL は OpenGL に似た JavaScript 用の API であり、3D オブジェクトを canvas 要素に描画するためのものです。つまり、WebGL では OpenGL が使用される (OpenGL ドライバがない場合は、Windows 上の ANGLE 経由で Direct3D が使用される) ため、WebGL 自体がハードウェアアクセラレーションされるのです。

ご協力のお願い

Firefox でのハードウェアアクセラレーションの改善にご協力ください。Grafx Bot 拡張機能をインストールしてください (詳細)。

Firefox のハードウェアアクセラレーションでは、DirectX または OpenGL 経由 (プラットフォームによる) でマシンのグラフィックスハードウェアとやりとりが行われます。このやりとりは、システムのグラフィックス環境 (システム上の特定のビデオカード、VRAM の空き容量、ビデオドライバのバージョン、OS のバージョンなど) に大きく左右されます。そして実際には、関連する要因の組み合わせは膨大な数になるため、すべてを開発チーム内でテストすることは不可能です。

Grafx Bot は、あなたのマシン上で一連の自動テストを実行し、ハードウェアアクセラレーションの興味深い特徴を把握します (約 5 ～ 20 分)。テストが終了したら、その結果 (匿名のビデオ設定情報を含みます) を Mozilla にお送りいただけます。Mozilla はこのデータを収集、分析し、バグの修正や、信頼性の高いハードウェアアクセラレーションのコード開発につなげたいと考えています。

できるだけ多くの固有ハードウェア環境での効果を確認するために、コミュニティの皆さんの協力が必要です。

原文: Firefox 4 Beta: Latest Update is Here – Experimenting With Multi-touch (2010/08/11 公開)

Firefox 4 Beta 3 が公開されました。今回のベータ版には数百ものバグ修正、機能強化、Windows 7 のマルチタッチ対応が含まれます (リリースノート)。この記事ではマルチタッチ対応について説明します。

Felipe Gomes は、Web コンテンツでのマルチタッチ対応 の実現に取り組んでいます。最新のベータ版で、この新機能を試してみます。

マルチタッチ、HTML5、CSS3 で遊ぶ:

上の動画は YouTube でホストされています。HTML5 の video タグが有効な場合は、それが使用されます (詳細はこちらをご覧ください)。YouTube 動画は こちら でご覧いただけます。

マルチタッチイベント

マルチタッチ対応ディスプレイをお使いの場合、タッチイベント が Web ページに送られます。このイベントはマウスイベントとよく似ています。入力 (指を使って作られる) のたびに、それに対応するイベントが生成されます。

• MozTouchDown: ユーザが画面にタッチすると送信されます。
• MozTouchMove: ユーザが画面上で指を動かすと送信されます。
• MozTouchUp: ユーザが画面から指を離すと送信されます。

タッチ情報

タッチイベントでは、いくつかの役に立つプロパティが提供されます。

• event.streamId: これが マルチタッチであることを忘れないでください。つまり、複数のソースからの複数のイベントを処理する必要があるということです。従って、各イベントには入力を識別するための ID が付けられます。
• event.mozInputSource: マウス、ペン、指など、使用されるデバイスの種類です (ハードウェアが対応している場合)。これはマウスイベントのプロパティのひとつです。
• event.clientX/Y: 座標です。

タッチ UI の設計

マルチタッチ対応デバイス専用の UI を設計してみたいですか？ 擬似クラス :-moz-system-metric(touch-enabled) またはメディアクエリ -moz-touch-enabled を使用して、指を使った操作に適した UI を設計できます。

注: 現在のところ、この機能が動作するのは Windows 7 のみです。マルチタッチに対応したハードウェアをお持ちでない場合は、Hernan の マルチタッチシミュレータ をお試しください。

その他の動画

(この動画は Felipe により作成されたものです。他の動画はこちら)

動画の前半では、Web ページでマルチタッチ入力に関するデータがどのように取得されるか、接点がどれだけ正しく追跡されるか、タッチ入力とペン入力がどのように区別されるかを確認できます。

後半では、流体シミュレータでマルチタッチ入力の視覚アプリケーションを見ることができます。このアプリケーションでは、各接点から粒子源が追加されます。また、これを移動することで場に力が加えられます。

この前半と後半の両方で、コンテンツのレンダリングに HTML5 の canvas 要素が使用されています。

気に入っていただけましたか？

編注: より詳しくは、Felipe の最新のブログ記事 をご覧ください。