Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
小回りの効く WebViewの使い方
Search
Tajima Itsuro
March 16, 2017
Technology
2
1.7k
小回りの効く WebViewの使い方
Tajima Itsuro
March 16, 2017
Tweet
Share
More Decks by Tajima Itsuro
See All by Tajima Itsuro
小説執筆における生成AIの利用
niryuu
0
230
研究・執筆支援ツールとしての生成AI
niryuu
0
220
ChatGPTを聞き手にしよう
niryuu
0
1.1k
大規模言語モデルに基づいた対話型AIによる研究支援に関する初歩的分析
niryuu
1
470
プログラミング活動の中の情報源としてのStack Overflow
niryuu
0
140
Stack Overflowにおける編集活動:知識の公開という観点から
niryuu
0
170
Stack Overflow研究の諸側面とワークの研究によるアプローチ
niryuu
0
91
AR勉強会5章
niryuu
0
850
Stack Overflowにおける「知識の総和の増加」への志向と達成
niryuu
0
190
Other Decks in Technology
See All in Technology
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
150
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
Platform Engineering for Software Developers and Architects
syntasso
1
510
信頼性に挑む中で拡張できる・得られる1人のスキルセットとは?
ken5scal
2
530
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
5
600
AWS Lambdaと歩んだ“サーバーレス”と今後 #lambda_10years
yoshidashingo
1
170
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Automating Front-end Workflow
addyosmani
1366
200k
Scaling GitHub
holman
458
140k
Building Your Own Lightsaber
phodgson
103
6.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Adopting Sorbet at Scale
ufuk
73
9.1k
Building Adaptive Systems
keathley
38
2.3k
BBQ
matthewcrist
85
9.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Navigating Team Friction
lara
183
14k
Practical Orchestrator
shlominoach
186
10k
Transcript
小回りの効く WebViewの使い方 niryuu<
[email protected]
>
自己紹介 • 地理情報屋 • 前は node.js 書いてたんよー • WebGL の世界へ
• WebGL は十分速い • ネイティブの AR アプリを作る ◦ →React Native + WebGL でやりますよ • Web と WebView って違うよね…
本発表の目的 • WebView をネイティブアプリの一部としてガンガン使っていく と、いろいろな問題点が出てくる • しかし、情報が散らばっていて調べるのが面倒 • なので、まとめました •
私自身このスライドにすごく助かっている • Web開発/デザインから来た方にはけっこう使うのではないか • Acknowledgements: 主に Android の事例になります… ◦ ここでいう Android とは主にタフパッドのことです
私が WebView でやりたいこと • ごめんなさい, React 使ってません • こいつらを使いたい ◦
Three.js(WebGL) ◦ OpenLayers(地図) • なんで?????? ◦ 3Dも地図もネイティブでやったほうがいいんじゃないの? ◦ 嫌〜使いにくい〜慣れたのがいい〜 • そもそもなんで React Native ?→隣の同僚が使っていたから • どのみちOpenCVなどは出てくるが、そうでない部分は楽に
WebViewの使い方(基本) <WebView source={{uri: ‘https://www.google.co.jp/’}} style={styles.webview(適当なやつ)} /> OK! もうこれで Web サービスをそのまま載っけちゃっていいと思いま
す
assets から読み込みたい 例えば、 SPA をネイティブアプリの中に埋め込みたい uri を file:///android_asset/ 以下にしましょう iOS
については調べてください 注意: React Native 側の JS のために babel とかの設定がされ ているので、 WebView 側のアセットパイプラインを作るなら、そ のへんはうまく避けるように webpack などを設定する。 React Native 管理下からの除外は rn-cli.config.js で
assets から読み込みたい 例えば、 SPA をネイティブアプリの中に埋め込みたい uri を file:///android_asset/ 以下にしましょう iOS
については調べてください 注意: React Native 側の JS のために babel とかの設定がされ ているので、 WebView 側のアセットパイプラインを作るなら、そ のへんはうまく避けるように webpack などを設定する。 React Native 管理下からの除外は rn-cli.config.js で
ローカルのストレージに置いたファイルを読み込みたい 画像とか 3D オブジェクトとか (prop) allowUniversalAccessFromFileURLs={true}をつける (originがfile:///だとajaxが通らないから) file:///sdcard/ から読む(昔から言われてるけど良くない.2010年 から半信半疑でやっている.動くっちゃ動くが,external
storage のpathを取るのが理想.react-native-fsでファイルシステム関係 のことはだいたいできる) OK!
React Native 側とやりとりしたい アプリケーションの一部をネイティブで、別の部分をWebViewで 作って連携させたい UIはWebViewで作ってネイティブの機能を操作したい もしくはその逆 ex: 私は CSS
が不得意なので、全画面で WebGLをレンダリング し、タッチイベントだけを WebView で処理し、操作系は全部 React Native のコンポーネントで作りました
React Native 側とやりとりしたい 準備 React Native 側で webview オブジェクトへの参照を持っていないといけない (prop)
ref={webview => {webviewref = webview;}} などと代入している(代入が入るから const は NG) しかし、画面を消したりしてComponentが解放されるときにちゃんとwebviewref=nullな どとしてやらないと、裏でWebViewが走り続けてしまう(?) WebGL については悲惨、なんで3Dのレンダラーが6つも(今日気づいたが未解決) この辺はネイティブアプリの作り方に近い
React Native 側とやりとりしたい 基本的に String でやりとり(オブジェクトをJSONにしたりなどが必要) (1)React Native->WebView (RN側) webview.postMessage(str)
(WebView側) document.addEventListener(‘message’, handler) 適当なハンドラを用意しましょう event.dataに入ってくれる
React Native 側とやりとりしたい 基本的に String でやりとり (2)WebView->React Native (WebView側) window.postMessage(str)
(RN側) onMessage={this.handler} 適当なハンドラを用意しましょう event.nativeEvent.dataに入ってくれる
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 ちゃんとユーザーとともに進化していく良いプロダクトなのでは?
PCのChromeからWebViewをインスペクトしたい chrome://inspect (Java) setWebContentsDebuggingEnabledがtrueでないとつないでくれない 実装はされてるはずなんだけど、動かない(0.39.2。0.4系では不明) Native Module を作りました WebViewManager(もともとの WebView
のやつ)を継承すれば楽 なんか雑にやったら動いた 多分 OK
本質的に難しい点 • 3つの環境がある ◦ React Native ◦ Android/iOSのネイティブ ◦ WebView
• この問題どこが原因なの… • 役割分担(UIは慣れたWebで,処理はRNでとか) • それ以前に人間がだめ ◦ state と stete を typo して 1 時間ハマる
React Native するにはまず Stack Overflow Issue PR Docs 読まないと先に進めない 正直あまり詳しくない
詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス