小回りの効く WebViewの使い方
by
Tajima Itsuro
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 読まないと先に進めない 正直あまり詳しくない 詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス