ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines

ヘイ株式会社
ステートマシンを活用した
WebView-ネイティブ間連携へのアプローチ
STORES株式会社
iOSエンジニア
長谷川将司（@marcy731）
2023/09/01 18:45〜 iOSDC Japan TrackA レギュラートーク（20分）

View Slide

アジェンダ
2
❏ WebView-ネイティブ間連携の基礎知識
❏ WebView-ネイティブ間の認証同期の課題
❏ ステートマシンを活用した状態管理
❏ 具体的な実装方法

View Slide

注意事項
3
❏ 本トークはWebView = WKWebViewとして扱います。
❏ 一部文字が小さい箇所もあり、遠くの席からだと見えないかもしれません。
本資料はX(旧Twitter)にて共有していますので、手元においてご覧くださ
い。

View Slide

WebView-ネイティブ間連携の基礎知識
0.5

View Slide

基礎知識
5
❏ WebViewとネイティブ側を「連携する」とは
❏ WebViewとネイティブ側が、効果的に情報を共有し相互に連動すること
❏ ネイティブ <-> WebViewのデータの受け渡し
❏ ex: JavaScript経由でデータを送信するなど
❏ WebView内でのユーザーアクションをネイティブ側でトリガー
❏ ex: ボタン押下
❏ ネイティブ側からWebView内のJavaScript関数を呼び出して、特定のアクションを実行

View Slide

基礎知識
6
❏ 「連携」させるため、まずは以下をおさらいする
❏ WKNavigationDelegate
❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI
❏ WKScriptMessageHandler
❏ Webコンテンツ側からネイティブ側にメッセージングするAPI
❏ WKUserScript
❏ WebコンテンツにJavaScriptを挿入するAPI
❏ evaluateJavaScript(_:completionHandler:)
❏ 任意のタイミングでJavaScriptを実行するAPI

View Slide

WKNavigationDelegate

View Slide

❏ つまり連携のタイミングの検知
WKNavigationDelegateメソッドの一例
8
基礎知識 - WKNavigationDelegate -

View Slide

9

View Slide

10

View Slide

❏ WebコンテンツがSPA*の場合、
❏ URLが変わっても、WKNavigationDelegateは呼ばれません
❏ その時は、KVOを利用しよう
11
* SPA: Single Page Application
基礎知識 - KVO: Key-Value Observing -

View Slide

❏ KVO: Key-Value Observing
❏ 対象のオブジェクトを監視し、変更を通知してくれる仕組み
KVO実装例
12
urlを監視し、変更があればクロージャーが呼ばれる

View Slide

❏ KVO: Key-Value Observing
❏ 対象のオブジェクトを監視し、変更を通知してくれる仕組み
Combineでの実装例
13
urlを監視し、変更があればsinkのクロージャーが呼ばれる

View Slide

14
❏ 監視できるWebViewのプロパティ

View Slide

WKScriptMessageHandler

View Slide

❏ Webコンテンツ側からネイティブ側にメッセージングするAPI
❏ keyとなるmessageHandlerNameを決めてWebView->ネイティブにメッセージを送る
16
基礎知識 - WKScriptMessageHandler -

View Slide

Webコンテンツ側ではJavaScriptでメッセージを送信
17
①あらかじめ決めたkeyに対してpostMessageを発火し、
　ネイティブ側にメッセージを送信
　この例では ”messageHandlerName” というkeyを設定

View Slide

ネイティブ側ではJavaScriptからのメッセージを受信
18
①あらかじめ決めたkeyを
　webView.conﬁguratin.userContentControllerに登録

View Slide

19
②JavaScriptのpostMessageをDelegateメソッド内で受信

View Slide

20
③受け取ったデータをパース

View Slide

WKUserScript

View Slide

❏ WKUserScript
実装例
22
基礎知識 - WKUserScript -

View Slide

❏ WKUserScript
実装例
23
①JavaScriptをWKUserScriptに変換
②WKUserContentControllerに追加

