2012年6月12日火曜日

ESウェブブラウザ通信 - Acid2テスト #3

今回はAcid2テストの最終回です。今年2月末の時点では、データURLなし版のAcid2テスト(002-no-data)を表示できるようにするところまで進めていました。今回は、正式なAcid2テストにESウェブブラウザがパスするようになったので、その報告です。

データ URL スキームのサポート


データURLスキームは、通常は別ファイルにしておくような画像データなどをウェブ ページ中に含めてしまうことを可能にするもので、RFC 2397で規定されています。Acid2のガイドページでは、
Data URLs are described in HTML4 but is less used due to lack of support. We believe data URLs are convenient and useful for web designers, and easy to add in browsers.
という記載があります。ただデータURLの利点とされている点は、いま見てみるとSPDYなどでより本質的に改善できる部分のようにも見えて、 "convenient and useful" というのは"当時は"という感じがしなくもないですね。

ESウェブブラウザでは、r2765からデータURLスキームに対応しました。 ESウェブブラウザ内部での動作としては、データURLスキームから生成したデータを通常のHTTPリソースと同様に一時ファイルに書き込んで処理しています。なんとなくオンメモリで処理されそうな印象があるかもしれませんが、実際には "easy to add" という意味ではこういったHTTPと大差ない実装が一番工数が少ないように思います。

r2765
Acid2テストに関しても、r2765からは上図のようにデータURLを使用して埋め込まれている画像やスタイルシートも反映して描画できるようになりました。

:hover 処理の修正


前々回のこのブログで取り上げた:hover擬似クラスの処理でいくつかバグが残っていて、Acid2テストで使用しているホバーリング効果がr2765の時点では効いていませんでした。Acid2で使用している:hover擬似要素は次のようなもので、
   .nose :hover div { border-color: blue; }
   .nose div:hover :before { border-bottom-color: inherit; }
   .nose div:hover :after { border-top-color: inherit; }
親要素がホバーリングされている状態や、:before, :after擬似要素との組み合わせといった結構込み入ったものになっています。具体的には、スマイリーの鼻のあたりにマウスを移動させると、ボーダーを使って表現されている鼻の部分が青色に変わります。

r2769

r2766からr2769までの一連の変更で:hover処理のバグを修正しています。上図はr2769でマウスを鼻の部分に移動させた時のスクリーンショットです。色が変わっているのに気づくでしょうか?

まとめ


以上で、今年2月から開始したAcid2テストについては、リファレンス画像にも合致し、ホバーリングにも対応できましたので、今回で合格としたいと思います。メジャーブラウザの中で、一番最初にAcid2に合格したSafariから遅れること約7年、一番最後にAcid2に合格したIE8からも遅れること約4年というところです。とは言え、ESウェブブラウザの開発自体をはじめてからまだ2年足らずですので、まずまずといったところでしょうか。

なお、Acid2に合格することの意味合い、ということについては『ADP: Acid2テストの功罪』にうまくまとめられている通りだと思います。Acid2 ガイドでも、
Acid2 tries to change this by challenging browsers to render Acid2 correctly before shipping.
とあるので、ブラウザを出荷する前にこのテストくらいにはパスしておいてほしい、という期待(2005年当時)であったことが読み取れます。現在であれば、CSS 2.1適合性テストスイートの達成率を見た方がCSS 2.1への準拠度などはより正しく見積もることができますし、Acidテストについてもその役割はAcid3に移っています。

そういうわけで、ESウェブブラウザにはまだまだ課題が多く残っていますけれども、最初のリリースに向けてはひとつ少し大きなテストをクリアできたようには思います。


2012年6月6日水曜日

ESウェブブラウザ通信 - 最初のリリースに向けての準備作業

前回から少し時間が空いてしまいました。5月は開発作業とは別に事務処理で忙しくなったりしていたのでした。今回は、ESウェブブラウザの最初のリリースに向けた準備に関する報告です。

Ubuntu 12.04対応


ESウェブブラウザがV8 JavaScript エンジンに対応した時点では、V8 APIのバージョンの関係からESウェブブラウザをUbuntu上でビルドするのが大変になっていました。この制約は今年4月からリリースされているUbuntu Desktop 12.04ではV8もバージョン3.7.12に上がっているのでなくなっています。

r2726からESウェブブラウザをUbuntu 12.04でビルドできるようにしています。現状では、configureするときにESブラウザで使用するフォントのパスが必要になるのでそのあたりの修正と、それからMakefile.amの方で使用するライブラリをAM_LDFLAGSに列挙してしまっていたのですが、これはLDADDに列挙するのが正しいので修正しています。

