ionic を使って HTML hybrid モバイルアプリを作る話。 デモ主体なのであまり中身が無いですが、ionic はプロジェクトの scaffolding だけじゃなくて、デバイス周りまで含めたトータルソリューションなので早い、という話。

1. building HTML hybrid app
with ionic
@bonar

2. Nakano Kyohei
Software Engineer
Co-founder at @atmoph
twitter: @bonar
facebook: nakano.kyohei

5. building HTML hybrid app
with ionic

6. Frontend != Web Service

7. HTML hybrid app

8. HTML Hybrid app
• Web技術を使って作られたモバイルアプリ
• HTML/CSS/JavaScript で UI を作り、WebView や
コンポーネントブラウザ上で動かす
• ネイティブの機能は JavaScript 経由で呼び出す

12. building HTML hybrid app

13. Frontend Chaos
Package management
• npm
• bower
• component
Task runner
• grunt
• gulp
altJS
• CoffeeScript
• TypeScript
JavaScript Framework
• jQuery
• AngularJS
• vue.js
• backbone.js….
CSS Style
• SASS
• LESS
CSS Framework
• bootstrap
• PURE
• Foundation...

15. hybrid app 特有の課題
• UI のプロトタイピング
• デバイス実機上（様々な解像度）での確認
• アプリストアに提出出来るネイティブアプリの生成

17. ionic
• AngularJS based UI Framework (CSS/JavaScript)
• UI パーツは directive として表現される
• Apache Cordova を同梱して iOS/Android アプリも作れる
• ionic コマンドを使った雛形生成
• ionic view アプリを使った実機確認

18. demo
1. UI をざっとウェブ上で作る
2. ローカルにチェックアウト
3. 開発 & テスト
4. デバイスにダウンロードして確認

19. $ ionic platform add (ios|android)
$ ionic build ios
build native app

21. ionic
• HTML hybrid app のトータルな開発フローを支援する
• プロジェクトの雛形を簡単に生成
• ionic creator を使ってウェブ上でざっとUIを作る
• ionic view でデバイス上での見た目を確認
• アイディアを体験できる形まで早く持って行く事ができる
• ionic の UI や AngularJS 自体が好きじゃないと辛いかも

22. Thank you
follow @bonar