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
570
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
Voidと() - 意図を伝える“ユニット型”の世界- / Void vs () -The World of Expressing Intent
marcy731
0
3
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
220
めざせ!WKWebViewマスター! / WKWebView Master
marcy731
4
2.7k
GitHub Copilotのススメ
marcy731
1
1.2k
Introduction to Memory Management in Swift - Swiftのメモリ管理を知る -
marcy731
0
24
ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines
marcy731
1
1.5k
「アプリをつくる仕組み」の構築 / build-system-for-STORES-Branded-Apps
marcy731
0
760
Other Decks in Programming
See All in Programming
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
140
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
490
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.8k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
140
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
210
Le côté obscur des IA génératives
pascallemerrer
0
140
Software Architecture
hschwentner
6
2.3k
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.3k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Visualization
eitanlees
149
16k
For a Future-Friendly Web
brad_frost
180
9.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
A better future with KSS
kneath
239
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Git: the NoSQL Database
bkeepers
PRO
431
66k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Thoughts on Productivity
jonyablonski
70
4.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
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