猫でも分かるAndroid WebKit

Naruto TAKAHASHI(tnaruto@gmail.com)

Turbo Systems Co, Ltd.

横浜Androidプラットフォーム部第26回勉強会

Agenda

WebKit

Android WebKit

WebKit Knowledge of WebKit

WebKit とは

OSSのHTMLレンダリングエンジンライブラリ

HTML

CSS

Javascript

SVG

WebKit とは(cont)

言語は C++

KDE プロジェクトの KHTML から fork した

KHTML は Qt がベースになっている。

構造がしっかりしているとのうわさが！

ライセンス

ライセンスは LGPL と BSD-style

KHTML のものは LGPL

それ以外は BSD-style

動作プラットフォーム

Mobile platform

• iPhone

• Modern UI

• BREW

• Android

Desktop platform

• MacOSX(Safari)

• Windows

• Linux(X11)

• GTK

• Qt

• EFL

Web”Kit”

≒Web レンダリングを

いろんなプラットフォー

ムで動かす”キット”です。

WebKit アーキテクチャ

WebKit API or WebKit2 API

• WebKit の 外部 API 宣言

• 各プラットフォームで使うための実装を行う

レイヤー

• 例: EFL -> evas_object

• 例: GTK -> GObject

WebKit API vs. WebKit2 API

WebKit API vs. WebKit2 API(cont)

WebKit WebKit2

プロセスモデル

シングルプロセス

マルチプロセス

API タイプ

ブロッキングAPI(関数コール)

ノンブロッキングAPI(IPC通信)

• WebKit API はシングルプロセスでWebCore の実行は関数コール

• WebKit2 API はマルチプロセスで UI プロセスと WebCoreプロセスを分離• タッチパネルと相性バツグン

WebKit API と WebKit2 API の採用実績

• WebKit API

• Chrome

• Android

• WebKit2 API

• Tizen 2.0

• safari

WebCore

• HTML レンダリング担当

• WebKit の中核(Core)

• どんなプラットフォームでも WebCore の差異

は少ない。

• Android も 4.1 以降はそんなに手を入れないスタイ

ルになりました。

WebCore 処理フロー

1. HTMLをパースして DOM ツリーを構成

2. レンダリングツリーを構成

3. レンダリングツリーのレイアウト

4. レンダリングツリーの描画

WebCore 処理フロー(cont)

• WebCore の処理に興味があればこちらをど

うぞ

• ブラウザの仕組み: 最新ウェブブラウザの内部

構造

• http://www.html5rocks.com/ja/tutorials/in

ternals/howbrowserswork/

WebCore/platform

• WebCore のプラットフォーム依存処理の実

装

• プラットフォームでの描画処理

• WebCore 処理フローの描画のブロック

• 各プラットフォームで実装が異なる箇所

Javascript

• Javascript 評価

• DOM API と Javascript エンジンとの繋ぎ込みを担当

• JavaScriptCore(WebKit 標準エンジン Tizen, Android 4.0)

• V8(Android 4.1 over)

• Nitro(iOS)

• じゃあ DOM API の宣言や実装はどこでやってるの？

WebKitIDL

• DOM API は WebKitIDL を用いて定義

• http://trac.webkit.org/wiki/WebKitIDL

• 拡張子は .idl

• WebCore の至るところへ散らばっている

• 独立した API もすべて WebKitIDL で定義

• GeoLocation API

• File API

Example: alert() (IDL 記述)

• IDL ファイルで alert() を宣言

• WebCore/page/DOMWindow.idl

module window {interface DOMWindow {

void alert(in DOMString message);}

}

Example: alert() (ヘッダ宣言)

• 対応する処理をヘッダに宣言

• WebCore/page/DOMWindow.h

namespace WebCore {class DOMWindow {

void alert(const String& message);}

}

Example: alert() (処理)

• 処理をソースに記述

• WebCore/page/DOMWindow.cpp

void DOMWindow::alert(const String& message){

Page* page = m_frame->page();

page->chrome()->runJavaScriptAlert(m_frame, message);}

WebKit 各レイヤーまとめ

• WebKit API or WebKit2 API

• 各プラットフォームのための外部 API 宣言

• WebCore

• HTML レンダリング処理

• WebCore/platform

• 各プラットフォームへのレンダリング処理

• Javascript

• Javascript エンジンとの繋ぎ込み

WebKit のポーティングガイド

• WebKit をプラットフォームへ移植したい

• WebKit あるいは WebKit2 を実装しましょう

• WebCore の platform を実装しましょう

• 独自 Javascript API がほしい

• WebKitIDL で実装しましょう

Android WebKit

Knowledge of

Android WebKit

Android WebKit

• WebKit の Java 実装ソース

• ${Android_Src}/framework/base/core/java/android/w

ebkit

• Android のブラウザは WebKit の Java API で作られて

いる

• 例外

• Google chrome(アプリ自身が WebKit を持っている)

• Firefox(アプリ自身が Gecko を持っている)

Android の定番のお約束

• Android Platform は Java なのに、C++ で

作られた WebKit の API はどうやって実行

するの？

• JNI(Java Native Interface)を使用

Android の Native WebKit

• Android プロジェクトでソース管理

• ${Android_Src}/external/webkit

• WebKit 本家の変更点をマージ

• プラットフォーム依存の処理は android ディレクトリへ

実装を書いている。

• WebKit 本家に android ディレクトリはなし

• 本家へのフィードバックはしてない模様

Android Webkit アーキテクチャ

Android.WebKit

• Java から WebKit を使うためのクラス

• WebView

• http://developer.android.com/reference/android

/webkit/WebView.html

• API の宣言と native WebKit のつなぎ合わ

せをしている

Android.WebKit(cont)

• Android はなぜタッチパネルと相性の良い

WebKit2 を採用していない？

• Android.WebKit で UI 処理とレンダリング処

理を分離しているため

Android WebKit の UI とレンダリングの分離方法

• Android.Handler

• Android.WebKit で Handler で UI 処理とレン

ダリング処理を分けている。

• Native WebKit は 関数コールでレンダリング

処理をするほうが都合がよい。

• 余計な処理されるとむしろ困る

Native WebKit API

• Android.WebKit が使用する API の実装

• Android.WebKit と WebCore を繋ぐための

ブリッジ

• JNI の定義がほとんど(むしろ全部)

Native WebCore

• WebCore 部分は本家のオリジナルとほぼ一

緒

• 例外的にプラットフォーム依存の処理が追加

されている

• Video タグのジェスチャー処理(Android 4.1)

Native WebCore (cont)

• Platform 層

• Skia への描画

• Android リソースへのアクセス

• JNI(C->Java)

Skia

• グラフィックライブラリ

• http://code.google.com/p/skia/

Javascript 層

• Native WebKit と変わらないので省略

• Android 4.1 以降はエンジンが V8 になりま

した。

まとめ まとめます

WebKit と Android WebKit の比較

WebKit Android WebKit

WebKit API or

WebKit2 API

WebCore

WebCore/platform

Android.WebKit

JNI

Native

WebCore

Native

WebCore

Native WebKit

API

Native WebCore

所感

• Android WebKit を触るためには

• Android Platform についての知識

• WebKit 自体の知識

• 上記二つを繋ぎ込む根気！

• 正直、複雑

最後に猫から大切なお知らせ

ソースの見かた分かった？

おしまい