Monaca開発でハマったこと6選

Cordova, Monaca を使った開発の図

ストロボライトのエンジニア武田です。

トップ画は私が育てている亀甲竜(冬型)です。
寒い日が続いていますが、ここ最近もぐんぐん蔓を伸ばしてます！
私達も寒さに負けずに成長していかなければですね！

先日も Monaca を使ってアプリ開発をしましたが、やはり色々とハマりました。
そのなかでもこれは辛かった！と思ったものを共有致します。

1. input要素へのタップが無視される(iOS)
2. Cordovaプラグインが読み込まれない
3. 自社APIサーバとXHR通信出来ない
4. Firestoreからデータが取得できない
5. FacebookのCordovaプラグインを入れるとビルド出来ない。
6. phonegap-push-pluginがビルドできない
最後に

1. input要素へのタップが無視される(iOS)

事象
input要素のtype=“text”へのタップ時にフォーカスがあたらず、
キーボードが表示されない、という現象が起きました。
若干長押しするとキーボードが表示されるのですが、
普通のタップでは全く反応せず、使い物になりませんでした。

解決方法
有識者に聞いたところ、iOSのWebビューコンポーネントであるUIWebViewのバグでした。
UIWebViewはApple社としては既に非推奨になっているようですが、
Cordovaでは未だデフォルトでUIWebViewが使われています。
そこで下記のプラグインを導入し、WKWebViewにすることで解決されました！

iPhoneXからのノッチ対応もWKWebViewのほうが楽なので、
Cordova開発する時にはWKWebViewプラグインは必須と考えてよいと思います。
ただし、下方の 3. 及び 4. の問題に注意が必要です。

2. Cordovaプラグインが読み込まれない

事象
Monaca cloud IDEでビルドしたアプリを動かした際、
Cordovaプラグインが全く読み込まれない、という現象が起きました。
アプリは起動するがプラグインのAPIはまったく呼び出せない、という状況です。

解決方法
問題は、monacaが生成するwebpack設定ファイル(webpack.config.js)に対して変更した箇所でした。

monacaが生成するwebpack設定ファイルにはproductionモードとdevelopmentモードがあります。
productionモードでは、ソースファイルのminifyやconcatといった
一般的に製品版で必要となる処理が行われるように設定されています。
一方でdevelopmentモードではこれらの処理は行われません。

実装中はデバッグ効率化のために、
developmentモードでビルドするように設定ファイルを変更してました。
ですが実は、monacaのwebpack設定ファイルでは、
developmentモードにするとプラグインを読み込まないようになっていました。

結論として、monaca cloud IDEでビルドする際は常にproductionモードでビルドすることで
プラグインが使用出来るようになりました。

3. 自社APIサーバとXHR通信出来ない

事象
それまでは通信出来ていたのに、ある日突然XHR通信出来なくなりました。
iOSのATS対応のためのWhitelistプラグイン設定のミスや
2.のプラグインが読み込まれない問題と同時期に発生しため、切り分けに苦労しました。。

解決方法
この問題は1.でWKWebViewを導入したことに起因する問題でした。

Cordovaではローカルのソースコードを動かすためfile://プロトコルとして動作します。
そのため、APIサーバとのHTTPS通信はクロスドメイン通信となります。
UIWebViewでは問題が生じませんが、WKWebViewではサーバ側でCORSを有効化しないと通信してくれません。

よって、APIサーバ側でCORSを有効化してもらうことで解決しました。

4. Firestoreからデータが取得できない

事象
FirebaseのCloud Firestoreからデータを取得しようとしたところ、
下記のエラーが出力されて取得失敗しました。

[Error] [2018-10-18T07:01:04.315Z]  @firebase/firestore:
[Error] Firestore (5.5.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

解決方法
config.xmlへ下記を入れることで、取得出来るようになりました。

<preference name=“InterceptRemoteRequests” value=“none” />

原因としては、WKWebView導入時に入れた cordova-plugin-wkwebview-file-xhr が
通信をインタラプトした際に、どうやらFirestoreとの通信を阻害しているようです。

今振り返ると、cordova-plugin-wkwebview-file-xhr でなく、 cordova-plugin-wkwebview-engine を使うべきだったかもしれません。

ちなみに上記は https://teratail.com/questions/152802 でアシアルの方に解析して頂きました！
本当に感謝です。

5. FacebookのCordovaプラグインを入れるとビルド出来ない。

検索すると phonegap-facebook-plugin と cordova-plugin-facebook4 の2つがあって迷いますが、ここは cordova-plugin-facebook4 が正解です。

また、package.jsonへ以下を追記します。

{
    ... 中略
    "cordova": {
        "plugins": {
            ... 中略
            "cordova-plugin-facebook4": {
                "APP_ID":   Facebookの管理画面から抜き出す,
                "APP_NAME": Facebookの管理画面から抜き出す
            }
        }
    },
    ... 中略
}

6. phonegap-push-pluginがビルドできない

事象
phonegap-plugin-push を導入してmonacaでビルドすると、ビルドに失敗します。

解決方法
monaca が対応している Cordova Android プラットフォームはバージョン「6.4.0」なのですが、 phonegap-plugin-pushの最新2.2.x系では「7.1.0」が必須となっています。
これによりビルド出来ません。

そこで、phonegap-plugin-pushの2.1.x系までversionを落とす必要がありました。
詳細は https://github.com/phonegap/phonegap-plugin-push/blob/master/docs/INSTALLATION.md#installation-requirements を確認してください。

最後に

Cordovaアプリ開発では有志によるプラグインの力をお借りすることで、ネイティブと同じ機能を実現出来ます。その一方で、有志が提供するものであるがゆえにバージョンや相性問題が起きやすいです。
こういった情報もみんなで共有、解決することで盛り上げて行きたいですね！

あと、monacaのビルドサーバも問題が生じていることがあります。なにかおかしいなぁと思ったら以下を見ると良いです。 ja.monaca.io

以上です。

ストロボライトで働くエンジニアの徒然日記

株式会社ストロボライトのエンジニア開発ブログです。LOVEGREEN、botapii、MIDOLASを支えるエンジニアの日々の生活を綴っていきます