Onsen UI for Vue 導入してみた

Slide 1

Slide 1 text

Onsen UI for Vue ಋೖͯ͠Έͨ 2019/2/4 JS΍ΒφΠτvol.4 ʂ େ௩ਅݴ

Slide 2

Slide 2 text

ࣗݾ঺հ ɾ໊લɹɿେ௩ ਅݴʢMakoto Otsukaʣ ɾ໊͋ͩɿ͠Μ͛Μ ɾTwitterɿ@mametra ɾॴଐɹɿ߹ಉձࣾϊϚυϦ ɾεΩϧɿLaravel, Vue.js ɾझຯɹɿΩϟϯϓ, ϑΣε

Slide 3

Slide 3 text

։ൃதͷγεςϜ ɾҩྍܥγεςϜ iOS/AndroidΞϓϦ Ϣʔβ޲͚ WebΞϓϦ පӃ/ຊ෦޲͚

Slide 4

Slide 4 text

࢖༻ٕज़ ᶃϢʔβ޲͚ʢiOS/AndroidΞϓϦʣ ɹɾHTML, CSS, JavaScript, Vue.js ɹɾOnsenUIʢUIϑϨʔϜϫʔΫʣ ɹɾCordovaʢϋΠϒϦουΞϓϦ։ൃPFʣ ɹɾFirebaseʢAuthentication, Cloud FireStore, ͋ͱͨͿΜFunctionsʣ ᶄපӃ/ຊ෦޲͚ʢWebΞϓϦʣ ɹɾHTML, CSS, JavaScript, Vue.js ɹɾFirebaseʢAuthentication, Cloud Firestore, Hostingʣ

Slide 5

Slide 5 text

࢖༻ٕज़ʢiOS/AndroidΞϓϦʣ ϑϩϯτΤϯυ )5.- $44 7VFKT 0OTFO6* ϋΠϒϦουΞϓϦ J04ΞϓϦ "OESPJEΞϓϦ $PSEPWB Ϗϧυ όοΫΤϯυ 'JSFCBTF %BUB #BTF

Slide 6

Slide 6 text

બఆཧ༝ ᶃCordova ɹɾ༧ࢉͷؔ܎্ɺiOSͱAndroidΛ֤ʑ։ൃͰ͖ͣ ɹɾωΠςΟϒΞϓϦ։ൃऀෆࡏ ɹɾWebʢHTML,CSS,JavaScriptʣٕज़Ͱ࣮૷Մೳ ɹɾReact Native΍Flutter͸ෑډ͕ߴͦ͏… ɹ ᶄOnsenUI ɹɾVue.jsʹରԠ ɹɾυΩϡϝϯτ͕೔ຊޠରԠ ᶅFirebase ɹɾ։ൃ଎౓up͕ݟࠐΊΔ ɹɾಋೖاۀ͕૿͓͑ͯΓࢀߟࢿྉ͕͋Δ

Slide 7

Slide 7 text

OnsenUIͱ͸ ɹɾϞόΠϧΞϓϦʹಛԽͨ͠UIϑϨʔϜϫʔΫ ɹɾωΠςΟϒͷΑ͏ͳUIΛఏڙ ɹɾ༝དྷ͸ SPA -> Թઘ -> Onsen ͔Β͖ͨΒ͍͠ ɹɾhttps://ja.onsen.io/demo/

Slide 8

Slide 8 text

iOS Android ࣮ߦ͢Δ୺຤ʹԠͯ͡ελΠϧΛௐ੔ͯ͘͠ΕΔ

Slide 9

Slide 9 text

Onsen UI for Vue ͱ͸ ɹɾ2017೥7݄ Vue.jsʹରԠ ɹɾv-ons-*Ͱ͸͡·Δίϯϙʔωϯτ ɹɾ͢΂ͯͷAPI͸Vue޲͚ʹΧελϚΠζ

Slide 10

Slide 10 text

ᶃηοτΞοϓ͢Δ https://ja.onsen.io/vue/

Slide 11

Slide 11 text

ᶄ࣮૷͢Δ https://ja.onsen.io/vue/

Slide 12

Slide 12 text

ิ଍ ɾIonic ͕ Vue.js ʹରԠʢα൛ʣ IonicɺVue.jsΠϯςάϨʔγϣϯͷαϦϦʔεΛൃදʢhttps://www.infoq.com/jp/news/ 2018/12/ionic-vue-integration-alpha#.XBHW6TGs7yU.twitterʣ ɾIonic ͷํ͕UIίϯϙʔωϯτ͕ଟ͍Β͍͠

Slide 13

Slide 13 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