2011年7月31日日曜日

ESウェブブラウザ通信(7/31)

はやいもので7月ももう終わり。今月中の目標に「ESウェブブラウザでwww.esrille.comは表示できるように」というのがあったのですが、100%ではないけれどだいたいのところまで来ました。



www.esrille.comに関してはCSS 2.1の範囲内でだいたいレンダリングできているので、IE8で見たときと同じくらいの感じになっていると思います。ちなみに最新のCSS 3をサポートしている他のブラウザでみるとメインの白い部分の角も丸く表示されます。

ここにくるまでの経過を今回も前回のようにスクリーンショットと一緒にまとめておきます。前回の最後はこんな感じでした。


r1815では、CSSのmin-widthとmin-heightプロパティに部分的に対応しました。エスリルのページは白い部分にmin-heightを使っているので、白い部分が指定通りに大きく表示されるようになりました。


その後、JavaScriptの処理まわりの機能を追加したり、loadイベントclickイベントに対応させたりしながら、r1831ではタブをクリックして表示を切り換えられるようになりました。
 


r1832では、CSSの'border-top', 'border-right', 'border- bottom', 'border-left'プロパティを使えるようになったので、カフェのページの「エスリル カフェ ー...」という箇所の下に線が入るようになりました。


r1834では、インラインレベルボックスの相対位置指定の処理を修正して、Twitterやfacebookボタンが横一列に並ぶようになりました。


r1835では、空白の処理まわりのバグを修正して、Twitterやfacebookボタンの間のスペースが表示されるようになりました。


r1840では、CSSの擬似クラスセレクタにも対応して、:linkで指定したスタイルが効くようになりました。カフェのページだと一番下の公式Facebookページという部分が青色の文字で表示されるようになっています。この段階ではtext-decorationプロパティには未対応だったので、下線はまだ引かれていません。


r1841では、:hoverセレクタのスタイルも効くようになっています。エスリルのページだとタブの部分にカーソルを持っていくと文字が水色になります。


r1845では、text-decorationプロパティのunderlineが表示されるようになりました。一番下の公式Facebookページという部分に下線が引かれて表示されています。


text-decorationプロパティのCSS 2.1の仕様はまだ曖昧な感じがするのですが、16.3.1の例は下のとおり同じ様に表示できてはいます。CSS Text Level 3の動向も見ながら必要な修正をして行きます。


CSS 2.1に関しては動いている部分がだいぶ増えてきました。まだまだ直さないといけない部分もたくさんあるのですが、来月は画面表示に直接現れないような部分も修正していく予定です。その分、このブログを見ても分かりにくい感じに戻ってしまいそうですが、何か考えます。

2011年7月22日金曜日

ESウェブブラウザ通信(7/21)

京都は祇園祭の宵山も終わって、だいぶいつもの感じに戻ってきました。慌しい中でも、ESウェブブラウザの方はちょこちょこ修正を続けていたので、その経過など。

コンピューター関係のお仕事とは関係なく、エスリル カフェのお客様でこのブログまで読んで下さっている方もいらっしゃるようなので、今回はなるべくわかりやすい感じで書いてみます!?

今週の日曜日にESウェブブラウザでエスリルのウェブサイトwww.esrille.comを表示してみると、こんな感じでした。


ふだん他のウェブブラウザで表示される画面とはまるで違います。ウェブブラウザというからには、そういうことがないように色々と直していかないと、というわけです。

r1797では、とにかく漢字を表示できるように修正しました。(FedoraではIPAフォントを、UbuntuではTakaoフォントをインストールしてください。)


JavaScriptをオフにしているときのような感じで描画されているので、2つ目のタブの内容がウィンドウの下半分に表示されています。本当はカフェのメニューに価格も出るのですがまだ出てません(というか、ありえない場所に出てます)。

r1801では、CSSの"shrink-to-fit"アルゴリズムをだいたい実装して(仕様自体も"CSS 2.1 does not define the exact algorithm."なので、あまり細かいことは気にしない)、その辺を直しました。


今度はメニューに価格が並んで表示されるようになりました。でもまだかなりおかしいです。
  • タブの部分のテキストがセンタリングされてない
  • エスリルのロゴマークが白飛び?してる
  • ロゴマークがセンタリングされていない
  • ロゴマークの上下左右に灰色のスジが入ってしまっている
  • etc.
こういうリストをソフトウェア関係の仕事をしている人はバグリストと言ってます。ゲームソフトを作っている人が発売日前に家に帰れなかったりするのは、こういうリストがものすごい量になっているのを想像してもらえれば、と。

