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
270
研究・執筆支援ツールとしての生成AI
niryuu
0
240
ChatGPTを聞き手にしよう
niryuu
0
1.1k
大規模言語モデルに基づいた対話型AIによる研究支援に関する初歩的分析
niryuu
1
500
プログラミング活動の中の情報源としてのStack Overflow
niryuu
0
150
Stack Overflowにおける編集活動:知識の公開という観点から
niryuu
0
190
Stack Overflow研究の諸側面とワークの研究によるアプローチ
niryuu
0
100
AR勉強会5章
niryuu
0
870
Stack Overflowにおける「知識の総和の増加」への志向と達成
niryuu
0
200
Other Decks in Technology
See All in Technology
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
君も受託系GISエンジニアにならないか
sudataka
1
370
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
All you need to know about InnoDB Primary Keys
lefred
0
120
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
Featured
See All Featured
Facilitating Awesome Meetings
lara
51
6.2k
Side Projects
sachag
452
42k
Docker and Python
trallard
44
3.3k
Site-Speed That Sticks
csswizardry
3
370
Designing Experiences People Love
moore
139
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
We Have a Design System, Now What?
morganepeng
51
7.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
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 読まないと先に進めない 正直あまり詳しくない
詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス