[これは Mozilla Add-ons Blog の記事 Threads and Workers for Add-ons in Firefox 4 の翻訳です]

来る Firefox 4 には、大幅な変更が相当数含まれており、その多くは アドオンに直接影響します。これらの変更の対部分は新しく、これまでと異なる習慣になります。残念ながら、代替手段がなく、アドオン作者の皆さんに対応していただかなければならない変更もいくつかあります。Firefox 4 のスレッドモデルに対して行われた安定性の改善は、そうした例のひとつです。

(さらに…)

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

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

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

2011年、1月も後半分になりましたが新年明けましておめでとうございます。
私たちは去年の10月、ユニバーサルデザインのブラウザを目指すプロジェクトを立ち上げました。

今までのブラウザは誰もが使いやすい形とは言えなかった…
そこで、誰もが使いやすいブラウザのユニバーサルデザインを考えよう！

でも、みんなブラウザの使い方は違う。
これからのブラウザは誰にとっても使いやすいように成長する必要がある

私たちはそれぞれの用途があってブラウザを使っている
その用途によってブラウザのデザイン、機能は大きく変わり、100人いれば100通りのブラウザがあってもいいはず！
そのため、使用状況などからよりよいブラウザへ自ら成長する必要があるのです。

その、プロジェクトとは…　

「Cumonos」

詳しくは、AboutProjectを見て下さい！

先ほど、AMO にアドオンを登録されている、日本人と思われる開発者の皆さんに、「アドオンの Firefox 4 対応のお願い」というメールを送らせていただきました。AMO にユーザ登録されていない方もいらっしゃるかと思いますので、メールの内容を以下に転載しておきます。

「思われる」というのは、AMO ではユーザの言語や地域を伺っていないので、私が手作業で地道に調査、推定しているからです。AMO では、250 人以上の日本人開発者によって、約 500 個のアドオンが登録されていることが分かっています。公開されているアドオンは AMJ に載せています。

(さらに…)

原文: 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 ごとのハードウェアアクセラレーション

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

動作	Linux	Windows XP	Windows Vista/7	Mac OS X
コンテンツ	XRender	なし	Direct2D	Quartz 1
コンポジット	OpenGL	Direct 3D	Direct 3D	OpenGL

[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 の最新のブログ記事 をご覧ください。

こんにちは！メンバーの浦山です！

本格的に寒くなってきて、冬って感じになってきました。ヒートテックをはやく買わなければ、、、

みなさん、キャンペーン応募していただけましたか？まだまだ絶賛受付中です！

詳しくはキャンペーンページへどうぞ！

Firefox ⇔ サークル応援キャンペーン
<a href="http://mozilla.jp/st" target="_blank">http://mozilla.jp/st</a>

さてさて、先週にCumonos Project のミーティングに同メンバーの瀬瀬くんとお邪魔しに行ってきました！

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

～Cumonos　Projectとは～

インターネットをより使いやすくするため、”ユニバーサルデザインのブラウザ”を作ろうというコンセプトで立ち上がった

プロジェクトです。将来的には自己成長して、ユーザーに新しい機能を提案してくれるようなブラウザを目指し

活動を行っていくプロジェクトです。

/cumonos/

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

11 月 20 日 (土) に開催され、自分も含めメンバーでお手伝いに行った

「Firefox Developers Conference 2010」

でも発表をしていたのを見ていたのがきっかけで、

今回はその定例ミーティングにお邪魔しに行ってきました！

ブラウザのユースケースの議論や、それをもとにしたインターフェースをどういうスタイルにするか、

実際にそのアイデアをもとに特定の機能に限定して実装してみたブラウザを発表しあったり、、、

とても刺激的で、勉強になりました　:)

メンバーも募集中とのことなので、興味がわいた方は是非上のリンクから見に行ってみてくださいね(^^)/

これからも同じ学生でWeb関係の活動を深めている仲間としても交流を深めていきたいですね！

できればなんかコラボなんかできたら面白いねなんて瀬瀬君と話しながら帰りました。

そして、同じ学生として負けてられないなとも思いました！

学生マーケティングのメンバーも今年はもう終わりもちかいですが、来年も頑張っていきましょう！！

久々の投稿です！

学生マーケの浦山がお送りします！

ついにキャンペーンが始まります！！

”Firefox ⇔ サークル応援キャンペーン”

主に大学生向けのキャンペーンとなっています！

ゼミやサークル、チームでFirefoxを応援する写真を撮って応募すれば

１、プロのデザイナーに告知チラシをデザインしてもらえて、１０００部フルカラーでプレゼント

（抽選で３組）

２、Firefoxファイル応募者全員プレゼント！

（１グループの上限は２０枚までとさせていただきます）

キャンペーンの詳細については、以下のページをご覧ください。

Firefox ⇔ サークル応援キャンペーン
http://mozilla.jp/st

これから来年の新入生勧誘の準備をサポートしつつ、みんなにFirefoxを知ってもらって

使ってもらおうというキャンペーンです！ぜひ皆様からのご応募お待ちしています！