第一回Apache Cordova勉強会( https://atnd.org/events/57562 )での発表資料
$PSEPWBͰ࡞Δ)5.-ϋΠϒϦουΞϓϦୈҰճ"QBDIF$PSEPWBษڧձ։ൃϕετϓϥΫςΟεΛֶͿ
View Slide
ࣗݾհ‣ ٱอాޫଇBLB!BOBUPP‣ ΞγΞϧגࣜձࣾॴଐ‣ 6*69σβΠφʔ݉ ιϑτΣΞΤϯδχΞ
ධൃചத
͢͜ͱ
IUUQDPSEPWBBQBDIFPSH
)5.-Λϥοϓͯ͠ΞϓϦ‣ )5.-Λهड़͢Δ͜ͱͰ ֤ϓϥοτϑΥʔϜ͚ͷΞϓϦʹͯ͘͠ΕΔ̇
࣮ࡍͷ։ൃཁ݅ఆٛ6*ઃܭɾσβΠϯ։ൃɾνϡʔχϯάσόοάɾςετϦϦʔε‣ ϕετϓϥΫςΟεϊϋղઆ͠·͢
ཁ݅ఆٛ
IUUQFXPSETKQX&"&###&"&"&#&"IUNMʮγεςϜιϑτΣΞͷ։ൃʹ͓͍ͯɺ࣮͖͢ػೳຬ͖ͨ͢ੑೳͳͲΛ໌֬ʹ͍ͯ͘͠࡞ۀͷ͜ͱʯ
$PSEPWBΞϓϦͰେࣄͳॴ‣ 04όʔδϣϯͲ͜·ͰରԠ͢Δ ‣ "OESPJEͰͷಈ࡞อূͷݶఆ‣ $PSEPWBϓϥάΠϯͷ࣮ඞཁ͔൱͔
ରԠ͢Δ04ͷόʔδϣϯΛܾΊΔ‣ γΣΞͱར༻Ͱ͖ΔػೳΛѲͯ͠ݕ౼͢Δ
J04ͷ֤όʔδϣϯͷγΣΞ‣ J04 J04ରԠIUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSFJ04ҎԼJ04J04݄࣌
"OESPJEͷ֤όʔδϣϯͷγΣΞ‣ Λαϙʔτ͢Δ͔Ͳ͏͔ ‣ ܥܥαϙʔτ͢Δɻܥࣺͯͯྑ͠IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET ݄࣌ YY
όʔδϣϯʹΑͬͯར༻Ͱ͖Δػೳ‣ ཁ݅Λ౿·͑ͭͭରԠόʔδϣϯΛܾΊΔIUUQDBOJVTFDPNJ04 "OESPJE8FC4PDLFU 8FC8PSLFST *OEFYFE%# 47( 8FC(- 8,8FC7JFX USBOTMBUFEܥUSBOTGPSN ΑΓൈਮ
༏ઌ͢Δ"OESPJEͷΛݶఆ͢Δ‣ όʔδϣϯ͕ಉ͡ͰʹΑͬͯ ಈ࡞͕ҧ͏"OESPJEͰຯʹॏཁͳ͜ͱ‣ γΣΞ͕େ͖͍Λ༏ઌ͢ΔʹબͿ
$PSEPWBϓϥάΠϯͷ։ൃඞཁ͔‣ طଘͷ$PSEPWBϓϥάΠϯΛ୳͢ IUUQQMVHJOTDPSEPWBJP‣ ࣗલͰ։ൃ͕ඞཁ͔ ݕূ͢Δ
6*ઃܭɾσβΠϯ
6*ઃܭɾσβΠϯ‣ ϫΠϠϑϨʔϜϏδϡΞϧσβΠϯΛ࡞ɾɾɾɾɾɾɾɾɾ#BDL
$PSEPWBΞϓϦͰେࣄͳ͜ͱ‣ )5.-Ͱ࣮ݱՄೳͳ6*͔ ‣ ࣮ݱՄೳͰͱͷΓ߹͍औΕΔ͔ ‣ "OESPJEͱJ04ͷ6*ͷҧ͍‣ ڊେͳϦετϏϡʔͷѻ͍
"OESPJEͱJ04ͷ6*ͷҧ͍Λߟྀ͢Δ‣ λϒόʔͷ্ԼɺόοΫϘλϯͷ༗ແɺπʔϧόʔͷϨΠΞτ‣ $PSEPWBʹݶΒͳ͍ɻϓϥοτϑΥʔϜͷ6*نΛ९क͢Δ
ڊେͳϦετΛͲ͏͢Δ͔‣ )5.-ʹڊେͳͷ%0.ཁૉΛѻ͏ํ๏͕༻ҙ͞Ε͍ͯͳ͍‣ εΫϩʔϧҐஔΛݕͯ͠ϩʔυɾΞϯϩʔυΛ࣮͢Δ͜ͱՄೳ‣ ඦઍͷཁૉͷϦετආ͚Δͷ͕ແɻϖʔδૹΓͳͲͰ༻ӅΕͨΒΞϯϩʔυදࣔͦ͠͏ͳΒϩʔυ
։ൃ
‣ ͲͷΑ͏ͳΞʔΩςΫνϟΛऔΔ ‣ 6*ߏஙΛͲ͏ߦ͏ ‣ ޮతͳ։ൃαΠΫϧ
ΞʔΩςΫνϟ
ΞʔΩςΫνϟ41"Ͱ‣ ͍ΘΏΔ4JOHMFQBHF"QQMJDBUJPOܗࣜͰ։ൃ‣ 41"ͷͨΊͷϑϨʔϜϫʔΫɾϊϋΛͦͷ··͑ΔSPA
ར༻Ͱ͖ΔϑϨʔϜϫʔΫ‣ ϋΠϒϦουΞϓϦ༻ͷ+4ϑϨʔϜϫʔΫΛར༻‣ 41"։ൃ͕Ͱ͖ΔϑϨʔϜϫʔΫͰେৎ
0OTFO6*‣ "OHVMBS+4ϕʔεͷ$PSEPWB༻+4ϑϨʔϜϫʔΫ‣ ΧελϜཁૉͰ6*Λهड़IUUQPOTFOJP
ΧελϜཁૉΛ͔ͭͬͯ6*Λهड़‣ λάΛॻ͚ͩ͘ͰεϚϗ༻6*͕࡞ΕΔ
‣ ๛ͳαϯϓϧίʔυ‣ IUUQDPNQPOFOUTPOTFOJPQBUUFSOT
ίʔσΟϯάαΠΫϧ
ίʔσΟϯάαΠΫϧΛ࠷దԽ͢Δ‣ ܁Γฦ͠ͷ͕։ൃͷΛنఆ͢Δ‣ DPSEPWBSVO͕ඇৗʹ͕͔͔࣌ؒΔɾɾɾɾʂ‣ J04Ͱ"OESPJEͰίʔσΟϯά DPSEPWBSVOͰίϯύΠϧసૹͰ֬ೝ
ղܾํ๏‣ ϒϥβͰಈ͔͢‣ .POBDB-PDBMLJU͏
ϒϥβͰಈ͘Α͏ʹ͢Δ‣ DPSEPWBQMBUGPSNBEECSPXTFS͢Δ‣ $PSEPWB͔ΒՃ͞Εͨ։ൃ༻ͷϞʔυ‣ ϓϥάΠϯΤϛϡϨʔγϣϯ‣ ίϯύΠϧసૹ͠ͳͯ͘ྑ͍‣ -JWFSFMPBE#SPXTFS4ZODࠐΉͱඇৗʹૉૣ͘։ൃͰ͖Δ‣ ऑଟ͘ͷϓϥάΠϯ͕ಈ͔ͳ͍ɾະରԠ
.POBDB-PDBMLJUΛ͏‣ ϩʔΧϧͰίʔσΟϯάͯ͠อଘͨ͠ΒͦΕ͕ଈσόΠεͰߋ৽‣ ΞϓϦΛίϯύΠϧແ͠Ͱߋ৽͢Δ͔Βߴʂ‣ ۙϦϦʔεʂίʔσΟϯάߋ৽ࣗಈݕϑΝΠϧసૹͰ֬ೝ
νϡʔχϯά
Կ͕ϘτϧωοΫ͔‣ +4ͷॲཧ‣ $44ͷϚονϯάॲཧ‣ %0.ͷϦϑϩʔ‣ (16ͷసૹ‣ ඳըॲཧΣϒΠϯεϖΫλͰ·ͣ֬ೝ
۩ମతͳνϡʔχϯάͦͷଞϊϋIUUQTTQFBLFSEFDLDPNBOBUPPIUNMEFJPTBQVSJBOESPJEBQVSJXP[VPSPVIUNMIBJCVSJUVEPBQVSJLBJGBSVNFO
‣ ཱͪಡΈ͠·͠ΐ͏
σόοά
4BGBSJ $ISPNFͷΠϯεϖΫλ‣ J04ɺ"OESPJE͔ΒͦΕͧΕར༻Մೳ‣ ͑ͳ͍࣌8FJOSFͬͨΓ͢Δ
(BQ%FCVH‣ ؆୯ʹΠϯεϖΫλΛىಈͰ͖ͯศར‣ J04"OESPJE͜ΕҰͭͰେৎɻIUUQTXXXHFOVJUFDDPNQSPEVDUTHBQEFCVH
%0.ϦʔΫ
%0.ϦʔΫͱ‣ ։์͞ΕΔ͖%0.ཁૉ͕+4͔Βࢀর͞Εͨ··ʹͳͬͯ։์͞Εͳ͍ϝϞϦϦʔΫͱಉछͷ+4͔Βͷࢀর HTMLParagraphElement
%0.ϦʔΫ͢Δͱ%FUBDIFE%0.5SFFϦʔΫ͢Δ‣ υΩϡϝϯτʹؚ·Εͳ͍%FUBDIFE%0.πϦʔࣗମ͕ϦʔΫ͢Δ‣ %0.ཁૉࢠཁૉཁૉͷࢀরΛ͍࣋ͬͯΔͨΊ‣ %0.πϦʔ͕࣋ͭϦιʔε ը૾ͳͲ։์͞Εͳ͍+4͔ΒͷࢀরϦʔΫͨ͠%FUBDIFE%0.5SFF
%0.ϦʔΫΛ͙ʹ‣ %0.ཁૉͷࢀরɺඞཁͳ͘ͳͬͨΒΔ‣ ΠϕϯτϦεφ͖ͪΜͱSFNPWF͢Δ// ΠϕϯτϦεφΛremove͢Δthis._element.removeEventListener(‘click’,fn);// ࢀরΛΔthis._element = null;+BWB4DSJQU
ςετͰ͏πʔϧ
3FNPUF5FTULJU‣ ಛఆͷΛϦϞʔτ͔Β࣮ߦͰ͖Δ‣ ςετ࣌ʹɺΛखݩʹ༻ҙͰ͖ͳ͍߹ʹར༻IUUQBQQLJUCPYDPNUFTULJU
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