r1804r1805では、それぞれCSSの'text-align'と'line-height'プロパティの処理を実装して、タブの部分のテキストが正しい場所にくるようにしました。ウィンドウの上の方の"カフェ", "社員犬",...と表示されている部分です。


r1806では、白飛びしたように表示されいたロゴマークが正しくでるように直しました。


ひと安心。実際には白飛びしていたわけではなくて、24bit RGBのPNGイメージから32bitのRGBAイメージに展開する時にバイト順が違っていて、おかしなアルファ値と背景の白色がOpenGLの処理でブレンディングされてしまっていたのでした。

r1808では、CSSの'background-position'に対応させて、ロゴマークが真ん中に表示されるようにしました。


ちなみにr1808は未対応のCSSプロパティに対応してOpenGLの描画に落とし込むところまでの変更がまとまって入っているので、もしESウェブブラウザのCSSまわりの修正を手伝える!という人がいたら参考にしてください。

r1809では、ロゴマークの上下左右に出ている灰色のスジを消すようにしました。



上下左右のFAX汚れみたいなスジは、それまでそういう風にわざわざ描画していた、というわけではなくて、OpenGLのテクスチャのラップモードの設定がimgエレメントの表示用にGL_CLAMP_TO_EDGEになっていたのです。r1809では、リピートしない背景画像のときはGL_CLAMP_TO_BORDERに切り替えるようにしました。

r1811では、元のレイアウトを知らないと気づきにくいのですが、タブと用紙(?)の間に入ってしまっている灰色の隙間がでないようにしました。


修正の行数そのものはそれほど大きくないのですが、CSSのフロートとクリアの処理を直しています。中にフロートしかないボックスの計算上の高さは0じゃないといけなかったところとか、だいぶ間違っていたのでした。

ここまでくると、ウィンドウの下に見えているブルーのゴミは何?という感じになってきたので、r1812で修正しました。


facebookのリンクボタンがCSSの設定を無視してもともとのビットマップのサイズで表示されていたのがブルーのゴミみたいに見えていたのでした。r1812では、CSSのwidth, heightを見て描画するように直しています。imgタグに指定したサイズはまだ見ていない、とかまだこの辺はいろいろバグが残っていますが、そういうのもおいおいと。

このウィンドウの中の下の方のテキストをよく見ると'\A'という記述が見えます。これはHTMLのBRエレメントにCSSのデフォルトスタイルシートが適用されて'\A'(ラインフィード)が出力されているのですが、ユニコードのエスケープの処理もラインフィードの処理もまだ入っていなかったので、そのまま'\A'と何か所か表示されてしまっていたのです。

r1813, r1814では、それぞれエスケープ処理とラインフィードの処理を実装しました。


今度は'\A'と表示されていた部分でちゃんと改行されています。まだ直さないといけないところがだいぶありますが、今週の日曜日から比べるとだいぶよくなってきた感じかなと。

とりあえず、「あー、いろいろ直してるんだ」と思って下されば嬉しい様な感じですがどうでしょうか。f^_^;

2011年7月11日月曜日

ESウェブブラウザ通信(7/11)

公開から1週間あまり立って、ESウェブブラウザのアップデート情報をメーリングリストに投稿したので、こちらでも補足など。

r1759
当初公開した時はFedora 15(もしくは14)で、という案内をしていたのですが、すぐにUbuntuでビルドできないという報告をいただいたので対応させました。
主な変更点は、
  • 現状決め打ちになっているフォントファイルへのパスをFedoraとUbuntu両方に対応させた、
  • Ubuntuの少し古めのboost 1.42に対応させた、
  • SpiderMonkeyのmozjsライブラリを決め打ちしないで、configureで探しに行くようにconfigure.acを変更した、
といったところです。
ただ現状、gcc 4.6やboostの新機能を使い出したときに、Ubuntuでのビルドは難しくなってしまうことがありそうです。

* r1777
この直前のいくつかのリビジョンでesidlの対応するWeb IDLの文法を2011/7/4版のワーキングドラフトにほぼ対応させました(まだ議論が続いているExceptionと、まだ実際に使われてきていないPartialInterfaceを除く)。注意点として、object型が値としてnullをとらなくなっています。nullを含むときの表記はobject?です(array等も同様)。
この件のCameronとHixieのやりとりはちょっとおもしろかったかも。すごい生産的だけど(笑)。それに合わせて、ESウェブブラウザで使用するDOM CoreHTMLの定義もそのように修正されたその時点でほぼ最新のものに対応したのがこのリビジョンです。

 * r1783
