ブラウザ作りのすゝめ

ブラウザ作りのすゝめ @Shinyaigeek/Shinobu Hayashi

Who am I • Shinobu Hayashi • GitHub & Twitter:
@Shinyaigeek • vs 卒論 🔥 • 4月から某メディア企業でWebをやります👶 • 💕 : 🎯 🍻 🍣 🕸

イベント参加前夜... という無茶振りがきた ...

自作ブラウザ Shinyaic についての話をします

Agenda 🗒 1. ブラウザの仕組み(簡略な) 🤓 2. 実装方法 🤖 3. 参考リンク集
(後で資料もツイートします) 📕 4. Shinyaic Browserの実装状況 ⏩ 5. ブラウザを作る楽しさ 🔥

ブラウザの仕組み(概略図)(実際にはもう少し細かい)

実装方法 (HTML Parser) • HTML ファイルから DOM を構築する • 丁寧に行うのであれば
◦ 1文字 (Character) ずつ解析して Token に落とし込む(開始タグ, 閉じタグ, self closing tag, text, attribute key, etc…) ◦ それをもとにDOMを構築していく • Shinyaicでは簡単に ◦ < から始まったら開始タグとして処理 ▪ まずattributesをタグが閉じられるまで処理する ▪ そのタグの子を再帰的に parseしていく • といった実装になっています

実装方法 (CSSOM) • まず #id1 や p , .class1 といった
selector をparseする ◦ pseudu elementsやcombinatorにも配慮が必要 • selectorのparseが終わり { にぶつかるとそのブロックの parseにはいる • ブロック内のparseでは, key: value; とし処理していく • @以下のメディアクエリも処理する

実装方法 (RenderTreeの構築) • DOM と CSSOM によって RenderTree を構築する •
RenderTree はその名の通り, 矩形情報を算出する処理や , 描画する処理に必要な情報が入る Nodeで構成されるTree <-> Document OM Tree • display: none; が付与されている要素や, <head />, <meta />は描画されないのでRenderTreeに含まれない • <div /> か <p /> かといった情報も省き, 内部表現としてInline Node, Block Node, Text Node, Scroll Node, Document, Nodeとして表現した • どのNodeにどのstyleが割り当てられるかも計算する • Useragent Stylesheetの反映などもここで行った

実装方法 (RenderTreeの構築) • どのDOM Nodeにどのstyleが割り当てられるかというアルゴリズムは思っていた以上に大変だった • 最初シンプルに作るなら, 結合子のことは考えずに
シンプルなセレクターにのみ対応するのがいいかも

実装方法(Layout) • RenderTreeを元に, そのNodeの種類やstyleによって矩形情報を計算する ◦ 例えばinline, blockかで幅や並びの計算は変わってくる ◦ Blockだとまずwidth, 次に位置，次に再帰的に子要素を計算し子要素から高さを割り出す
• テキストがこのフォントで描画された時高さがどうなるかなどの計算も必要 • paddingやwidthなど割り当てられたstyleがあればそれを元に計算する

実装方法(paint) • ここでlayoutした情報をもとに実際に描画する • iced という描画エンジンを利用 • styleから色味やフォントを描画エンジン向けの表現にする

参考にしたリンク集 • How Browsers Work: Behind the scenes of modern
web browsers : ブラウザの仕組みが細かく解説されている • lmt-swallow/puppy-browser :セキュキャンの資料に作られたブラウザ . 知る限り最もシンプルで読みやすい. • ブラウザレンダリングの仕組み：日本語資料でわかりやすい • W3C/WHATWG: 実際に実装する際にはここを読んでいく ◦ MDNをリンク集として、まず MDNで調べる箇所を調べてジャンプするとわかりやすい ◦ TC39って何？W3Cって何？ってなる人は　 Web技術の調査方法　を読むといいかも

Shinyaic の進捗 • example.com を表示できるようになった • HTTP通信には, 自作HTTP Clientの konnnyakuを利用している
◦ TCPの上から実装した ◦ TLSについてはnative-tlsを利用 • JSはほぼ進捗がない ◦ とりあえずJS -> bytecodeにして, bytecodeを実行する部分を学生のうちに作ってしまいたい ◦ なのでWeb APIもまだ • HTML, CSSについても足りない部分はまだ多い

ブラウザを作る楽しさ • 仕様を読んでいくモチベーションにつながる • Webフロントエンドをやるだけではなかなか身につかない知識もついていく ◦ 通信プロトコル ◦ 描画エンジン •
仕様の量は膨大なため, そう簡単には終わらない, なので盆栽の気分で一生楽しめる趣味 • 使うだけではなく実際に作ることでブラウザの内部についてより身近に詳しく知れる • 既存のブラウザは凄い😇 • みんなもブラウザ, 作ろうや....

❌ 早く雑に作る ⭕ 早く小さく作る • このような完全に趣味に振り切ったような個人開発であっても , 成果は大事 ◦ モチベーションに繋がる
🔥 ◦ 正直苦行かと聞かれると苦行なのでモチベーションがないとなかなか続かない • 早く成果を出すために, テストを書くことをサボる, するべき抽象化をしない, 設計をちゃんと考えないといった, 雑に作ることをしていてはいつか破綻する ◦ ブラウザ作りは時間がかかるので , 早く成果を出すことと長く続けることを意識する • 早く作るために雑に作るのではなく , 早く作るために小さく作る ◦ まずHTMLをparseするところからしよう , まずは <body><p>hoge</p></body>をparseできるように, 次に attributeあってもparseできるように.... ◦ RenderTreeの構築をしたいけど , CSSとNodeのマッチングは難しそうなので一回単純なセレクターのみに対してマッチングできるようにしよう ...

当たり前のことを当たり前にする(仕様に従えば)当たり前に動く

ご静聴有難うございました

ブラウザ作りのすゝめ

ブラウザ作りのすゝめ

Shinobu Hayashi

More Decks by Shinobu Hayashi

Other Decks in Programming

Featured

Transcript