謎の現象を発見してプチ英雄になりました

Transcript

1. 謎現象の解決手段を発見して プチ英雄になりました Cybozu株式会社 市村 凌久
3. 市村 凌久 • サイボウズの25卒Androidアプリエンジニア • kintone開発チーム • 2025年は勉強会に20~30回くらい行ってたらしい 本LTはkintone Mobileの開発チームでのお話です 自己紹介
4. 別チームからこんな連絡が来ました 「React版にしたらモバイルの機能動かなくなったんですけど」
5. 🤔
6. kintoneの本体とモバイルの関係 kintone本体は • 弊社、kintone本体のコードをReact版に刷新中 • モバイルはWebViewベース、モバイルビューを用意 kintoneモバイルアプリは • 部分的にネイティブ領域を実装することで、モバイル端末の体験を向上 • webViewの addJavascriptInterface を用いてコールバックを公開し、 Web側から呼び出すことでネイティブ機能を展開
7. 今までは通常通り動いていた 旧バージョン kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③ネイティブ機能起動
8. 刷新後の動作 React版 kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③不発
9. 刷新後の動作 React版 kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③不発 ちなみにiOS版だと問題なく動作していた
10. 刷新後の動作 React版 kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③不発 ちなみにiOS版だと問題なく動作していた これってどっちが原因なんだ？
11. 考えられる要因 本体 • Reactではモバイル側のJSInterfaceをうまく参照できてない？ • React版で導入されたzod（バリデーションの仕組み）が悪さしている？ ◦ 依頼チームが削除してみたが結局疎通しなかった Android側 • WebViewがReactやzodと相性が悪い？ • JSInterfaceの設計が悪い？
12. 本LTの内容 AndroidのWebViewでReactサイト(?)を扱う時に 気をつけるべきこと
13. 前提の共有 • 僕自身Web技術に特別詳しいわけではないです • もしかすると事実と異なる理解をしているかもですがご容赦を
14. モバイルチームを代表して原因究明を進める 🏃
15. まずは環境を再現 • Reactでwebページをローカルに用意 ◦ ほぼ初期テンプレートの実装 ◦ ボタンを押したらJSInterfaceを呼び出す実装(zodは未使用） ◦ ローカルホスティングで androidでもアクセスできるように設定 • Androidも再現用のアプリを最低限の実装で用意 ◦ WebViewを表示 ◦ JSInterfaceでネイティブ画面に遷移する いざ、確認
16. ちゃんと動作する • ReactとAndroidの相性が悪いわけではない
17. より実際の実装に寄せていく Web側 • TypeScriptへ置き換え • Zodを利用した呼び出しを使う Android側 • JSInterfaceをクラス内でobject定義 • Handlerでラップし、mainスレッド実行に いざ、確認
18. きた、呼び出せない！ やはりzodが影響していた？
19. 出力エラーから関連するissueを発見
20. 原因 プロパティアクセスと呼び出しが分離する ことが問題 • chromium（WebViewのベース）の仕様で、参照と実行が同時でないと JSInterfaceのメソッドをWeb側が実行できない • zodはバリデーション時に一度参照するため、この条件に引っ掛かる • zodを使わずとも、参照を返す実装ではJSInterfaceメソッドを実行できない
21. 原因 プロパティアクセスと呼び出しが分離する ことが問題 と、ClaudeCodeさんが解説してくれました（重要） • chromium（WebViewのベース）の仕様で、参照と実行が同時でないと JSInterfaceのメソッドをWeb側が実行できない • zodはバリデーション時に一度参照するため、この条件に引っ掛かる • zodを使わずとも、参照を返す実装ではJSInterfaceメソッドを実行できない
22. 回避策 Web側でJSInterfaceの参照を渡す時、無名関数でラップする window // グローバルなブラウザアクセス .AndroidApp // JSInterfaceで決めた名前 .openNativeScreen() // JSInterfaceで定義したメソッド名 ❌ return window.AndroidApp.openNativeScreen ⭕ return () => { window.AndroidApp.openNativeScreen() } とにかく、JSInterfaceへのアクセスを実行する寸前まで触れてはいけないみたい
23. zodでやりたかったバリデーションはどうする？ • 今回対応したケースでは、手動で実装した • 数行増える程度だが、毎回チェックを手動はめんどくさそう
24. 結論 WebViewからJSInterfaceを公開する時 Webは参照と実行を分けてはいけない
25. 感想 • webとモバイルの知識の境界の問題解決って難しい • モバイル以外の知識も要求され、幅広く知識をつけていく意識が芽生えた