この記事はKCS Advent Calender 2024の15日目の記事です。
Latte's Simple Browser (LSB)
Latte's Simple Browser (LSB) は、ブラウザの基本機能を学びながら実装することを目的として設計されています。実用に足るブラウザを作ることは目的としていません。
この記事の内容はd0iasmさんの「作って学ぶブラウザの仕組み」とは一切関係ありません。ご注意ください。
このプログラムではまずHTMLのコードを解析するためのパーサを作成し、SDL2 を利用してウィンドウに描画することで、シンプルなブラウザアプリケーションを作成します。
⇑ LSBで筆者のポートフォリオを表示した様子 ⇑
あまり一般向けな内容でもなく、完成度も高くないためソースコードの解説は省略し、概要と感想のみに留めさせていただきます。質問があれば下にあるコメント欄か、Twitterなどで連絡してください。
特徴
LSB は以下のような特徴を持っています。
- シンプルな設計: 必要最低限の機能に絞り込んで設計
- 軽量: 小規模なプログラムサイズで動作
- 教育目的: ブラウザの基本的な動作原理を学ぶための実装例
このプロジェクトは、C 言語と SDL2 を使用して開発されています。
一般的な WebBrowser との違い
一般的なWebBrowserには以下のような機能がついています。
- Webページのデータを取得
- HTMLの構文を解析してDOMを構築
- HTMLをパースした結果をGUIライブラリを使って描画
- CSSを解析し、フォント、色、レイアウトなどを反映
- JavaScriptを実行するには専用エンジンを組み込む
しかし今回作成したLSBではWebページのデータを取得したり、JavaScriptを使ってサイトを動的に変更することはできません。
一応、HTMLの構文を解析してDOMを構築し埋め込まれたCSSも解析していますが、対応は限定的です。
動作環境
LSB を実行するためには以下が必要です：
- GCC (GNU Compiler Collection)
- SDL2 ライブラリ
SDL について
SDL は、C 言語で書かれたクロスプラットフォームのグラフィック描画ツールです。フォントやネットワーク、スプライト、画像処理などの多数の補助ライブラリが公開されています。詳しくは SDL Wiki をご覧ください。
日本語の資料はあまり多くないですが、低レベルなグラフィックス処理をシンプルに行うためのAPIを提供していて、レンダリングや画像の管理、描画処理が比較的簡単に実装できるので採用しました。
SDL2 のインストール
Ubuntu の場合
以下のコマンドを実行して SDL2 をインストールしてください：
sudo apt install libsdl2-dev libsdl2-ttf-dev
その他の環境
他の OS で SDL2 をインストールする方法については、SDL Wiki を参照してください。
プログラムのダウンロードと実行
GitHub リポジトリ
ソースコードはこちらのリポジトリで公開しています：
Latte's Simple Browser (LSB)
プログラムの実行
完成版のプログラムは、以下の手順に従ってソースコードをダウンロードしコンパイルすることで実行できます。
-
リポジトリをクローン
git clone https://github.com/Latte72R/LSB.git -
ディレクトリを移動
cd ./LSB -
プログラムをコンパイル
gcc ./main.c ./parser.c -o lsb -lSDL2 -lSDL2_ttf -
ブラウザを起動
./lsb ./test.html
作成した感想
今回はHTMLやCSSをある程度手動でパースするプログラムになってしまった。できればもう少し一括出会い王するプログラムが作りたかった（というかもともとはタグの一覧とパースした際に付与する条件をまとめていた）のだが、<title>や<script>など様々な挙動をするタグがあったため次作る気になったときはもっと完成度の高いものを作りたい。
まとめ
今回、LSBを実装することでブラウザやHTMLの仕様について考える良い機会となりました。自分でコードを読んだり、カスタマイズしたりすることで、ブラウザの仕組みや Web 技術への理解を深まると思います。興味を持たれた方は、ぜひリポジトリからコードをダウンロードし、体験してみてください。