HTML5とか勉強会#48 2014/5/26

Hybrid Mobile Apps Framework based AngularJS

about me

AngularJS Japan User Group 管理人 html5j Web先端技術味見部 部長

金井 健一 フリーランス フロントエンド方面のお仕事

can_i_do_web facebook/can.i.do.web

agenda • Why Hybrid Apps ? • What’s ionic ? • Development • Conclusion

http://ionicframework.com/

http://drifty.com/

【悲報】俺氏不要

• ドキュメント、割りと豊富です。 • 公式サイトみれば大体わかります。 • 難しいと想像できるのは AngularJS 部分です。

( ※今日はAngularJSには触れません )

忙しい人向け

Why Hybrid Apps ?

Why Hybrid Apps ? • え？ネイティブでつくってるの！？ • まだマルチプラットフォーム対応してるの！？

• それぞれプログラム覚えないといけないよね！？

• ソースコード各プラットフォームでバラバラだよね！？

• 開発コストもかかっちゃう！

• モバイルデバイスどんどん増えてきてるよ！大変だ！

Why Hybrid Apps ? • そこでハイブリッドアプリでしょ！ • HTML5でネイティブのような動きができるよ！

• ネイティブAPI にもアクセスできるよ！

• Web の開発環境でつくれるよ！

• みんなが大好きなHTML, CSS, JavaScript だよ！

Why Hybrid Apps ?

ionic も例にもれず、いたって

ふつーでした。

What’s ionic ?

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

見てみよう

Development.

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

Development

ちょっとだけやってみる

Conclusion

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

Conclusion

足りないコンポーネントは （AngularJSを使って）

自分でつくらないといけない

https://github.com/driftyco

https://github.com/driftyco

Community.

http://forum.ionicframework.com/

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

Thank you.