Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

marcy731
September 01, 2023

ステートマシンを活用した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

marcy731

September 01, 2023
Tweet

More Decks by marcy731

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. WKNavigationDelegate

    View Slide

  8. ❏ WKNavigationDelegate
    ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI
    ❏ つまり連携のタイミングの検知
    WKNavigationDelegateメソッドの一例
    8
    基礎知識 - WKNavigationDelegate -

    View Slide

  9. ❏ WKNavigationDelegate
    ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI
    ❏ つまり連携のタイミングの検知
    WKNavigationDelegateメソッドの一例
    9
    基礎知識 - WKNavigationDelegate -

    View Slide

  10. ❏ WKNavigationDelegate
    ❏ URLへのアクセス許可やURLリクエストの読み込み状況を把握するためのAPI
    ❏ つまり連携のタイミングの検知
    WKNavigationDelegateメソッドの一例
    10
    基礎知識 - WKNavigationDelegate -

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 14
    基礎知識 - KVO: Key-Value Observing -
    ❏ 監視できるWebViewのプロパティ

    View Slide

  15. WKScriptMessageHandler

    View Slide

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

    View Slide

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

    View Slide

  18. ネイティブ側ではJavaScriptからのメッセージを受信
    18
    基礎知識 - WKScriptMessageHandler -
    ①あらかじめ決めたkeyを
     webView.configuratin.userContentControllerに登録

    View Slide

  19. ネイティブ側ではJavaScriptからのメッセージを受信
    19
    基礎知識 - WKScriptMessageHandler -
    ②JavaScriptのpostMessageをDelegateメソッド内で受信

    View Slide

  20. ネイティブ側ではJavaScriptからのメッセージを受信
    20
    基礎知識 - WKScriptMessageHandler -
    ③受け取ったデータをパース

    View Slide

  21. WKUserScript

    View Slide

  22. ❏ WKUserScript
    ❏ WebコンテンツにJavaScriptを挿入するAPI
    実装例
    22
    基礎知識 - WKUserScript -

    View Slide

  23. ❏ WKUserScript
    ❏ WebコンテンツにJavaScriptを挿入するAPI
    実装例
    23
    基礎知識 - WKUserScript -
    ①JavaScriptをWKUserScriptに変換
    ②WKUserContentControllerに追加

    View Slide

  24. ❏ WKUserScript
    ❏ WebコンテンツにJavaScriptを挿入するAPI
    実装例
    24
    基礎知識 - WKUserScript -
    ③WKWebViewConfigurationにuserContentControllerセット

    View Slide

  25. ❏ WKUserScript
    ❏ WebコンテンツにJavaScriptを挿入するAPI
    実装例
    25
    基礎知識 - WKUserScript -
    ④configurationでWKWebViewを初期化

    View Slide

  26. evaluateJavaScript(_:completionHandler:)

    View Slide

  27. 27
    基礎知識 - evaluateJavaScript(_:completionHandler:) -
    ❏ evaluateJavaScript(_:completionHandler:)
    ❏ 任意のタイミングでJavaScriptを実行するAPI
    実装例

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. 認証同期の課題
    32
    ❏ 題材:
    外部*のECサイトをアプリに組み込んで、
    会員情報・認証情報をアプリと同期させたい

    WebView内でログインしたらアプリ側でもログイン
    * 外部: 内部構造に干渉することができないWebアプリケーション

    View Slide

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

    View Slide

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

    View Slide

  35. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    35
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示

    View Slide

  36. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    36
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ②email/pass入力

    View Slide

  37. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    37
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ②email/pass入力
    EC Backend

    View Slide

  38. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    38
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ②email/pass入力
    ④入力したemailを取得

    View Slide

  39. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    39
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ⑤ECログイン成功
    ②email/pass入力
    ④入力したemailを取得

    View Slide

  40. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    40
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ⑤ECログイン成功
    ⑥ECログイン成功
    ②email/pass入力
    ④入力したemailを取得

    View Slide

  41. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    41
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ⑤ECログイン成功
    ⑥ECログイン成功
    ②email/pass入力
    ④入力したemailを取得
    ⑦AppログインAPI with email

    View Slide

  42. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    42
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ⑤ECログイン成功
    ⑥ECログイン成功
    ②email/pass入力
    ④入力したemailを取得
    ⑦AppログインAPI with email
    ⑧Appログイン成功

    View Slide

  43. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    43
    ❏ ログインシーケンス
    App EC(WebView) App Backend
    EC Backend
    ①ログインページ表示
    ③ECログインリクエスト
    ⑤ECログイン成功
    ⑥ECログイン成功
    ②email/pass入力
    ④入力したemailを取得
    ⑦AppログインAPI with email
    ⑧Appログイン成功
    連携ポイント

    View Slide

  44. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    44
    ❏ 「④入力したemail 取得」の連携

    View Slide

  45. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    45
    ❏ 「④入力したemail 取得」の連携
    ❏ JavaScript経由で取得すればよい
    ❏ 例: WKScriptMessageHandler + WKUserScript を利用

    View Slide

  46. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    46
    ①WebView側からpostするためのmessageHandlerNameを定義

    View Slide

  47. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    47
    ②ログインフォームにEventListenerを設定するJavaScriptを記述

    View Slide

  48. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    48
    ③ログインボタン押下時、
     messageHandlerNameに対してpostMessage(送信)する

    View Slide

  49. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    49
    ④JavaScriptをWebViewにInjection(挿入)する

    View Slide

  50. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    50
    ⑤WebView側からのpostを受けるためのmessageHandlerNameを登録

    View Slide

  51. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    51
    ⑥Delegateメソッド内でmessageHandlerNameを受信し、emailを取得

    View Slide

  52. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    52
    ❏ 「⑥ECログイン成功」の連携(これが問題)

    View Slide

  53. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    53
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない

    View Slide

  54. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    54
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない
    ❏ ログインボタン押下?
    ❏ 成功 or 失敗はわからない

    View Slide

  55. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    55
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない
    ❏ ログインボタン押下?
    ❏ 成功 or 失敗はわからない
    ❏ URL遷移?
    ❏ ログイン成功する場合、/login -> / のような遷移

    View Slide

  56. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    56
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない
    ❏ ログインボタン押下?
    ❏ 成功 or 失敗はわからない
    ❏ URL遷移?
    ❏ ログイン成功する場合、/login -> / のような遷移
    ❏ Go Back時も/login -> / のような遷移になる?

    View Slide

  57. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    57
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない
    ❏ ログインボタン押下?
    ❏ 成功 or 失敗はわからない
    ❏ URL遷移?
    ❏ ログイン成功する場合、/login -> / のような遷移
    ❏ Go Back時も/login -> / のような遷移になる?
    ❏ ログインボタンタップ後、/ に遷移すれば良い?

    View Slide

  58. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    58
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない
    ❏ ログインボタン押下?
    ❏ 成功 or 失敗はわからない
    ❏ URL遷移?
    ❏ ログイン成功する場合、/login -> / のような遷移
    ❏ Go Back時も/login -> / のような遷移になる?
    ❏ ログインボタンタップ後、/ に遷移すれば良い?
    →良さそう

    View Slide

  59. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    59
    ❏ 「⑥ECログイン成功」の連携(これが問題)
    ❏ ログイン成功時にWKScriptMessageHandler経由での連携
    ❏ 今回、外部Webコンテンツのため、この手法が取れない
    ❏ ログインボタン押下?
    ❏ 成功 or 失敗はわからない
    ❏ URL遷移?
    ❏ ログイン成功する場合、/login -> / のような遷移
    ❏ Go Back時も/login -> / のような遷移になる?
    ❏ ログインボタンタップ後、/ に遷移すれば良い?
    →良さそう
    ❏ ログインボタンタップ後の遷移ということはどう判断する?
    フラグ?

    View Slide

  60. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    60
    ❏ ログインボタン押下後の遷移(/login -> /)はハンドリングできそうだが…
    ❏ ログイン方法が複数ある場合、それぞれに対応する必要あり
    ❏ email/pass
    ❏ SNSログイン
    ❏ …

    View Slide

  61. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    61
    ❏ ログインボタン押下後の遷移(/login -> /)はハンドリングできそうだが…
    ❏ ログイン方法が複数ある場合、それぞれに対応する必要あり
    ❏ email/pass
    ❏ SNSログイン
    ❏ …
    ❏ URL遷移なので色々な遷移の可能性がある
    ❏ Go Backしたら?
    ❏ バリデーションで引っ掛かったら?
    ❏ ReCaptchaに阻まれたら?
    ❏ …

    View Slide

  62. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    62
    ❏ 実際にはログインだけではなく、登録やその他連携も必要
    ❏ これらを全てを素直にハンドリングするのは大変…
    ❏ WebView関連のコードがFatになってくるのは想像に難くない…

    View Slide

  63. 事例:外部のECサイトをアプリに組み込んで、会員情報・認証情報をアプリと同期させたい
    63
    ❏ 実際にはログインだけではなく、登録やその他連携も必要
    ❏ これらを全てを素直にハンドリングするのは大変…
    ❏ WebView関連のコードがFatになってくるのは想像に難くない…

    そこでステートマシンを利用しよう!

    View Slide

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

    View Slide

  65. ステートマシンを活用した状態管理
    65
    ❏ ステートマシンとは?
    ❏ 入力条件と現在の状態によって次の状態が決まる論理回路
    ❏ ステートマシンの構成要素
    ❏ 状態(State)
    ❏ イベント(Events)
    ❏ 遷移(Transitions)
    ❏ + 副作用(Side-Effects)

    View Slide

  66. ステートマシンを活用した状態管理
    66
    ❏ ログインフローにステートマシンを適応し、モデル化を行うとどうなるか?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  72. ステートマシンを活用した状態管理
    72
    API実行もSideEffectとして定義する

    View Slide

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

    View Slide

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

    View Slide

  75. ステートマシンを活用した状態管理
    75
    ❏ ステート図(StateDiagram)を書くとロジックがシンプルに記述できる
    ❏ 「State(before) -> State(afger) : Event / SideEffect 」の組み合わせ

    View Slide

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

    View Slide

  77. 具体的な実装方法
    15.5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. 具体的な実装方法 - State / Event / SideEffectを定義 -
    81

    View Slide

  82. 具体的な実装方法 - State / Event / SideEffectを定義 -
    82

    View Slide

  83. 具体的な実装方法 - State / Event / SideEffectを定義 -
    83

    View Slide

  84. 具体的な実装方法 - State / Event / SideEffectを定義 -
    84

    View Slide

  85. 具体的な実装方法 - State / Event / SideEffectを定義 -
    85

    View Slide

  86. 具体的な実装方法 - State / Event / SideEffectを定義 -
    86

    View Slide

  87. 具体的な実装方法 - State / Event / SideEffectを定義 -
    87

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  91. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 -
    91

    View Slide

  92. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 -
    92
    初期Stateと定義したtransitionsを与えてStateMachineインスタンスを生成

    View Slide

  93. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 -
    93
    クロージャー内はTransition時に呼ばれる

    View Slide

  94. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 -
    94
    ClosureにはTransitionの結果がResult型で渡る

    View Slide

  95. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 -
    95
    エラーハンドリング:
    ex: 未定義のTransitionのエラー処理

    View Slide

  96. 具体的な実装方法 - StateMachine インスタンス生成 / SideEffect の実装 -
    96
    SideEffectのアクションの実装

    View Slide

  97. 具体的な実装方法 - Event の発火 -
    97
    ❏ State / Event / Transition / SideEffect を定義したら、
    適切なタイミングでEventを発火させれば良い。
    ❏ タイミングは「WebView-ネイティブ間連携の基礎知識」参照

    ❏ トップページ読み込み完了時
    ❏ ログインページ読み込み完了時

    View Slide

  98. 具体的な実装方法 - Event の発火 -
    98
    ❏ State / Event / Transition / SideEffect を定義したら、
    適切なタイミングでEventを発火させれば良い。
    ❏ タイミングは「WebView-ネイティブ間連携の基礎知識」参照

    ❏ トップページ読み込み完了時
    ❏ ログインページ読み込み完了時
    「トップページ読み込み完了」のEventを発火

    View Slide

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

    View Slide

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

    View Slide

  101. まとめ
    19.5

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  105. 20.5

    View Slide

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

    View Slide

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

    View Slide