WebView

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る
  • Android
  • iOS

目次 †

概要 †

スマホネイティブから、ウェブコンテンツを表示するときに使用するコンポーネント。

Android †

Android WebViewは

• Androidアプリでウェブコンテンツを表示するときに使用できる。
• Chromeの技術を使用したシステムコンポーネントである。
  • コンポーネントは端末にプリインストールされている。
  • 最新の状態に維持される（セキュリティアップデートやその他のバグ修正を反映）。

WebView †

• WebView | Android Developers
  https://developer.android.com/reference/android/webkit/WebView.html

簡易ブラウザ開発 †

• Androidでウェブブラウザを作ろう (全12回) - プログラミングならドットインストール
  http://dotinstall.com/lessons/browser_android_v2

• Androidアプリ開発でWebViewを追加する方法【初心者向け】 | TechAcademy?マガジン
  https://techacademy.jp/magazine/3503

• Android StudioでwebViewを使ってみる！ - Qiita
  http://qiita.com/sy_sft_/items/508870dfccfb237d72fd

• WebViewを使ったアプリ作成 - Okomeda Net
  • その１
  • その２
  • その３
  • その４

プロキシ †

• 参考
  • android WebView internet access problem, because of proxy? - Stack Overflow
    http://stackoverflow.com/questions/6673159/android-webview-internet-access-problem-because-of-proxy

• やってみたところ。
  • 最新のもので、WebView.enablePlatformNotifications?()メソッドが発見できず。
  • また、上記が、プロキシ認証に対応しているかどうかが不明。
  • 潔く、ローカル・プロキシを使用するようにした。

その他 †

• Android エンジニアが Android の WebView で苦しんだ話 - Qiita
  http://qiita.com/akitaika_/items/654dafa26e1d1dd0d3dd

iOS †

Android WebViewには、

• UIWebViewと
• WKWebView（UIWebViewの強化版）、
• SFSafariViewController?

というWebViewがある模様。

iOSのバージョンアップに従って機能が変更されている模様。

WebView †

• WKWebViewとUIWebView
  http://www.slideshare.net/yukihirai52/wkwebviewanduiwebview

• iOS 9のUIWebViewがとても残念らしいので
  WKWebViewに対応したCordova iOS 4.0（未リリース）を試してみる
  https://inoccu.com/blog/2015/09/19/230210.html

簡易ブラウザ開発 †

プロキシ †

その他 †

デバッグ †

Android †

• [Android] WebView に読み込んだ JavaScript アプリケーションを
  Chrome Developer Tools でデバッグする
  http://qiita.com/hkusu/items/fca23e0fa5cfb1b7fe1f

iOS †

ハイブリッド開発 †

HTMLコンテンツから、JavaScriptを経由して、スマホネイティブのデバイスへアクセスする。

参考 †

• [iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)
  https://www.amazon.co.jp/Android対応-HTML5-ハイブリッドアプリ開発-Software-Design/dp/4774162116

• 書籍転載：［iOS/Android対応］HTML5ハイブリッドアプリ開発［実践］入門

HTML→(JavaScript)→スマホネイティブ †

• PhoneGap?／Cordova：addJavascriptInterface?方式（前編） - Build Insider
  JavaScriptからネイティブの機能を呼び出す方法
  http://www.buildinsider.net/mobile/bookhtml5hybrid/1101
  • JsAlert?方式
  • addJavascriptInterface?方式
  • Loopback Interface Redirection方式
  • Private-Use URI Scheme Redirection方式

スマホネイティブ→(JavaScript)→HTML †

• PhoneGap?／Cordova：addJavascriptInterface?方式（後編） - Build Insider
  ネイティブからJavaScriptへ値を渡す
  http://www.buildinsider.net/mobile/bookhtml5hybrid/1102

HTML→(JavaScript)→スマホネイティブの処理方式 †

onJsAlert?方式 †

• 対応デバイス
  • Androidのみ

• 処理方式
  • window.alert()に渡された文字列をWebChromeClient?のonJsAlert?()で補足するハックを使用。
  • result.confirm()で全てのwindow.alert()が抑止されるので・・・。

addJavascriptInterface?方式 †

• 対応デバイス
  • Androidのみ

• 処理方式
  • JavascriptにJavaのInterfaceを公開する。

• 脆弱性がある。
  • HTTP/HTTPSのアクセスだけ許容する。
  • shouldOverrideUrlLoading?でURLチェックを行なう。
  • Android 4.2 Jelly Bean以降、公開するAPIを
    @JavascriptInterface?アノテーションで指定可能になった。

Loopback Interface Redirection方式 †

• 対応デバイス
  • Android and iOSをサポート

