Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブラウザ作りのすゝめ

 ブラウザ作りのすゝめ

ブラウザ作りはいいぞ!という話

Shinobu Hayashi

October 27, 2021
Tweet

More Decks by Shinobu Hayashi

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 実装方法 (RenderTreeの構築)
    ● DOM と CSSOM によって RenderTree を構築する
    ● RenderTree はその名の通り, 矩形情報を算出する処理や
    , 描画する処理に必要な情報が入る
    Nodeで構
    成されるTree <-> Document OM Tree
    ● display: none; が付与されている要素や,

    View full-size slide

  10. 実装方法 (RenderTreeの構築)
    ● どのDOM Nodeにどのstyleが割り当てられるか
    というアルゴリズムは思っていた以上に大変だっ

    ● 最初シンプルに作るなら, 結合子のことは考えずに
    シンプルなセレクターにのみ対応するのがいいか

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide