Mozilla Japan ブログ

Mozilla、Firefox、Thunderbird の最新情報をお伝えします

個別記事アーカイブ

技術解説:Firefox 4 では HTML5 contenteditable 属性の問題が改善されました

この記事は Web アプリケーションの開発者の方への情報です。

HTML5 の新仕様に、HTML エディタ (リッチテキストエディタ) をページ内に作ることができる、contenteditable 属性 がありますが、Firefox 3.6 ではいくつか致命的な問題もありました。

そのうち、ここでは Firefox 4 で修正されたバグをいくつかここで紹介します。もし、これらのバグが原因で Web アプリケーションに contenteditable 属性を利用することを断念されていた開発者の方がいらっしゃいましたら、今回のリリースを機に、今後開発する Web アプリケーションで採用するか否かの判断の資料として活用していただければ幸いです。

それでは、まず、フォーカスの有無をユーザが判断する重要な UI であるキャレットに関する修正の紹介です。

Firefox 3.6 では様々な場合に、フォーカスが HTML エディタにあるにも関わらず、キャレットが点滅しない、もしくは、変な位置に表示される、というバグが多々ありました。Firefox 4 ではそのうちのいくつか、再現しやすいものを中心に修正されていますので、このバグが問題になった開発者の方は確認してみてください。

続いて、HTML エディタのフォーカスの移動に関する設計見直しが行われ、いくつか挙動が修正されています。

Firefox 3.6 までは編集可能、不可能関わらず、ルート要素の扱いが常に同じでした。すなわち、Tab キーによるキーボードナビゲーションではフォーカスを持ち、テキストも入力することが可能であるにも関わらず、フォーカスの移動時には、focus イベントや、blur イベントが発生しないという、奇妙な挙動になっていました。

Firefox 4 では、HTML ドキュメント全体を編集可能にした場合 (document.designMode="on" や、<html contenteditable="true"> を利用した場合)、ルート要素のフォーカス状態が変化すると、他の要素と同様に、focus イベントも blur イベントも発生するようになりました (編集不可能な通常のルート要素では相変わらずフォーカスを得てもイベントは発生しませんのでご注意ください)。

次に、ルート要素が編集不可能で、<body> 要素が contenteditable 属性で編集可能な場合、すこし複雑なルールで動作するようになりました。

Firefox 3.6 では、Shift + Tab キーをその編集可能な <body> 要素がフォーカスを持つときに押すと、一度、その親であるルート要素にフォーカスが移動していました。この動作は、ユーザには混乱を与えるもので、<iframe> 要素のひとつ手前にある <input> 要素等にフォーカスが移動せず、フォーカスされた要素が見当たらなくなる、というものでした。

Firefox 4 では、この場合に限り、ルート要素をスキップしてフォーカスが移動するように変更され、ユーザにとってはより直感的に操作できるように改善しています。

もし、このバグに対応するために何らかのワークアラウンドを JavaScript で行っている Web アプリケーションがあると、フォーカス移動に異常が出るかもしれませんのでご確認ください。

また、日本語環境では致命的だったバグに、<body> 要素を編集可能にしている HTML エディタの何も無いところをクリックしてエディタにフォーカスを移動させると、IME が利用不能のままになるというバグがありましたが、これも、Firefox 4 では上述のフォーカス時の処理の見直しにより、修正されました。

最後に、Firefox 3.6 には、やはり IME が使えなくなってしまうバグで、重大なものがもうひとつありました。それは、contenteditable="true" の要素がひとつでもページ内にある場合、<input> 要素や、<textarea> 要素で IME が使えなくなる、というバグです。このバグは、ページ全体のイベントを listen している HTML エディタが、他のエディタが target となっているイベントまで処理してしまっていることが原因でしたが、Firefox 4 では、各ハンドラが、フォーカスの有無を厳しくチェックするように修正され、このバグに限らず、様々な似たようなバグが一掃されました。

もし、このバグを回避する目的で、本来なら不要な <iframe> 要素を利用して Web アプリケーションを開発していた場合、その <iframe> 要素を <div contenteditable="true"> に置き換えることで、ブラウザの利用するメモリ容量の削減や、ページの読み込み時間を改善することができますので、ぜひ検討材料にしてみてください。

しかし、残念ながら、深刻なバグでも未だに修正できていないもの、というのはあり、今後も引き続き次のバージョン以降でも改善していく予定です。ですが、Firefox 4 では日本語環境でもドキュメント内でひとつだけ、contenteditable="true" な要素を利用する場合にはかなり実用的なレベル、深刻な問題が無いレベルに到達したと思います。もし、Web アプリケーションで HTML エディタを使うことによって、表現力の向上等、何らかの改善が期待できるのであれば、この機会に利用を検討されてみてはいかがでしょうか?

前後の記事

前の記事: Adobe Flash Player 10.3 が公開されました
次の記事: 高速リリースサイクル移行後初の Firefox ベータ版公開