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

第一回Apache Cordova勉強会( https://atnd.org/events/57562 )での発表資料

Transcript

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

   View Slide

2. ࣗݾ঺հ
   ‣ ٱอాޫଇBLB!BOBUPP
   ‣ ΞγΞϧגࣜձࣾॴଐ
   ‣ 6*69σβΠφʔ݉

   ιϑτ΢ΣΞΤϯδχΞ
   

   View Slide

3. ޷ධൃചத
   

   View Slide

4. ࿩͢͜ͱ
   

   View Slide

5. IUUQDPSEPWBBQBDIFPSH
   

   View Slide

6. )5.-Λϥοϓͯ͠ΞϓϦ΁
   ‣ )5.-Λهड़͢Δ͜ͱͰ

   ֤ϓϥοτϑΥʔϜ޲͚ͷΞϓϦʹͯ͘͠ΕΔ
   
   ̇
   

   View Slide

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

   View Slide

8. ཁ݅ఆٛ
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. ༏ઌ͢Δ"OESPJEͷ୺຤Λݶఆ͢Δ
    ‣ όʔδϣϯ͕ಉ͡Ͱ΋୺຤ʹΑͬͯ

    ಈ࡞͕ҧ͏"OESPJEͰ͸஍ຯʹॏཁͳ͜ͱ΋
    ‣ γΣΞ͕େ͖͍෺Λ༏ઌ͢Δ୺຤ʹબͿ
    

    View Slide

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

    View Slide

17. 6*ઃܭɾσβΠϯ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ։ൃ
    

    View Slide

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

    View Slide

24. ΞʔΩςΫνϟ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. νϡʔχϯά
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. σόοά
    

    View Slide

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

    View Slide

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

    View Slide

42. %0.ϦʔΫ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. ςετͰ࢖͏πʔϧ
    

    View Slide

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

    View Slide

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

    View Slide