Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
謎の現象を発見してプチ英雄になりました
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
ichimura
February 19, 2026
Technology
0
73
謎の現象を発見してプチ英雄になりました
ichimura
February 19, 2026
Tweet
Share
More Decks by ichimura
See All by ichimura
EncryptedSharedPreferenceの後継OSSライブラリDataStore Cryptoを紹介
ichir438
0
120
Google/IO 2025 "Build adaptive Android apps that shine across form factors"の紹介
ichir438
0
340
Other Decks in Technology
See All in Technology
OCI Security サービス 概要
oracle4engineer
PRO
2
13k
親子 or ペアで Mashup for the Future! しゃべって楽しむ 初手AI駆動でものづくり体験
hiroramos4
PRO
0
130
Everything Claude Code を眺める
oikon48
7
4.6k
Keycloak を使った SSO で CockroachDB にログインする / CockroachDB SSO with Keycloak
kota2and3kan
0
120
フロントエンド刷新 4年間の軌跡
yotahada3
0
410
クラウド × シリコンの Mashup - AWS チップ開発で広がる AI 基盤の選択肢
htokoyo
2
250
ランサムウエア対策してますか?やられた時の対策は本当にできてますか?AWSでのリスク分析と対応フローの泥臭いお話。
hootaki
0
140
Claude Code Skills 勉強会 (DevelersIO向けに調整済み) / claude code skills for devio
masahirokawahara
1
21k
Lambda Web AdapterでLambdaをWEBフレームワーク利用する
sahou909
0
130
進化するBits AI SREと私と組織
nulabinc
PRO
0
180
Dr. Werner Vogelsの14年のキーノートから紐解くエンジニアリング組織への処方箋@JAWS DAYS 2026
p0n
1
140
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
taku1418
0
170
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.8k
Context Engineering - Making Every Token Count
addyosmani
9
750
Why Our Code Smells
bkeepers
PRO
340
58k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
WENDY [Excerpt]
tessaabrams
9
36k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
730
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
The Spectacular Lies of Maps
axbom
PRO
1
620
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Transcript
謎現象の解決手段を発見して プチ英雄になりました Cybozu株式会社 市村 凌久
None
市村 凌久 • サイボウズの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とモバイルの知識の境界の問題解決って難しい • モバイル以外の知識も要求され、幅広く知識をつけていく意識が芽生えた