Onsen UI 2でアプリを作ってわかったこと

半年ぐらい前から作っていたアプリがようやくリリースできた。

取り急ぎOnsen UI 2を使った感想を書いてみる。

Onsen UI 2

導入は非常に簡単。
ページ遷移はプッシュ/ポップの概念でIonic 1.xより簡単。
Web Componentsに沿っていて美しい。

AngularJS依存でなくなったのでフレームワークの選択の幅が広がった。

Angular v2+、React、さらにはVue.jsに対応している。そんなに手を広げて大丈夫か？
もちろん普通のJSで書いてもOK（オススメはしない）。

日本語対応なので「英語はちょっと...」な人も安心。

Onsen UIの1系を仕事で使っていたので、ひとまずAngularJSバインディングを選択。
※ 今ならvue-onsenuiやngx-onsenui等もっと速いものを使った方が良い
※ 2017/11/22 公式はVue.jsがお気に入り。今から始めるならVue.jsでも悪くない

特に意識しなくてもモダンなアプリの見た目になる。非デザイナーには心強い。
2からはMaterial Design対応。自動でテーマが切り替わったのには感動した。

実際に使いだしたのはBeta.7から。
Beta.9からのバグは本当にきつかった。何度かIonicが頭をよぎった。
最終的にアプリに使ったのは現行の2.0.0ではなく、「RC.17」
※スライディングメニュー系のバグがRC.18以降で出るようになった
※↑2.0.1で修正。しかしons-carousel-itemで下記のバグが出るようになったorz

めんどくさがりな性格が災いしてリリースまでは半年かかったが、プロトタイプは実は2週間ぐらいでできていた。iOS/Android両対応のアプリをこのスピードで作れるのはハイブリッドの良いところ。

問題点

ons-carouselはバグが多い
・スワイプイベントが競合するのでons-splitter-sideと併用できない。
　↑ons-sliding-menuで回避できる。要はカルーセルにオーバーレイしなければOK。
・「カレンダー部分をカルーセルにできたらカッコいいんじゃね？」と思って手を出したら、インデックス強制初期化バグに見事にハマった（現在は解決済み）。一応バグ発生は検知できるため対応可能（めんどくさい）。

Onsen UIは速い。AngularJSが少し足を引っ張っている感じ。
適宜データを削ったり、単方向バインディングにして高速化を図るのが良い。

AngularJS 1.5で導入されたComponentで作ると画面遷移アニメーション（スライド）が正常に作動しない。

ons-popover内でng-clickが使えるといつから錯覚していた？
※ ons-popoverやons-dialogは別スコープになるため注意（parentScopeで解決できる）

CSSのテーマローラにはバグがある。手で修正したほうが安全。
※ 2017年12月からGitHub上に動きが...近いうちVerUpか？

ons.notificationのボタンラベルの配置はiOSとAndroidで 逆 になる。

ons-page内にstyleを書いてはいけない。ステータスバーに変な空白ができる。
必ずCSSで読み込ませること。 ※ 2.4.0で修正されたもよう

Androidで動かした場合、タップ時のリップルエフェクトが少し重い。

iPhoneで動かした場合、ons-pull-hookを入れるとリストがガクガクする。
※ 2.6.0で修正、長い戦いだった

ionicと違ってselectタグには対応していない。 ※2.1.0から対応
ons-selectを使う場合はレイアウトに注意。縦に並べるとフォーカスがずれる事がある。iOSのUIを参考にons-list-itemにしてページ遷移で「選択」を実装するのが良いかも。

公式のリファレンスが全てと思ってはいけない。
「pushPageで渡された引数を遷移後のページで取得するにはどうするか？」ぜひ調べてみてほしい。

RC.16からページオブジェクトを任意に破壊できなくなった。
つまり、ページを一つ飛ばしてpopPageするといったことができなくなった。割と痛い。 v2.0.5で修正

結局Onsen UI 2は使えるのか？

あまり凝ったUIにしなければ使えると思う。

慣れていない状態でons-splitter + ons-tab + ons-navigatorとか欲張ると高確率で死ぬので注意。ons-pull-hookはしばしば実機での画面ちらつきが報告されている。採用は実機で確認してから。

2.0.0がリリースされたがAngularJSバインディングにはまだ罠が多い。
AngularJSと一緒に使うなら今のところRC.17が正解。
最近は2.7系でもいいんじゃないか、という気がしてきた。

その他

開発初期はMonacaを使用。アシアルさんありがとう。
Onsen UIをすぐ試せるし、ネットさえあればどこでも使えるので超絶便利。

アイコンやスプラッシュスクリーンを解像度毎に生成してくれるのは助かった。
更にデバッガアプリはPhoneGapのやつより高機能。

無料アカウントではローカル通知、広告、アプリ内課金、ソース暗号化が使えない。お金がなかったので、Monacaである程度作っておいてPhoneGapに乗り換えるという方法をとった。アシアルさんごめんなさい。