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
210
ChatGPTを聞き手にしよう
niryuu
0
1.1k
大規模言語モデルに基づいた対話型AIによる研究支援に関する初歩的分析
niryuu
1
460
プログラミング活動の中の情報源としての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
Datachain会社紹介資料(2024年11月) / Company Deck
datachain
4
17k
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
18
4.2k
20241108_CS_LLMMT
shigashiyama
0
120
LINEヤフー株式会社における音声言語情報処理AI研究開発@SP/SLP研究会 2024.10.22
lycorptech_jp
PRO
2
230
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
250
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
120
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
180
Observability を実現するためにアセットを活用しよう(AWS 秋の Observability 祭り ~明日使えるアセット祭り~ )
tsujiba
0
110
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
770
いろんなものと両立する Kaggleの向き合い方
go5paopao
1
300
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
2
520
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
120
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Happy Clients
brianwarren
97
6.7k
Designing for Performance
lara
604
68k
Optimizing for Happiness
mojombo
376
69k
Docker and Python
trallard
40
3.1k
Faster Mobile Websites
deanohume
304
30k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
BBQ
matthewcrist
85
9.3k
Typedesign – Prime Four
hannesfritz
39
2.4k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.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 読まないと先に進めない 正直あまり詳しくない
詳しい仕様や載ってない機能あり コミットを読もう 未回答の質問が多い… 評価ゲットのチャンス