『Webブラウザエンジニアリング』第7~8章を読みました。

以下の書籍を7章から8章まで読みました。

Webブラウザエンジニアリング

Webブラウザは、現代のコンピューティング環境において欠かせない存在であり、最も広く使われているプラットフォームの一つです。本書は、その仕組みを実践的に学ぶための解説書です。実際にWebブラウザを構築する過程をたどりながら、レンダリング、HTMLパーサー、CSS、JavaScript、マルチスレッド対応、セキュリティモデル、アニメーションとコンポジット処理、ブラウザAPI、アクセシビリティなど、モダンなWebブラウザの主要な要素を順を追って解説していきます。 章ごとにコードを動かしながら、ブラウザに機能が積み重なっていく過程を通じて、ソフトウェアを成長させ改善していく経験を自然に体得できます。ブラウザ技術の研究者とChrome開発者による豊富な知見をもとに、Webの進化をたどりながら、手を動かしてブラウザの内部構造を深く理解できる一冊です。

oreilly.co.jp

1章から6章の感想については、以下で書いています。

• 『Webブラウザエンジニアリング』第1~3章を読みました。 | ジブンノート - silverbirder.github.io
• 『Webブラウザエンジニアリング』第4~6章を読みました。 | ジブンノート - silverbirder.github.io

Linkを表示したい

※ 理解が間違っていそうですが、言語化します。

前のセクションにてWebページを表示できるようになったのですが、Webの最重要である別文書へのリンクが欲しくなります。
リンクがあると、ネットサーフィンができるようになります。

現状の実装ではレイアウトをブロックかインラインかによって、テキストや要素の表示位置を調整できます。
まだ要素自身の表示位置が不明です。
そこで、LineLayoutとTextLayoutというクラスを用意しました。
LineLayoutの中にTextLayoutが複数保持する形となりました。
TextLayoutには、フォント、x位置、高さなどの情報を残して、y位置はLineLayoutが計算します。
TextLayoutには、(a要素などの)Elementのノードを参照できます。
これで、a要素がどこにあるのか把握できるようになります。

※ 文章だけですみません。

ウィンドウからリンクをクリックした際、ウィンドウ内のx,y座標が分かります。
その座標から、TextLayoutの位置を逆算してどこの要素がクリックされたか判断できます。
厳密にいうと、スタッキングコンテキストによる計算が必要ですが省略されます。

クリックした座標から、a要素のhrefが取得できたら 従来のURLを読み込む処理に戻して画面を再描画します。

クロームの実装

ブラウザのWebページ以外のUI部品（アドレスバーとか）の総称をクロームと呼ぶ そうです。
リンクによるページ遷移ができたら、別タブで開く操作が欲しくなります。
そうです、クロームUIを実装します。

実装としては、まずは構造設計です。
ブラウザクラスとクロームクラス、タブクラスの3つを作成します。
従来のWebページの実装はタブクラスになり、ブラウザクラスがタブクラスやクロームクラスを保持する形になります。
ブラウザクラスは、クリックなどのイベントを受け取り、クロームやタブクラスへ処理を委譲します。

クロームUIについては、Tkinterのキャンバス機能を使って長方形などを描画するのを細かく書きます。
クロームUIには、タブやアドレスバー、戻るの実装を行います。

結果として、以下の画面出力となりました。

かなりブラウザっぽくなってきました。

HTMLフォーム

次はWebページを見るだけでなく、コメントを書き込むなどフォーム送信できるようにしたいです。

アトミックインラインレベルボックス

HTMLでフォームを実装すると、inputやbuttonのような要素を使うことが多いです。
これらの要素は、アトミックインラインレベルボックスに該当するようです。

• Visual formatting model - www.w3.org

従来のインライン要素（例：span や a）は、中のテキストが分解されて行内に配置されます。
そのまま複数行に跨ることができます。
CSSでいうと、display: inline が該当します。

一方でアトミックインラインレベルボックスは、
input や button のような要素は、見た目はインラインとして並びますが、
中身は分解されず、1つのまとまりとして扱われます。
そのため改行が発生する場合でも、要素の途中で分割されることはなく、
ボックス全体が次の行へ移動します。
CSSでいうと、display: inline-block が該当します。
これが、アトミックインラインレベルボックス の特徴だそうです。

フォーム作成

フォーム作成のセクションは、これまでの実装を踏襲する形が多かったです。
InputLayout を作成して、これがinput要素のレイアウトになります。
フォームの入力と描画、フォーカスとブラー、フォームの送信ボタンのクリックアクションなどを実装します。
送信時は、送信データをパーセントエンコードでエンコードしたものをサーバへ送信します。
Webサーバは簡易的なものを用意します。
これで、簡単なフォーム機能が実現するようになりました。

サーバ起動は以下のコマンドを実行します。

make docker_run_server

http://localhost:8000 でサーバ起動されます。
ブラウザの起動は以下で開きます。

make docker_run URL=https://browser.engineering

+ボタンをクリックして別タブを開き、アドレスバーに http://localhost:8000 を入力してエンターキーを入力します。
input部分に Hello, World を入力してボタンをクリックするとデータがメモリ上に保存されます。
そうすると、以下のような画面出力となります。

サーバに保存した Hello, World が表示されるようになりました！

終わりに

リンクとフォームができるようになりました。
どちらも、現代のWebでは必須の機能なので、仕組みを作れて勉強になりました。

s

silverbirder

Webソフトウェアエンジニア