Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ヘイ株式会社 WebViewをNativeのように使いたい STORES株式会社 iOSエンジニア 長谷川 将司（@marcy731） 2023/03/22 Ebisu.mobile #1
Slide 2
Slide 2 text
アジェンダ 2 ❏ WebViewとNativeアプリの違い ❏ WebViewを使うメリットとデメリット ❏ WebViewをNativeアプリのように使う方法を考える ❏ まとめ
Slide 3
Slide 3 text
WebViewはお好きですか？ 3 WebView
Slide 4
Slide 4 text
WebViewはお好きですか？ 4 モ バ イ ル エ ン ジ ニ ア
Slide 5
Slide 5 text
WebViewとNativeの違い 5 WebView ❏ Webページを表示するコンポーネントを利用して実装 Native ❏ iOS/AndroidのSDKを利用して実装
Slide 6
Slide 6 text
WebViewを使うメリットとデメリット 6 メリット ❏ Web資産の再利用 ❏ 開発時間・コストの削減 ❏ サーバー側での変更が即座に反映 デメリット ❏ Nativeに比べ、パフォーマンスが劣る ❏ Native UIとの親和性が低い
Slide 7
Slide 7 text
WebViewを使うメリットとデメリット 7 メリット ❏ Web資産の再利用 ❏ 開発時間・コストの削減 ❏ サーバー側での変更が即座に反映 デメリット ❏ Nativeに比べ、パフォーマンスが劣る ❏ Native UIとの親和性が低い ⇨ UXの低下にもつながる
Slide 8
Slide 8 text
WebViewという選択 8 好き嫌い、メリットデメリットはありつつ ビジネス上 あえてWebViewを使う という選択を取ることは多々ある
Slide 9
Slide 9 text
STORES ブランドアプリとWebView 9 Native WebView
Slide 10
Slide 10 text
Native UIとの親和性を上げる 10 WebViewを使う場合、 ❏ Native UIとの親和性が低い ⇨ 親和性をあげる ⇨ アプリ全体としてのユーザー体験の向上
Slide 11
Slide 11 text
WebViewをNativeアプリのように使う方法を考える
Slide 12
Slide 12 text
12 Native - NavigationBar - title view - back buttom - TabBar WebView WebViewをNativeアプリのように使う方法を考える Push ❏ 今回は一覧画面はNative、詳細画面はWebView という構成を考える
Slide 13
Slide 13 text
WebViewをNativeアプリのように使う方法 1. 不要な要素の削除
Slide 14
Slide 14 text
❏ NavigationBar / Header ❏ ToolBar / TabBar ⇨ 二重に表示され、統一感がない ⇨ Native操作とWebView操作が異なる 一般的なWebView実装 14 WebView SFSafariViewController
Slide 15
Slide 15 text
❏ NavigationBar / Header ❏ ToolBar / TabBar ⇨ 不要なHeader/Footerの削除 ⇨ 不要なToolBarの削除（実装しない） 一般的なWebView実装 15 WebView SFSafariViewController
Slide 16
Slide 16 text
不要なHeader/Footerの削除
Slide 17
Slide 17 text
17 不要なHeader/Footerの削除 ❏ header/footerに対してremove()するJavaScriptを用意し挿入
Slide 18
Slide 18 text
❏ WKUserScriptを利用してJSをドキュメント読み取り前後に仕込む JavaScriptでWebView内のDom操作 18
Slide 19
Slide 19 text
19 JavaScriptでWebView内のDom操作
Slide 20
Slide 20 text
20 JavaScriptでWebView内のDom操作 ⇨ Document読み込み後にJSを挿入
Slide 21
Slide 21 text
❏ 不要な要素は削除されるが…一瞬削除前の要素がチラつく 21 JavaScriptでWebView内のDom操作
Slide 22
Slide 22 text
MutationObserverの利用
Slide 23
Slide 23 text
MutationObserverとは ❏ DOM要素の変更を監視し、変更が検出された場合にコールバック関数 を実行するJavaScriptのAPI 23 MutationObserverの利用
Slide 24
Slide 24 text
❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視 ❏ 対象を検知次第、すみやかに削除 ❏ 削除前の要素がチラつくことはなくなる 24 MutationObserverの利用
Slide 25
Slide 25 text
25 MutationObserverの利用
Slide 26
Slide 26 text
26 MutationObserverの利用
Slide 27
Slide 27 text
27 MutationObserverの利用
Slide 28
Slide 28 text
28 MutationObserverの利用
Slide 29
Slide 29 text
29 MutationObserverの利用
Slide 30
Slide 30 text
❏ atDocumentStartのタイミングで挿入し、Header/Footerを監視 ❏ 対象を検知次第、すみやかに削除 ❏ 削除前の要素がチラつくことはなくなる 30 MutationObserverの利用
Slide 31
Slide 31 text
WebViewをNativeアプリのように使う方法 2. WebView操作をNative操作へ統合
Slide 32
Slide 32 text
2. Native操作への統合 32 Before After ❏ ToolBarを実装しない代わりに、同等の操作をNativeに置き換える
Slide 33
Slide 33 text
「戻る」をNavigationBarに統一
Slide 34
Slide 34 text
「戻る」をNavigationBarに統一 34 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link
Slide 35
Slide 35 text
NavigationBarに「戻る」を統一 35 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link Back
Slide 36
Slide 36 text
NavigationBarに「戻る」を統一 36 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link Back ❎
Slide 37
Slide 37 text
NavigationBarに「戻る」を統一 37 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」が異なる Push Native WebView WebView Link Back ❎
Slide 38
Slide 38 text
NavigationBarに「戻る」を統一 38 ❏ navigationBar(_:shouldPop:) を利用
Slide 39
Slide 39 text
NavigationBarに「戻る」を統一 39 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
Slide 40
Slide 40 text
NavigationBarに「戻る」を統一 40 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一
Slide 41
Slide 41 text
NavigationBarに「戻る」を統一 41 ❏ WebViewの「戻る」と、Nativeアプリの「戻る」を統一 Push Native WebView WebView Link Back ✅
Slide 42
Slide 42 text
NavigationBarに「戻る」を統一 42 ❏ ただし、NavigationStackにWebViewしかない時は「戻る」がない Link WebView WebView WebView Link
Slide 43
Slide 43 text
NavigationBarに「戻る」を統一 43 ❏ NavigationStackがWebViewのみの時、Push遷移を行う Push WebView WebView WebView Link
Slide 44
Slide 44 text
44 NativeのPush遷移をおこなう
Slide 45
Slide 45 text
45 NativeのPush遷移をおこなう
Slide 46
Slide 46 text
NavigationBarに「戻る」を統一 46 ❏ NavigationStackがWebViewのみの時、Push遷移を行う Push WebView WebView WebView Link
Slide 47
Slide 47 text
「更新」はPull to Refreshで実装
Slide 48
Slide 48 text
48 「更新」はPull to Refreshで実装 ❏ 「更新」はNative UIのPull to Refreshに統合
Slide 49
Slide 49 text
49 「更新」はPull to Refreshで実装 ❏ WKWebView > UIScrollViewにUIRefreshControlを設定
Slide 50
Slide 50 text
まとめ
Slide 51
Slide 51 text
まとめ 51 ❏ WebView UIとNative UIの親和性の向上が大事 ❏ 不要な要素を削除 ❏ header/footerなどを削除 ❏ MutationObserverはとても便利 ❏ Native操作への統合 ❏ 「戻る」はNavigationBarに ❏ 「更新」はPull to Refresh
Slide 52
Slide 52 text
52 WebView まとめ
Slide 53
Slide 53 text
まとめ 53
Slide 54
Slide 54 text
54