Your SlideShare is downloading. ×
  • Like
猫でも分かる Android WebKit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

猫でも分かる Android WebKit

  • 8,744 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,744
On SlideShare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
52
Comments
0
Likes
19

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 猫でも分かる Android WebKitNaruto 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.idlmodule window { interface DOMWindow { void alert(in DOMString message); }}
  • 21. Example: alert() (ヘッダ宣言)• 対応する処理をヘッダに宣言• WebCore/page/DOMWindow.hnamespace WebCore { class DOMWindow { void alert(const String& message); }}
  • 22. Example: alert() (処理)• 処理をソースに記述• WebCore/page/DOMWindow.cppvoid 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 ofWebKit 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. おしまい