View Slide

❏ WKUserScript
実装例
24
③WKWebViewConﬁgurationにuserContentControllerセット

View Slide

❏ WKUserScript
実装例
25
④conﬁgurationでWKWebViewを初期化

View Slide

evaluateJavaScript(_:completionHandler:)

View Slide

27
基礎知識 - evaluateJavaScript(_:completionHandler:) -
実装例

View Slide

28
基礎知識 - evaluateJavaScript(_:completionHandler:) -
実装例「読み込み完了時」に実行
実行後、クロージャー内が呼ばれる
JavaScriptの実行結果を取得できる

View Slide

WebView-ネイティブ間連携の基礎知識 - まとめ -
29
❏ WebViewとネイティブ側の連携
❏ WKUserScript
❏ WKWenView.evaluateJavaScript(_:completionHandler:)
❏ これらの方法を駆使し、適切なタイミングで連携していく

View Slide

WebView-ネイティブ間の認証同期の課題
6.5

View Slide

認証同期の課題
31
❏ 題材:
外部*のECサイトをアプリに組み込んで、
会員情報・認証情報をアプリと同期させたい
* 外部: 内部構造に干渉することができないWebアプリケーション

View Slide

認証同期の課題
32
❏ 題材:
外部*のECサイトをアプリに組み込んで、
会員情報・認証情報をアプリと同期させたい
≒
WebView内でログインしたらアプリ側でもログイン
* 外部: 内部構造に干渉することができないWebアプリケーション

View Slide

事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
33
❏ ネイティブ（App）とWebView（EC）の関係
他社管理
・アカウント管理
・ポイント付与
・購買履歴分析
・お知らせ送付
・クーポン送付
App
WebView
(ECサイト)
Native
App
Backend
アカウント情報（Webhook）
ログイン・会員情報
・在庫管理
・注文管理
・発送管理
ECサイト/
Backend

View Slide

34
❏ ネイティブ（App）とWebView（EC）の関係
他社管理
・ポイント付与
・購買履歴分析
・お知らせ送付
・クーポン送付
App
WebView
(ECサイト)
Native
App
Backend
アカウント情報（Webhook）
WebView(ECサイト)でログイン
→ Appでもログイン
ログイン・会員情報
・在庫管理
・注文管理
・発送管理
ECサイト/
Backend

View Slide

35
❏ ログインシーケンス
App EC(WebView) App Backend
EC Backend
①ログインページ表示

View Slide

36
EC Backend
②email/pass入力

View Slide

37
③ECログインリクエスト
②email/pass入力
EC Backend

View Slide

38
EC Backend
②email/pass入力
④入力したemailを取得

View Slide

39
EC Backend
⑤ECログイン成功
②email/pass入力

View Slide

40
EC Backend
⑥ECログイン成功
②email/pass入力

View Slide

41
EC Backend
②email/pass入力
⑦AppログインAPI with email

View Slide

42
EC Backend
②email/pass入力
⑧Appログイン成功

View Slide

43
EC Backend
②email/pass入力
⑧Appログイン成功
連携ポイント

View Slide

44
❏ 「④入力したemail 取得」の連携

View Slide

45
❏ 「④入力したemail 取得」の連携
❏ JavaScript経由で取得すればよい
❏ 例： WKScriptMessageHandler + WKUserScript を利用

View Slide

46
①WebView側からpostするためのmessageHandlerNameを定義

View Slide

47
②ログインフォームにEventListenerを設定するJavaScriptを記述

View Slide

48
③ログインボタン押下時、
　messageHandlerNameに対してpostMessage(送信)する

View Slide

49
④JavaScriptをWebViewにInjection(挿入)する

View Slide

50
⑤WebView側からのpostを受けるためのmessageHandlerNameを登録

View Slide

51
⑥Delegateメソッド内でmessageHandlerNameを受信し、emailを取得

View Slide

52
❏ 「⑥ECログイン成功」の連携（これが問題）

