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をNativeのように使いたい / Using-WebView-like-Nat...
Search
marcy731
March 22, 2023
Programming
2
400
WebViewをNativeのように使いたい / Using-WebView-like-Native-App
2023/03/22に行われたEbisu.mobile #1で登壇した時の資料です。
https://hey.connpass.com/event/276211/
marcy731
March 22, 2023
Tweet
Share
More Decks by marcy731
See All by marcy731
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
4
1.5k
GitHub Copilotのススメ
marcy731
1
800
Introduction to Memory Management in Swift - Swiftのメモリ管理を知る -
marcy731
0
15
ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines
marcy731
1
1.2k
「アプリをつくる仕組み」の構築 / build-system-for-STORES-Branded-Apps
marcy731
0
640
Other Decks in Programming
See All in Programming
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
110
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
最新TCAキャッチアップ
0si43
0
190
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Jakarta EE meets AI
ivargrimstad
0
580
CSC509 Lecture 11
javiergs
PRO
0
180
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
Featured
See All Featured
Site-Speed That Sticks
csswizardry
0
27
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Music & Morning Musume
bryan
46
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Happy Clients
brianwarren
98
6.7k
Designing for Performance
lara
604
68k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Raft: Consensus for Rubyists
vanstee
136
6.6k
Into the Great Unknown - MozCon
thekraken
32
1.5k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Being A Developer After 40
akosma
87
590k
Transcript
ヘイ株式会社 WebViewをNativeのように使いたい STORES株式会社 iOSエンジニア 長谷川 将司(@marcy731) 2023/03/22 Ebisu.mobile #1
アジェンダ 2 ❏ WebViewとNativeアプリの違い ❏ WebViewを使うメリットとデメリット ❏ WebViewをNativeアプリのように使う方法を考える ❏ まとめ
WebViewはお好きですか? 3 WebView
WebViewはお好きですか? 4 モ バ イ ル エ ン ジ ニ
ア
WebViewとNativeの違い 5 WebView ❏ Webページを表示するコンポーネントを利用して実装 Native ❏ iOS/AndroidのSDKを利用して実装
WebViewを使うメリットとデメリット 6 メリット ❏ Web資産の再利用 ❏ 開発時間・コストの削減 ❏ サーバー側での変更が即座に反映 デメリット
❏ Nativeに比べ、パフォーマンスが劣る ❏ Native UIとの親和性が低い
WebViewを使うメリットとデメリット 7 メリット ❏ Web資産の再利用 ❏ 開発時間・コストの削減 ❏ サーバー側での変更が即座に反映 デメリット
❏ Nativeに比べ、パフォーマンスが劣る ❏ Native UIとの親和性が低い ⇨ UXの低下にもつながる
WebViewという選択 8 好き嫌い、メリットデメリットはありつつ ビジネス上 あえてWebViewを使う という選択を取ることは多々ある
STORES ブランドアプリとWebView 9 Native WebView
Native UIとの親和性を上げる 10 WebViewを使う場合、 ❏ Native UIとの親和性が低い ⇨ 親和性をあげる ⇨ アプリ全体としてのユーザー体験の向上
WebViewをNativeアプリのように使う方法を考える
12 Native - NavigationBar - title view - back buttom
- TabBar WebView WebViewをNativeアプリのように使う方法を考える Push ❏ 今回は一覧画面はNative、詳細画面はWebView という構成を考える
WebViewをNativeアプリのように使う方法 1. 不要な要素の削除
❏ NavigationBar / Header ❏ ToolBar / TabBar ⇨ 二重に表示され、統一感がない
⇨ Native操作とWebView操作が異なる 一般的なWebView実装 14 WebView SFSafariViewController
❏ NavigationBar / Header ❏ ToolBar / TabBar ⇨ 不要なHeader/Footerの削除
⇨ 不要なToolBarの削除(実装しない) 一般的なWebView実装 15 WebView SFSafariViewController
不要なHeader/Footerの削除
17 不要なHeader/Footerの削除 ❏ header/footerに対してremove()するJavaScriptを用意し挿入
❏ WKUserScriptを利用してJSをドキュメント読み取り前後に仕込む JavaScriptでWebView内のDom操作 18
19 JavaScriptでWebView内のDom操作
20 JavaScriptでWebView内のDom操作 ⇨ Document読み込み後にJSを挿入
❏ 不要な要素は削除されるが…一瞬削除前の要素がチラつく 21 JavaScriptでWebView内のDom操作
MutationObserverの利用
MutationObserverとは ❏ DOM要素の変更を監視し、変更が検出された場合にコールバック関数 を実行するJavaScriptのAPI 23 MutationObserverの利用
❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視 ❏ 対象を検知次第、すみやかに削除 ❏ 削除前の要素がチラつくことはなくなる 24 MutationObserverの利用
25 MutationObserverの利用
26 MutationObserverの利用
27 MutationObserverの利用
28 MutationObserverの利用
29 MutationObserverの利用
❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視 ❏ 対象を検知次第、すみやかに削除 ❏ 削除前の要素がチラつくことはなくなる 30 MutationObserverの利用
WebViewをNativeアプリのように使う方法 2. WebView操作をNative操作へ統合
2. Native操作への統合 32 Before After ❏ ToolBarを実装しない代わりに、同等の操作をNativeに置き換える
「戻る」をNavigationBarに統一
「戻る」をNavigationBarに統一 34 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link
NavigationBarに「戻る」を統一 35 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link Back
NavigationBarに「戻る」を統一 36 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link Back
❎
NavigationBarに「戻る」を統一 37 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link Back
❎
NavigationBarに「戻る」を統一 38 ❏ navigationBar(_:shouldPop:) を利用
NavigationBarに「戻る」を統一 39 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
NavigationBarに「戻る」を統一 40 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
NavigationBarに「戻る」を統一 41 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一 Push Native WebView WebView Link Back
✅
NavigationBarに「戻る」を統一 42 ❏ ただし、NavigationStackにWebViewしかない時は「戻る」がない Link WebView WebView WebView Link
NavigationBarに「戻る」を統一 43 ❏ NavigationStackがWebViewのみの時、Push遷移を行う Push WebView WebView WebView Link
44 NativeのPush遷移をおこなう
45 NativeのPush遷移をおこなう
NavigationBarに「戻る」を統一 46 ❏ NavigationStackがWebViewのみの時、Push遷移を行う Push WebView WebView WebView Link
「更新」はPull to Refreshで実装
48 「更新」はPull to Refreshで実装 ❏ 「更新」はNative UIのPull to Refreshに統合
49 「更新」はPull to Refreshで実装 ❏ WKWebView > UIScrollViewにUIRefreshControlを設定
まとめ
まとめ 51 ❏ WebView UIとNative UIの親和性の向上が大事 ❏ 不要な要素を削除 ❏ header/footerなどを削除
❏ MutationObserverはとても便利 ❏ Native操作への統合 ❏ 「戻る」はNavigationBarに ❏ 「更新」はPull to Refresh
52 WebView まとめ
まとめ 53
54