このサイトの記事更新は2019年11月に終了されました。過去記事アーカイブを公開しています。
投稿されたすべてのトピック
Firefox 5 に向けてアドオンの互換性を更新しました
[これは Mozilla Add-ons Blog の記事 Firefox 5 Compatibility Bump と Subscribe to Add-on Compatibility Announcements を合わせた抄訳です]
本日夕方 [日本時間 22 日朝]、AMO で Firefox 4 へ対応しているアドオンの互換性情報を更新し、Firefox 5 にも対応させるようにしました。ただし、一部互換性がないと思われるものは除いています。これは、先日発表した 高速リリースサイクルに対応した互換性更新計画 で説明した通り、通常は Nightly チャネルが Aurora へ移行する際に行う作業ですが、Firefox 5 に関しては ベータ版の公開 に合わせて更新する形となりました。
アドオンの互換性と高速リリースサイクル
[これは Mozilla Add-ons Blog の記事 Add-on Compatibility & Rapid Releases の抄訳です]
最近、Firefox の開発が 高速リリースサイクル へ移行し、これまでよりかなり迅速に、新機能、セキュリティ、安定性、その他のバグ修正を、数億人のユーザへ届けることになりました。このエキサイティングな新リリースサイクルに対応するため、多くの変更が必要となりますが、影響を受ける最大の分野のひとつがアドオンの互換性です。
アドオンのパフォーマンステストに関するアップデート
[これは Mozilla Add-ons Blog の記事 Update on Add-on Performance Testing の抄訳です]
先日 Mozilla では アドオンのパフォーマンス向上に向けた取り組み を発表しましたが、アドオンのユーザと開発者から多くのフィードバックが寄せられました。素晴らしいコミュニティのおかげで、開発者の皆さんの中には、アドオンを修正して起動時間への影響を削減したり、テストの結果を詳しく調べたり、AMO のテストフレームワーク改善のため バグの登録という形で協力したり といった具体的な行動を起こしてくれる方も出てきました。AMO の自動テストは一部のアドオンに対応できていません。結果を見る ことができない場合は、ぜひ バグを登録 して知らせてください。
Firefox 4 での History API の変更
補足: この記事では 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 までこの変更は反映されません。テストビルドがある ので、それで試すことはできます。
アドオンのパフォーマンスを向上させるために
[これは Mozilla Add-ons Blog の記事 Improving Add-on Performance の抄訳です]
Firefox のパフォーマンス、特に起動時間とページの読み込み速度は、ユーザにとって大変重要な課題です。カスタマイズもまた同じぐらい重要です。アドオンによるパフォーマンスへの影響はほとんどの場合わずかなものですが、中には大幅に低下させてしまうアドオンもあります。アドオンがそうした低速化の原因となることに多くのユーザが気付いていないという現状も踏まえて、Mozilla ではパフォーマンスの向上に力を入れています。
アドオンの Firefox 4 対応をこれから始められる方、あるいは審査待ちの方へ
皆さんご存じの通り、先月 22 日に Firefox 4 の正式版が公開されました。ユーザの評判は高く、アドオンさえ対応すれば割と速いペースで 3.6 からの乗り換えが進むのではないかと思います。
誰もが気になるアドオンの状況ですが、アドオン互換性センター というページで集計されています。広く利用されているアドオンのうち、現時点で既に 86% が Firefox 4 に対応済みとのことで、大幅な変更を伴うアップグレードだったにも関わらず、Firefox 3.6 リリース時と同程度か多少改善されているようです。これはひとえにアドオン作者の皆さんが早めに対応を進めてくださったおかげです。
今から時間のあるときに Firefox 4 対応を始めていただけるという方は、こちらの記事を参考にしてください。
Firefox4の3つの新しいデモ
原文:Firefox 4 Demos: 3 new demos!(2011/03/11 公開)
Firefox4RC版はここからダウンロードできます！！
先週約束していた、より多くのデモは、弊社のWeb O’ WonderのWebサイトで動作しています！ここでは3つの新しいデモを紹介します！
360° Video
Motivational Poster Editor
Create your own motivationnal poster.
Letter Heads
By @simurai
Human silhouette built with CSS3 shadows.
Firefox4の3つの新しいデモ
原文:Firefox 4 Demos: 3 new demos!(2011/03/11 公開)
Firefox4RC版はここからダウンロードできます！！
先週約束していた、より多くのデモは、弊社のWeb O’ WonderのWebサイトで動作しています！ここでは3つの新しいデモを紹介します！
360° Video
Motivational Poster Editor
Create your own motivationnal poster.
Letter Heads
By @simurai
Human silhouette built with CSS3 shadows.
文字列からHTMLDocumentを作成するコード
必要に迫られて引数で渡された文字列から HTMLDocument を動的に作成するコードを書いたので紹介します。このコードはchromeコンテキスト上で、つまり拡張上で動作させることを前提としていますのでご注意ください。
下記コードを書く際にmodestで紹介されているnanot_viさんのサイトを参考にしました。またrange.createContextualFragment()実行時のセキュリティ上の課題を克服するためにkazさんのblogを参照させていただきました。
let getDOMHtmlDocument=function(str){
let doc;
let range;
if(document.implementation.createHTMLDocument){
// Firefox 4.0から
doc=document.implementation.createHTMLDocument('');
range=doc.createRange();
range.selectNodeContents(doc.documentElement);
range.deleteContents();
doc.documentElement.appendChild(range.createContextualFragment(str));
}else{
// Firefox 3.6.xまで
let doctype=document.implementation.createDocumentType(
'html',
'-//W3C//DTD HTML 4.01 Transitional//EN',
'http://www.w3.org/TR/html4/loose.dtd'
);
doc=document.implementation.createDocument(null,'html',doctype);
range=doc.createRange();
range.selectNodeContents(doc.documentElement);
let content=doc.adoptNode(range.createContextualFragment(str));
doc.documentElement.appendChild(content);
}
return doc;
};
上記コードの5行目から11行目までのif文のブロックはcreateHTMLDocumentメソッドに対応しているFirefox 4.0以降用です。createHTMLDocumentメソッドに対応していないFirefox 3.6.xまでで動作するのは12行目から23行目までのelseブロックのコードとなります。
私はnanot_viさんのサイトを元にこのコードを書きはじめたのですが、createContextualFragmentメソッドの呼び出しのタイミングで必ず例外がスローされるという状況で行き詰まってしまいました。
HTMLのテキストが正規化されていないためパースできないのか、と最初は考えていたのですがcreateHTMLDocumentメソッドを使っているコードでも例外がスローされることに変りはないので数日悩むことになりました。
そしてたまたまkazさんのblogの記事を拝見することとなり、セキュリティ的に鑑みてselectNodeContentsメソッドの引数にブラウザ由来のdocument.documentElementではなくユーザが作成したdocumentオブジェクト由来のdoc.documentElementを渡すべきということを知り、そのような修正を加えたところ例外が発生しなくなり、例外発生の問題は解決されました。もちろん引数で渡された文字列も問題なくDOM Objectとなりました。
ちなみにブラウザ由来のdocumnetオブジェクトを使うとどのようなセキュリティ上のリスクがあるのかはkazさんのblogを参照してください。ブラウザ由来のdocumentオブジェクトは、chromeコンテキスト上に存在することがポイントです。
私は上記コードの開発をFirefox 3.6.xとFirefox 4.0pre ( Minefield ) で行っていました。しかしnanot_viさんのサイトにはFirefoxでの動作報告も含まれています。これはつまるところセキュリティ上の理由により、どこかのタイミングでFirefoxの仕様が変更され例外がスローされるようになったのだと推察します。
Firefox 4 のデモ: 特設サイト Web O’ Wonder 公開
原文: 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 コミュニティには、多くの素晴らしい成果を残し、こうしたデモを作り上げることができる、才能ある人たちがたくさん集まっています。そうした人たち全員に大きな感謝の気持ちを述べたいと思います。(デモのクレジットを忘れずに確認してください！)