iOSアプリでフロントエンドと仲良くする

frontend.stmn#3の登壇資料です

Transcript

1. iOSアプリで フロントエンドと仲良くする
2. 自己紹介 中山 龍 (なかやま りゅう) • 新卒3年目のiOSエンジニア(23) • ビジネスチャットのiOSアプリの機能開発を担当 • iOS機能開発チームのリーダー • プロダクト組織のインナーコミュニケーション活性化 • 名古屋市在住 @ryu_develop 昨晩にClaude Codeを駆使し、2時間で登壇準備をしました • 対話しながら構成検討 • サンプルアプリ作成 (100%) • Google Slide作成 (50%) (Chrome-DevTools)
3. iOSエンジニアとしての視点でWebフロントエンドエンジニアに向けて 「iOSのネイティブアプリからこんな感じでWebページを扱うことができるよ」 という内容について話します ⚠ 本登壇は以下を推奨する意図はありません • Webページ主体のアプリ(ガワネイティブアプリ) • ネイティブアプリからの高度・複雑なJavaScriptの実行 今日の話
4. 題材 • OGPデータの取得 • スクロール位置の監視 • 指定位置へのスクロールの実行 やること • ページ読み込み時のJavaScript実行 • ページの監視 • ページの制御 取り扱う題材
5. Webページから OGPデータを取得する
6. OGPを取得して表示 WebView WebView + ネイティブでOGPデータを表示
7. WKUserScript ページ読み込み時に自動実行されるJavaScript
8. WKUserScript ページ読み込み時にOGPメタタグを自動で読み取るためのJavaScriptを定義 var userScripts: [WKUserScript] { let js = """ (function() { const getContent = (property) => { const el = document.querySelector(`meta[property="${property}"]`); return el ? el.getAttribute('content') : null; }; ~~~ OGPデータを取得する処理 ~~~ window.webkit.messageHandlers.ogpHandler.postMessage(data); })(); """ return [WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: true)] } userScripts
9. Swiftでハンドリング JavaScriptからpostMessageで送信されてきたデータをSwiftの型に変換する処理 func handleMessage(_ message: WKScriptMessage) { guard let body = message.body as? [String: Any] else { return } let data = OGPData( title: body["title"] as? String ?? "", description: body["description"] as? String ?? "", imageURL: body["imageURL"] as? String, siteName: body["siteName"] as? String ) ogpData = data } Swift メソッド
10. WKUserScript WebViewにuserScriptsとMessageをRevceiveしたときの処理を渡してあげる var body: some View { ZStack { WebViewRepresentable( url: url, userScripts: userScripts, messageHandlerName: "ogpHandler", onMessageReceived: handleMessage, webView: $webView ) } } SwiftUI
11. OGPを取得して表示 WebView WebView + ネイティブでOGPデータを表示
12. Webページのスクロール位置を知る
13. Webページの表示位置を取得して表示 ネイティブ WebView
14. WKUserScript ページ読み込み時にIntersectionObserverJavaScriptを定義 private var userScripts: [WKUserScript] { let js = """ (function() { ~~~ 省略 ~~~ const observer = new IntersectionObserver((entries) => { ~~~ 表示中のセクションを監視し、postMessageで送信 ~~~ }, { threshold: [0.3, 0.5] }); ~~~ 省略 ~~~ })(); """ return [WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: true)] } userScripts
15. Swiftでハンドリング JavaScriptからpostMessageで送信されてきたデータをSwiftでハンドリング func handleMessage(_ message: WKScriptMessage) { guard let body = message.body as? [String: Any], let type = body["type"] as? String else { return } switch type { case "sectionList": handleSectionList(body) case "sectionChange": handleSectionChange(body) default: break } } Swift メソッド
16. Swiftでハンドリング JavaScriptからpostMessageで送信されてきたデータをSwiftでハンドリング func handleMessage(_ message: WKScriptMessage) { guard let body = message.body as? [String: Any], let type = body["type"] as? String else { return } switch type { case "sectionList": handleSectionList(body) case "sectionChange": handleSectionChange(body) default: break } } Swift メソッド
17. Webページの表示位置を取得して表示 ネイティブ WebView
18. Webページをスクロールさせる
19. Webページをネイティブからスクロールさせる ネイティブ WebView
20. evaluateJavaScript 任意のタイミングでJavaScriptを呼び出せる
21. evaluateJavaScript ネイティブのボタンタップ時にJavaScriptを実行 func scrollToSection(_ section: SectionInfo) { guard let webView else { return } let js = """ (function() { const name = '\(section.name)'; const el = document.querySelector('[data-analytics-section-engagement="' + name + '"]'); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } })(); """ webView.evaluateJavaScript(js, completionHandler: nil) } ボタンタップ時の処理
22. Webページをネイティブからスクロールさせる ネイティブ WebView スクロール以外にもネイティブの操作から さまざまな JavaScriptの処理を実行することができる
23. まとめ
24. まとめ • ネイティブアプリでWebページを表示する場合、そのWebViewでJavaScriptを実行 することができる ◦ ページ読み込み時やネイティブアプリ内のボタンタップをはじめとした任意のタ イミングなど、柔軟に実行可能 ◦ WKUserScript: ページ読み込み時 ◦ evaluateJavaScript: 任意のタイミング • → iOSアプリ内で表示するWebページをカスタムしたい場合、ある程度はアプリ側 のコードで実現することが可能 ◦ ただし、どの方法が適切かは見極めましょう