html5とか勉強会#48 ionic
TRANSCRIPT
![Page 1: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/1.jpg)
HTML5とか勉強会#48 2014/5/26
Hybrid Mobile Apps Framework based AngularJS
![Page 2: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/2.jpg)
about me
AngularJS Japan User Group 管理人 html5j Web先端技術味見部 部長
金井 健一 フリーランス フロントエンド方面のお仕事
can_i_do_web facebook/can.i.do.web
![Page 3: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/3.jpg)
![Page 4: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/4.jpg)
agenda • Why Hybrid Apps ? • What’s ionic ? • Development • Conclusion
![Page 5: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/5.jpg)
http://ionicframework.com/
![Page 6: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/6.jpg)
http://drifty.com/
![Page 7: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/7.jpg)
【悲報】俺氏不要
• ドキュメント、割りと豊富です。 • 公式サイトみれば大体わかります。 • 難しいと想像できるのは AngularJS 部分です。
( ※今日はAngularJSには触れません )
![Page 8: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/8.jpg)
忙しい人向け
![Page 9: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/9.jpg)
Why Hybrid Apps ?
![Page 10: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/10.jpg)
Why Hybrid Apps ? • え?ネイティブでつくってるの!? • まだマルチプラットフォーム対応してるの!?
• それぞれプログラム覚えないといけないよね!?
• ソースコード各プラットフォームでバラバラだよね!?
• 開発コストもかかっちゃう!
• モバイルデバイスどんどん増えてきてるよ!大変だ!
![Page 11: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/11.jpg)
Why Hybrid Apps ? • そこでハイブリッドアプリでしょ! • HTML5でネイティブのような動きができるよ!
• ネイティブAPI にもアクセスできるよ!
• Web の開発環境でつくれるよ!
• みんなが大好きなHTML, CSS, JavaScript だよ!
![Page 12: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/12.jpg)
Why Hybrid Apps ?
ionic も例にもれず、いたって
ふつーでした。
![Page 13: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/13.jpg)
What’s ionic ?
![Page 14: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/14.jpg)
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
![Page 15: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/15.jpg)
見てみよう
![Page 16: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/16.jpg)
Development.
![Page 17: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/17.jpg)
Development • Node.js • npm cordova • npm ionic • + Sass • + android SDKs • + iOS Xcode • + Windows Phone • + Firefox OS
![Page 18: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/18.jpg)
Development
ちょっとだけやってみる
![Page 19: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/19.jpg)
Conclusion
デザインやUIコンポーネントが シンプルでキレイ
![Page 20: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/20.jpg)
Conclusion
足りないコンポーネントは (AngularJSを使って)
自分でつくらないといけない
![Page 21: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/21.jpg)
https://github.com/driftyco
![Page 22: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/22.jpg)
https://github.com/driftyco
![Page 23: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/23.jpg)
Community.
![Page 24: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/24.jpg)
http://forum.ionicframework.com/
![Page 25: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/25.jpg)
![Page 26: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/26.jpg)
![Page 27: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/27.jpg)
https://groups.google.com/forum/#!forum/angularjs-jp
![Page 28: HTML5とか勉強会#48 ionic](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05ef81a28ab4b2e8b465f/html5/thumbnails/28.jpg)
Thank you.