Webの未来を切り開くIonic Framework/wep-pwa-ionic-framework

by Masahiko Sakakibara

Slide 1

Slide 1 text

Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ  ୅දཧࣄɹࡗݪণ඙ 8FCͷະདྷΛ੾Γ։͘*POJD'SBNFXPSL

Slide 2

Slide 2 text

ࣗݾ঺հ ࡗݪণ඙ Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ  ݚڀॴ୅දཧࣄ Ұൠࣾஂ๏ਓΤϦΞɾ  ΠϊϕʔγϣϯɾΞϥΠΞϯε$50 ञॲ͔͖͞  ళओ ຊ೔ͷϋογϡλά  #ionic_jp #cybozutech

Slide 3

Slide 3 text

)5.-ΞϓϦΛͭ͘ΔͨΊͷશ෦ ೖΓϑϨʔϜϫʔΫ w "OHVMBSʢ(PPHMFʣ͕౔୆ w λεΫϥϯφʔɺϥΠϒϦϩʔυ ͳͲͷ૯߹։ൃ؀ڥ͕σϑΥϧτ Ͱ༻ҙ͞Ε͍ͯͯ w $PSEPWBɺ18"ʹσϑΥϧτରԠ w #PPUTUSBQͷΑ͏ͳ6*ίϯϙʔω ϯτΛ࣋ͪ *POJD'SBNFXPSLͱ͸

Slide 4

Slide 4 text

ςοΫϑΟʔυʢ0QFO8FC5FDIOPMPHZ$PSQʣ

Slide 5

Slide 5 text

)JCFFʢ&YDJUF+BQBO$P -UEʣ

Slide 6

Slide 6 text

.D%POBMET5ÛSLJZFʢ"OBEPMVʜ-UEŞUJʣ

Slide 7

Slide 7 text

$ npm install -g ionic cordova <= Ionicをはじめる準備（CLI） $ ionic start ProjectName <= プロジェクトを作成    $ ionic serve <= 開発開始 ͸͡Ίํ

Slide 8

Slide 8 text

<֮͑ํ>VTFDBTF͔ΒֶͿ$POQPOFOUT IUUQJPOJDUFBNHJUIVCJPJPOJDDPOGFSFODFBQQXXX

Slide 9

Slide 9 text

͞Βʹ JPOJDDPSEPWBCVJMEJPTcBOESPJE w εϚϗΞϓϦͱͯ͠഑෍Մೳ w ϦιʔεͰෳ਺ΞϓϦϦϦʔ ε w J5VOFT4UPSF(PPHMF1MBZ 8JOEPXT1IPOF w &MFDUSPOͰίϯύΠϧ͢Δͱ σεΫτοϓΞϓϦ΋ɻ $PSEPWBͰ8FCΛεϚϗΞϓϦ

Slide 10

Slide 10 text

͜͜·Ͱ͸ɺ*POJDʹ͋Γ·ͨ͠ΑͶɻ

Slide 11

Slide 11 text

೥͸ɺ)5.-ͰΞϓϦΛͭ͘ΔͷͰ͸ͳ͘  )5.-͕ΞϓϦʹͳΔ࣌୅Ͱ͢ɻ

Slide 12

Slide 12 text

ΦϑϥΠϯͰͷදࣔʢΩϟογϡදࣔʣ w ࣗ୐ͰνΣοΫ͓ͯ͠ؾʹೖΓʹೖΕ͓ͨ ళ৘ใΛग़ઌͰݟ௚͢ w ిंͷதͰϒϥ΢βόοΫͨ͠ॠؒʹτϯ ωϧʹೖͬͨ w ʰΠϯλʔωοτ઀ଓ͕͋Γ·ͤΜʱ͸౰ ͨΓલʁ σϞ  IUUQTBJSBSFBJBKQ 18"Ͱ8FCΛΞϓϦԽ

Slide 13

Slide 13 text

1VTI௨஌ ࢈ܦ৽ฉΛ͸͡Ίͱͯ͠ଟ͘ͷେखϝσΟ Ξ΍'BDFCPPL5XJUUFSͳͲ͕͢Ͱʹ࣮ ૷ɻϒϥ΢βͰ1VTI௨஌͕ૹΕ·͢ɻ ͦͷଞ w ΞϓϦͱͯ͠Πϯετʔϧ ʢ5XJUUFS-JUF.#ҎԼͰىಈ ࣌ؒ͸Ξοϓʣ w (14ͷߴਫ਼౓ิ଍ 18"Ͱ8FCΛΞϓϦԽ

Slide 14

Slide 14 text

ىಈ஗͍ΜͰ͠ΐʁ (PPHMFݕࡧͰͪΌΜͱಡΈࠐΜͰ͘Εͳ͍ͷͰ͸ 0(1λάͱ͔ͪΌΜͱಈ͔ͳ͍ΜͰ͠ΐʁ 4BGBSJͱ͔"QQMF੡Ͱ͸ಈ͔ͳ͍ͷͰ͸ 18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ

Slide 15

Slide 15 text

w *POJD͔Β!*POJD1BHF͕ಋೖɻ$PNQPOFOUTຖʹ.PEVMFΛ෼ׂ ͯ͠஗Ԇϩʔυ w ಉ࣌ʹ%PDVNFOUT͔Β%FFQ-JOL͕ͳ͘ͳͬͨɻ w *POJD$-*ͷJPOJDHͰσϑΥϧτͰ.PEVMF෼ׂͯ͠ੜ੒ w ࠓ͸ޙํޓ׵Ͱ࢖͑Δ͚Ͳɺকདྷతʹ͸!*POJD1BHFΛ࢖Θͳ͍ͷ͸ όουϊ΢ϋ΢ʹͳΓͦ͏ w ͳͷʹͳ͔ͥσϑΥϧτςϯϓϨʔτ͸ະͩ!*POJD1BHFඇରԠ 18"ͬͯىಈ஗͍Ͱ͠ΐʁ

Slide 16

Slide 16 text

18"ͬͯىಈ஗͍Ͱ͠ΐʁ

Slide 17

Slide 17 text

18"ͬͯىಈ஗͍Ͱ͠ΐʁ

Slide 18

Slide 18 text

18"ͬͯىಈ஗͍Ͱ͠ΐʁ

Slide 19

Slide 19 text

(PPHMFݕࡧͰͪΌΜͱಡΈࠐΜͰ͘Εͳ͍Ͱ͠ΐʁ

Slide 20

Slide 20 text

(PPHMFݕࡧͰͪΌΜͱಡΈࠐΜͰ͘Εͳ͍Ͱ͠ΐʁ

Slide 21

Slide 21 text

w QSFSFOEFSJPΛ࢖͏͜ͱͰରԠ Մೳɻ w ؆୯ʹ͍͏ͱɺSPCPU͕͖ͨ࣌ͩ ͚ϨϯμϦϯάࡁΈίϯςϯπ Λฦ͢࢓૊Έɻ/FUMJGZΛ࢖͏ͱ ແྉͰ࢖͑ΔΑɻ w "OHVMBSͷ.FUB"1*Ͱ.FUBΛ ॻ͖׵͑·͢ w W͔Β͸443ʹσϑΥϧτରԠ ͢Δ͔Β΋ͬͱָʹͳΓͦ͏ 0(1λάͱ͔ͪΌΜͱಈ͔ͳ͍Ͱ͠ΐʁ

Slide 22

Slide 22 text

0(1λάͱ͔ͪΌΜͱಈ͔ͳ͍Ͱ͠ΐʁɿ࣮૷ࣄྫ

Slide 23

Slide 23 text

4BGBSJͱ͔"QQMF੡Ͱ͸ಈ͔ͳ͍ͷͰ͸

Slide 24

Slide 24 text

<֮͑ํ>$PNQPOFOUT΍"1*ΛͲ͏΍ͬͯ࢖͏͔ IUUQJPOJDGSBNFXPSLDPNEPDTDPNQPOFOUT

Slide 25

Slide 25 text

<֮͑ํ>࠷୹ͰΞϓϦΛϦϦʔεͯ͠ΈΔ IUUQJPOJDXQDPN

Slide 26

Slide 26 text

<֮͑ํ>*POJD81DPNΛࢼ͢ΞϓϦXQQPDLFU IUUQTQPDLFUJPOJDXQDPN

Slide 27

Slide 27 text

ʮԶͷՇ͕ՄѪ͍ʯͷJ04"OESPJEΞϓϦ͸਺࣌ؒͰϦϦʔε ެ։ॳ೔ʹόζͬͯ೔ؒͰສ17ɻઌिɺ/),ʹͱΓ͋͛ΒΕͨʮԶՇʯ

Slide 28

Slide 28 text

w ೥લɺ8PSE1SFTTΛ֮͑Δ͚ͩͰ Ҋ݅୯Ձ͸ສҎ্େ͖͘ͳͬͨ w ֶशίετ͕ʂͱ͍ͬͯͨ)5.-ίʔ μʔ͕Ͳ͏ͳ͔ͬͨ͸͝ଘ஌ͷ௨Γ w 8FCΞϓϦɺJ04ΞϓϦɺ"OESPJEΞ ϓϦΛผʑʹͭͬͨ͘৔߹ͷίετ ͸ʁ"MMJO0OFͰͭͬͨ͘ΒҊ݅୯ Ձ͸ʁ w ʮ৽͍ٕ͠ज़ʯͰ͸ͳ͘ʮ໥͔Δٕज़ʯ Ͱ͋ΔՄೳੑ ୈೋͷ8PSE1SFTTʹͳΔ͔΋

Slide 29

Slide 29 text

w ͜ͷ೥ؒͰωΠςΟϒ։ൃ͸ ͔Β΁ݮগ w εϚʔτ΢Υονͷ։ൃऀ͕ ͍ΔΒ͍͠ w "84ΑΓ΋'JSFCBTFͷํ͕Α͘ ࢖ΘΕ͍ͯΔʢϓογϡ௨஌Ͱ ͸ɺͱʣ w .JDSPTPGUͷ։ൃͨ͠7JTVBM 4UVEJP$PEF͕τοϓγΣΞ w *POJDΛબΜͩਓ͸ɺ6*ίϯϙʔ ωϯτͷσβΠϯ͕ؾʹೖͬͯ Δ w 8FC։ൃऀ͕ϞόΠϧΞϓϦ։ ൃऀ΁ͱҠߦͯ͠Δ *POJD%FWFMPQFS4FSWFZ ϑΥʔϥϜͰ$44ͷ࣭໰Λ͢Δ૚΋࢖ͬͯΔɻ

Slide 30

Slide 30 text

w TMBDLͷΦʔϓϯνϟϯωϧʢIUUQTJPOJDTMBDLDPNʣ͋Δͷ Ͱɺ࢖͍࢝ΊͯΘ͔Βͳ͍͜ͱ͋ͬͨΒϔϧϓٻΊΒΕ·͢ w ฐࣾͰ*POJDTVQQPSUQSPHSBN͸͡Ί·͢ɻϦϑΝΫλϯάΦϓγϣ ϯ΋͢Δ༧ఆɻҊ݅ಋೖʹٕज़తʹ೰ΜͰΔํ͸͓໰͍߹ΘͤԼ͍͞ w ࠙਌ձͰͰ΋ɺ௚઀ฉ͍ͯԼ͍͞ɻ ฉ͘ɺͰऴΘΒͳ͍ͨΊʹ

Slide 31

Slide 31 text

No content