Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

cordova/electronの構造を知る

4 942 vues

Publié le

2016.4.7 第8回 Apache Cordova 勉強会で使用した資料

Publié dans : Ingénierie
  • Identifiez-vous pour voir les commentaires

cordova/electronの構造を知る

  1. 1. 1 Hybrid FWs: Cordova/Electron の構造を知る ソニー株式会社 UXプラットフォーム UX・マーケティング本部 クラウド&サービスアプリ開発運用部門 1部 2 課 関 康治 number of U.S. states state capitols I've visited. yasuharu.seki.7 ahirun0426 Yasuharu.Seki@jp.sony.com
  2. 2. 2 本日の Agenda Hybrid App を実現する FWs 2つを深掘りしてみる • 概論 • Hybrid App とは / 特長と課題 • Cordova / Electron 概要 • Cordova の構造を知る • Cordova Android • Cordova Android + Crosswalk • Cordova iOS • Cordova ubuntu • Cordova 上で新 Platform に対応するには? • Electron の構造を知る • Cordova vs Electron • 終わりに
  3. 3. 3 概論
  4. 4. 4 Hybrid App とは ~ もう一つのアプリ実装法 ~ Native Application の例 UI App Logic Driver Java/Objective-C/C++ Hybrid フレームワーク JavaScript ・Native 通信用APIを通じてデータをやり取り ・プラグイン機構を用いて機能拡張 WebView UI App Logic Driver API Hybrid Application vs アプリ組込ブラウザで WebApp を動かす ブラウザから Native Library を 操作可能
  5. 5. 5 Hybrid App 特長と課題 特長 - アプリとして利用可能なリソース全てにアクセス可能 - UIの実現が比較的楽 (HTMLでページ作成とNative実装での実現の比較) - 複数の Platform 間で JavaScript ソースコードの共有が期待できる 課題 - アプリ中で browser を手配する必要がある - browser は通常 sandbox 化されており、native library を直接操作できるようになっていない - 必要とする native library が用意されているかどうかは コミュニティ次第 WebView UI App Logic Driver API アプリの中で browser をどのよう に実現しているか browser 内部と 外部のnative library とで どのようにやり取りしている か plugin や tool 等の ecosystem がどの程度 充実しているか 注目すべき点
  6. 6. 6
  7. 7. 7 とは • Apache foundation が提供している Hybrid App Framework • 2009: Nitobi PhoneGap として誕生 • 2011: Adobe が Nitobi を買収 ⇒ Adobe PhoneGap に • 2011: Apache foundation にコード寄贈 ⇒ Apache Cordova に • 多くのプラットフォームに対応 • https://cordova.apache.org/contribute/ • 各社の mobile app 開発 Framework の基礎技術として使われている • IBM MobileFirst Platform (IBM) • Oracle ADF Mobile (Oracle) • SAP Mobile Platform (SAP) • monaca (Asial) • ionic (Drifty)
  8. 8. 8
  9. 9. 9 とは • GitHub.com が提供しているデスクトップ向け Hybrid App Framework • Atom Editor の下回りとして開発 • 2015.4.17 に Electron という名前でリリース • Electron を使った desktop アプリ増加中 • Visual Studio Code • slack desktop app • wordpress.com desktop app • etc. etc. • http://electron.atom.io/ • 動作プラットフォーム Visual Studio Code Electron アプリの例 第6回 Apache Cordova 勉強会で Asial 田中さんより紹介がありました
  10. 10. 10 の弊社事例 https://first-flight.sony.com/pj/2/HUIS%20REMOTE%20CONTROLLER HUIS カスタマイズアプリ Electron を用いて実装 2016.3.28 OSS として公開・開発中 https://github.com/sony/huis-ui-creator リモコンをあなたらしく。 HUIS[ハウス] REMOTE CONTROLLER http://huis.jp/
  11. 11. 11 Cordova の構造を知る
  12. 12. 12 OS (Platform) WebView cordova app 構造と設計思想 WebApp (JavaScript) cordova JavaScript library cordova Native library cordova plugin (Native) cordova plugin (Native) 設計思想: 出来る限り OS(環境)側で用意される機構を用いる • WebView は OS の物を用いる • OS 毎に WebView の調達方法が異なる • Native Layer との通信法は各環境毎に調達 • かなり Hack に近いことをしている JS⇔Native の通信方法は Cordova で用意。(かなりHack) WebView の実現法は target platform 毎に異なる Platform Cordova Application 注目
  13. 13. 13 WebView cordova app JS ⇔ Native 通信のフロー WebApp (JavaScript) cordova JS lib cordova native lib cordova plugin (Native) cordova plugin (Native) アクション JS ⇒ Native 通信 Native ⇒ JS 通信 結果通知 CordovaAPI cordova.exec() 処理終了callback CordovapluginAPI plugin 呼び出し 処理終了通知 互いに独立互いに独立 アプリ開発者は Cordova API と Cordova plugin API のみ知ってい れば良い plugin 処理 callbackとなる 関数objectを保持する 呼出状態保持するかは PF毎の実装次第
  14. 14. 14 plugin の例 • WebApp(JavaScript)からpluginを呼び出すコード • Platform 問わず共通 • plugin内でJavaScriptから呼び出される部分のコード • Platform 毎にAPIが違う • Android (Java) の場合の例 public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { // functionA if (action.equals("actionA")) { int int_value = args.getInt(0); this.actionA(int_value, callbackContext); return true; } // functionB else if (action.equals("actionB")) { this.actionB(callbackContext); return true; } return false; } cordova.exec( win_callback, fail_callback, "service名", "action名", [引数の配列] ); WebView cordova app WebApp plugin plugin Cordova
  15. 15. 15
  16. 16. 16 cordova native lib Android Platform の構成 MainActivity extends CordovaActivity SystemWebViewEngine implements CordovaWebViewEngine android.webkit.WebViewを継承 WebView: Android OS に付随の android.webkit.WebView を用いる 1. MainActivity 起動 2. SystemWebViewEngine, SystemWebView を作成 3. cordova native lib を生成 4. _cordovaNative オブジェクトを addJavaScriptInterface() で JS engine に登録 5. WebApp 起動 6. cordova JS library 初期化 SystemWebView extends WebView WebApp (JavaScript) cordova JS library _cordovaNative webView.addJavaScriptInterface() で登録 OS Version 毎に挙動が異なる アプリのファイルサイズは小さい
  17. 17. 17 JS_OBJECT形式 _cordovaNative を通じて通信 • 起動時に登録された _cordovaNative の exec() を実行するこ とで、Java層の CordovaBridge.jsExec が呼び出される • 登録には addJavaScriptInterface() を利用 cordova native lib Android Platform: JS ⇒ Native 通信法 WebView cordova JS library _cordovaNative PROMPT形式 window.prompt() ⇒ WebChromeClient.onJsPrompt() を利用 • JS層で window.prompt() を実行すると、Chrome のイベント として onJsPrompt() が呼び出される • onJsPrompt() に渡されてきたメッセージを cordova native lib がよしなに判断 ⇒ plugin コールする cordova native lib WebView cordova JS library _cordovaNative prompt() onJsPrompt() 通常は JS_OBJECT形式 fallback として PROMPT 形式を使う
  18. 18. 18 Android Platform: Native ⇒ JS 通信法 POLLING形式 50ms 毎に問い合わせ • JS側libが50ms毎にretrieveJsMessages() を実行してNative側のmessage queueの 内容を確認 • 確認には JS ⇒ Native の通信法を用いる LOAD_URL形式 webView.loadUrl() で JS 実行 • Native側でcallbackFromNative() を呼び出 す JS コードを生成 • loadUrl() のURL 引数に 'JavaScript: [コー ド]' を渡して実行 ONLINE_EVENT形式 online/offline イベントで通知 • ネットワーク online/offline 状態の切り替 え • WebView.setNetworkAvailable() を使う • JS側で online と offline イベントに listener を仕掛けておく • イベントが到着したら messsage queue の内容を確認 • 確認には JS ⇒ Native の通信法を用いる cordova native lib WebView cordova JS library message queue resultresultresult … check check check … cordova native lib WebView cordova JS library result … callbackFromNative() loadUrl() cordova native lib WebView cordova JS library result online状 態切替 online event event listener check デフォルトは ONLINE_EVENT 形式 JS側で cordova.setNativeToJsBridgeMode() を使って変更可能
  19. 19. 19
  20. 20. 20
  21. 21. 21 とは OS の WebView の代わりに、アプリに組み込んだ Chromium をブラウザとして利用する ・OSに拠らず最新の API が利用可能 ・動作確認の対象が Crosswalk のみに絞れる ・アプリの配布ファイルサイズが ~20MB 位増加する OS (Platform) WebView cordova app WebApp (JavaScript) cordova JavaScript library cordova Native library cordova plugin cordova plugin OS (Platform) cordova app cordova plugin cordova plugin Crosswalk WebApp (JavaScript) cordova JavaScript library cordova Native library
  22. 22. 22 cordova native lib Android Platform の構成 MainActivity extends CordovaActivity SystemWebViewEngine implements CordovaWebViewEngine android.webkit.WebViewを継承 WebView: Android OS に付随の android.webkit.WebView を用いる 1. MainActivity 起動 2. SystemWebViewEngine, SystemWebView を作成 3. cordova native lib を生成 4. _cordovaNative オブジェクトを addJavaScriptInterface() で JS engine に登録 5. WebApp 起動 6. cordova JS library 初期化 SystemWebView extends WebView WebApp (JavaScript) cordova JS library _cordovaNative webView.addJavaScriptInterface() で登録
  23. 23. 23 cordova native lib Android + Crosswalk の構成 MainActivity extends CordovaActivity XWalkWebViewEngine implements CordovaWebViewEngine ChromiumのWebViewを継承 WebView: Crosswalk に包含された Chromium の WebView を用いる 1. MainActivity 起動 2. SystemWebViewEngine, SystemWebView を作成 3. cordova native lib を生成 4. _cordovaNative オブジェクトを addJavaScriptInterface() で JS engine に登録 5. WebApp 起動 6. cordova JS library 初期化 XWalkCordovaView extends XWalkView WebApp (JavaScript) cordova JS library _cordovaNative webView.addJavaScriptInterface() で登録 通常の Android 版と同じ動作 • 初期化 • JS ⇔ Native 通信
  24. 24. 24
  25. 25. 25 cordova native library iOS Platform の構成 AppDelegate CDVViewController : UIWebViewDelegate WebView: iOS に付属の UIWebView を利用 1. AppDelegate 起動 2. (アプリ実装) CDVViewController を継承した ViewController を作成 3. AppDelegate.viewController に作成した ViewController を登録 4. viewDidLoad で config.xml に記述してある WebApp 起動ファイルを読み込む 5. cordova JS library 初期化 WebApp (JavaScript) cordova JS library iOS API * CDVViewController に iOS API コールされた際のフックが内蔵されている cordova-ios 4.0 から iOS8,9 向けに WKWebView が利用可能 ⇒ cordova-plugin-wkwebview-engine を追加インストール
  26. 26. 26 stringByEvaluatingJavaScriptFromString形式 UIWebKit 標準の Native ⇒ JS 実行法で通信 • cordova JS library をコールするJavaScriptコードを native lib で生成 • webview:stringByEvaluatingJavaScriptFromString: を利用して生成したコードを WebView で実行 cordova native lib iOS Platform: Native ⇒ JS 通信法 WebView cordova JS library WKWebView では evaluateJavaScript:completionHandler:
  27. 27. 27 iOS Platform: JS ⇒ Native 通信法 IFRAME形式 iframe にURL読み込むことで通知 • キューにコマンドをプール • WebView 内の iframe にダミーページを 読み込む • native lib がページ読み込みトリガをフッ ク • Native側からJS側にのキューを読み込む XHR形式 XMLHTTPRequest()発行で通知 • キューにコマンドをプール • native lib が httpd として動作 • XMLHTTPRequest() をローカルで実行 • httpd が XHR をフック • Native側からJS側のキューを読み込む WKWebKit形式 標準の JS⇒Native通信 • window.webkit.messageHandlers を用い て native のライブラリをコールcordova native lib WebView cordova JS library command queue … load page cordova native lib WebView cordova JS library message Handlers iframe 通知 check command command command cordova native lib WebView cordova JS library command queue … XMLHTTPRequest() check command command command デフォルトは IFRAME 形式 WKWebKit が使える場合は WKWebKit 方式 WKWebKit は iOS 8,9 のみの対応 & 要 webview engine plugin 追加
  28. 28. 28
  29. 29. 29 cordova native library ubuntu Platform の構成 QQmlApplicationEngine WebContext (com.canonical.Oxide) WebView: Qtのライブラリ com.canonical.Oxide を使用 • Chromium ベースの WebView をQtで扱えるようにしたもの • ubuntu 提供元である Canonical Ltd. が作成 • cordova ubuntu も canonical がメインコントリビュータ • 主に ubuntu OS (phone用) 向けに提供している Native 通信法:Oxide の Message API を用いる • window.oxide.sendMessage() を実行することで JS ⇒ Native 呼び出し可能 • webView.rootFrame.sendMessage() を実行することで Native ⇒ JS 呼び出し可能 WebApp (JavaScript) cordova JS library Oxide Message API CordovaViewInternal
  30. 30. 30
  31. 31. 31 他 PF に移植する場合の作業 WebView を提供するブラウザの調達 1. OS/Platform/Framework に標準のブラウザを採用 • インストーラのファイルサイズが小さくなる • OS等のバリエーション毎に動作が異なる可能性がある (検証・修正工数の増大) 2. 調達したブラウザをアプリに結合する • ブラウザの挙動が固定できる • JS⇔Native通信法の選択肢が比較的広い • インストーラフットプリントの大型化 • ブラウザバージョンアップへの追従工数が必要 JavaScript⇔Native の通信法を確保 • 正規の方法があればそれを採用 • Hack での通信法確保が必要になる場合も その他 • 使用したい plugin を移植する必要あり • Cordova CLI へ platform 追加したい場合は cordova project へ upstream する必要あり
  32. 32. 32 Electron の構造を知る
  33. 33. 33 Electron 構造と設計思想 Chromium Node plugin (Native) 設計思想: WebView (Chromium) と node をアプリに組み込んでしまう • WebView は組み込まれた Chromium の物を利用する • Native Layer とのやり取りは node が受け持つ • WebView と node 間のやり取りは Chromium の IPC 機能を利用する Chromium Electron Application node WebView v8 v8 node.js Node plugin (Native) WebApp (Browser part) Chromium IPC Blink WebApp (Renderer part)
  34. 34. 34 embedded Linux にもいける!? アプリ作成法 =
  35. 35. 35 課題 Electron の課題 • Electron の開発はほぼ1人の肩に掛かっている (zcbenz) • リソースも足りていない状況 • Chromium/node を抱え込んでいる • 配布ファイルサイズが大きくなってしまう (~20MB位) • Chromium 以外のブラウザを利用したい場合の対応は難しい • 最新の Chromium/node Update 反映にタイムラグがある Cordova/Electron 両対応 Hybrid App を開発する際の課題 • Cordova / Electron では、WebAppの構成が異なる • アプリコードの使い回しをする際にはハードルになりそう
  36. 36. 36 Cordova と Electron
  37. 37. 37 Cordova vs Electron 比較 開発者 Apache Foundation GitHub.com (@zcbenz) ターゲットアプリ (原則) モバイルアプリ デスクトップアプリ PF Android, iOS, Ubuntu, Windows desktop, browser Amazon Fire OS, Blackberry, FireFox OS, Mac OS X, Web OS, Windows phone 8 Windows, Mac OS X, Linux WebView (原則) OS付随のブラウザを使用 内包する Chromium を使用 WebApp構成 ソリッド スレッドが明示的に Browser(main)/Renderer(UI) で分かれてい る plugin cordova plugin (Cordova が提供する API) node module (node が提供) plugin repository npm (ecosystem:cordova) n/a
  38. 38. 38 終わりに
  39. 39. 39 終わりに 現況で Hybrid アプリケーションを実現する場合に使える、2つの代表的な FWs の構造を確認してみた。 それぞれの構成を大まかに理解できたのであれば嬉しい。 ご清聴ありがとうございました

×