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

iOSDC Japan 2023 day0 18:45~ TrackA で登壇するさいの資料になります。
https://fortee.jp/iosdc-japan-2023/proposal/8a41d745-7906-41ca-b05d-c6551c1d23a8

Transcript

1. ヘイ株式会社 ステートマシンを活用した WebView-ネイティブ間連携へのアプローチ STORES株式会社 iOSエンジニア 長谷川 将司（@marcy731） 2023/09/01 18:45〜 iOSDC Japan TrackA レギュラートーク（20分）
2. アジェンダ 2 ❏ WebView-ネイティブ間連携の基礎知識 ❏ WebView-ネイティブ間の認証同期の課題 ❏ ステートマシンを活用した状態管理 ❏ 具体的な実装方法
3. 注意事項 3 ❏ 本トークはWebView = WKWebViewとして扱います。 ❏ 一部文字が小さい箇所もあり、遠くの席からだと見えないかもしれません。 本資料はX(旧Twitter)にて共有していますので、手元においてご覧くださ い。
4. WebView-ネイティブ間連携の基礎知識 0.5
5. 基礎知識 5 ❏ WebViewとネイティブ側を「連携する」とは ❏ WebViewとネイティブ側が、効果的に情報を共有し相互に連動 すること ❏ ネイティブ <-> WebViewのデータの受け渡し ❏ ex: JavaScript経由でデータを送信するなど ❏ WebView内でのユーザーアクションをネイティブ側でトリガー ❏ ex: ボタン押下 ❏ ネイティブ側からWebView内のJavaScript関数を呼び出して、特定のアクションを実行
6. 基礎知識 6 ❏ 「連携」させるため、まずは以下をおさらいする ❏ WKNavigationDelegate ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI ❏ WKScriptMessageHandler ❏ Webコンテンツ側からネイティブ側にメッセージングするAPI ❏ WKUserScript ❏ WebコンテンツにJavaScriptを挿入するAPI ❏ evaluateJavaScript(_:completionHandler:) ❏ 任意のタイミングでJavaScriptを実行するAPI
7. WKNavigationDelegate
8. ❏ WKNavigationDelegate ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI ❏ つまり連携のタイミングの検知 WKNavigationDelegateメソッドの一例 8 基礎知識 - WKNavigationDelegate -
9. ❏ WKNavigationDelegate ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI ❏ つまり連携のタイミングの検知 WKNavigationDelegateメソッドの一例 9 基礎知識 - WKNavigationDelegate -
10. ❏ WKNavigationDelegate ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI ❏ つまり連携のタイミングの検知 WKNavigationDelegateメソッドの一例 10 基礎知識 - WKNavigationDelegate -
11. ❏ WebコンテンツがSPA*の場合、 ❏ URLが変わっても、WKNavigationDelegateは呼ばれません ❏ その時は、KVOを利用しよう 11 * SPA: Single Page Application 基礎知識 - KVO: Key-Value Observing -
12. ❏ KVO: Key-Value Observing ❏ 対象のオブジェクトを監視し、変更を通知してくれる仕組み KVO実装例 12 基礎知識 - KVO: Key-Value Observing - urlを監視し、変更があればクロージャーが呼ばれる
13. ❏ KVO: Key-Value Observing ❏ 対象のオブジェクトを監視し、変更を通知してくれる仕組み Combineでの実装例 13 基礎知識 - KVO: Key-Value Observing - urlを監視し、変更があればsinkのクロージャーが呼ばれる
14. 14 基礎知識 - KVO: Key-Value Observing - ❏ 監視できるWebViewのプロパティ
15. WKScriptMessageHandler
16. ❏ WKScriptMessageHandler ❏ Webコンテンツ側からネイティブ側にメッセージングするAPI ❏ keyとなるmessageHandlerNameを決めてWebView->ネイティブにメッセージを送る 16 基礎知識 - WKScriptMessageHandler -
17. Webコンテンツ側ではJavaScriptでメッセージを送信 17 基礎知識 - WKScriptMessageHandler - ①あらかじめ決めたkeyに対してpostMessageを発火し、 　ネイティブ側にメッセージを送信 　この例では ”messageHandlerName” というkeyを設定
18. ネイティブ側ではJavaScriptからのメッセージを受信 18 基礎知識 - WKScriptMessageHandler - ①あらかじめ決めたkeyを 　webView.configuratin.userContentControllerに登録
19. ネイティブ側ではJavaScriptからのメッセージを受信 19 基礎知識 - WKScriptMessageHandler - ②JavaScriptのpostMessageをDelegateメソッド内で受信
20. ネイティブ側ではJavaScriptからのメッセージを受信 20 基礎知識 - WKScriptMessageHandler - ③受け取ったデータをパース
21. WKUserScript
22. ❏ WKUserScript ❏ WebコンテンツにJavaScriptを挿入するAPI 実装例 22 基礎知識 - WKUserScript -
23. ❏ WKUserScript ❏ WebコンテンツにJavaScriptを挿入するAPI 実装例 23 基礎知識 - WKUserScript - ①JavaScriptをWKUserScriptに変換 ②WKUserContentControllerに追加
24. ❏ WKUserScript ❏ WebコンテンツにJavaScriptを挿入するAPI 実装例 24 基礎知識 - WKUserScript - ③WKWebViewConfigurationにuserContentControllerセット
25. ❏ WKUserScript ❏ WebコンテンツにJavaScriptを挿入するAPI 実装例 25 基礎知識 - WKUserScript - ④configurationでWKWebViewを初期化
26. evaluateJavaScript(_:completionHandler:)
27. 27 基礎知識 - evaluateJavaScript(_:completionHandler:) - ❏ evaluateJavaScript(_:completionHandler:) ❏ 任意のタイミングでJavaScriptを実行するAPI 実装例
28. 28 基礎知識 - evaluateJavaScript(_:completionHandler:) - ❏ evaluateJavaScript(_:completionHandler:) ❏ 任意のタイミングでJavaScriptを実行するAPI 実装例 「読み込み完了時」に実行 実行後、クロージャー内が呼ばれる JavaScriptの実行結果を取得できる
29. WebView-ネイティブ間連携の基礎知識 - まとめ - 29 ❏ WebViewとネイティブ側の連携 ❏ WKNavigationDelegate ❏ WKScriptMessageHandler ❏ WKUserScript ❏ WKWenView.evaluateJavaScript(_:completionHandler:) ❏ これらの方法を駆使し、適切なタイミングで連携していく
30. WebView-ネイティブ間の認証同期の課題 6.5
31. 認証同期の課題 31 ❏ 題材: 外部*のECサイトをアプリに組み込んで、 会員情報・認証情報をアプリと同期させたい * 外部: 内部構造に干渉することができないWebアプリケーション
32. 認証同期の課題 32 ❏ 題材: 外部*のECサイトをアプリに組み込んで、 会員情報・認証情報をアプリと同期させたい ≒ WebView内でログインしたらアプリ側でもログイン * 外部: 内部構造に干渉することができないWebアプリケーション
33. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 33 ❏ ネイティブ（App）とWebView（EC）の関係 他社管理 ・アカウント管理 ・ポイント付与 ・購買履歴分析 ・お知らせ送付 ・クーポン送付 App WebView (ECサイト) Native App Backend アカウント情報（Webhook） ログイン・会員情報 ・アカウント管理 ・在庫管理 ・注文管理 ・発送管理 ECサイト/ Backend
34. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 34 ❏ ネイティブ（App）とWebView（EC）の関係 他社管理 ・アカウント管理 ・ポイント付与 ・購買履歴分析 ・お知らせ送付 ・クーポン送付 App WebView (ECサイト) Native App Backend アカウント情報（Webhook） WebView(ECサイト)でログイン → Appでもログイン ログイン・会員情報 ・アカウント管理 ・在庫管理 ・注文管理 ・発送管理 ECサイト/ Backend
35. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 35 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示
36. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 36 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ②email/pass入力
37. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 37 ❏ ログインシーケンス App EC(WebView) App Backend ①ログインページ表示 ③ECログインリクエスト ②email/pass入力 EC Backend
38. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 38 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ③ECログインリクエスト ②email/pass入力 ④入力したemailを取得
39. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 39 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ③ECログインリクエスト ⑤ECログイン成功 ②email/pass入力 ④入力したemailを取得
40. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 40 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ③ECログインリクエスト ⑤ECログイン成功 ⑥ECログイン成功 ②email/pass入力 ④入力したemailを取得
41. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 41 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ③ECログインリクエスト ⑤ECログイン成功 ⑥ECログイン成功 ②email/pass入力 ④入力したemailを取得 ⑦AppログインAPI with email
42. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 42 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ③ECログインリクエスト ⑤ECログイン成功 ⑥ECログイン成功 ②email/pass入力 ④入力したemailを取得 ⑦AppログインAPI with email ⑧Appログイン成功
43. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 43 ❏ ログインシーケンス App EC(WebView) App Backend EC Backend ①ログインページ表示 ③ECログインリクエスト ⑤ECログイン成功 ⑥ECログイン成功 ②email/pass入力 ④入力したemailを取得 ⑦AppログインAPI with email ⑧Appログイン成功 連携ポイント
44. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 44 ❏ 「④入力したemail 取得」の連携
45. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 45 ❏ 「④入力したemail 取得」の連携 ❏ JavaScript経由で取得すればよい ❏ 例： WKScriptMessageHandler + WKUserScript を利用
46. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 46 ①WebView側からpostするためのmessageHandlerNameを定義
47. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 47 ②ログインフォームにEventListenerを設定するJavaScriptを記述
48. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 48 ③ログインボタン押下時、 　messageHandlerNameに対してpostMessage(送信)する
49. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 49 ④JavaScriptをWebViewにInjection(挿入)する
50. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 50 ⑤WebView側からのpostを受けるためのmessageHandlerNameを登録
51. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 51 ⑥Delegateメソッド内でmessageHandlerNameを受信し、emailを取得
52. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 52 ❏ 「⑥ECログイン成功」の連携（これが問題）
53. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 53 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない
54. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 54 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない ❏ ログインボタン押下？ ❏ 成功 or 失敗はわからない
55. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 55 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない ❏ ログインボタン押下？ ❏ 成功 or 失敗はわからない ❏ URL遷移？ ❏ ログイン成功する場合、/login -> / のような遷移
56. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 56 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない ❏ ログインボタン押下？ ❏ 成功 or 失敗はわからない ❏ URL遷移？ ❏ ログイン成功する場合、/login -> / のような遷移 ❏ Go Back時も/login -> / のような遷移になる？
57. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 57 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない ❏ ログインボタン押下？ ❏ 成功 or 失敗はわからない ❏ URL遷移？ ❏ ログイン成功する場合、/login -> / のような遷移 ❏ Go Back時も/login -> / のような遷移になる？ ❏ ログインボタンタップ後、/ に遷移すれば良い？
58. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 58 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない ❏ ログインボタン押下？ ❏ 成功 or 失敗はわからない ❏ URL遷移？ ❏ ログイン成功する場合、/login -> / のような遷移 ❏ Go Back時も/login -> / のような遷移になる？ ❏ ログインボタンタップ後、/ に遷移すれば良い？ →良さそう
59. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 59 ❏ 「⑥ECログイン成功」の連携（これが問題） ❏ ログイン成功時にWKScriptMessageHandler経由での連携 ❏ 今回、外部Webコンテンツのため、この手法が取れない ❏ ログインボタン押下？ ❏ 成功 or 失敗はわからない ❏ URL遷移？ ❏ ログイン成功する場合、/login -> / のような遷移 ❏ Go Back時も/login -> / のような遷移になる？ ❏ ログインボタンタップ後、/ に遷移すれば良い？ →良さそう ❏ ログインボタンタップ後の遷移ということはどう判断する？ フラグ？
60. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 60 ❏ ログインボタン押下後の遷移（/login -> /）はハンドリングできそうだが… ❏ ログイン方法が複数ある場合、それぞれに対応する必要あり ❏ email/pass ❏ SNSログイン ❏ …
61. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 61 ❏ ログインボタン押下後の遷移（/login -> /）はハンドリングできそうだが… ❏ ログイン方法が複数ある場合、それぞれに対応する必要あり ❏ email/pass ❏ SNSログイン ❏ … ❏ URL遷移なので色々な遷移の可能性がある ❏ Go Backしたら？ ❏ バリデーションで引っ掛かったら？ ❏ ReCaptchaに阻まれたら？ ❏ …
62. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 62 ❏ 実際にはログインだけではなく、登録やその他連携も必要 ❏ これらを全てを素直にハンドリングするのは大変… ❏ WebView関連のコードがFatになってくるのは想像に難くない…
63. 事例：外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい 63 ❏ 実際にはログインだけではなく、登録やその他連携も必要 ❏ これらを全てを素直にハンドリングするのは大変… ❏ WebView関連のコードがFatになってくるのは想像に難くない… ↓ そこでステートマシンを利用しよう！
64. ステートマシンを活用した状態管理 12.5
65. ステートマシンを活用した状態管理 65 ❏ ステートマシンとは？ ❏ 入力条件と現在の状態によって次の状態が決まる論理回路 ❏ ステートマシンの構成要素 ❏ 状態（State） ❏ イベント（Events） ❏ 遷移（Transitions） ❏ ＋　副作用（Side-Effects）
66. ステートマシンを活用した状態管理 66 ❏ ログインフローにステートマシンを適応し、モデル化を行うとどうなるか？
67. ステートマシンを活用した状態管理 67
68. ステートマシンを活用した状態管理 68
69. ステートマシンを活用した状態管理 69
70. ステートマシンを活用した状態管理 70
71. ステートマシンを活用した状態管理 71
72. ステートマシンを活用した状態管理 72 API実行もSideEffectとして定義する
73. ステートマシンを活用した状態管理 73
74. ステートマシンを活用した状態管理 74
75. ステートマシンを活用した状態管理 75 ❏ ステート図（StateDiagram）を書くとロジックがシンプルに記述できる ❏ 「State(before) -> State(afger) : Event / SideEffect 」の組み合わせ
76. ステートマシンを活用した状態管理 76 ❏ ステート図（StateDiagram）を書くとロジックがシンプルに記述できる ❏ 「State(before) -> State(afger) : Event / SideEffect 」の組み合わせ ❏ 実はステートマシンとWebViewのステート管理は相性が良い ❏ 構成要素 ❏ 状態（State） ❏ どのURLが表示されているか ❏ ログイン処理状況 ❏ イベント（Events） ❏ 読み込み開始/終了 ❏ ボタンイベントリスナー ❏ 副作用（Side-Effects） ❏ APIリクエスト ❏ エラー表示
77. 具体的な実装方法 15.5
78. 具体的な実装方法 78 ❏ ここではステートマシンの仕組み自体の実装方法は本題ではないのでステート マシンは以下のライブラリを利用します。 ❏ marcy731/StateMachine ❏ https://github.com/marcy731/StateMachine ❏ Point ❏ TypeSafeで軽量なライブラリ ❏ 必要十分な機能 ❏ 副作用の管理
79. 具体的な実装方法 79 ❏ ステートマシン の実装手順 1) ステート図(State Diagram)を作成 2) State / Event / SideEffect を定義 3) Transitionを定義 4) StateMachineインスタンス生成 / SideEffect の実装 5) 適切なタイミングでEventを発火
80. 具体的な実装方法 - ステート図(State Diagram)を作成 - 80
81. 具体的な実装方法 - State / Event / SideEffectを定義 - 81
82. 具体的な実装方法 - State / Event / SideEffectを定義 - 82
83. 具体的な実装方法 - State / Event / SideEffectを定義 - 83
84. 具体的な実装方法 - State / Event / SideEffectを定義 - 84
85. 具体的な実装方法 - State / Event / SideEffectを定義 - 85
86. 具体的な実装方法 - State / Event / SideEffectを定義 - 86
87. 具体的な実装方法 - State / Event / SideEffectを定義 - 87
88. 具体的な実装方法 - Transitionを定義 - 88
89. (再掲)ステートマシンを活用した状態管理 89
90. ❏ StateDiagramの記述と同じように記述ができる ❏ StateMachineの定義 ❏ StateDiagramの定義 ❏ StateDiagramさえできれば、実装が終わったといっても過言ではない 具体的な実装方法 - Transitionを定義 - 90
91. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 - 91
92. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 - 92 初期Stateと定義したtransitionsを与えてStateMachineインスタンスを生成
93. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 - 93 クロージャー内はTransition時に呼ばれる
94. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 - 94 ClosureにはTransitionの結果がResult型で渡る
95. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 - 95 エラーハンドリング: ex: 未定義のTransitionのエラー処理
96. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 - 96 SideEffectのアクションの実装
97. 具体的な実装方法 - Event の発火 - 97 ❏ State / Event / Transition / SideEffect を定義したら、 適切なタイミングでEventを発火させれば良い。 ❏ タイミングは「WebView-ネイティブ間連携の基礎知識」参照 例 ❏ トップページ読み込み完了時 ❏ ログインページ読み込み完了時
98. 具体的な実装方法 - Event の発火 - 98 ❏ State / Event / Transition / SideEffect を定義したら、 適切なタイミングでEventを発火させれば良い。 ❏ タイミングは「WebView-ネイティブ間連携の基礎知識」参照 例 ❏ トップページ読み込み完了時 ❏ ログインページ読み込み完了時 「トップページ読み込み完了」のEventを発火
99. ❏ このように適切なタイミングでEventを発火さえすれば、 あとはStateMachineが自動的に処理してくれる！ 具体的な実装方法 - Event の発火 - 99
100. ❏ このように適切なタイミングでEventを発火さえすれば、 あとはStateMachineが自動的に処理してくれる！ →　複雑なロジックの記述が不要 ❏ ステートマシンを定義すればOK →　シンプルな記述になる ❏ Event発火の実装に集中できる 具体的な実装方法 - Event の発火 - 100
101. まとめ 19.5
102. まとめ 102 ❏ （前提）なるべくWebViewを使うことは避けたい 利用する場合は、なるべくWebViewとの連携が少なくなるようにする ❏ それでも連携が複雑になる場合、ステートマシンを検討しよう ❏ StateDiagramを作成し、それを元にState/Event/Transition/SideEffectを定義 ❏ あとはStateDiagram通りに、適切なタイミングでEventを発火させるだけ ❏ 幸せになれるかも…！
103. STORES は モバイルエンジニアを採用しています！ 103 iOS/Androidエンジニア絶賛採用中！ 採用ページはこちら！ URL : https://jobs.st.inc/engineer
104. 後夜祭 iOSDC Japan 2023 へのご参加もお待ちしています！ 104 2023/09/26 19:00-20:30 https://hey.connpass.com/event/290854/
105. 20.5
106. Reference 106 ❏ WKWebView ❏ https://developer.apple.com/documentation/webkit/wkwebview ❏ marcy731/StateMachine ❏ https://github.com/marcy731/StateMachine
107. Appendix 107 ❏ WebViewをNativeのように使いたい @2023/03/22 Ebisu.mobile #1 ❏ https://speakerdeck.com/marcy731/using-webview-like-native-app