1. 猫でも分かる
Android WebKit
Naruto TAKAHASHI(tnaruto@gmail.com)
Turbo Systems Co, Ltd.
横浜Androidプラットフォーム部第26回勉強会

2. Agenda
WebKit
Android WebKit

3. WebKit Knowledge of WebKit

4. WebKit とは
OSSのHTMLレンダリングエンジンライブラリ
 HTML
 CSS
 Javascript
 SVG

5. WebKit とは(cont)
言語は C++
KDE プロジェクトの KHTML から fork した
KHTML は Qt がベースになっている。
 構造がしっかりしているとのうわさが！

6. ライセンス
ライセンスは LGPL と BSD-style
 KHTML のものは LGPL
 それ以外は BSD-style

7. 動作プラットフォーム
Mobile platform Desktop platform
• iPhone • MacOSX(Safari)
• Modern UI • Windows
• BREW • Linux(X11)
• Android • GTK
• Qt
• EFL

8. Web”Kit”
≒Web レンダリングを
いろんなプラットフォー
ムで動かす”キット”です。

9. WebKit アーキテクチャ

10. WebKit API or WebKit2 API
• WebKit の 外部 API 宣言
• 各プラットフォームで使うための実装を行う
レイヤー
• 例: EFL -> evas_object
• 例: GTK -> GObject

11. WebKit API vs. WebKit2 API

12. WebKit API vs. WebKit2 API(cont)
• WebKit API はシン
グルプロセスで
WebKit WebKit2
WebCore の実行は関
数コール
プロセス シングル マルチプ
モデル プロセス ロセス
API タイ ブロッキ ノンブ • WebKit2 API はマル
プ ング ロッキン チプロセスで UI プ
API(関数 グAPI(IPC ロセスと WebCore
コール) 通信) プロセスを分離
• タッチパネルと相性
バツグン

13. WebKit API と WebKit2 API の採用
実績
• WebKit API
• Chrome
• Android
• WebKit2 API
• Tizen 2.0
• safari

14. WebCore
• HTML レンダリング担当
• WebKit の中核(Core)
• どんなプラットフォームでも WebCore の差異
は少ない。
• Android も 4.1 以降はそんなに手を入れないスタイ
ルになりました。

15. WebCore 処理フロー
1. HTMLをパースして DOM ツリーを構成
2. レンダリングツリーを構成
3. レンダリングツリーのレイアウト
4. レンダリングツリーの描画

16. WebCore 処理フロー(cont)
• WebCore の処理に興味があればこちらをど
うぞ
• ブラウザの仕組み: 最新ウェブブラウザの内部
構造
• http://www.html5rocks.com/ja/tutorials/in
ternals/howbrowserswork/

17. WebCore/platform
• WebCore のプラットフォーム依存処理の実
装
• プラットフォームでの描画処理
• WebCore 処理フローの描画のブロック
• 各プラットフォームで実装が異なる箇所

18. Javascript
• Javascript 評価
• DOM API と Javascript エンジンとの繋ぎ込みを担当
• JavaScriptCore(WebKit 標準エンジン Tizen, Android 4.0)
• V8(Android 4.1 over)
• Nitro(iOS)
• じゃあ DOM API の宣言や実装はどこでやってるの？

19. WebKitIDL
• DOM API は WebKitIDL を用いて定義
• http://trac.webkit.org/wiki/WebKitIDL
• 拡張子は .idl
• WebCore の至るところへ散らばっている
• 独立した API もすべて WebKitIDL で定義
• GeoLocation API
• File API

20. Example: alert() (IDL 記述)
• IDL ファイルで alert() を宣言
• WebCore/page/DOMWindow.idl
module window {
interface DOMWindow {
void alert(in DOMString message);
}
}

21. Example: alert() (ヘッダ宣言)
• 対応する処理をヘッダに宣言
• WebCore/page/DOMWindow.h
namespace WebCore {
class DOMWindow {
void alert(const String& message);
}
}

22. Example: alert() (処理)
• 処理をソースに記述
• WebCore/page/DOMWindow.cpp
void DOMWindow::alert(const String& message)
{
Page* page = m_frame->page();
page->chrome()->runJavaScriptAlert(m_frame,
message);
}

23. WebKit 各レイヤーまとめ
• WebKit API or WebKit2 API
• 各プラットフォームのための外部 API 宣言
• WebCore
• HTML レンダリング処理
• WebCore/platform
• 各プラットフォームへのレンダリング処理
• Javascript
• Javascript エンジンとの繋ぎ込み

24. WebKit のポーティングガイド
• WebKit をプラットフォームへ移植したい
• WebKit あるいは WebKit2 を実装しましょう
• WebCore の platform を実装しましょう
• 独自 Javascript API がほしい
• WebKitIDL で実装しましょう

25. Android Knowledge of
WebKit Android WebKit

26. Android WebKit
• WebKit の Java 実装ソース
• ${Android_Src}/framework/base/core/java/android/w
ebkit
• Android のブラウザは WebKit の Java API で作られて
いる
• 例外
• Google chrome(アプリ自身が WebKit を持っている)
• Firefox(アプリ自身が Gecko を持っている)

27. Android の定番のお約束
• Android Platform は Java なのに、C++ で
作られた WebKit の API はどうやって実行
するの？
• JNI(Java Native Interface)を使用

28. Android の Native WebKit
• Android プロジェクトでソース管理
• ${Android_Src}/external/webkit
• WebKit 本家の変更点をマージ
• プラットフォーム依存の処理は android ディレクトリへ
実装を書いている。
• WebKit 本家に android ディレクトリはなし
• 本家へのフィードバックはしてない模様

29. Android Webkit アーキテクチャ

30. Android.WebKit
• Java から WebKit を使うためのクラス
• WebView
• http://developer.android.com/reference/android
/webkit/WebView.html
• API の宣言と native WebKit のつなぎ合わ
せをしている

31. Android.WebKit(cont)
• Android はなぜタッチパネルと相性の良い
WebKit2 を採用していない？
• Android.WebKit で UI 処理とレンダリング処
理を分離しているため

32. Android WebKit の UI とレンダリン
グの分離方法
• Android.Handler
• Android.WebKit で Handler で UI 処理とレン
ダリング処理を分けている。
• Native WebKit は 関数コールでレンダリング
処理をするほうが都合がよい。
• 余計な処理されるとむしろ困る

33. Native WebKit API
• Android.WebKit が使用する API の実装
• Android.WebKit と WebCore を繋ぐための
ブリッジ
• JNI の定義がほとんど(むしろ全部)

34. Native WebCore
• WebCore 部分は本家のオリジナルとほぼ一
緒
• 例外的にプラットフォーム依存の処理が追加
されている
• Video タグのジェスチャー処理(Android 4.1)

35. Native WebCore (cont)
• Platform 層
• Skia への描画
• Android リソースへのアクセス
• JNI(C->Java)

36. Skia
• グラフィックライブラリ
• http://code.google.com/p/skia/

37. Javascript 層
• Native WebKit と変わらないので省略
• Android 4.1 以降はエンジンが V8 になりま
した。

38. まとめ まとめます

39. WebKit と Android WebKit の比較
WebKit Android WebKit
WebKit API or
Android.WebKit
WebKit2 API
JNI
WebCore
Native Native WebKit
WebCore API
WebCore/platform Native
Native WebCore
WebCore

40. 所感
• Android WebKit を触るためには
• Android Platform についての知識
• WebKit 自体の知識
• 上記二つを繋ぎ込む根気！
• 正直、複雑

41. 最後に猫から大切なお知らせ
ソースの見かた分かった？

42. おしまい