野次馬エンジニア道

野次馬な気持ちでプログラミングをあれこれと綴ります

ハイブリッドアプリ開発 - ネイティブブリッジとAngularJS以降

HTML5などのWeb技術を使ってiOSAndroidの両方で動作するアプリケーションを開発した事例や内部的な実装を体系的に解説した

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)

Cordovaなどのフレームワークを使った開発手法のみならず、デバッグや最適化・セキュリティ・モバイル特有の設定などの基本知識も一通り知ることができる。

(書籍の内容は、書籍『Software Design plusシリーズ [iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門』から10本の記事を転載。 でも一部参照可能)。

WebViewを使って素の状態からハイブリットアプリ開発を説明する本は少ないのではないかと思う。本編を読みながら調査した関連の内容をまとめてみた。

ネイティブブリッジ

Androidでネイティブ=>JavaScript=>ネイティブ

久保田光則,アシアル株式会社「[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)」P 318より

リスト11.11 JavaからWebViewのJavaScriptを実行する

webView.loadUrl("javascript:alert('hoge');")l

iOSではstringByEvaluatingJavaScriptFromString:メソッドを用いてJavaScriptを評価すると、その帰り値を取得できましたが、Androidでのjavascriptスキームを使った方法では、(中略)その評価された結果の値を得ることはできません。

値を取る方法としては、addJavaScriptInterfaceで登録したオブジェクトがobjとすると

webView.loadUrl("javascript:obj.getResult(doSomething('hoge'));")

な感じでできる。

ページやヒストリの管理をJavaScript側で行っている場合に、ネイティブで発生するイベントなどに応じてJavaScriptを呼び出しその結果に応じて何か処理をするときに使えるかもしれない。

JavaScript=>カスタムURL=>ネイティブ

AndroidaddJavaScriptInterfaceで登録したオブジェクトはページが読み込まれた直後にすでにグローバルなスコープで利用可能となる。iOSで同様の方法をやろうとした場合、obj.doSomething()のような関数を

久保田光則,アシアル株式会社「[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)」P 321より

リスト11.17は、「apicall://」というカスタムURLスキームを使ってJavaScriptからネイティブへの機能を呼び出す例です。

のようにURLにマップして、shouldStartLoadWithRequest:navigationTypeとNSURLProtocol経由でネイティブを呼び出す形となる。

Android/iOSでコードをJavaScriptのコードを共有させたいのであれば、知っている限りこの辺りは自前で吸収する必要がある。

また、AndroidJavaScript=>ネイティブと呼び出すときは同期呼び出しとなるので、iOSもカスタムのURLに同期でajaxをして実装するのだが、 パフォーマンスに少々ペナルティがある模様(詳しくは、A Faster UIWebView Communication Mechanismを参照)。

UIWebViewのJSContextによるネイティブブリッジ

上記記事で紹介されているパフォーマンスの比較表の中で驚くべきはJavaScriptCoreの直接利用。 iOS7からJavaScriptCore.frameworkが使えるようになったので、JavaScriptをネイティブ側で利用することが可能となったが、UIWebViewとはJavaScriptのContextが分かれるためWebアプリへの恩恵は少ない*1

TomSwift/UIWebView-TS_JavaScriptContext · GitHub

ではWebKitのソースを参照して、UIWebViewが使っているContextを参照する方法(ハック)が紹介されている。 これをすると自前でaddJavaScriptInterface相当が実装可能*2。ちょっとしたプロトなどにはよいかもしれない。

AngularJS以降のハイブリッドアプリ用フレームワーク

上記の書籍ではCordovaがメインだが、CordovaとAngularJSと組み合わさったフレームワークも色々と見つけた。

後者はAngularJSのdirectiveを使ってCordovaをラップしている感じ

*1:ゲームなどでロジックをスクリプトで書くといったユースケースを想定しているのかもしれない

*2:submitするアプリにはおそらく使えませんが