猫でも分かる Android WebKit

11,291 views

Published on

Published in: Technology

猫でも分かる Android WebKit

  1. 1. 猫でも分かる Android WebKitNaruto TAKAHASHI(tnaruto@gmail.com)Turbo Systems Co, Ltd.横浜Androidプラットフォーム部第26回勉強会
  2. 2. Agenda WebKit Android WebKit
  3. 3. WebKit Knowledge of WebKit
  4. 4. WebKit とはOSSのHTMLレンダリングエンジンライブラリ  HTML  CSS  Javascript  SVG
  5. 5. WebKit とは(cont)言語は C++KDE プロジェクトの KHTML から fork したKHTML は Qt がベースになっている。  構造がしっかりしているとのうわさが!
  6. 6. ライセンスライセンスは LGPL と BSD-style  KHTML のものは LGPL  それ以外は BSD-style
  7. 7. 動作プラットフォームMobile platform Desktop platform • iPhone • MacOSX(Safari) • Modern UI • Windows • BREW • Linux(X11) • Android • GTK • Qt • EFL
  8. 8. Web”Kit”≒Web レンダリングをいろんなプラットフォームで動かす”キット”です。
  9. 9. WebKit アーキテクチャ
  10. 10. WebKit API or WebKit2 API• WebKit の 外部 API 宣言• 各プラットフォームで使うための実装を行う レイヤー • 例: EFL -> evas_object • 例: GTK -> GObject
  11. 11. WebKit API vs. WebKit2 API
  12. 12. WebKit API vs. WebKit2 API(cont) • WebKit API はシン グルプロセスで WebKit WebKit2 WebCore の実行は関 数コールプロセス シングル マルチプモデル プロセス ロセスAPI タイ ブロッキ ノンブ • WebKit2 API はマルプ ング ロッキン チプロセスで UI プ API(関数 グAPI(IPC ロセスと WebCore コール) 通信) プロセスを分離 • タッチパネルと相性 バツグン
  13. 13. WebKit API と WebKit2 API の採用実績• WebKit API • Chrome • Android• WebKit2 API • Tizen 2.0 • safari
  14. 14. WebCore• HTML レンダリング担当• WebKit の中核(Core)• どんなプラットフォームでも WebCore の差異 は少ない。 • Android も 4.1 以降はそんなに手を入れないスタイ ルになりました。
  15. 15. WebCore 処理フロー1. HTMLをパースして DOM ツリーを構成2. レンダリングツリーを構成3. レンダリングツリーのレイアウト4. レンダリングツリーの描画
  16. 16. WebCore 処理フロー(cont)• WebCore の処理に興味があればこちらをど うぞ • ブラウザの仕組み: 最新ウェブブラウザの内部 構造 • http://www.html5rocks.com/ja/tutorials/in ternals/howbrowserswork/
  17. 17. WebCore/platform• WebCore のプラットフォーム依存処理の実 装• プラットフォームでの描画処理 • WebCore 処理フローの描画のブロック• 各プラットフォームで実装が異なる箇所
  18. 18. Javascript• Javascript 評価• DOM API と Javascript エンジンとの繋ぎ込みを担当 • JavaScriptCore(WebKit 標準エンジン Tizen, Android 4.0) • V8(Android 4.1 over) • Nitro(iOS)• じゃあ DOM API の宣言や実装はどこでやってるの?
  19. 19. WebKitIDL• DOM API は WebKitIDL を用いて定義 • http://trac.webkit.org/wiki/WebKitIDL• 拡張子は .idl • WebCore の至るところへ散らばっている• 独立した API もすべて WebKitIDL で定義 • GeoLocation API • File API
  20. 20. Example: alert() (IDL 記述)• IDL ファイルで alert() を宣言• WebCore/page/DOMWindow.idlmodule window { interface DOMWindow { void alert(in DOMString message); }}
  21. 21. Example: alert() (ヘッダ宣言)• 対応する処理をヘッダに宣言• WebCore/page/DOMWindow.hnamespace WebCore { class DOMWindow { void alert(const String& message); }}
  22. 22. Example: alert() (処理)• 処理をソースに記述• WebCore/page/DOMWindow.cppvoid DOMWindow::alert(const String& message){ Page* page = m_frame->page(); page->chrome()->runJavaScriptAlert(m_frame,message);}
  23. 23. WebKit 各レイヤーまとめ• WebKit API or WebKit2 API • 各プラットフォームのための外部 API 宣言• WebCore • HTML レンダリング処理• WebCore/platform • 各プラットフォームへのレンダリング処理• Javascript • Javascript エンジンとの繋ぎ込み
  24. 24. WebKit のポーティングガイド• WebKit をプラットフォームへ移植したい • WebKit あるいは WebKit2 を実装しましょう • WebCore の platform を実装しましょう• 独自 Javascript API がほしい • WebKitIDL で実装しましょう
  25. 25. Android Knowledge ofWebKit Android WebKit
  26. 26. Android WebKit• WebKit の Java 実装ソース • ${Android_Src}/framework/base/core/java/android/w ebkit• Android のブラウザは WebKit の Java API で作られて いる • 例外 • Google chrome(アプリ自身が WebKit を持っている) • Firefox(アプリ自身が Gecko を持っている)
  27. 27. Android の定番のお約束• Android Platform は Java なのに、C++ で 作られた WebKit の API はどうやって実行 するの? • JNI(Java Native Interface)を使用
  28. 28. Android の Native WebKit• Android プロジェクトでソース管理 • ${Android_Src}/external/webkit• WebKit 本家の変更点をマージ• プラットフォーム依存の処理は android ディレクトリへ 実装を書いている。 • WebKit 本家に android ディレクトリはなし • 本家へのフィードバックはしてない模様
  29. 29. Android Webkit アーキテクチャ
  30. 30. Android.WebKit• Java から WebKit を使うためのクラス • WebView • http://developer.android.com/reference/android /webkit/WebView.html• API の宣言と native WebKit のつなぎ合わ せをしている
  31. 31. Android.WebKit(cont)• Android はなぜタッチパネルと相性の良い WebKit2 を採用していない? • Android.WebKit で UI 処理とレンダリング処 理を分離しているため
  32. 32. Android WebKit の UI とレンダリングの分離方法• Android.Handler • Android.WebKit で Handler で UI 処理とレン ダリング処理を分けている。 • Native WebKit は 関数コールでレンダリング 処理をするほうが都合がよい。 • 余計な処理されるとむしろ困る
  33. 33. Native WebKit API• Android.WebKit が使用する API の実装• Android.WebKit と WebCore を繋ぐための ブリッジ• JNI の定義がほとんど(むしろ全部)
  34. 34. Native WebCore• WebCore 部分は本家のオリジナルとほぼ一 緒• 例外的にプラットフォーム依存の処理が追加 されている • Video タグのジェスチャー処理(Android 4.1)
  35. 35. Native WebCore (cont)• Platform 層 • Skia への描画 • Android リソースへのアクセス • JNI(C->Java)
  36. 36. Skia• グラフィックライブラリ• http://code.google.com/p/skia/
  37. 37. Javascript 層• Native WebKit と変わらないので省略• Android 4.1 以降はエンジンが V8 になりま した。
  38. 38. まとめ まとめます
  39. 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. 40. 所感• Android WebKit を触るためには • Android Platform についての知識 • WebKit 自体の知識 • 上記二つを繋ぎ込む根気!• 正直、複雑
  41. 41. 最後に猫から大切なお知らせ ソースの見かた分かった?
  42. 42. おしまい

×