弊社は基本的にはWebアプリの会社で、ネイティブアプリ人材が恒常的に不足しております。
そんな事情もあり、現状のTimeCrowdアプリは側ネイティブでの提供になってしまっています。(ログインなどネイティブが必要な部分はReact Native製)
※ はやくちゃんとしたネイティブアプリに書き換えたいのですが…。
側ネイティブであれば、ネイティブのことを知らないで済む、かと言えばもちろんそうではありません。
例えば今回のように「Androidだけで動かない」ということも当然起きてしまいます。
本件は、iOSの経験があるということで(?)私がデバッグすることになりましたが、いろいろと躓くことがあったので恥を忍んで晒したいと思います。
目次
その1:再現できない
今回のバグはユーザーさんからお問い合わせがあって発覚しました。
しかし、Androidのバージョン(7.0)を揃えても再現せず、困りました。
結局Chromeアプリのバージョンが原因でした。
Androidの事情を知っている人であれば、7.0からWebViewはChromeが提供していることにすぐ思い当たり、ハマらなかったかもしれません。
その2:実機にインストールできない
実機を繋いだ状態でreact-native run-android
を実行してもINSTALL_FAILED_VERSION_DOWNGRADE
やINSTALL_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.java
のonCreate()
にWebView.setWebContentsDebuggingEnabled(true);
を追加することで解消しました。
参考:
その5:インスペクターが真っ白
やっとchrome://inspect/#devices
からinspectできるようになりましたが、なぜか画面が真っ白で何もできない…。
これは、MacのChromeを最新版にアップデートすることで解消しました。
まとめ:Androidを勉強しよう
こんな感じで、実際の修正作業よりデバッグ環境を整えるのに時間がかかってしまいました。
Androidのことを改めて勉強しようと思い直しました。
「iOSエンジニアのためのAndroid入門」という本が出てほしいです。
また、「私が君達にAndroidのなんたるかを教えてやる」という方がいらっしゃいましたら、是非ご連絡ください。