Ubuntuでビルドできない、という報告の他に届いていたのが、Fedora 15のx86_64版でもビルドできないというものでした。こちらは、Web IDLのany型に対応するESのAnyクラスの実装がx86前提になってしまっていたのをやっつけで直して、x86-64に対応させました。x86-64ではsizeof(Object)が16になるので、Anyのサイズも16バイトになってしまっていますが、できればどこかの時点でx86-64でも8バイトで済むようにしたいと思います。
ESで使用しているWeb IDLのC++0xバインディングでは、メッセージの実体はメッセージのIDとAnyの配列になっているので、Anyクラスの性能はかなり重要な部分だったりします。u16stringまわりの扱いももう少し改善したい部分です。


また、実際にビルドしてみようという方のためにセットアップ用のスクリプトをこちらに用意したので利用してください。Fedora 15 (x86, x86-64)とUbuntu 11.04 (x86)でテストしています(Fedora 14はjsの関係でダメです)。

2011年7月2日土曜日

ESウェブ ブラウザ

ご無沙汰しています。おかげ様で今日でエスリル株式会社も1周年を迎えることができました。1周年の記念も兼ねて、ESオペレーティングシステムのレポジトリにエスリルで開発中のウェブ ブラウザのソースコードをコミットしたので、そのお話を。

 

コミットしたのは開発中のもので、英語のアナウンスにも書きましたが、まだコンセプトデモ版という位置づけです。ビルドをはじめると13〜14万行ほどのC++(0x)のソースコードをコンパイルし始めますが、その内9〜10万行くらいは、Web IDLの定義ファイルからWeb IDLコンパイラesidlが自動で生成したものです。

現状は、esidlが生成したスタブコード中に // TODO: implement me! というコメントが2,500箇所以上残っています。完成までにはこれらもひとつずつ実装していくことになります。またまだ取り込んでいないW3Cの重要な仕様書もいくつか残っています。

ビルド方法などは英語の公式ページに記載してありますが、このブログでも日本語で実際にビルドしてみたり、コードを触ってみようという方のために付加的な情報を載せておきます。

現在のソースツリー構造は以下の用になっています。

httpとurlはそれぞれ独立したライブラリとしてまとめられるように作っていっています。httpの方はGETメソッドの通常のパス以外のエラー処理やタイマー等の実装がまだこれからです。それでもBoost Asioを使っているので作業的にはかなり簡単になっていると思います。

DOM(およびHTMLエレメント)とCSSは、それぞれMVCモデルのModelとViewという関係で実装しています。なのでDOMのドキュメント ツリーはCSSの矩形ボックスのツリーに関する情報はもっていなくて、CSSViewがDOMのMutationイベントを聞いていて、イベントを受信すると矩形ボックスのツリーを構築し直して再描画するような作りにしています。ただ現在策定されているMutationイベントの仕様自体にもいろいろ問題があってdeprecatedになりつつあるので、さらに作り込んでいくときには新しい提案の方も見ながら実装を進めていかないといけなさそうです。

cssは現状先日勧告されたばかりのCSS 2.1ベースで、テーブルやフォームなど未実装の部分がかなりあります。HTMLInputElemetも今回はデモ用にいきなりテキストボックスで描画してしまうとか、まだそういうところです。ですので、矩形ボックスのツリーを再構築するときに必要最小限の部分だけ再構築するような最適化は、レンダラーの実装がもう少し落ち着いてから進める予定です。ただ角丸とかみんな大好きな(?)CSS 3の機能とかは先に入れたかったりもしますが。

htmlも必要最小限の部分しか実装していないので、HTML5的なキャンバスとかおもしろい要素はesidlが生成したスタブがあるだけで未実装です。

ひと言でまとめると、まだまだTODOだらけ。ただESオペレーティング システムで5年以上開発を続けているIDLコンパイラesidlにしても、Web IDLの仕様はようやく今月Last Callという段階だったりもするので、とにかく止まらずに進めていくのが大切かなと思います。

それから、さっそくUbuntuでビルドできない、という報告をいただいています。公式ページにも記載している通り現状Fedora 15をお勧めしています。実際には、gcc 4.5(できれば4.6), SpiderMonkey 1.8.5が利用できるようなシステムであれば問題ないと思いますが、情報が集まりましたらまたお知らせします。

  • 7/3追記: Ubuntu 11.04(Boostがちょっと古め?)には対応させました。詳細については公式ページを。

またオープンソース プロジェクトですので、一緒にコードを作成してくださる方も募集しています。ラップトップと一緒にエスリル カフェまで遊びに来てくださるのも大歓迎です。