Upgrade to Pro — share decks privately, control downloads, hide ads and more …

小回りの効く WebViewの使い方

小回りの効く WebViewの使い方

Tajima Itsuro

March 16, 2017
Tweet

More Decks by Tajima Itsuro

Other Decks in Technology

Transcript

  1. 自己紹介 • 地理情報屋 • 前は node.js 書いてたんよー • WebGL の世界へ

    • WebGL は十分速い • ネイティブの AR アプリを作る ◦ →React Native + WebGL でやりますよ • Web と WebView って違うよね…
  2. 本発表の目的 • WebView をネイティブアプリの一部としてガンガン使っていく と、いろいろな問題点が出てくる • しかし、情報が散らばっていて調べるのが面倒 • なので、まとめました •

    私自身このスライドにすごく助かっている • Web開発/デザインから来た方にはけっこう使うのではないか • Acknowledgements: 主に Android の事例になります… ◦ ここでいう Android とは主にタフパッドのことです
  3. 私が WebView でやりたいこと • ごめんなさい, React 使ってません • こいつらを使いたい ◦

    Three.js(WebGL) ◦ OpenLayers(地図) • なんで?????? ◦ 3Dも地図もネイティブでやったほうがいいんじゃないの? ◦ 嫌〜使いにくい〜慣れたのがいい〜 • そもそもなんで React Native ?→隣の同僚が使っていたから • どのみちOpenCVなどは出てくるが、そうでない部分は楽に
  4. assets から読み込みたい 例えば、 SPA をネイティブアプリの中に埋め込みたい uri を file:///android_asset/ 以下にしましょう iOS

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

    については調べてください 注意: React Native 側の JS のために babel とかの設定がされ ているので、 WebView 側のアセットパイプラインを作るなら、そ のへんはうまく避けるように webpack などを設定する。 React Native 管理下からの除外は rn-cli.config.js で
  6. React Native 側とやりとりしたい アプリケーションの一部をネイティブで、別の部分をWebViewで 作って連携させたい UIはWebViewで作ってネイティブの機能を操作したい もしくはその逆 ex: 私は CSS

    が不得意なので、全画面で WebGLをレンダリング し、タッチイベントだけを WebView で処理し、操作系は全部 React Native のコンポーネントで作りました
  7. React Native 側とやりとりしたい 準備 React Native 側で webview オブジェクトへの参照を持っていないといけない (prop)

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

    (WebView側) document.addEventListener(‘message’, handler) 適当なハンドラを用意しましょう event.dataに入ってくれる
  9. React Native 側とやりとりしたい 基本的に String でやりとり (2)WebView->React Native (WebView側) window.postMessage(str)

    (RN側) onMessage={this.handler} 適当なハンドラを用意しましょう event.nativeEvent.dataに入ってくれる
  10. 本質的に難しい点 • 3つの環境がある ◦ React Native ◦ Android/iOSのネイティブ ◦ WebView

    • この問題どこが原因なの… • 役割分担(UIは慣れたWebで,処理はRNでとか) • それ以前に人間がだめ ◦ state と stete を typo して 1 時間ハマる
  11. React Native するにはまず Stack Overflow Issue PR Docs 読まないと先に進めない 正直あまり詳しくない

    詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス