HTML5とか勉強会#48のスライドです。

1. HTML5とか勉強会#48
2014/5/26
Hybrid Mobile Apps Framework based AngularJS

2. about me
AngularJS Japan User Group 管理人
html5j Web先端技術味見部 部長
金井 健一
フリーランス
フロントエンド方面のお仕事
can_i_do_web
facebook/can.i.do.web

4. agenda
• Why Hybrid Apps ?
• What s ionic ?
• Development
• Conclusion

5. http://ionicframework.com/

6. http://drifty.com/

7. 【悲報】俺氏不要
• ドキュメント、割りと豊富です。
• 公式サイトみれば大体わかります。
• 難しいと想像できるのは AngularJS 部分です。
( ※今日はAngularJSには触れません )

8. 忙しい人向け

9. Why Hybrid Apps ?

10. Why Hybrid Apps ?
• え？ネイティブでつくってるの！？
• まだマルチプラットフォーム対応してるの！？
• それぞれプログラム覚えないといけないよね！？
• ソースコード各プラットフォームでバラバラだよね！？
• 開発コストもかかっちゃう！
• モバイルデバイスどんどん増えてきてるよ！大変だ！

11. Why Hybrid Apps ?
• そこでハイブリッドアプリでしょ！
• HTML5でネイティブのような動きができるよ！
• ネイティブAPI にもアクセスできるよ！
• Web の開発環境でつくれるよ！
• みんなが大好きなHTML, CSS, JavaScript だよ！

12. Why Hybrid Apps ?
ionic も例にもれず、いたって
ふつーでした。

13. What s ionic ?

14. What s ionic ?
• Performance obsessed
• DOM操作を最小限に
• hardware accelerated
• jQuery 不使用
• AngularJS & Ionic
• serious app development
• Native focused
• Beautifully designed
• Built by nerds (like you)
• Cordova/Phonegap

15. 見てみよう

16. Development.

17. Development
• Node.js
• npm cordova
• npm ionic
• + Sass
• + android SDKs
• + iOS Xcode
• + Windows Phone
• + Firefox OS

18. Development
ちょっとだけやってみる

19. Conclusion
デザインやUIコンポーネントが
シンプルでキレイ

20. Conclusion
足りないコンポーネントは
（AngularJSを使って）
自分でつくらないといけない

21. https://github.com/driftyco

22. https://github.com/driftyco

23. Community.

24. http://forum.ionicframework.com/

27. https://groups.google.com/forum/#!forum/angularjs-jp

28. Thank you.