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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

WKNavigationDelegate

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

WKScriptMessageHandler

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

WKUserScript

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

evaluateJavaScript(_:completionHandler:)

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

具体的な実装方法 15.5

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

まとめ 19.5

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

20.5

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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