Slide 1

Slide 1 text

小回りの効く WebViewの使い方 niryuu

Slide 2

Slide 2 text

自己紹介 ● 地理情報屋 ● 前は node.js 書いてたんよー ● WebGL の世界へ ● WebGL は十分速い ● ネイティブの AR アプリを作る ○ →React Native + WebGL でやりますよ ● Web と WebView って違うよね…

Slide 3

Slide 3 text

本発表の目的 ● WebView をネイティブアプリの一部としてガンガン使っていく と、いろいろな問題点が出てくる ● しかし、情報が散らばっていて調べるのが面倒 ● なので、まとめました ● 私自身このスライドにすごく助かっている ● Web開発/デザインから来た方にはけっこう使うのではないか ● Acknowledgements: 主に Android の事例になります… ○ ここでいう Android とは主にタフパッドのことです

Slide 4

Slide 4 text

私が WebView でやりたいこと ● ごめんなさい, React 使ってません ● こいつらを使いたい ○ Three.js(WebGL) ○ OpenLayers(地図) ● なんで?????? ○ 3Dも地図もネイティブでやったほうがいいんじゃないの? ○ 嫌〜使いにくい〜慣れたのがいい〜 ● そもそもなんで React Native ?→隣の同僚が使っていたから ● どのみちOpenCVなどは出てくるが、そうでない部分は楽に

Slide 5

Slide 5 text

WebViewの使い方(基本) OK! もうこれで Web サービスをそのまま載っけちゃっていいと思いま す

Slide 6

Slide 6 text

assets から読み込みたい 例えば、 SPA をネイティブアプリの中に埋め込みたい uri を file:///android_asset/ 以下にしましょう iOS については調べてください 注意: React Native 側の JS のために babel とかの設定がされ ているので、 WebView 側のアセットパイプラインを作るなら、そ のへんはうまく避けるように webpack などを設定する。 React Native 管理下からの除外は rn-cli.config.js で

Slide 7

Slide 7 text

assets から読み込みたい 例えば、 SPA をネイティブアプリの中に埋め込みたい uri を file:///android_asset/ 以下にしましょう iOS については調べてください 注意: React Native 側の JS のために babel とかの設定がされ ているので、 WebView 側のアセットパイプラインを作るなら、そ のへんはうまく避けるように webpack などを設定する。 React Native 管理下からの除外は rn-cli.config.js で

Slide 8

Slide 8 text

ローカルのストレージに置いたファイルを読み込みたい 画像とか 3D オブジェクトとか (prop) allowUniversalAccessFromFileURLs={true}をつける (originがfile:///だとajaxが通らないから) file:///sdcard/ から読む(昔から言われてるけど良くない.2010年 から半信半疑でやっている.動くっちゃ動くが,external storage のpathを取るのが理想.react-native-fsでファイルシステム関係 のことはだいたいできる) OK!

Slide 9

Slide 9 text

React Native 側とやりとりしたい アプリケーションの一部をネイティブで、別の部分をWebViewで 作って連携させたい UIはWebViewで作ってネイティブの機能を操作したい もしくはその逆 ex: 私は CSS が不得意なので、全画面で WebGLをレンダリング し、タッチイベントだけを WebView で処理し、操作系は全部 React Native のコンポーネントで作りました

Slide 10

Slide 10 text

React Native 側とやりとりしたい 準備 React Native 側で webview オブジェクトへの参照を持っていないといけない (prop) ref={webview => {webviewref = webview;}} などと代入している(代入が入るから const は NG) しかし、画面を消したりしてComponentが解放されるときにちゃんとwebviewref=nullな どとしてやらないと、裏でWebViewが走り続けてしまう(?) WebGL については悲惨、なんで3Dのレンダラーが6つも(今日気づいたが未解決) この辺はネイティブアプリの作り方に近い

Slide 11

Slide 11 text

React Native 側とやりとりしたい 基本的に String でやりとり(オブジェクトをJSONにしたりなどが必要) (1)React Native->WebView (RN側) webview.postMessage(str) (WebView側) document.addEventListener(‘message’, handler) 適当なハンドラを用意しましょう event.dataに入ってくれる

Slide 12

Slide 12 text

React Native 側とやりとりしたい 基本的に String でやりとり (2)WebView->React Native (WebView側) window.postMessage(str) (RN側) onMessage={this.handler} 適当なハンドラを用意しましょう event.nativeEvent.dataに入ってくれる

Slide 13

Slide 13 text

React Native 側とやりとりしたい この機能なのですが、以前はライブラリを使わないといけなかった https://github.com/alinz/react-native-webview-bridge しかし、本線に取り込もうという議論があり https://github.com/alinz/react-native-webview-bridge/issues/109 いろいろあって昨年10月に実装された https://github.com/facebook/react-native/pull/9762 React Native ちゃんとユーザーとともに進化していく良いプロダクトなのでは?

Slide 14

Slide 14 text

PCのChromeからWebViewをインスペクトしたい chrome://inspect (Java) setWebContentsDebuggingEnabledがtrueでないとつないでくれない 実装はされてるはずなんだけど、動かない(0.39.2。0.4系では不明) Native Module を作りました WebViewManager(もともとの WebView のやつ)を継承すれば楽 なんか雑にやったら動いた 多分 OK

Slide 15

Slide 15 text

本質的に難しい点 ● 3つの環境がある ○ React Native ○ Android/iOSのネイティブ ○ WebView ● この問題どこが原因なの… ● 役割分担(UIは慣れたWebで,処理はRNでとか) ● それ以前に人間がだめ ○ state と stete を typo して 1 時間ハマる

Slide 16

Slide 16 text

React Native するにはまず Stack Overflow Issue PR Docs 読まないと先に進めない 正直あまり詳しくない 詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス