スマホアプリをAngular JSで作れるって知ってた？

モバイルでアプリ作れよって言われた若者が、ネイティヴアプリの知識がないため、持ち合わせのWebの知識で頑張るお話をします。

Transcript

1. εϚϗΞϓϦΛAngular JS Ͱ࡞ΕΔͬͯ஌ͬͯͨʁ Aug 30, 2015 ng-kyoto meetup#2 with
2. ࣗݾ঺հ @shin_v1 େֶӃ̍೥ੜ AngularJSྺ̍೥ ະ౿த ब৬׆ಈத
3. ࿩͢͜ͱ AngularJSΛॻ͚ΔΑ͏ʹͳͬͨΒ εϚʔτϑΥϯΞϓϦ΋࡞ΕΔΑ!? - ಋೖฤ -
4. ࿩͞ͳ͍͜ͱ ৄ͍͜͠ͱ
5. ޱʹͯ͠͸͍͚ͳ͍͜ͱ ී௨ʹωΠςΟϒΞϓϦॻ͚͹͑͑΍Μ Java͠ΖΑ Swift͠ΖΑ Obj-C͠ΖΑ
6. menu 1. Hybrid Appͱ͸ 2. ಈػ 3. ionicͱ͸ 4. ࡞ͬͯΈΑ͏ 5. ·ͱΊ
7. menu 1. Hybrid Appͱ͸ 2. ಈػ 3. ionicͱ͸ 4. ࡞ͬͯΈΑ͏ 5. ·ͱΊ
8. ϋΠϒϦουΞϓϦ Hybrid App Java Obj-C Swift JS Ұճॻ͚͹ͲͷσόΠεͰ΋ಈ͍ͯ͘ΕΔ!?
9. ϋΠϒϦουΞϓϦ Hybrid App ࣮ࡍʹϋΠϒϦουΞϓϦ Ͳ͏ಈ͍͍ͯΔͷ͔
10. ϋΠϒϦουΞϓϦ Hybrid App Ұྫ Application iOS Android Coding here Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript Angular: Framework ionic: Front-end SDK for developing hybrid mobile apps
11. ϋΠϒϦουΞϓϦ Hybrid App Ұྫ Application iOS Android Coding here Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript Angular: Framework ionic: Front-end SDK for developing hybrid mobile apps
12. ϋΠϒϦουΞϓϦ Hybrid App Ұྫ Application iOS Android Coding here Apache Cordova platform for building native mobile applications using HTML, CSS and JavaScript Angular: Framework ionic: Front-end SDK for developing hybrid mobile apps
13. ϋΠϒϦουΞϓϦ Hybrid App Ұྫ Application iOS Android Coding here Apache Cordova platform for building native mobile applications using HTML, CSS and JavaScript Angular: Framework ionic: Front-end SDK for developing hybrid mobile apps
14. ϋΠϒϦουΞϓϦ Hybrid App Ұྫ Application iOS Android Coding here Apache Cordova platform for building native mobile applications using HTML, CSS and JavaScript Angular: Framework ionic: Front-end SDK for developing hybrid mobile apps
15. menu 1. Hybrid Appͱ͸ 2. ಈػ 3. ionicͱ͸ 4. ࡞ͬͯΈΑ͏ 5. ·ͱΊ
16. ಈػ 1. AngularJSͰWebΞϓϦΛ࡞͍ͬͯͨ 2. ϞόΠϧΞϓϦ࡞ΕΑͬͯݴΘΕͨ 3. εϚϗωΠςΟϒΞϓϦͷ஌͕ࣝແ͠
17. menu 1. Hybrid Appͱ͸ 2. ಈػ 3. ionicͱ͸ 4. ࡞ͬͯΈΑ͏ 5. ·ͱΊ
18. v1.1.0 Ionic currently best supports iOS 7+ and Android 4.1+. AngularJS: “1.3.x” http://ionicframework.com/
19. खܰʹϞόΠϧ༻ͷσβΠϯΛ࢖͑·͢ AngularJS σΟϨΫςΟϒ͕༻ҙ͞ΕͯΔ ։ൃ؀ڥ͕උ͑ΒΕ͍ͯ·͢ ಛ௃
20. खܰʹϞόΠϧ༻ͷσβΠϯΛ࢖͑·͢ AngularJS σΟϨΫςΟϒ͕༻ҙ͞ΕͯΔ ։ൃ؀ڥ͕උ͑ΒΕ͍ͯ·͢ ಛ௃
21. खܰʹϞόΠϧ༻ͷσβΠϯΛ࢖͑·͢ http://ionicframework.com/docs/components/ αϯϓϧ͕ࡌ͍ͬͯΔͷͰ ͔ͦ͜Β࢖͍͖ͬͯ·͢
22. list
23. avatar
24. card
25. खܰʹϞόΠϧ༻ͷσβΠϯΛ࢖͑·͢ AngularJS σΟϨΫςΟϒ͕༻ҙ͞ΕͯΔ ։ൃ؀ڥ͕උ͑ΒΕ͍ͯ·͢ ಛ௃
26. AngularJS σΟϨΫςΟϒ͕༻ҙ͞ΕͯΔ http://ionicframework.com/docs/api/
27. Tabs
28. slide box
29. खܰʹϞόΠϧ༻ͷσβΠϯΛ࢖͑·͢ AngularJS σΟϨΫςΟϒ͕༻ҙ͞ΕͯΔ ։ൃ؀ڥ͕උ͑ΒΕ͍ͯ·͢ ಛ௃
30. ։ൃ؀ڥ͕උ͑ΒΕ͍ͯ·͢ ϒϥ΢β؀ڥͰσόοά ΤϛϡϨʔλͰಈ࡞νΣοΫ ࣮ػͰಈ࡞νΣοΫ
31. ϒϥ΢β؀ڥͰσόοά
32. ΤϛϡϨʔλͰಈ࡞νΣοΫ iOSͷ৔߹ xCode, iOS Simulator ͕ඞཁ
33. ࣮ػͰಈ࡞νΣοΫ Ionic View: upload͢Ε͹࣮ػ Ͱಈ࡞ͤ͞Δ͜ͱ͕Ͱ͖Δ
34. menu 1. Hybrid Appͱ͸ 2. ಈػ 3. ionicͱ͸ 4. ࡞ͬͯΈΑ͏ 5. ·ͱΊ
35. ࡞ͬͯΈΑ͏ ։ൃͷྲྀΕΛσϞ͠·͢
36. ࡞ͬͯΈΑ͏ 1. npm i -g cordova ionic 2. ionic start ngkyoto sidemenu 3. ionic platform add ios 4. ionic emulate ios 5. ionic build ios or Ionic Lab
37. ࡞ͬͯΈΑ͏ start demo
38. ࡞ͬͯΔ Cordova PluginsΛ࢖͏͜ͱͰBattery, Camera, Device Motion …etc ΋ Push Notification େมͦ͏
39. ࡞ͬͯΔ ͲΜͳΞϓϦ͕࡞ΕΔͷ͔ What are you building with Ionic? We want to know! http://forum.ionicframework.com/t/what-are-you-building-with-ionic-we-want-to-know/
40. menu 1. Hybrid Appͱ͸ 2. ಈػ 3. ionicͱ͸ 4. ࡞ͬͯΈΑ͏ 5. ·ͱΊ
41. ·ͱΊ • ionicͰͬ͘͞ͱWebͷٕज़ͰεϚϗͰ ಈ͘ΞϓϦΛͭ͘Ε·͢ • ෳࡶͳಈ͖Λ͢ΔΞϓϦ͸͠ΜͲ͍Ͱ͢ • AngularJSͬͯ͜Μͳͱ͜ΖͰ΋׆༂ • ωΠςΟϒͰॻ͚͹͍͍͡ΌΜ
42. Thank you…