また、手元のUbuntu 12.04の環境では、glutMouseFuncで登録したコールバック関数にマウスカーソルの座標が(画面上でカーソルは動いていなくても)マウスのアップとダウンで1ピクセルずれて報告されてきます。そのため、それまでESウェブブラウザでは簡易的にアップとダウンが同じ座標で発生した場合に限ってclickイベントを発生させるようにしていたので、事実上クリックイベントを発生させることが不可能になってしまいました。

ただこのclickイベントの問題は、DOM 3 Eventsの仕様
If a user mouses down on a text node child of a element which has been styled with a large line-height, shifts the mouse slightly such that it is no longer over an area containing text but is still within the containing block of that element (i.e., the pointer is between lines of the same text block, but not over the text node per se), then subsequently mouses up, this will likely still trigger a click event
に沿って、 ダウンとアップでマウスカーソルの座標が動いていても同じ要素内にカーソルがあればclickイベントを発生させるようにすれば対処できるのでr2736で対応しています。

r2758 on Ubuntu 12.04

これでひとまずまたUbuntuでもビルド、実行可能になりました。今後もV8 APIのバージョン違いのような面倒な問題が起きなければUbuntuにも対応していきます。開発者向けのsetup.wwwスクリプトもr2730からUbuntu 12.04に対応しているので利用してください。

Fedora 17対応


Ubuntu 12.04に続いて先月末にはFedoraの最新版Fedora 17もリリースされました。r2742, r2743でFedora 17に対応しました。r2742はFedora 17に取り込まれた最新版のlibpng-1.5.10で廃止された関数があったのでその対処です。r2743はgcc 4.7への対応です。今のところC++11関連の部分はできるだけ最新のgccでチェックしていく感じで進めています。

RPMパッケージの生成


ESプロジェクトは研究プロジェクトとしてスタートしたこともあって、パッケージとしての配布はいままでしたことがなかったのでした。ただESウェブブラウザについては、もうすこし簡単に使ってもらえるようなところまで進めていきたい、ということがあるので今回RPMパッケージも生成できるようにしました(実際の配布はまだもうちょっと先の予定です)。今回RPMパッケージの生成に対応したのは、Web IDLコンパイラesidl(ESウェブブラウザのビルドに必須です)とESウェブブラウザの2つです。

RPMの生成といっても、autoconf, automakeを使っているプロジェクトであれば、簡単なSPECファイルを用意するだけでよくて、そんなに大変な作業ではなさそうです。 Fedora用のRPMパッケージの作成方法については、こちらのページで解説されています。

esidlのRPMパッケージはr2751から生成可能です。あらかじめホームディレクトリで rpmdev-setuptree コマンドを実行しておいて、esidl のビルドディレクトリで、
% make dist
% rpmbuild -ta esidl-0.1.5.tar.gz
とすると、~/rpmbuild/RPMS の中に x86_64/esidl-0.1.5-1.fc17.x86_64.rpm のようなRPMファイルが作られます。インストールは、
% sudo rpm -ivh esidl-0.1.5-1.fc17.x86_64.rpm
アンインストールは、
% sudo rpm -e esidl
です。

ESウェブブラウザのRPMパッケージはr2758から生成可能です。ESウェブブラウザのビルドにはesidlが必要になるので、先にesidlをインストールしておく必要があります。続いて、esidlと同様に、ESウェブブラウザのビルドディレクトリで、
% make dist
% rpmbuild -ta esnavigator-0.1.5.tar.gz
とすると、~/rpmbuild/RPMS の中に x86_64/esnavigator-0.1.5-1.fc17.x86_64.rpm のようなRPMファイルが作られます。これをインストールすると、
% esnavigator
でESウェブブラウザを起動することができます(コマンド名は今後変更するかもしれません)。

インストール時のファイル構成は、

/usr/bin
    + esidl           # Web IDLコンパイラ
    + esnavigator     # ブラウザ本体を呼び出すシェルスクリプト
/usr/share/esrille/navigator
    + navigator.html  # HTMLで記述したブラウザUI
    + default.css     # デフォルト スタイルシート
    + etc.            # その他ナビゲータが使用する画像ファイル等
/usr/libexec/esrille/navigator
    + navigator       # ブラウザ本体

のようになります。ユーザーの設定ファイルなどは、
$HOME/.esrille/navigator
を参照します。ブラウザがファイルを生成する場合もこのディレクトリの中です。

まとめ


今回はここまでです。開発中のソフトウェアはいつでもリリース可能にしておこう、というお話がソフトウェア開発の本などで紹介されていますが、'make dist'でtarballは作れるよ、というところから1歩進めて、specファイルを用意しておいてrpmは作れるよ、というところまで進めておくと、Makefile.am中のファイルリストに漏れがあったりする(よくあります)と簡単に発見できて便利ですね。

今後はリリースに向けてバグの修正を進めていくので、次回はそのあたりの進捗をまとめていく予定です。