Onsen UI でアプリケーション作ってみた

2016.04.23 フロントエンド モバイルアプリ勉強会✕

自己紹介• 牧 昂拡• 株式会社グラッドキューブ勤務• フルスタックエンジニアもどき• 最近 Polymer 勉強中

OnsenUI とは？

• HTML5 UI フレームワーク• Monaca に標準装備されている• AngularJS と連携している• 最近 v2.0bata がリリースされてた• モバイルハイブリットアプリ向け UIFW• Web でもちゃんと使えるよ！←今日ココ

特徴• AngularJS, jQuery• Cordova, PhoneGap をサポート• CustomElements 対応• 他の FW に比べ Web に順応しやすい• クラスの命名規則は結構特殊

ほかのモバイル FW

• jQuery Mobile• Ionic• famo.us

Getting Started• Web

sudo nam i -g bowerbower i onsenui

• Cordova, Monaca は割愛します

実際に作ってみた• github

$ git clone https://github.com/takahiromaki/onsen-ui-sample.git$ npm i && gulp build && node index.js

• Docker$ docker pull taka0225/onsen-ui-sample$ docker run --name onsen-sample -p 3333:80 -d -t taka0225/onsen-ui-sample

作った感想• クラスの命名規則が苦手（ CSSFW のみ）• モック作りたいなら CSSFW 部分だけ使うだけで十分• それっぽいアプリの見た目は 2 時間もあれば作れる• 国産 FW なのでドキュメントが日本語（重要）• AngularJS やってなくてもとっつきやすい• AngularJS やってるともっとやりやすい

ご静聴ありがとうございました。