謎現象の解決手段を発見して プチ英雄になりました Cybozu株式会社 市村 凌久 

No content

市村 凌久 ● サイボウズの25卒Androidアプリエンジニア ● kintone開発チーム ● 2025年は勉強会に20~30回くらい行ってたらしい 本LTはkintone Mobileの開発チームでのお話です 自己紹介 

別チームからこんな連絡が来ました 「React版にしたらモバイルの機能動かなくなったんですけど」 

🤔 

kintoneの本体とモバイルの関係 kintone本体は ● 弊社、kintone本体のコードをReact版に刷新中 ● モバイルはWebViewベース、モバイルビューを用意 kintoneモバイルアプリは ● 部分的にネイティブ領域を実装することで、モバイル端末の体験を向上 ● webViewの addJavascriptInterface を用いてコールバックを公開し、 Web側から呼び出すことでネイティブ機能を展開 

今までは通常通り動いていた 旧バージョン kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③ネイティブ機能起動 

刷新後の動作 React版 kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③不発 

刷新後の動作 React版 kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③不発 ちなみにiOS版だと問題なく動作していた 

刷新後の動作 React版 kintoneモバイルビュー kintone Android ②JSInterface ①操作 ③不発 ちなみにiOS版だと問題なく動作していた これってどっちが原因なんだ？ 

考えられる要因 本体 ● Reactではモバイル側のJSInterfaceをうまく参照できてない？ ● React版で導入されたzod（バリデーションの仕組み）が悪さしている？ ○ 依頼チームが削除してみたが結局疎通しなかった Android側 ● WebViewがReactやzodと相性が悪い？ ● JSInterfaceの設計が悪い？ 

本LTの内容 AndroidのWebViewでReactサイト(?)を扱う時に 気をつけるべきこと 

前提の共有 ● 僕自身Web技術に特別詳しいわけではないです ● もしかすると事実と異なる理解をしているかもですがご容赦を 

モバイルチームを代表して原因究明を進める 🏃 

まずは環境を再現 ● Reactでwebページをローカルに用意 ○ ほぼ初期テンプレートの実装 ○ ボタンを押したらJSInterfaceを呼び出す実装(zodは未使用） ○ ローカルホスティングで androidでもアクセスできるように設定 ● Androidも再現用のアプリを最低限の実装で用意 ○ WebViewを表示 ○ JSInterfaceでネイティブ画面に遷移する いざ、確認 

ちゃんと動作する ● ReactとAndroidの相性が悪いわけではない 

より実際の実装に寄せていく Web側 ● TypeScriptへ置き換え ● Zodを利用した呼び出しを使う Android側 ● JSInterfaceをクラス内でobject定義 ● Handlerでラップし、mainスレッド実行に いざ、確認 

きた、呼び出せない！ やはりzodが影響していた？ 

出力エラーから関連するissueを発見 

原因 プロパティアクセスと呼び出しが分離する ことが問題 ● chromium（WebViewのベース）の仕様で、参照と実行が同時でないと JSInterfaceのメソッドをWeb側が実行できない ● zodはバリデーション時に一度参照するため、この条件に引っ掛かる ● zodを使わずとも、参照を返す実装ではJSInterfaceメソッドを実行できない 

原因 プロパティアクセスと呼び出しが分離する ことが問題 と、ClaudeCodeさんが解説してくれました（重要） ● chromium（WebViewのベース）の仕様で、参照と実行が同時でないと JSInterfaceのメソッドをWeb側が実行できない ● zodはバリデーション時に一度参照するため、この条件に引っ掛かる ● zodを使わずとも、参照を返す実装ではJSInterfaceメソッドを実行できない 

回避策 Web側でJSInterfaceの参照を渡す時、無名関数でラップする window // グローバルなブラウザアクセス .AndroidApp // JSInterfaceで決めた名前 .openNativeScreen() // JSInterfaceで定義したメソッド名 ❌ return window.AndroidApp.openNativeScreen ⭕ return () => { window.AndroidApp.openNativeScreen() } とにかく、JSInterfaceへのアクセスを実行する寸前まで触れてはいけないみたい 

zodでやりたかったバリデーションはどうする？ ● 今回対応したケースでは、手動で実装した ● 数行増える程度だが、毎回チェックを手動はめんどくさそう 

結論 WebViewからJSInterfaceを公開する時 Webは参照と実行を分けてはいけない 

感想 ● webとモバイルの知識の境界の問題解決って難しい ● モバイル以外の知識も要求され、幅広く知識をつけていく意識が芽生えた