Shiki’s Weblog

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

2011/07/22 #ESウェブブラウザ通信

京都は祇園祭の宵山も終わって、だいぶいつもの感じに戻ってきました。慌しい中でも、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."なので、あまり細かいことは気にしない)、その辺を直しました。

今度はメニューに価格が並んで表示されるようになりました。でもまだかなりおかしいです。

こういうリストをソフトウェア関係の仕事をしている人はバグリストと言ってます。ゲームソフトを作っている人が発売日前に家に帰れなかったりするのは、こういうリストがものすごい量になっているのを想像してもらえれば、と。r1804とr1805では、それぞれ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^_^;