Angular+Onsen UIでスマートフォン向けサイト作成

Onsen UIを使用すると手軽に綺麗なページを作成できます。ただし、Angularと合わせて使用する際に、いくつか気になる点があったので、その辺りについて記載します。

前提

Angular4、Onsen UI 2.7.0を使用しています。 iOS11のSafari、Android5、7のChromeで確認しています。 Webでの運用でありスマートフォン向けサイトとPC向けサイトは動的に(シームレスに)切り替えません。基本的な環境構築はOnsen UIのページのAngular2+を参照してください。

AngularのLazy Loading

現在、PC向けサイトはLazy Loading有の環境で運用しています。 Onsen UIを使用したサイトもLazy Loading有での構築を試みてみましたが、Lazy Loadingを挟んで複数箇所でOnsenModuleをimportが必要となる箇所でエラーとなります。子供側のNgModuleでもimportできるようにOnsenModuleに手を加えれば使えるかもしれませんが、LazyLoadingが必要な規模のWebで使用したい場合、Angular Material等の別の手段を選択した方がよさそうです。

ons-carousel内の縦スクロール

横向きのcarousel内で縦向きのスクロールを実現したい場合、スクロールしたい<ons-carousel-item>にstyle="overflow-y: scroll;"を設定すると動作しました。

レイアウトの固定

各OSのガイドラインに合わせる必要がなければ、下記コードを最初に表示するページに埋め込むことで、表示形式を固定できます。引数についてはons.platformのAPIを参照してください。

import * as ons from 'onsenui';

export class AppComponent {
  constructor() {
    ons.platform.select('android');
  }
}

アニメーション終了後のスタイル

iOSのSafariでのみ(おそらく)アニメーション終了時にスタイルが消えることがありました。(PC版ChromeでiPhone6表示で再現することもあります。) AngularのDirectiveでRenderer2を使用してstyleを設定している箇所の一部のみ、アニメーション終了時にstyleが消えるようです。同じページ、同じDirectiveでも消える箇所と消えない箇所があります。微妙ですが、classを設定するように変更すれば回避できます。

その他、サンプルで見当たらなかったこと

<ons-dialog>などをComponent側から制御する場合、@ViewChild、nativeElement経由でOnsenUIのjavascript(WebComponent)のAPIにアクセスしています。
<ons-select>はAPIにchangeイベントが定義されていないので、 <select>にclass=”select-input select-input–material”を設定して表示しています。レイアウト切替が必要な場合にclassを切り替える必要がありますが、イベントを取りたい要素については<ons-*>を使用しない方が楽かもしれません。

この記事を書いた人 : 井上貴博

その他のスタッフブログ:

一覧へ戻る

Angular+Onsen UIでスマートフォン向けページ作成