Tweet
Tweet

Slide 1

Slide 1 text

PHPで webブラウザのレンダリングエンジンを実装する ディップ株式会社 / 渡邉泰曉 1

Slide 2

Slide 2 text

セッションのゴール 今回は、聞いていただいた方が 1. Webブラウザの内部処理について、概要レベルで理解できている 2. ブラウザについて興味を持てる 状態になっていること 3

Slide 3

Slide 3 text

本日のアジェンダ 1. Webブラウザとは? 2. PHPでWebブラウザを実装する 3. デモ 4. まとめ 4

Slide 4

Slide 4 text

1. Webブラウザとは ? 5

Slide 5

Slide 5 text

そもそもWebブラウザって何 ? エンジニアに限らず、多くの人がブラウザを使っている Chrome, etc,,, ブラウザもソフトウェアだが、それを開発するプロジェクトはどんなもの? 6 https://about.google/brand-resource-center/logos-list/ https://www.google.com/intl/ja_jp/chrome/ GoogleとGoogleのドキュメントはGoogle LLCの商標であり、この資料は Googleによって承認されておらず、Googleに所属していません。

Slide 6

Slide 6 text

現代のWebブラウザは非常に巨大なプロジェクト UIで見えるだけでも、Webページの表示、開発者向け機能、組み込みAI… 7 http://example.com/

Slide 7

Slide 7 text

Webブラウザの中身はどうなってるの ? Chromium(代表的なブラウザプロジェクト)のソースは約3588万行 それは、どんな仕組みで動いてる? 例えば、なんでHTML + CSSでWebページのレイアウトが決まる? 中身を知りたくありませんか ? 8 https://openhub.net/p/chrome/analyses/latest/languages_summary

Slide 8

Slide 8 text

(再掲)セッションのゴール 1. Webブラウザの内部処理について、概要レベルで理解できている → 理解のために PHPで実装してみました。 9

Slide 9

Slide 9 text

2. PHPでWebブラウザを実装し よう 10

Slide 10

Slide 10 text

実装の前に、今回のスコープ 本セッションで実装するWebブラウザの処理は、下記の2つのみ 1. HTTPクライアントとしての処理 2. レンダリングエンジンとしての処理 ※ JSの実行などは対象外 11

Slide 11

Slide 11 text

HTTPクライアントとしての処理 12

Slide 12

Slide 12 text

HTTPの超概観 そもそもHTTPとは? → HTML文書などのリソースを読み取るための、データ交換ルールの体系 注) 今回は HTTP/1.1を扱う 13 https://developer.mozilla.org/ja/docs/Glossary/Protocol https://developer.mozilla.org/ja/docs/Web/HTTP/Guides/Overview

Slide 13

Slide 13 text

HTTPリクエストはどんな構造 ? HTTP/1.1はテキストベースなので、人間が読める 各部を簡単に読んでみましょう 14 https://datatracker.ietf.org/doc/html/rfc7230#page-21

Slide 14

Slide 14 text

HTTPリクエストの構造 リクエストライン HTTPメソッド(GET, etc)、リクエスト対象(パス)などを保持 15 https://datatracker.ietf.org/doc/html/rfc7230#page-21

Slide 15

Slide 15 text

HTTPリクエストの構造 ヘッダー (本セッションではざっくりいうと)リクエストの追加情報 16 https://developer.mozilla.org/ja/docs/Web/HTTP/Reference/Headers

Slide 16

Slide 16 text

HTTPレスポンスの構造 ステータスライン - HTTPバージョン - ステータスコード などが含まれる 17 https://datatracker.ietf.org/doc/html/rfc7230#section-3.1.2

Slide 17

Slide 17 text

HTTPレスポンスの構造 ヘッダー (ざっくりいうと)追加情報 18 https://datatracker.ietf.org/doc/html/rfc7230#section-3.1.2

Slide 18

Slide 18 text

