Ionicあらまし@okayama-js

 Ionicあらまし@okayama-js

774a937b74096e82576b37678d00aeca?s=128

Daisuke Kishino

February 15, 2020
Tweet

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. Ͱ͸ɺ΋͘΋͘։࢝ʂ