Improve this

FAQとトラブルシューティング

デフォルトの機能を無効にしたい

Onsen UIはいくつかの処理を自動的に最適化を行いますが、時には無効にしたい場合もあります。

特定のスタイルを強制するには

オートスタイル機能を使うと、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といった形でクエリパラメータを加えることでも外見の切り替えができます。

新しいページの表示が遅い

もし新しく作成しようとしているページがさらに他のファイルを含んでいる場合(タブバーを含むページを表示する場合など)、多くのリクエストが発生するために、ページ遷移が遅れる可能性があります。これを防ぐにはons.preload([…])メソッドを使って事前にリクエストをしておき、テンプレートをキャッシュすると良いでしょう。

ons-scrollerについて

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-carouselauto-scroll属性を指定しない方法もご利用いただけます。

よくあるエラーメッセージ

古いブラウザーのサポート

旧ブラウザーとデバイスのサポートに記載の通り、一部の新しい機能が搭載されていないブラウザーではOnsen UIが正しく動作しない可能性があります。特に、Onsen UIのチームはWebkitとそれに近いプラットフォームに限ってテストをしています。Onsen UIを下記の環境で動作させる場合は、最新のHTML5標準をサポートするためのPolyfillを追加で導入する必要があります。

ヘッドレステスト

JestjsDomPhantomJSといったヘッドレステストを行うためのツールと組み合わせる場合、Onsen UIの動作に必要な最新のWeb APIと、Custom Elementsの対応がされていることを確認してください。2017年初頭においては、上記のテストツールはまだ十分に対応されていません。

ヘッドレストテストを実施する場合は、KarmaとChrome Headless(v59以降)の組み合わせを推奨します。