HTTPレスポンスの構造 メッセージ本文 今回は、レンダリングエンジンの解析対象の、 HTML文書が入る 19 https://datatracker.ietf.org/doc/html/rfc7230#section-3.1.2

Slide 19

Slide 19 text

レンダリングエンジンとしての処理 20

Slide 20

Slide 20 text

2. レンダリングエンジンとしての処理 レンダリングエンジンとは? ウェブブラウザーの一部 HTML、CSSなどを解釈して描画するソフトウェア ※ Chromiumの例では、 `src/third_party/blink` の下にあるコードを指す 21 https://developer.mozilla.org/ja/docs/Glossary/Engine/Rendering https://www.chromium.org/blink/#what-is-blink https://www.chromium.org/blink/

Slide 21

Slide 21 text

本セッションで実装するレンダリングエンジンの処理 ざっくり以下の流れ 1. HTMLの解析 2. CSSの解析 3. 描画用のデータ構造(Layout Tree)の構築 4. 描画 22

Slide 22

Slide 22 text

HTMLの解析 23

Slide 23

Slide 23 text

HTMLの仕様 仕様がわからないと解析できない WHATWGというコミュニティが、HTMLの仕様を定めている。 24 https://html.spec.whatwg.org/multipage/sec tions.html#the-body-element

Slide 24

Slide 24 text

HTMLを字句解析する 字句解析とは? → 意味のある最小単位である「トークン」に分割すること → 「Tokenization」ともいう 25 https://gihyo.jp/book/2024/978-4-297-14546-0

Slide 25

Slide 25 text

どうやって字句解析する ? HTMLの字句解析も仕様が決まっている このアルゴリズムは、(下記仕様にあるように、)ステートマシンとして実装する > Implementations must act as if they used the following state machine. 26 https://html.spec.whatwg.org/multipage/parsing.html#tokenization

Slide 26

Slide 26 text

ステートマシンとは ? ステートマシンとは、振る舞いや操作を表現するために使うモデルやアルゴリズム 主に「状態」と「遷移」で構成される ※下記はあくまで概念的な図 27 https://gihyo.jp/book/2024/978-4-297-14546-0 https://www.lucidchart.com/pages/uml-state-machine-diagram

Slide 27

Slide 27 text

ステートマシンとは ? 字句解析でどう使われるのか? 今回は

hoge

のような、単純な例を考える。 解析過程を見ていく 28 https://gihyo.jp/book/2024/978-4-297-14546-0 https://www.lucidchart.com/pages/uml-state-machine-diagram

Slide 28

Slide 28 text

まずData状態から開始 字句解析とステートマシン 29 https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization

hoge

Slide 29

Slide 29 text

次に、小なり < が入力されると、 TagOpen状態に切り替わる 字句解析とステートマシン 30

hoge

https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization

Slide 30

Slide 30 text

文字が入力されると StartTagトークンを生成 & p の文字をトークンに追加 TagName状態に切り替え 字句解析とステートマシン 31

hoge

https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization

Slide 31

Slide 31 text

大なり > が入力されると、Data状態に戻り、 StartTagトークン(

)が完成 字句解析とステートマシン 32

hoge

https://gihyo.jp/book/2024/978-4-297-14546-0 https://html.spec.whatwg.org/multipage/parsing.html#tokenization

Slide 32

Slide 32 text

Tokenization (残りは割愛して) 最後まで文字を消費(consume)すると 右記のようなトークン列が完成 33

Slide 33

Slide 33 text

構文解析 字句解析の次は、構文解析 これはHTML仕様書の「Tree construction」で仕様が定められている。 ざっくりいうと、字句解析されたToken列を受け取り、 DOM Tree(ブラウザが実行できる内部形式)を出力する処理。 34 https://html.spec.whatwg.org/multipage/parsing.html#tree-construction https://gihyo.jp/book/2024/978-4-297-14546-0

Slide 34

