[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp/index.php?FrontPage]] -[[戻る>スマホネイティブ]] *目次 [#z8883726] #contents *概要 [#pa86c11c] スマホネイティブから、ウェブコンテンツを表示するときに使用するコンポーネント。 *Android [#ve42686d] Android WebViewは -Androidアプリでウェブコンテンツを表示するときに使用できる。 -Chromeの技術を使用したシステムコンポーネントである。 --コンポーネントは端末にプリインストールされている。 --最新の状態に維持される(セキュリティアップデートやその他のバグ修正を反映)。 **WebView [#kcb0f981] -WebView | Android Developers~ https://developer.android.com/reference/android/webkit/WebView.html **簡易ブラウザ開発 [#ye237484] -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 --[[その1>http://www.okomeda.net/?cmd=read&page=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E3%81%9D%E3%81%AE%EF%BC%91&word=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90]] --[[その2>http://www.okomeda.net/?cmd=read&page=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E3%81%9D%E3%81%AE%EF%BC%92&word=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90]] --[[その3>http://www.okomeda.net/?cmd=read&page=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E3%81%9D%E3%81%AE%EF%BC%93&word=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90]] --[[その4>http://www.okomeda.net/?cmd=read&page=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90%E3%81%9D%E3%81%AE%EF%BC%94&word=WebView%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E6%88%90]] **プロキシ [#cb35e1a3] -参考 --エミュレータからproxyを使う|戦うおやじプログラマー~ http://ameblo.jp/f-o-p/entry-10993663145.html --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開発#j2ea02cb]] **その他 [#s4ffdf73] -Android エンジニアが Android の WebView で苦しんだ話 - Qiita~ http://qiita.com/akitaika_/items/654dafa26e1d1dd0d3dd *iOS [#h7076133] Android WebViewには、 -UIWebViewと -WKWebView(UIWebViewの強化版)、 -SFSafariViewController というWebViewがある模様。 iOSのバージョンアップに従って機能が変更されている模様。 **WebView [#e4d472b3] -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 **簡易ブラウザ開発 [#td3eb83e] **プロキシ [#x3db6293] **その他 [#e174b1f5] *ハイブリッド開発 [#jc6f5cde] HTMLコンテンツから、JavaScriptを経由して、スマホネイティブのデバイスへアクセスする。 **参考 [#q1880415] -[iOS/Android対応] HTML5 ハイブリッドアプリ開発[実践]入門 (Software Design plus)~ [[https://www.amazon.co.jp/Android対応-HTML5-ハイブリッドアプリ開発-Software-Design/dp/4774162116>https://www.amazon.co.jp/Android%E5%AF%BE%E5%BF%9C-HTML5-%E3%83%8F%E3%82%A4%E3%83%96%E3%83%AA%E3%83%83%E3%83%89%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA-Software-Design/dp/4774162116]] --書籍転載:[iOS/Android対応]HTML5ハイブリッドアプリ開発[実践]入門 ---PhoneGap/Cordova: JavaScriptからネイティブの機能を呼び出す方法~ addJavascriptInterface方式(前編) - Build Insider~ http://www.buildinsider.net/mobile/bookhtml5hybrid/1101 **HTML→(JavaScript)→スマホネイティブの処理方式 [#u603a44b] ***addJavascriptInterface方式 [#veea171f] -対応デバイス --Androidのみ -処理方式 --JavascriptにJavaのInterfaceを公開する。 -脆弱性がある。 --HTTP/HTTPSのアクセスだけ許容する。 --shouldOverrideUrlLoadingでURLチェックを行なう。 --Android 4.2 Jelly Bean以降、公開するAPIを~ @JavascriptInterfaceアノテーションで指定可能になった。 ***カスタムURLスキーム方式 [#u3cedd19] -対応デバイス --Android and iOSをサポート -処理方式 ***onJsAlert方式 [#k9447f5e] -対応デバイス --Androidのみ -処理方式 --Alertに渡された文字列をWebChromeClientのonJsAlertで補足するハックを使用。 --result.confirm()で全てのAlertが抑止されるので・・・。 ***ローカルHTTPサーバ方式 [#c0ab9dff] -対応デバイス --Android and iOSをサポート -処理方式 --WebAPI連携(ローカルに、WebAPIの実行環境の構築が必要) **スマホネイティブ→(JavaScript)→HTMLの処理方式 [#lc1b0dee] ネイティブ側からJavaScriptに値を渡すには、JavaScriptのグローバル変数に値を代入する。 ***JSONライブラリ [#s575eb8d] JavaScriptのObjectは渡せないので、JSONライブラリを用いて文字列にParseする。 ***Android [#kc3b6d15] loadUrlメソッドにjavascriptスキームのURLを読み込ませる。 webView.loadUrl("javascript:window.objectFromNative=" + new JSONObject().toString()); ***iOS [#j4468722] stringByEvaluatingJavaScriptFromStringメソッドを実行する。 -引数として渡したJavaScriptが実行される。 -その評価したJavaScriptのコードの返り値を取得できる。 [webView evaluateJavaScript: @"window.objectFromNative = 'foobarvalue';"]; **デバッグ [#k49692d7] -[Android] WebView に読み込んだ JavaScript アプリケーションを~ Chrome Developer Tools でデバッグする~ http://qiita.com/hkusu/items/fca23e0fa5cfb1b7fe1f **セキュリティ [#x430ac65] ***WebView#addJavascriptInterface(Android) [#x0ab8106] 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