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.6k
小回りの効く WebViewの使い方
Tajima Itsuro
March 16, 2017
Tweet
Share
More Decks by Tajima Itsuro
See All by Tajima Itsuro
小説執筆における生成AIの利用
niryuu
0
120
研究・執筆支援ツールとしての生成AI
niryuu
0
150
ChatGPTを聞き手にしよう
niryuu
0
990
大規模言語モデルに基づいた対話型AIによる研究支援に関する初歩的分析
niryuu
1
380
プログラミング活動の中の情報源としてのStack Overflow
niryuu
0
110
Stack Overflowにおける編集活動:知識の公開という観点から
niryuu
0
150
Stack Overflow研究の諸側面とワークの研究によるアプローチ
niryuu
0
78
AR勉強会5章
niryuu
0
800
Stack Overflowにおける「知識の総和の増加」への志向と達成
niryuu
0
170
Other Decks in Technology
See All in Technology
Azureの基本的な権限管理の勉強会
yhana
1
1.3k
Cracking the KubeCon CfP
inductor
2
260
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
310
web-application-security
matsuihidetoshi
0
180
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
690
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
620
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
4
1k
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
110
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
450
Grafana x PagerDuty Better Together
jacopen
1
170
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
130
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
319
37k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
YesSQL, Process and Tooling at Scale
rocio
164
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
GraphQLとの向き合い方2022年版
quramy
32
12k
What the flash - Photography Introduction
edds
64
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Designing with Data
zakiwarfel
96
4.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
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 読まないと先に進めない 正直あまり詳しくない
詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス