Onsen UIはいくつかの処理を自動的に最適化を行いますが、時には無効にしたい場合もあります。無効にするには、以下の作業を行う必要があります:
オートスタイルを無効にする
ons.disableAutoStyling()を呼び出すことで、iOSとAndroidのオートスタイル機能を無効にできます。ただし、この関数はonsenui.jsを呼び出した直後に呼び出してください。disable-auto-styling属性を用ると特定のコンポーネントに対してオートスタイルを無効にできます。
テストのためにアニメーションを無効にしたい
ons.disableAnimations()関数を呼び出してください。
iOS 7以上でステータスバーの補完を無効にしたい
onsenui.jsを呼び出した直後にons.disableAutoStatusBarFill()関数を呼び出してください。
Android端末で戻るボタンの制御を無効にしたい
ons.disableDeviceBackButtonHandler()を呼び出してください。
オートスタイル機能を使うと、iOSではフラットデザイン、Androidではマテリアルデザインを表示します。オートスタイルはons.disableAutoStyling()関数を呼び出すことで無効にし、すべてをiOSのデザインで表示できます。その場合でも、コンポーネントにmaterial属性を指定することで、マテリアルデザインを表示することができます。
onsenui.jsを読み込んだ直後にons.platform.select(‘android’)やons.platform.select(‘ios’)を呼び出すことで、実行中のプラットフォームを切り替えられます。ただしこの場合はons.platform.isAndroid()といったプラットフォームを扱う他の機能が影響を受けます。
開発中はブラウザのDevToolsを用いてユーザーエージェントを切り替えることで、スタイルの更新を確認していくと良いでしょう。たとえば、”iPhone 5”を選ぶとフラットデザインとなり、”Nexus 5”を選ぶとマテリアルデザインで表示されます。別の方法として、URLに?platform=androidや?platform=iosといった形でクエリパラメータを加えることでも外見の切り替えができます。
デフォルトの設定では、Onsen UIはFont Awesome、Ionicon、Material Design Iconの3つのアイコンパックをonsenui.cssファイルの中でインポートします。前述の3つのアイコンパックに含まれないアイコン名を指定すると、そのアイコンはFont Awesomeのアイコンと見なされ、fa-接頭辞が自動的に追加されます。しかし、バージョン2.8.0からはons.disableIconAutoPrefix()メソッドをonsenui.jsの読み込み直後に実行することでfa-接頭辞の自動追加を無効にすることができます。カスタムのアイコンを追加するには、fa-接頭辞の自動追加を無効にした後に、手動でカスタムのCSSフォントファイルをインポートしてください。関連情報としてアプリサイズの削減#アイコンパックの除去もご覧ください。
<ons-icon icon="my-custom-icon"></ons-icon>のようなカスタムアイコンを追加すると、myクラスが要素に追加されます。これにより、共通の接頭辞myを持つカスタムアイコンを.myセレクタでまとめて選択することができます。例えば、ons-toolbar-button要素内に入れたカスタムアイコンのline-heightがずれてしまったような場合は、以下のCSSルールにより調整することができます:
.toolbar-button .my { line-height: ...; }
もし新しく作成しようとしているページがさらに他のファイルを含んでいる場合（タブバーを含むページを表示する場合など）、多くのリクエストが発生するために、ページ遷移が遅れる可能性があります。これを防ぐにはons.preload([…])メソッドを使って事前にリクエストをしておき、テンプレートをキャッシュすると良いでしょう。
ons-scroller はOnsen UIバージョン1で提供されていた、スクロールを可能にするためのディレクティブでした。バージョン2ではこのコンポーネントは廃止されました。代替として、divタグを設置し、下記のCSSプロパティを適用することで同じ動作を再現できます。
.scroller {
display: block;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
-ms-scroll-snap-type: mandatory;
}
他の手段としては、全画面でスクロールする必要がない場合はons-pageを用いることもできます。もしくは、ons-carouselでauto-scroll属性を指定しない方法もご利用いただけます。
Set/Map is not defined - Can’t find variable Set/Map
実行中の環境に必要なJavaScript機能が含まれていません。Crosswalkプロジェクトを使うか、Polyfillを組み込んでください。
MutationObserver is not defined
実行中の環境に必要なJavaScript機能が含まれていません。Crosswalkプロジェクトを使うか、Polyfillを組み込んでください。
pushPage/popPage is already running
他のプッシュやポップ操作が行われています。これはpushPageやpopPageを二重で動かす場合に発生します。二重で動かしたい場合はoptions.callbackや返されるPromiseを使って、1つめの操作が完全に終わるまで待機させてください。そうでない場合は、このエラーを無視しても大丈夫です。
Splitter side is locked
Splitterのサイドメニューの出し入れが、最初のアニメーションが終わる前に行われた場合に発生します。良くあるケースとして、スプリッターのメニューをドラッグしながら、スプリッターの表示を動的に切り替えようとした場合に発生します。このエラーは無視しても問題ありません。
Cannot read property … of null
タイミングも問題で、DOM要素が存在する前にその要素にアクセスしようとしているケースが考えられます。ons-page内のDOM要素にアクセスする場合は、DOMがアタッチされるまで待機する必要があります（詳細はページのライフサイクルを参照してください）。
旧ブラウザーとデバイスのサポートに記載の通り、一部の新しい機能が搭載されていないブラウザーではOnsen UIが正しく動作しない可能性があります。特に、Onsen UIのチームはWebkitとそれに近いプラットフォームに限ってテストをしています。Onsen UIを下記の環境で動作させる場合は、最新のHTML5標準をサポートするためのPolyfillを追加で導入する必要があります。
JestやjsDom、PhantomJSといったヘッドレステストを行うためのツールと組み合わせる場合、Onsen UIの動作に必要な最新のWeb APIと、Custom Elementsの対応がされていることを確認してください。2017年初頭においては、上記のテストツールはまだ十分に対応されていません。
ヘッドレストテストを実施する場合は、KarmaとChrome Headless（v59以降）の組み合わせを推奨します。