WebKitとは

WebKitとは、Apple社が開発するオープンソースの「HTMLレンダリングエンジン」の名称です。Web系エンジニアの方以外はあまり聞かない言葉かと思いますが、これからWebKitの歴史や概要、Webプログラミングで意識しておきたいことなどについて解説します。

Webエンジニアを目指す方、エンジニアとして知識を広げたい方はぜひ最後までお付き合いください。

【参考】：WebKit ｜公式

iPhoneなどiOSのSafari、iOSで利用されているGoogle Chrome、いずれもHTMLレンダリングエンジンは WebKitが使われています。WebKitはApple・Nokia・Adobeなどが中心になっているWebKit Foundationで、オープンソースのレンダリングソフトウェアとして開発されました。

現在WebKitを採用している製品としては、Mac OSやiOSの標準ブラウザであるSafari、さらにはiOS向けのGoogle ChromeやFirefoxなどがあります。

【参考】：Safari - Apple（日本） 【参考】：Google Chrome｜ Google 【参考】： Firefox ｜Mozilla

WebKitはApple社がMac OS標準ブラウザの「Safari」のレンダリングエンジンとして2002年に開発を始めました。WebKitの元はUNIX系OS向けオープンソースHTMLレンダリングエンジンの「KHTML」です。

WebKitは2005年にオープンソース化され、2008年にはGoogle社もその開発に参画し、WebKit「Google Chrome」やオープンソース版の「Chromium」のレンダリングエンジンとして採用されました。

2013年にAppleとGoogleが開発方針を巡って対立した結果、GoogleはWebKitから分岐した新しいレンダリングエンジンとして「Blink」の開発プロジェクトを立ち上げました。このBlinkはデスクトップ向けブラウザのChrome、Microsoft Edgeなどに搭載されています。

レンダリングエンジンとWebエンジニア

Webブラウザは、Webプログラマーが開発したWebページを表現する重要なツールです。その表現にはHTMLレンダリングエンジンが使われており、Webブラウザに種類があるように、HTMLレンダリングエンジンにも種類があります。

作成したWebページは、ブラウザの設計思想やそこに組み込まれているHTMLレンダリングエンジンによって見え方が違ったり、時にはレイアウトが崩れたりすることがあるため、注意が必要です。

私たちが普段目にしているWebサイトはHTMLで書かれ、CSSで装飾し、体裁が整えられています。しかし、そのソース（元情報）は一般の方が見てもよく分かりません。レンダリング（rendering ） は、特殊な言語やデータなどをインプットとして、それらの情報から画像や映像、音声などを生成することです。

レンダリングエンジン（rendering engine）とは、レンダリングを行うソフトウェア部品のことです。レイアウトエンジン （layout engine）とも言われます。

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！

Webページを作成する際には、主要なブラウザに対応しなければならず、特にどのブラウザに完全対応するのかを決める必要があります。ブラウザとHTMLレンダリングエンジンはWebプログラマーにとって大切だということを常に意識しておきましょう。

ちなみに、デスクトップブラウザのシェア※は、日本ではChromeとMicrosoft Edgeだけで8割前後を占めています。スマートフォンではSafariが65%を占め、デスクトップとは真逆の状況になっています。

これから、ブラウザとHTMLレンダリングエンジンとの関係について紹介しますが、デスクトップ向けのサイトではChromeとMicrosoft Edgeが採用したHTMLレンダリングエンジンの「Blink」を、スマホ向けサイトでは、SafariやiOS向けChromeなどが採用した「WebKit」を意識しておく必要があると言えます。

【参考】：※1 12月デスクトップブラウザシェア、日本のEdgeは世界の2倍 | マイナビニュース 【参考】：※1 1月モバイルブラウザシェア、Safari増加続く | マイナビニュース

Webブラウザで利用されているレンダリングエンジンにはいくつか種類があります。代表的なレンダリングエンジンとWebブラウザとの関係を見てみましょう。

■ WebKit WebKitは、主にWebブラウザのSafarで使われています。軽快さ、スピードを特徴とするHTMLレンダリングエンジンです。Safariは、iPhoneやiPadなどのApple製品に標準で組み込まれているブラウザですが、他にiOS用で利用されるChromeやFirefoxでもWebKitが使われています。

