#背景
とあるプロジェクトで、以下に挙げるような要件のサービスを立ち上げることになり、
OnsenUIを使ってみようということになりましたので、
今回は開発の概要や感想を書いていきたいと思います。
- スマホ用WEBサービス
- デザイン・UIはネイティブアプリライクなものにしたい
- ナビゲーションバー、タブバーのようなコンポーネント、スライドアニメーション等
- WEBで先行リリースするものの、後々はネイティブアプリとしてもリリースしたい
- Android, iOS
#OnsenUIについて
- HTML、JavaScript、CSSでネイティブアプリが作れる
- JavaScriptは、AngularJS(1系,2系)、React等のフレームワークから選択できる
- 当然WEBアプリとしても使える
- UIコンポーネントが用意されているので、ネイティブライクを簡単に実現できる
※公式はこちら
#開発の流れ
今回はAngularJSの1系を使ったので、ここにある通りです。
https://ja.onsen.io/v2/docs/guide/angular1/
-
monacaをインストール
$ npm install -g monaca
macでnpm使えないよーという方はこちらを -
プロジェクト作成
$ monaca create helloworld
種類を選択するよう指示が出るので、今回は
「Onsen UI and Angular 1」と「Onsen UI V2 Angular 1 Tabbar」を選択 -
プレビュー確認
$cd helloworld; monaca preview
⇒ブラウザが立ち上がって確認できます。なんと便利な...!! -
HTML作っていく
あとはとにかくコードを追加していく。
ドキュメントが日本語でわりとしっかりあるので、割愛...w
UIのサンプルとかはここで試したりできます。
http://ja.onsen.io.s3-website-us-east-1.amazonaws.com/tutorial/?framework=vanilla&category=Reference&module=list
#アプリのビルド
- Monaca Localkitをインストール
https://monaca.io/localkit.html - Monaca Localkit上でアプリの設定を行い、ビルドする
こんな感じです。
#一応サービスの紹介を
- サービス名：カブカブ
Web版
https://kabu2.com/lp2/index.html
※アプリ版はもうすぐ公開予定
#感想
###メリット・よかった点等
- Webのスキルがあれば、ネイティブアプリのスキルがなくてもアプリが開発できる
- アプリライクなUIを簡単に組み込める
- 工数の短縮
- 普通にWeb、iOS、Androidを作るよりはだいぶ早い（ものにもよりますが）
- カメラ、GPS、決済等、ネイティブ専用の機能もプラグインが豊富に用意されている
###デメリット・苦戦した点等
- 端末依存・ブラウザ依存
OnsenUIに限ったことでもないですが、iPhoneで表示が崩れる、Androidでうまく動作しない、といったことがちょこちょこありました。結果、部分的にiOS用、Android用にカスタマイズが必要といったことが必要。 - 学習コスト・引継ぎコスト
多少特殊な作りにはなっているので、知らない人が見たら最初はよく分からない。ただAngularJS習得済みであれば基本的には大丈夫。自分はAngular初だったので苦戦しました。。。