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