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

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

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

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

November 05, 2014
Tweet

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. 0OTFO6* ‣ "OHVMBS+4ϕʔεͷ$PSEPWB༻+4ϑϨʔϜϫʔΫ ‣ ΧελϜཁૉͰ6*Λهड़ IUUQPOTFOJP

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

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

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

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

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

  33. ϒϥ΢βͰ΋ಈ͘Α͏ʹ͢Δ ‣ DPSEPWBQMBUGPSNBEECSPXTFS͢Δ ‣ $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. 3FNPUF5FTULJU ‣ ಛఆͷ୺຤ΛϦϞʔτ͔Β࣮ߦͰ͖Δ ‣ ςετ࣌ʹɺ୺຤Λखݩʹ༻ҙͰ͖ͳ͍৔߹ʹར༻ IUUQBQQLJUCPYDPNUFTULJU

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