building HTML hybrid app with ionic

Transcript

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 w 8FCٕज़Λ࢖ͬͯ࡞ΒΕͨϞόΠϧΞϓϦ
   w )5.-$44+BWB4DSJQU
   Ͱ
   6*
   Λ࡞Γɺ8FC7JFX
   ΍ ίϯϙʔωϯτϒϥ΢β্Ͱಈ͔͢
   w ωΠςΟϒͷػೳ͸
   +BWB4DSJQU
   ܦ༝Ͱݺͼग़͢
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 ಛ༗ͷ՝୊ w 6*
    ͷϓϩτλΠϐϯά
    w σόΠε࣮ػ্ʢ༷ʑͳղ૾౓ʣͰͷ֬ೝ
    w ΞϓϦετΞʹఏग़ग़དྷΔωΠςΟϒΞϓϦͷੜ੒
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