View Slide

53
❏ ログイン成功時にWKScriptMessageHandler経由での連携
❏ 今回、外部Webコンテンツのため、この手法が取れない

View Slide

54
❏ ログインボタン押下？
❏ 成功 or 失敗はわからない

View Slide

55
❏ URL遷移？
❏ ログイン成功する場合、/login -> / のような遷移

View Slide

56
❏ URL遷移？
❏ Go Back時も/login -> / のような遷移になる？

View Slide

57
❏ URL遷移？
❏ ログインボタンタップ後、/ に遷移すれば良い？

View Slide

58
❏ URL遷移？
→良さそう

View Slide

59
❏ URL遷移？
→良さそう
❏ ログインボタンタップ後の遷移ということはどう判断する？
フラグ？

View Slide

60
❏ ログインボタン押下後の遷移（/login -> /）はハンドリングできそうだが…
❏ ログイン方法が複数ある場合、それぞれに対応する必要あり
❏ email/pass
❏ SNSログイン
❏ …

View Slide

61
❏ ログインボタン押下後の遷移（/login -> /）はハンドリングできそうだが…
❏ ログイン方法が複数ある場合、それぞれに対応する必要あり
❏ email/pass
❏ SNSログイン
❏ …
❏ URL遷移なので色々な遷移の可能性がある
❏ Go Backしたら？
❏ バリデーションで引っ掛かったら？
❏ ReCaptchaに阻まれたら？
❏ …

View Slide

62
❏ 実際にはログインだけではなく、登録やその他連携も必要
❏ これらを全てを素直にハンドリングするのは大変…
❏ WebView関連のコードがFatになってくるのは想像に難くない…

View Slide

63
❏ 実際にはログインだけではなく、登録やその他連携も必要
❏ これらを全てを素直にハンドリングするのは大変…
❏ WebView関連のコードがFatになってくるのは想像に難くない…
↓
そこでステートマシンを利用しよう！

View Slide

ステートマシンを活用した状態管理
12.5

View Slide

65
❏ ステートマシンとは？
❏ 入力条件と現在の状態によって次の状態が決まる論理回路
❏ ステートマシンの構成要素
❏ 状態（State）
❏ イベント（Events）
❏ 遷移（Transitions）
❏ ＋　副作用（Side-Eﬀects）

View Slide

66
❏ ログインフローにステートマシンを適応し、モデル化を行うとどうなるか？

View Slide

67

View Slide

68

View Slide

69

View Slide

70

View Slide

71

View Slide

72
API実行もSideEﬀectとして定義する

View Slide

73

View Slide

74

View Slide

75
❏ ステート図（StateDiagram）を書くとロジックがシンプルに記述できる
❏ 「State(before) -> State(afger) : Event / SideEﬀect 」の組み合わせ

View Slide

76
❏ ステート図（StateDiagram）を書くとロジックがシンプルに記述できる
❏ 「State(before) -> State(afger) : Event / SideEﬀect 」の組み合わせ
❏ 実はステートマシンとWebViewのステート管理は相性が良い
❏ 構成要素
❏ 状態（State）
❏ どのURLが表示されているか
❏ ログイン処理状況
❏ イベント（Events）
❏ 読み込み開始/終了
❏ ボタンイベントリスナー
❏ 副作用（Side-Eﬀects）
❏ APIリクエスト
❏ エラー表示

View Slide

具体的な実装方法
15.5

View Slide

78
❏ ここではステートマシンの仕組み自体の実装方法は本題ではないのでステート
マシンは以下のライブラリを利用します。
❏ marcy731/StateMachine
❏ https://github.com/marcy731/StateMachine
❏ Point
❏ TypeSafeで軽量なライブラリ
❏ 必要十分な機能
❏ 副作用の管理

View Slide

79
❏ ステートマシンの実装手順
1) ステート図(State Diagram)を作成
2) State / Event / SideEﬀect を定義
3) Transitionを定義
4) StateMachineインスタンス生成 / SideEﬀect の実装
5) 適切なタイミングでEventを発火