本来、Google ChromeはBlink、FirefoxはGeckoというHTMLレンダリングを採用していますが、iOS版のChromeやFirefoxはApple社の規約に従ってWebKitを組み込んでいます。

■ Trident 「IE」として親しまれていたInternet Explorerで採用されていたHTMLレンダリングエンジンです。IEが廃止されたことにより、Tridentを利用する主要なブラウザはほぼ消滅し、ローカルでの利用がメインとなりました。

■ EdgeHTML IEの後継ブラウザとなったMicrosoft Edge向けに、Tridentからフォーク（派生）して開発されたHTMLレンダリングエンジンです。2014年から2020年までMicrosoft Edgeで使われていました。

■ Blink BlinkはGoogle社が中心に開発するHTMLレンダリングエンジンで、2013年にWebKitから分岐して開発が始まっています。同社のWebブラウザ Chromeをはじめ、様々なブラウザで利用されています。

Chromeは「Chromium」というオープンソースのブラウザ用ソフトをベースにしていますが、Microsoft Edgeも「Chromium」を採用したことで、HTMLレンダリングエンジンをBlinkに切り替えています。

【参考】：Opera Web Browser | Opera

IEサポート終了の影響は？終了の理由やEdgeのIEモードも紹介

Webkiにまつわる疑問

WebKitが主にMacOSやiOSで動いているSafariなどのブラウザのHTMLレンダリングエンジンであることは理解できたと思いますが、実際にHTMLレンダリングエンジンに関する理解が進むにつれて、幾つかの疑問が湧いてきます。ここでは、ネット上で見かけるWebKitにまつわる疑問について解説します。

Webサイトの検証モードを確認した際に、誰もが1度は「-webkit-」という記述を目にすると思います。気になりながらも、その意味まで確認する人は少ないと思いますので、解説します。-webkit-はCSSにおいて「ベンダープレフィックス（Vendor Prefix）」と呼ばれるもので、レンタリングエンジンに対応しています。

ブラウザの開発に関わっているプログラマーの方を除いて、WebプログラマーはWebKitの使い方まで覚える必要はありませんが、ベンダープレフィックスは覚えておいた方がよいでしょう。

ベンダープレフィックスはCSSのプロパティの拡張機能を各ブラウザに実装するための識別子です。

まだブラウザで標準になっていない、非標準のCSSプロパティに-webkitのような「ベンダープレフィックス」をつけることで、新たな機能が利用できるようになる仕組みです。

CSSには、「-webKit-transition:」というように記述します。たとえば、要素を回転させて表示する「Tranform」プロパティにベンダープレフィックスを付ける場合は、

div {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

と記述します。

ちなみに、Internet Explorerのベンダープレフィックスは-ms-でしたが、今は使われていません。また、デスクトップ版のChromeやEdgeが採用しているHTMLレンダリングエンジンのBlinkでは、ベンダープレフィックスはSafariと同じ-webkit-です。

これはBlinkがWebKitから派生しているため、-webkit-で問題がないからです。こうしたことにより、ベンダープレフィックスを意識するのは、-webkit-とFirefoxの-moz-の2種類だけになりました。この結果、ベンダープレフィクスを意識する必要性が薄れてきています。

SafariなどHTMLレンダリングエンジンにWebKitを使用しているブラウザでは、稀に“WebKit Encountered an Internal Error” といった内部エラーが表示されることがあります。これはWebKitが出しているエラーメッセージです。

主な対処法としては、エラーが表示された端末を再起動する、あるいはOSを最新のビルドに更新することです。大抵の場合はこの2つの方法で改善できます。

レンダリングエンジンに明るいエンジニアを

ここでは、HTMLレンダリングエンジンの1つ、WebKitをテーマに、Webブラウザの種類、HTMLレンダリングの種類について紹介しました。

Webプログラマーが「HTMLレンダリングエンジン」に直接関わる機会は非常に少ないと思いますが、私たちが開発したサイトが正しく表示され、ユーザの目を惹いているのは「HTMLレンダリングエンジン」のおかげです。Webエンジニアは「HTMLレンダリングエンジン」についてしっかり把握しておきましょう。