Slide 34 text

DOM Tree そもそもDOMとは? > ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現 これも「DOM Standard」という仕様が定義されている 35 https://html.spec.whatwg.org/multipage/parsing.html#tree-construction https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

Slide 35

Slide 35 text

DOM Treeの構築 ではDOM Treeとは? → HTML文書のコンテンツを木構造で表現したもの 一つ以上の「ノード」で構成される 36 https://developer.mozilla.org/ja/docs/Web/Performance/Guides/How_browsers_work#dom_%E3%83%84 %E3%83%AA%E3%83%BC%E3%81%AE%E6%A7%8B%E7%AF%89

Slide 36

Slide 36 text

構文解析(DOM Tree構築)の流れ (おおまかに言うと、) 仕様で定義された状態を遷移させながら、トー クン列を一つずつ解析し、DOM Treeを構築する。 → 文章だと分かり辛いので、図で説明する 37

Slide 37

Slide 37 text

構文解析(DOM Tree構築)の流れ 今回の例では、左のHTMLが、右のトークン列に字句解析された前提とする 38

Slide 38

Slide 38 text

構文解析(DOM Tree構築)の流れ (字句解析と同様に) 状態と遷移が仕様で定義されている。 順次、状態を遷移させる。 39

Slide 39

Slide 39 text

構文解析(DOM Tree構築)の流れ 構文解析器の作成時は、 Documentオブジェクトのみ これに要素を加えて、 DOM Treeを拡張していく 40 https://html.spec.whatwg.org/multipage/parsing.html#tree-construction

Slide 40

Slide 40 text

Before html状態 41 html要素をDocumentノードの下に作成 これも下記英文のように仕様が決まっている > Create an element for the token (中略), > with the Document as the intended parent. https://html.spec.whatwg.org/multipage/parsing.html#the-before-html-insertion -mode

Slide 41

Slide 41 text

最終的なDOM Tree 最終的に、 右図のようなDOM Treeが構築される 42

Slide 42

Slide 42 text

CSSの解析 43

Slide 43

Slide 43 text

CSSの解析 大まかな流れはHTMLと同様 1. 字句解析 (Token列の生成) 2. 構文解析 (Tree(CSSOM)の生成) 今回は概要の説明に留める 44

Slide 44

Slide 44 text

字句解析 1文字ずつ入力を解析 → CSSトークンを生成 → トークン列にpush 45 https://html.spec.whatwg.org/multipage/pars ing.html#the-before-head-insertion-mode

Slide 45

Slide 45 text

