猫でも分かる Android WebKit
- 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
- 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 ディレクトリはなし • 本家へのフィードバックはしてない模様
- 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)
- 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. おしまい