View Slide

具体的な実装方法 - ステート図(State Diagram)を作成 -
80

View Slide

具体的な実装方法 - State / Event / SideEﬀectを定義 -
81

View Slide

82

View Slide

83

View Slide

84

View Slide

85

View Slide

86

View Slide

87

View Slide

具体的な実装方法 - Transitionを定義 -
88

View Slide

(再掲)ステートマシンを活用した状態管理
89

View Slide

❏ StateDiagramの記述と同じように記述ができる
❏ StateMachineの定義
❏ StateDiagramの定義
❏ StateDiagramさえできれば、実装が終わったといっても過言ではない
具体的な実装方法 - Transitionを定義 -
90

View Slide

具体的な実装方法 - StateMachine インスタンス生成 / SideEﬀect の実装 -
91

View Slide

92
初期Stateと定義したtransitionsを与えてStateMachineインスタンスを生成

View Slide

93
クロージャー内はTransition時に呼ばれる

View Slide

94
ClosureにはTransitionの結果がResult型で渡る

View Slide

95
エラーハンドリング:
ex: 未定義のTransitionのエラー処理

View Slide

96
SideEﬀectのアクションの実装

View Slide

具体的な実装方法 - Event の発火 -
97
❏ State / Event / Transition / SideEﬀect を定義したら、
適切なタイミングでEventを発火させれば良い。
❏ タイミングは「WebView-ネイティブ間連携の基礎知識」参照
例
❏ トップページ読み込み完了時
❏ ログインページ読み込み完了時

View Slide

98
❏ State / Event / Transition / SideEﬀect を定義したら、
適切なタイミングでEventを発火させれば良い。
❏ タイミングは「WebView-ネイティブ間連携の基礎知識」参照
例
❏ トップページ読み込み完了時
❏ ログインページ読み込み完了時
「トップページ読み込み完了」のEventを発火

View Slide

❏ このように適切なタイミングでEventを発火さえすれば、
あとはStateMachineが自動的に処理してくれる！
99

View Slide

❏ このように適切なタイミングでEventを発火さえすれば、
あとはStateMachineが自動的に処理してくれる！
→　複雑なロジックの記述が不要
❏ ステートマシンを定義すればOK
→　シンプルな記述になる
❏ Event発火の実装に集中できる
100

View Slide

まとめ
19.5

View Slide

まとめ
102
❏ （前提）なるべくWebViewを使うことは避けたい
利用する場合は、なるべくWebViewとの連携が少なくなるようにする
❏ それでも連携が複雑になる場合、ステートマシンを検討しよう
❏ StateDiagramを作成し、それを元にState/Event/Transition/SideEﬀectを定義
❏ あとはStateDiagram通りに、適切なタイミングでEventを発火させるだけ
❏ 幸せになれるかも…！

View Slide

STORES はモバイルエンジニアを採用しています！
103
iOS/Androidエンジニア絶賛採用中！
採用ページはこちら！
URL : https://jobs.st.inc/engineer

View Slide

後夜祭 iOSDC Japan 2023 へのご参加もお待ちしています！
104
2023/09/26 19:00-20:30
https://hey.connpass.com/event/290854/

View Slide

20.5

View Slide

Reference
106
❏ WKWebView
❏ https://developer.apple.com/documentation/webkit/wkwebview
❏ marcy731/StateMachine
❏ https://github.com/marcy731/StateMachine

View Slide

Appendix
107
❏ WebViewをNativeのように使いたい @2023/03/22 Ebisu.mobile #1
❏ https://speakerdeck.com/marcy731/using-webview-like-native-app

View Slide

ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines

ステートマシンを活用したWebView-ネイティブ間連携へのアプローチ / An Approach to WebView-Native Communication Using State Machines

marcy731

More Decks by marcy731

Other Decks in Programming

Featured

Transcript