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

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

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