• 処理方式
  • ローカル・ループバックでWebAPI連携
    （ローカルに、WebAPIの実行環境の構築が必要）

Private-Use URI Scheme Redirection方式 †

• HTML:location.hrefで「apicall://」等、Private-Use URL Schemeを使用して呼び出す。

• Android:上記の呼び出しを、
  • shouldOverrideUrlLoading?()メソッドで補足する。

• iOS :上記の呼び出しを、
  • shouldStartLoadWithRequest?()メソッド（UIWebViewDelegate?プロトコルを実装）で補足する。
  • NSURLProtocol.canInitWithRequest?()メソッドで補足する。

スマホネイティブ→(JavaScript)→HTMLの処理方式 †

ネイティブ側からJavaScriptを実行し、JavaScriptのグローバル変数に値を代入する。

JSONライブラリ †

Objectは渡せないので、JSONライブラリを用いて文字列にParseする。

Android †

ネイティブ側からJavaScriptを実行する方法は、
loadUrlメソッドにjavascriptスキームのURLを読み込ませる。

webView.loadUrl("javascript:window.objectFromNative=" + new JSONObject().toString());

Android 4.4 (KitKat) でjavascriptを実行する場合、webview.loadUrlからwebview.evaluateJavascriptへ変更する必要がある。

iOS †

ネイティブ側からJavaScriptを実行する方法は、
stringByEvaluatingJavaScriptFromString?メソッドを実行する。

• 引数として渡したJavaScriptが実行される。
• その評価したJavaScriptのコードの返り値を取得できる。

[webView evaluateJavaScript: @"window.objectFromNative = 'foobarvalue';"];

セキュリティ †

Android †

WebView#addJavascriptInterface?(Android) †

WebView#addJavascriptInterface?は危険。

• スマートフォンアプリへのブラウザ機能の実装に潜む危険 WebViewクラスの問題について：CodeZine?（コードジン）
  
  • http://codezine.jp/article/detail/6618
  • http://codezine.jp/article/detail/6618?p=2
    • 特定のURLのみに限定する
    • http/httpsプロトコルのみに限定する

• AndroidのWebView#addJavascriptInterface?がどれだけ危険か検証してみた (Kanasansoft Web Lab.)
  http://www.kanasansoft.com/weblab/2012/04/webview_addjavascriptinterface_of_android_is_dangerous.html

• AndroidのWebView#addJavascriptInterface?は基本使わない方がいい、っていう話 - 愛と勇気と缶ビール
  http://zentoo.hatenablog.com/entry/20120507/1336399651
  • インタフェースは貧弱だが安全なAPIを用いるとイイ。
    • WebChromeClient?#onJsAlert?
    • WebChromeClient?#onJsPrompt?

• WebChromeClient?#onJsAlert?を使う方法
  • Android の WebView で addJavascriptInterface? を使わず情報を渡す - Qiita
    http://qiita.com/ka_/items/f8dcde7893f3a029f151
    • AppとWebViewの相互の機能の呼び方、
      そしてhistory.back()について（iPhone・Android） | ひささん日記
      http://tech.hisasann.com/javascript/46/
    • AndroidのWebViewでJavaScriptを実行する
      http://dayafterneet.blogspot.jp/2011/08/androidwebviewjavascript.html

iOS †

バージョン間の差異 †

Android †

Android 4.4 (KitKat?)での変更が大きかった模様。

Migrating to WebView in Android 4.4 (KitKat?) †

• Migrating to WebView in Android 4.4 | Android Developers
  https://developer.android.com/guide/webapps/migrating.html
• Migrating to WebView in Android 4.4 翻訳
  https://gist.github.com/seamountain/7415057

JavaScriptの実行 †

https://gist.github.com/seamountain/7415057#multi-threading-and-thread-blocking

• Android 4.4 (KitKat?) でjavascriptを実行する場合、
  webview.loadUrlからwebview.evaluateJavascriptへ変更する必要があるのだが、
  

• この理由は、「webview.loadUrlだと、JavaScript のCallbackを待つのに、
  UIスレッドをブロックするしか無いため。」と書かれている。
  
  • Callbackを持つevaluateJavascriptに変更する。
  • loadUrlメソッドではJavaScriptスキームを実行できなくなっている。

Signature †

• WebViewClient?
  • public void onReceivedError?
    • onReceivedError?(WebView view, int errorCode, String description, String failingUrl)
    • onReceivedError?(WebView view, WebResourceRequest? request, WebResourceError? error)

• public boolean shouldOverrideUrlLoading?
  • shouldOverrideUrlLoading?(WebView view, String url)
  • shouldOverrideUrlLoading?(WebView view, WebResourceRequest? request)

iOS †

？？？