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
530
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
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
86
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
4
2.4k
GitHub Copilotのススメ
marcy731
1
1.2k
Introduction to Memory Management in Swift - Swiftのメモリ管理を知る -
marcy731
0
23
ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines
marcy731
1
1.4k
「アプリをつくる仕組み」の構築 / build-system-for-STORES-Branded-Apps
marcy731
0
720
Other Decks in Programming
See All in Programming
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
930
XSLTで作るBrainfuck処理系
makki_d
0
210
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
380
統一感のある Go コードを生成 AI の力で手にいれる
otakakot
0
3k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
100
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
190
エンジニア向け採用ピッチ資料
inusan
0
140
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.8k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
Benchmark
sysong
0
230
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Thoughts on Productivity
jonyablonski
69
4.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Building Adaptive Systems
keathley
43
2.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Designing for humans not robots
tammielis
253
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Visualization
eitanlees
146
16k
Into the Great Unknown - MozCon
thekraken
39
1.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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