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

Transcript

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

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

3. ޷ධൃചத

4. ࿩͢͜ͱ

5. IUUQDPSEPWBBQBDIFPSH

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

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

8. ཁ݅ఆٛ

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

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

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

12. J04ͷ֤όʔδϣϯͷγΣΞ ‣ J04
    J04ରԠ IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF J04ҎԼ  J04
      J04
    

     ೥݄೔࣌఺

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

      
      
      Y     

14. όʔδϣϯʹΑͬͯར༻Ͱ͖Δػೳ ‣ ཁ݅Λ౿·͑ͭͭରԠόʔδϣϯΛܾΊΔ IUUQDBOJVTFDPN J04 "OESPJE 8FC4PDLFU   8FC8PSLFST

      *OEFYFE%#   47(   8FC(-  8,8FC7JFX  USBOTMBUFEܥ USBOTGPSN   ΑΓൈਮ

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

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

17. 6*ઃܭɾσβΠϯ

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

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

    ڊେͳϦετϏϡʔͷѻ͍

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

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

    ϩʔυ

22. ։ൃ

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

24. ΞʔΩςΫνϟ

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

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

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

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

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

30. ίʔσΟϯάαΠΫϧ

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

    ୺຤Ͱ֬ೝ

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

33. ϒϥ΢βͰ΋ಈ͘Α͏ʹ͢Δ ‣ DPSEPWB
    QMBUGPSN
    BEE
    CSPXTFS͢Δ
    ‣ $PSEPWB͔Β௥Ճ͞Εͨ։ൃ༻ͷϞʔυ
    ‣ ϓϥάΠϯ΋ΤϛϡϨʔγϣϯ
    ‣ ίϯύΠϧ΍సૹ͠ͳͯ͘΋ྑ͍
    ‣

    -JWFSFMPBE΍#SPXTFS4ZOD࢓ࠐΉͱඇৗʹૉૣ͘ ։ൃͰ͖Δ
    ‣ ऑ఺
    ଟ͘ͷϓϥάΠϯ͕ಈ͔ͳ͍ɾະରԠ

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

    ୺຤Ͱ֬ೝ

35. νϡʔχϯά

36. Կ͕ϘτϧωοΫ͔ ‣ +4ͷॲཧ
    ‣ $44ͷϚονϯάॲཧ
    ‣ %0.ͷϦϑϩʔ
    ‣ (16΁ͷసૹ
    ‣

    ඳըॲཧ ΢ΣϒΠϯεϖΫλͰ·ͣ͸֬ೝ

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

38. ‣ ཱͪಡΈ͠·͠ΐ͏

39. σόοά

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

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

42. %0.ϦʔΫ

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

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

    +4͔Βͷࢀর ϦʔΫͨ͠%FUBDIFE
    %0.
    5SFF

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

    ࢀরΛ੾Δ this._element = null; +BWB4DSJQU

46. ςετͰ࢖͏πʔϧ

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

48. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