Ruby/iOSエンジニアがReact Native製AndroidアプリのWebViewをデバッグする時にハマった所

混乱

弊社は基本的にはWebアプリの会社で、ネイティブアプリ人材が恒常的に不足しております。
そんな事情もあり、現状のTimeCrowdアプリは側ネイティブでの提供になってしまっています。(ログインなどネイティブが必要な部分はReact Native製)
※ はやくちゃんとしたネイティブアプリに書き換えたいのですが…。

側ネイティブであれば、ネイティブのことを知らないで済む、かと言えばもちろんそうではありません。
例えば今回のように「Androidだけで動かない」ということも当然起きてしまいます。

本件は、iOSの経験があるということで(?)私がデバッグすることになりましたが、いろいろと躓くことがあったので恥を忍んで晒したいと思います。

その1:再現できない

今回のバグはユーザーさんからお問い合わせがあって発覚しました。
しかし、Androidのバージョン(7.0)を揃えても再現せず、困りました。

結局Chromeアプリのバージョンが原因でした。

Androidの事情を知っている人であれば、7.0からWebViewはChromeが提供していることにすぐ思い当たり、ハマらなかったかもしれません。

その2:実機にインストールできない

実機を繋いだ状態でreact-native run-androidを実行してもINSTALL_FAILED_VERSION_DOWNGRADEINSTALL_FAILED_UPDATE_INCOMPATIBLEなどが発生してインストールできませんでした。

ストアから入れていたアプリをアンインストールすることで解消しました。
最初、ホーム画面から削除しただけでアンインストールできたと思っていて無駄に時間がかかってしまいました。

その3:実機で動かない

インストールができたものの、今度はReact Nativeの開発サーバーに接続できないため動きませんでした。
~/Library/Android/sdk/platform-tools/adb reverse tcp:8081 tcp:8081を実行することで、転送してくれて動くようになりました。

参考:

[2018/4/20 追記]
これはadbへのパスを通しておけば、ReactNativeが自動でやってくれるものでした。

その4:MacのChromeからWebViewが見えない

ChromeアプリでWebを見るとデバッグできるのに、アプリ内のWebViewは見れませんでした。
MainApplication.javaonCreate()WebView.setWebContentsDebuggingEnabled(true);を追加することで解消しました。

参考:

その5:インスペクターが真っ白

やっとchrome://inspect/#devicesからinspectできるようになりましたが、なぜか画面が真っ白で何もできない…。
これは、MacのChromeを最新版にアップデートすることで解消しました。

まとめ:Androidを勉強しよう

こんな感じで、実際の修正作業よりデバッグ環境を整えるのに時間がかかってしまいました。
Androidのことを改めて勉強しようと思い直しました。

「iOSエンジニアのためのAndroid入門」という本が出てほしいです。
また、「私が君達にAndroidのなんたるかを教えてやる」という方がいらっしゃいましたら、是非ご連絡ください。

TimeCrowdに戻る