この動画はメンバー限定動画です

全ての講座が
月額990円で学び放題

講座の情報を見る

HTML入門レンダリングエンジンを知ろう

記事を共有:

  • X
  • Pocket
  • クリップボードにコピー

Webブラウザには各環境ごとにさまざまな種類がありますが、これらの違いには機能以外に「表示のされ方」にも違いがあります。

例えば、Windowsに標準で搭載されているMicrosoft EdgeとGoogle Chromeで、同じHTMLを表示してみましょう。次のように、文字の大きさや標準で利用される書体(フォント)などが、異なっています。

これは、WebブラウザがHTMLを解釈して画面に描画するときに行われる「レンダリング」という作業に違いがあるためです。

このレンダリングを担当するのが、Webブラウザに内蔵されている「レンダリングエンジン」と呼ばれるエンジン部分です。そしてややこしいのが、レンダリングエンジンとWebブラウザの種類は必ずしも一致しません。

例えば、「Google Chrome」とmacOSに搭載されている「Apple Safari」というWebブラウザは、開発メーカーは違うものの、採用しているレンダリングエンジンは元をたどれば同じものを利用しています。

逆に、Micorosoft EdgeというWebブラウザは、名前は同じですが搭載された時期によって、レンダリングエンジンが変化しています。これは、他にも「Opera」というブラウザ等でもレンダリングエンジンの変更が行われています。

レンダリングエンジンのオープンソース化

なぜこのような複雑な動きが出てきているかというと、Appleが独自のWebブラウザ(Safari)を開発する際に、自社でレンダリングエンジンをいちから開発するのは手間がかかることから、「KHTML」という既存のレンダリングエンジンを採用したことから始まります。

KHTMLは、「オープンソース」と呼ばれる誰でも無償で利用可能な形で公開されていたため、Appleはこれを元に独自に改良を加えて「WebKit」というレンダリングエンジンを開発しました。そして、これもまたオープンソースとして公開しました。

次にこれに注目したのがGoogleです。Googleも自社のWebブラウザを開発する際に、この「WebKit」を採用することとし、後に改良を加えて「Blink」と名付けました。これもまたオープンソースとして公開されています。

こうして、KHTMLやWebKitを起源としたWebブラウザは非常に人気が出るようになり、それまでは自社でレンダリングエンジンを開発していた、MicorosoftやOperaといったWebブラウザも、WebKitやBlinkを採用するようになり、レンダリングエンジンが途中で変更されるという事態が起こってしまいました。

今、独自でレンダリングエンジンを開発しているのは、Firefoxが残る程度となっています(Geckoを採用)。

前のレッスン 次のレッスン