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
170
研究・執筆支援ツールとしての生成AI
niryuu
0
180
ChatGPTを聞き手にしよう
niryuu
0
1k
大規模言語モデルに基づいた対話型AIによる研究支援に関する初歩的分析
niryuu
1
420
プログラミング活動の中の情報源としてのStack Overflow
niryuu
0
120
Stack Overflowにおける編集活動:知識の公開という観点から
niryuu
0
150
Stack Overflow研究の諸側面とワークの研究によるアプローチ
niryuu
0
82
AR勉強会5章
niryuu
0
820
Stack Overflowにおける「知識の総和の増加」への志向と達成
niryuu
0
180
Other Decks in Technology
See All in Technology
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
How to Think Like a Performance Engineer
csswizardry
4
590
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Atom: Resistance is Futile
akmur
261
25k
GitHub's CSS Performance
jonrohan
1026
450k
Infographics Made Easy
chrislema
238
18k
Adopting Sorbet at Scale
ufuk
71
8.8k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Become a Pro
speakerdeck
PRO
15
4.8k
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 読まないと先に進めない 正直あまり詳しくない
詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス