Cordovaで作るHTML5ハイブリッドアプリ〜開発ベストプラクティスを学ぶ〜

Slide 1

Slide 1 text

$PSEPWBͰ࡞Δ)5.- ϋΠϒϦουΞϓϦ ୈҰճ"QBDIF$PSEPWBษڧձ ։ൃϕετϓϥΫςΟεΛֶͿ

Slide 2

Slide 2 text

ࣗݾ঺հ ‣ ٱอాޫଇBLB!BOBUPP ‣ ΞγΞϧגࣜձࣾॴଐ ‣ 6*69σβΠφʔ݉  ιϑτ΢ΣΞΤϯδχΞ

Slide 3

Slide 3 text

޷ධൃചத

Slide 4

Slide 4 text

࿩͢͜ͱ

Slide 5

Slide 5 text

IUUQDPSEPWBBQBDIFPSH

Slide 6

Slide 6 text

)5.-Λϥοϓͯ͠ΞϓϦ΁ ‣ )5.-Λهड़͢Δ͜ͱͰ  ֤ϓϥοτϑΥʔϜ޲͚ͷΞϓϦʹͯ͘͠ΕΔ ̇

Slide 7

Slide 7 text

࣮ࡍͷ։ൃ͸ ཁ݅ఆٛ 6*ઃܭɾσβΠϯ ։ൃɾνϡʔχϯά σόοάɾςετ ϦϦʔε ‣ ϕετϓϥΫςΟε΍ϊ΢ϋ΢ղઆ͠·͢

Slide 8

Slide 8 text

ཁ݅ఆٛ

Slide 9

Slide 9 text

IUUQFXPSETKQX&"&###&"&"&#&"IUNM ʮγεςϜ΍ιϑτ΢ΣΞͷ։ൃʹ͓͍ͯɺ ࣮૷͢΂͖ػೳ΍ຬͨ͢΂͖ੑೳ ͳͲΛ໌֬ʹ͍ͯ͘͠࡞ۀͷ͜ͱʯ

Slide 10

Slide 10 text

$PSEPWBΞϓϦͰେࣄͳॴ ‣ 04όʔδϣϯ͸Ͳ͜·ͰରԠ͢Δ ‣ "OESPJEͰͷಈ࡞อূ୺຤ͷݶఆ ‣ $PSEPWBϓϥάΠϯͷ࣮૷͸ඞཁ͔൱͔

Slide 11

Slide 11 text

ରԠ͢Δ04ͷόʔδϣϯΛܾΊΔ ‣ γΣΞͱར༻Ͱ͖ΔػೳΛ೺Ѳͯ͠ݕ౼͢Δ

Slide 12

Slide 12 text

J04ͷ֤όʔδϣϯͷγΣΞ ‣ J04 J04ରԠ IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF J04ҎԼ J04 J04 ೥݄೔࣌఺

Slide 13

Slide 13 text

"OESPJEͷ֤όʔδϣϯͷγΣΞ ‣ Λαϙʔτ͢Δ͔Ͳ͏͔ ‣ ܥܥ͸αϙʔτ͢Δɻܥ͸ࣺͯͯྑ͠ IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET ೥݄೔࣌఺ Y Y

Slide 14

Slide 14 text

όʔδϣϯʹΑͬͯར༻Ͱ͖Δػೳ ‣ ཁ݅Λ౿·͑ͭͭରԠόʔδϣϯΛܾΊΔ IUUQDBOJVTFDPN J04 "OESPJE 8FC4PDLFU 8FC8PSLFST *OEFYFE%# 47( 8FC(- 8,8FC7JFX USBOTMBUFEܥ USBOTGPSN ΑΓൈਮ

Slide 15

Slide 15 text

༏ઌ͢Δ"OESPJEͷ୺຤Λݶఆ͢Δ ‣ όʔδϣϯ͕ಉ͡Ͱ΋୺຤ʹΑͬͯ  ಈ࡞͕ҧ͏"OESPJEͰ͸஍ຯʹॏཁͳ͜ͱ΋ ‣ γΣΞ͕େ͖͍෺Λ༏ઌ͢Δ୺຤ʹબͿ

Slide 16

Slide 16 text

$PSEPWBϓϥάΠϯͷ։ൃ͸ඞཁ͔ ‣ طଘͷ$PSEPWBϓϥάΠϯΛ୳͢ IUUQQMVHJOTDPSEPWBJP ‣ ࣗલͰ։ൃ͕ඞཁ͔ ݕূ͢Δ

Slide 17

Slide 17 text

6*ઃܭɾσβΠϯ

Slide 18

Slide 18 text

6*ઃܭɾσβΠϯ ‣ ϫΠϠϑϨʔϜ΍ϏδϡΞϧσβΠϯΛ࡞੒ ɾɾɾ ɾɾɾ ɾɾɾ #BDL

Slide 19

Slide 19 text

$PSEPWBΞϓϦͰେࣄͳ͜ͱ ‣ )5.-Ͱ࣮ݱՄೳͳ6*͔ ‣ ࣮ݱՄೳͰ΋޻਺ͱͷ௼Γ߹͍͸औΕΔ͔ ‣ "OESPJEͱJ04ͷ6*ͷҧ͍ ‣ ڊେͳϦετϏϡʔͷѻ͍

Slide 20

Slide 20 text

"OESPJEͱJ04ͷ6*ͷҧ͍Λߟྀ͢Δ ‣ λϒόʔͷ্ԼɺόοΫϘλϯͷ༗ແɺπʔϧόʔͷϨΠΞ΢τ ‣ $PSEPWBʹݶΒͳ͍࿩ɻϓϥοτϑΥʔϜͷ6*ن໿Λ९क͢Δ

Slide 21

Slide 21 text

ڊେͳϦετΛͲ͏͢Δ͔ ‣ )5.-ʹ͸ڊେͳ਺ͷ%0.ཁૉΛѻ͏ํ๏͕༻ҙ͞Ε͍ͯͳ͍ ‣ εΫϩʔϧҐஔΛݕ஌ͯ͠ϩʔυɾΞϯϩʔυΛ࣮૷͢Δ͜ͱ͸Մೳ ‣ ਺ඦ਺ઍͷཁૉͷϦετ͸ආ͚Δͷ͕ແ೉ɻϖʔδૹΓͳͲͰ୅༻ ӅΕͨΒ Ξϯϩʔυ දࣔͦ͠͏ͳΒ ϩʔυ

Slide 22

Slide 22 text

։ൃ

Slide 23

Slide 23 text

‣ ͲͷΑ͏ͳΞʔΩςΫνϟΛऔΔ ‣ 6*ߏஙΛͲ͏ߦ͏ ‣ ޮ཰తͳ։ൃαΠΫϧ͸

Slide 24

Slide 24 text

ΞʔΩςΫνϟ

Slide 25

Slide 25 text

ΞʔΩςΫνϟ͸41"Ͱ ‣ ͍ΘΏΔ4JOHMFQBHF"QQMJDBUJPOܗࣜͰ։ൃ ‣ 41"ͷͨΊͷϑϨʔϜϫʔΫɾϊ΢ϋ΢Λͦͷ··࢖͑Δ SPA

Slide 26

Slide 26 text

ར༻Ͱ͖ΔϑϨʔϜϫʔΫ ‣ ϋΠϒϦουΞϓϦ༻ͷ+4ϑϨʔϜϫʔΫΛར༻ ‣ 41"։ൃ͕Ͱ͖ΔϑϨʔϜϫʔΫͰ΋େৎ෉

Slide 27

Slide 27 text

0OTFO6* ‣ "OHVMBS+4ϕʔεͷ$PSEPWB༻+4ϑϨʔϜϫʔΫ ‣ ΧελϜཁૉͰ6*Λهड़ IUUQPOTFOJP

Slide 28

Slide 28 text

ΧελϜཁૉΛ͔ͭͬͯ6*Λهड़ ‣ λάΛॻ͚ͩ͘ͰεϚϗ༻6*͕࡞ΕΔ

Slide 29

Slide 29 text

‣ ๛෋ͳαϯϓϧίʔυ ‣ IUUQDPNQPOFOUTPOTFOJPQBUUFSOT

Slide 30

Slide 30 text

ίʔσΟϯάαΠΫϧ

Slide 31

Slide 31 text

ίʔσΟϯάαΠΫϧΛ࠷దԽ͢Δ ‣ ܁Γฦ͠ͷ଎౓͕։ൃͷ଎౓Λنఆ͢Δ ‣ DPSEPWBSVO͕ඇৗʹ͕͔͔࣌ؒΔɾɾɾɾʂ ‣ J04Ͱ΋"OESPJEͰ΋ ίʔσΟϯά DPSEPWBSVO ͰίϯύΠϧసૹ ୺຤Ͱ֬ೝ

Slide 32

Slide 32 text

ղܾํ๏ ‣ ϒϥ΢βͰಈ͔͢ ‣ .POBDB-PDBMLJU࢖͏

Slide 33

Slide 33 text

ϒϥ΢βͰ΋ಈ͘Α͏ʹ͢Δ ‣ DPSEPWBQMBUGPSNBEECSPXTFS͢Δ ‣ $PSEPWB͔Β௥Ճ͞Εͨ։ൃ༻ͷϞʔυ ‣ ϓϥάΠϯ΋ΤϛϡϨʔγϣϯ ‣ ίϯύΠϧ΍సૹ͠ͳͯ͘΋ྑ͍ ‣ -JWFSFMPBE΍#SPXTFS4ZOD࢓ࠐΉͱඇৗʹૉૣ͘ ։ൃͰ͖Δ ‣ ऑ఺ଟ͘ͷϓϥάΠϯ͕ಈ͔ͳ͍ɾະରԠ

Slide 34

Slide 34 text

.POBDB-PDBMLJUΛ࢖͏ ‣ ϩʔΧϧͰίʔσΟϯάͯ͠อଘͨ͠ΒͦΕ͕ଈσόΠεͰߋ৽ ‣ ΞϓϦΛίϯύΠϧແ͠Ͱߋ৽͢Δ͔Βߴ଎ʂ ‣ ۙ೔ϦϦʔεʂ ίʔσΟϯά ߋ৽ࣗಈݕ஌ ϑΝΠϧసૹ ୺຤Ͱ֬ೝ

Slide 35

Slide 35 text

νϡʔχϯά

Slide 36

Slide 36 text

Կ͕ϘτϧωοΫ͔ ‣ +4ͷॲཧ ‣ $44ͷϚονϯάॲཧ ‣ %0.ͷϦϑϩʔ ‣ (16΁ͷసૹ ‣ ඳըॲཧ ΢ΣϒΠϯεϖΫλͰ·ͣ͸֬ೝ

Slide 37

Slide 37 text

۩ମతͳνϡʔχϯάͦͷଞϊ΢ϋ΢ IUUQTTQFBLFSEFDLDPNBOBUPPIUNMEFJPTBQVSJBOESPJEBQVSJXP[VPSPVIUNMIBJCVSJUVEPBQVSJLBJ GBSVNFO

Slide 38

Slide 38 text

‣ ཱͪಡΈ͠·͠ΐ͏

Slide 39

Slide 39 text

σόοά

Slide 40

Slide 40 text

4BGBSJ $ISPNFͷΠϯεϖΫλ ‣ J04ɺ"OESPJE͔ΒͦΕͧΕར༻Մೳ ‣ ࢖͑ͳ͍࣌͸8FJOSF࢖ͬͨΓ͢Δ

Slide 41

Slide 41 text

(BQ%FCVH ‣ ؆୯ʹΠϯεϖΫλΛىಈͰ͖ͯศར ‣ J04΋"OESPJE΋͜ΕҰͭͰେৎ෉ɻ IUUQTXXXHFOVJUFDDPNQSPEVDUTHBQEFCVH

Slide 42

Slide 42 text

%0.ϦʔΫ

Slide 43

Slide 43 text

%0.ϦʔΫͱ͸ ‣ ։์͞ΕΔ΂͖%0.ཁૉ͕+4͔Βࢀর͞Εͨ·· ʹͳͬͯ։์͞Εͳ͍ϝϞϦϦʔΫͱಉछͷ໰୊ +4͔Βͷࢀর HTMLParagraphElement

Slide 44

Slide 44 text

%0.ϦʔΫ͢Δͱ %FUBDIFE%0.5SFF΋ϦʔΫ͢Δ ‣ υΩϡϝϯτʹؚ·Εͳ͍%FUBDIFE%0.πϦʔࣗମ͕ϦʔΫ͢Δ ‣ %0.ཁૉ͸ࢠཁૉ΍਌ཁૉͷࢀরΛ͍࣋ͬͯΔͨΊ ‣ %0.πϦʔ͕࣋ͭϦιʔε ը૾ͳͲ ΋։์͞Εͳ͍ +4͔Βͷࢀর ϦʔΫͨ͠%FUBDIFE%0.5SFF

Slide 45

Slide 45 text

%0.ϦʔΫΛ๷͙ʹ͸ ‣ %0.ཁૉͷࢀর͸ɺඞཁͳ͘ͳͬͨΒ੾Δ ‣ ΠϕϯτϦεφ΋͖ͪΜͱSFNPWF͢Δ // ΠϕϯτϦεφΛremove͢Δ this._element.removeEventListener(‘click’, fn); // ࢀরΛ੾Δ this._element = null; +BWB4DSJQU

Slide 46

Slide 46 text

ςετͰ࢖͏πʔϧ

Slide 47

Slide 47 text

3FNPUF5FTULJU ‣ ಛఆͷ୺຤ΛϦϞʔτ͔Β࣮ߦͰ͖Δ ‣ ςετ࣌ʹɺ୺຤Λखݩʹ༻ҙͰ͖ͳ͍৔߹ʹར༻ IUUQBQQLJUCPYDPNUFTULJU

Slide 48

Slide 48 text

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