Monaca Androidアプリ Monacaデバッカーでは表示され、デバックアプリ・リリーアプリでは表示されない

Question

前提・実現したいこと

MonacaでiOS・Androidアプリを作っております。もう三年ほど運営しているのですが、今回アップデートでiOSアプリではデバックビルドまで問題なく、リリース直前です。一方、同プロジェクトのAndroidアプリでは、外部ファイルをjQueryのload()を使って読み込んでいる部分が、Monacaデバッカーでは表示されるのに、デバックアプリ・リリーアプリでは表示されない状態になっております。

試したこと

Onsenプラグインなどを入れ直したり、外したりしたものの全く変化ありません。

数ヶ月前のアップデートでは、何も問題なくiOS・Androidアプリ両方共リリースできたのですが、
何かこの期間で変化があったのでしょうか？何か分かる方いらしゃいましたら、教えていただけないでしょうか？

Answer 1

前回まで使っていたプラグインがいくつか外れていることに気が付きました。そこで、それらを再度有効にし、ビルドしたところ、デバッグビルド・リリースビルドとも正常にファイルが読み込まれるようになりました。

Answer 2

参考になれば程度で回答をさせて頂きます。
当方AngularJS利用、jQuery利用(jqueryプラグインもいくつか利用)、onsenUI利用してますが、
バージョンが異なるので同一にはならないかもしれませんが、私はこれで腑に落とし込めました。

結論から申し上げますと、
デバッガーでの読み込み時は裏で色々動いているようで、
ons.readyのタイミングが遅いと感じました。

ただ、ビルドした際にはデバッグ周りの制約がなくなるため、
ons.readyのタイミングが早くなっている感覚です。

index.htmlのheaderにjQuery等の読み込みを記述していますが、
何も考慮しないと非同期でそれぞれが自由に読み込みをして依存関係が成り立たず、
「上手く動作しない。立ち上がらない。」
「立ち上がる時と立ち上がらない時がある」
ということが発生しました。

解決方法としては、
各読み込みファイルの一番頭にconsole.log('読み込みファイル名: XXXX.js');
としてコンソールに読み込み順を吐き出させ、確認するのが一番手っ取り早いです。

ビルドしたアプリでもAndroidならば、USBデバッグでChromeでコンソール確認、
デバッグができますので確認も用意かと思います。

私がやったことは、
1．読み込みファイルの先頭にconsole.log('読み込みファイル名: XXXX.js');
2．イベントリスナーの先頭にconsole.log('読み込みファイル名: XXXX.js'
+ 'イベントリスナー名：ZZZZZZ');

として該当部分に付けて前後関係を洗い出しました。
読み込み順がわかれば、index.html内のjs読み込み順と
jQueryのreadyとons.readyでの動作、（andularがあればangularもですが）
の整備だけで安定するようになりました。

以上ですが参考になれば幸いです。

Comments

[masa24]

_Remaさま
お返事いただきまして大変ありがとうございました！
こちら色々と試していたところ、前回まで使っていたプラグインがいくつか外れていることに気が付きました。そこで、それらを再度有効にし、ビルドしたところ、デバッグビルド・リリースビルドとも正常にファイルが読み込まれるようになりました。

自己解決していたことを記しておくべきでした。失礼いたしました。

[_Rema____]

プラグインが外れていることも思えば私もありましたｗ
解決できたのならばよかったです。

お役に立てず、申し訳ないです。。。
参考程度になれば幸いです。