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といった形でクエリパラメータを加えることでも外見の切り替えができます。

カスタムのアイコンを使いたい

デフォルトの設定では、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について

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以降)の組み合わせを推奨します。