Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

久保田光則

November 05, 2014
Tweet

More Decks by 久保田光則

Other Decks in Programming

Transcript

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

    View full-size slide

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

    ιϑτ΢ΣΞΤϯδχΞ

    View full-size slide

  3. ޷ධൃചத

    View full-size slide

  4. IUUQDPSEPWBBQBDIFPSH

    View full-size slide

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

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

    ̇

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    J04

    J04

    ೥݄೔࣌఺

    View full-size slide

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








    Y





    View full-size slide

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

    USBOTMBUFEܥ
    USBOTGPSN

    ΑΓൈਮ

    View full-size slide

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

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

    View full-size slide

  14. $PSEPWBϓϥάΠϯͷ։ൃ͸ඞཁ͔
    ‣ طଘͷ$PSEPWBϓϥάΠϯΛ୳͢ IUUQQMVHJOTDPSEPWBJP

    ‣ ࣗલͰ։ൃ͕ඞཁ͔ ݕূ͢Δ

    View full-size slide

  15. 6*ઃܭɾσβΠϯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. ΞʔΩςΫνϟ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. νϡʔχϯά

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. ςετͰ࢖͏πʔϧ

    View full-size slide

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

    View full-size slide

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

    View full-size slide