構文解析 (Tree(CSSOM)の生成) トークン列を受け取り、[CSSOM(CSS Object Model)ツリー」と呼ばれる木構造に変 換 46 https://www.w3.org/TR/css-syntax-3/#tokeni zing-and-parsing

Slide 46

Slide 46 text

描画用のデータ構造 (Layout Tree) の構築 47

Slide 47

Slide 47 text

Layout Treeとは? ブラウザで表示される要素の位置 やサイズを、保持する。 (統一された仕様は無いが、) ChromeやFirefoxは、内部でレイ アウト用の木構造を持つ 48 https://firefox-source-docs.mozilla.org/gfx/RenderingOverview.html#layout https://developer.chrome.com/blog/inside-browser-part3?hl=ja

Slide 48

Slide 48 text

Layout Treeの構築 じゃあどのように、構築されるのか? (今回の実装では) 大きく分けて2段階で構築される 1. 要素にスタイルを割り当てる 2. 要素の位置を計算し、保持させる 49

Slide 49

Slide 49 text

1. 要素にスタイルを割り当てる DOM Treeを再帰的に走査し、スタイルが要素に当てはまるか判断する body要素からの例は下図 50 これはbodyセレクターの スタイル指定がヒット

Slide 50

Slide 50 text

子要素を再帰的に走査 1. 要素にスタイルを割り当てる 51 子要素をたどる 子要素をたどる これはデフォルティ ング これはクラスセ レクターの指定 がヒット

Slide 51

Slide 51 text

2. 要素の位置を計算し、保持させる 各要素のスタイルが決まったら、要素位置を計算 具体的には、 - ブロック or インライン要素を判定 - 要素の位置(XY座標)を計算 などの処理 今回は、要素位置の計算のみ触れる 52 Block inline inline inline

Slide 52

Slide 52 text

要素の位置計算の例 右記のDOM Treeを考える 53

Slide 53

Slide 53 text

まずは、要素を深さ優先探索する (p要素の計算に到達したと仮定) 要素の位置計算の例 54

Slide 54

Slide 54 text

要素の位置計算の例 (p要素に到達したら) 親/兄弟要素を考慮し、p要素の位置を決定 55 X軸位置は親要素(body)に合わせよう 兄弟要素(h1)はブロック要素だな Y軸方向に座標を進めよう

Slide 55

Slide 55 text

要素の位置計算の例 p要素の座標を計算したイメージ → これを繰り返し、Layout Treeを構築 56 h1 p

Slide 56

Slide 56 text

構築された Layout Treeの例 それぞれのNodeが - 位置情報 (XY座標) - スタイル - サイズ など画面表示に必要な情報を持つ。 (display: noneなど)非表示の要素は、 Treeから除外 57

Slide 57

Slide 57 text

描画処理 最後にUI上へ描画する ここからは本セッションの独自実装 PHPのGDライブラリを使い、png画像として描画結果を出力 58 https://www.php.net/manual/ja/book.image.php

Slide 58

Slide 58 text

デモ 59

Slide 59

Slide 59 text

ローカルのサンプル HTMLページを表示 composer run render-samples 60 https://www.php.net/manual/ja/book.image.php

Slide 60

Slide 60 text

example.comにリクエストし、描画 composer run render-example 61 https://www.php.net/manual/ja/book.image.php

Slide 61

Slide 61 text

描画結果 62

Slide 62

Slide 62 text

まとめ PHPでWebブラウザのレンダリングエンジンを実装 した。 今回は概要レベルの説明。 興味がある方は、「[作って学ぶ] ブラウザの仕組み」 などの情報を参考にしてください。 (本セッション作成時、大変参考にさせていただきました) 63 https://gihyo.jp/book/2024/978-4-297-14546-0

Slide 63

Slide 63 text

ビジョン “Labor force solution company” ⼈材サービスとDXサービスの提供を通して、労働市場における諸課題を解決し、 誰もが働く喜びと幸せを感じられる社会の実現を⽬指します。 × DX事業 Digital labor force solution バイトコミュニケーションアプリ『バイトルトーク』や、 機能を絞ったシンプルなSaaS型の『コボット』を通じて、 職場環境やコミュニケーション課題を解決 しています。 ⼈材サービス事業 Human work force solution ユーザーファーストな独自機能を搭載した、 求人情報・人材紹介サービスの提供を通じて、 ユーザーの就業課題 を解決しています。 ディップ株式会社とは 64

Slide 64

Slide 64 text

エンジニアリングの力でビジネスを成長させ、 「誰もが働く喜びと幸せを感じられる社会」を共に実現しましょう。 「挑戦し、変化し、リードする仲間」を募集中 65

Slide 65

Slide 65 text

ご清聴ありがとうございました。 66

Slide 66

Slide 66 text

Appendix - https://gihyo.jp/book/2024/978-4-297-14546-0 - https://browser.engineering/index.html - https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html - https://developer.chrome.com/docs/chromium/renderingng-architecture ?hl=ja - https://www.chromium.org/developers/design-documents/ - https://developer.chrome.com/blog/inside-browser-part3?hl=ja - https://html.spec.whatwg.org/multipage/ - https://dom.spec.whatwg.org/ - https://developer.mozilla.org/ja/docs/Web 67