Ionicあらまし@okayama-js

Transcript

1. kishisuke@okayama-js 2020.02.15 Ionic͋Β·͠

2. Ionicͱ͸ • WebϕʔεͷϞόΠϧΞϓϦ։ൃͷπʔϧ܈ • iOS/AndroidʹରԠͨ͠UIίϯϙʔωϯτ • ϑϨʔϜϫʔΫ(Angular/React/Vue.js)ͱͷ࿈ܞ • ϏϧυɺςετɺσϓϩΠΛߦ͏CLIπʔϧ •

   ωΠςΟϒΞϓϦ։ൃͷΤίγεςϜʢCordovaɺCapacitorɺPWAʣ • ࠷ۙɺIonic 5͕ϦϦʔε͞Ε·ͨ͠

3. ؆୯ʹݴ͏ͱ Webٕज़ͰεϚϗΞϓϦ࡞ΔͨΊ ͷ౷߹։ൃ؀ڥ

4. UIίϯϙʔωϯτ • iOS/Androidͷඪ४ͬΆ͍UIίϯϙʔωϯτΛఏڙ • UIΠϯλϥΫγϣϯ΋iOS/AndroidฒΈ • ಉྨʹOnsen UIɺFramework7ͳͲ • Ionicͷํ͕࠶ݱ౓ߴ͍ؾ͕͢Δ

5. αϯϓϧ • https://kfug2019.ionicframework.jp/ • http://localhost:8082/ʢhttps://github.com/ionic-team/ ionic-vue-conference-appʣ • https://ionicframework.com/jp/docs/components

6. ϑϨʔϜϫʔΫͱͷ࿈ܞ • AngularɺReactʢɺVue.jsʣʹରԠʢIonic4͔Βʣ • ίΞ࣮૷͸Web ComponentsʢCustom ElementsɺShadow DOMʣ • ݩʑAngularґଘͩͬͨͷͰɺAngular͕1൪࣮੷ɾ৘ใྔଟΊ

   • Vue.js͸Beta൛ʢVue 3.0଴ͪΒ͍͠ʣ • ֤ϑϨʔϜϫʔΫͷURLϧʔςΟϯάʢVue RouterͳͲʣʹରԠ

7. CLIπʔϧ • ϓϩδΣΫτͷ਽ܗ࡞੒ • ϩʔΧϧ։ൃαʔόʔͷ࣮ߦʢserveʣ • iOS/AndroidͰ࣮ߦ • ޙड़ͷCordova΍Capacitorͱ࿈ܞ

8. CordovaɺCapacitor • WebΞϓϦΛiOS/AndroidͰಈ࡞ͤ͞ΔͨΊͷϑϨʔϜϫʔΫ • WebView͕ϕʔε • ωΠςΟϒSDK΁ͷΞΫηε͸ϓϥάΠϯܦ༝ • Capacitor͸IonicνʔϜ͕։ൃͨ͠৽͍͠Cordova •

   CordovaͷϨΨγʔͳઃܭ͔Βͷ୤٫ • CordovaͷϓϥάΠϯ΋ରԠ͍ͯ͠ΔͳͲɺஈ֊తͳҠߦ͕Մೳ

9. PWA • ΞϓϦͬΆ͍ৼΔ෣͍Λ͢ΔWebΞϓϦ • ΠϯετʔϧͰ͖ΔʢWeb App Manifestʣ • ΦϑϥΠϯͰ΋ಈ͘ʢCache APIʣ

   • αʔόʔPush௨஌ʢPush APIʣ • Ionicతʹ͸ɺPWAߏ੒ͷςϯϓϨʔτͷఏڙͱɺUIɾϧʔςΟϯά໘ ͔Βαϙʔτ

10. ݸਓతʹࢥ͍ͬͯΔ͜ͱ • ࢓ࣄͰ͸Monaca+Onsen UIͰωΠςΟϒΞϓϦΛ։ൃ • े෼࣮༻త͕ͩɺPWAͳͲ΋ݟਾ͑Δͱɺଞͷख๏΋ ஌Γ͍ͨˠIonicྑͦ͞͏ • ʢ༨ஊʣผͷ੾Γޱͱͯ͠ɺFlutter΋ษڧத

11. Monacaͱͷൺֱ ࣌ؒ Ionicʢʹ౷Ұ͢ΔͳΒʣ Monaca UIίϯϙʔωϯτ Ionic Onsen UI͕ϝΠϯ ϑϨʔϜϫʔΫ AngularɺReactʢɺVueʣ

    AngularɺReactɺVue CLI Ionic CLI Monaca CLI ωΠςΟϒ؀ڥ CordovaɺCapacitorɺPWA CordovaʢɺPWAʣ Ϋϥ΢υ Ionic Appflow MonacaΫϥ΢υ ֶशίετ ߴΊ ௿Ί ϦϦʔεස౓ ଟΊ গͳΊ

12. αϯϓϧ࡞ͬͨͷͰ • ҰॹʹίʔυΛݟ·͠ΐ͏ʢVue.jsͰ͕͢ʣ • https://github.com/kishino/ionic-vue-sample • ࣮ߦํ๏ > git clone

    https://github.com/kishino/ionic-vue-sample.git > cd ionic-vue-sample > npm i > npm serve

13. ެࣜαΠτ • ݁ߏɺ೔ຊޠ༁͞ΕͯΔ • https://ionicframework.com/jp/docs/intro

14. Ͱ͸ɺ΋͘΋͘։࢝ʂ