Monaca cloud IDE 新規プロジェクトのOnsen UI js Navigationが実機デバッグで稼働しない

Question

###前提・実現したいこと
Monaca cloud IDEで新規プロジェクトに「Onsen UI js Navigation」を使用、
一切の変更を加えることなく、実機デバッグをすると次のメッセージが出て稼働しない。
###発生している問題・エラーメッセージ

Uncaught ReferenceError: Set is not defined www/lib/onsenui/js/onsenui.min.js: 3

###該当のソースコード

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
Monaca Onsen UI js Navigation

Answer 1

Onsen UI 開発チームの n_matagawa と申します。

ご報告の症状は「Onsen UI 2.2.4 以下を Android 5.0 以下で使用」すると発生するもので、Onsen UI 2.2.5 にて修正済みです。

---

core: Polyfill Set and Map in order to support old browsers (#1967).

https://github.com/OnsenUI/OnsenUI/blob/master/CHANGELOG.md#v225

---

Monaca の状況を確認したところ、新規作成プロジェクトに含まれる Onsen UI のバージョンが 2.2.4 以下のものになっておりましたので、先程 2.3.2（最新版）へのバージョンアップを行いました。

つきましては、 Onsen UI V2 JS Navigation プロジェクトの再作成をお試しください。
よろしくお願いいたします。

Comments

[opop]

ご回答ありがとうございました。この質問のエラーメッセージは、出なくなりましたが、ほかのエラーで稼働できない状態です。

[opop]

Custom Elements: Element#attachShadow was not patched www/lib/onsenui/js/onsenui.min.js: 20

Uncaought ReferenceError: MutationObserver in not defined www/lib/onsenui/js/onsenui.min.js: 19

[asial-matagawa]

「MutationObserver is not defined」は Android 4.3 以下で Onsen UI を利用すると発生します。
Android 4.x 系のサポートが必要な場合は、「Crosswalk プラグイン」を追加することで Android 4.x 系でも安全に Onsen UI を動作させることができます。
「Crosswalk プラグイン」の導入方法については以下の公式マニュアルをご覧ください。
https://docs.monaca.io/ja/reference/cordova_6.2/crosswalk/

よろしくお願いいたします。

[opop]

ご回答ありがとうございました。

実機デバッグは、IO8以上でないと稼働しないのでしょうか。
「Onsen UI js Navigation」は、AndroidとiPhoneでは、デザイン（色やフォントサイズ）が変わりますが、
iPhoneの方にAndroidも合わせたいのですが、どうすればよいでしょうか。
よろしくお願いいたします。

[asial-matagawa]

>実機デバッグは、IO8以上でないと稼働しないのでしょうか。

Monaca デバッガーは https://docs.monaca.io/ja/ に記載されていますように、iOS 7 以下では稼働しません。

>「Onsen UI js Navigation」は、AndroidとiPhoneでは、デザイン（色やフォントサイズ）が変わりますが、
iPhoneの方にAndroidも合わせたいのですが、どうすればよいでしょうか。

Android と iPhone でデザインが変わるのは Onsen UI の「自動スタイリング」という機能によるものです。
document.addEventListener('init', function(event) {
の行の前に
ons.disableAutoStyling();
と書くことで iPhone の方のデザインに統一することができます。
（参考: https://ja.onsen.io/v2/docs/js/ons.html ）

また、追加でご質問される場合は teratail に別の質問を新しく立てていただけると幸いです。よろしくお願いいたします。

[opop]

ご回答ありがとうございました。
上記件、解決いたしました。