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

Sencha Touchを使ったiOS/Androidアプリ開発入門

Sencha Touchを使ったiOS/Androidアプリ開発入門

春のJavaScript祭り #jsfes at 2014/04/26

http://javascript-fes.doorkeeper.jp/events/10127/

Shinobu Kawano

April 26, 2014
Tweet

More Decks by Shinobu Kawano

Other Decks in Programming

Transcript

  1. +BWB4DSJQUͰεϚϗΞϓϦΛ࡞Ζ͏ʂʂ
    4FODIB5PVDIΛ࢖ͬͨ
    J04"OESPJEΞϓϦ։ൃೖ໳
    KTGFT!LBXBOPTIJOPCV

    View full-size slide

  2. Triplam
    h)p:/
    /triplam.com

    View full-size slide

  3. +BWB4DSJQUͰεϚϗΞϓϦ͕࡞Ε·͢ɻ

    View full-size slide

  4. 4FODIB%FWFMPQFS"EWPDBUFBU$BOPO*54PMVUJPOT *OD
    8IPBN*
    ,"8"/04IJOPCV

    View full-size slide

  5. *—PQFOTPVSDFQSPHSBNNJOH

    View full-size slide

  6. !
    4FODIB*OTJHIUT

    !
    &YUVY"DDPSEJPO-JTUCZ,"8"/04IJOPCV
    5IJT4FODIB5PVDIDPNQPOFOUBMMPXTZPVUPDSFBUFMJTUTXIPTF
    JUFNTDBOCFFYQBOEFEUPSFWFBMGVSUIFSOFTUFEMJTUJUFNT"WFSZ
    VTFGVMQSPKFDUXIPTFTPVSDFDPEFDBOCFGPVOEPO(JU)VC
    !
    4FODIB*OTJHIUT

    !
    )FMMP 4FODIB5PVDI'MBU6*5IFNF
    *GZPVSFLFFOPOUIF'MBU%FTJHOUSFOEUIFOUIJTPQFOTPVSDF
    4FODIB5PVDIUIFNFJTXIBUZPVSFMPPLJOHGPS*UJTBWFSZ
    BUUSBDUJWFBOEUSFOEZUIFNFUIBUDBOCFESPQQFEJOUPZPVS
    BQQMJDBUJPOTOPX
    !
    4FODIB*OTJHIUT

    !
    4FODIB5PVDI8FC35$
    5IJTEFNPTIPXTPGGB8FC35$FYUFOTJPOGPS4FODIB5PVDIUIBU
    TIPXTIPXUIFUFDIOPMPHZDBOXPSLXJUIJOB4FODIB5PVDIBQQ"
    WFSZJOUFSFTUJOHEFNP
    !

    View full-size slide

  7. "QQ*OTQFDUPSGPS

    View full-size slide

  8. 'PMMPXNF!LBXBOPTIJOPCV

    View full-size slide

  9. "HFOEB
    +BWB4DSJQUͰϞόΠϧΞϓϦ։ൃʁ
    4FODIB5PVDIೖ໳
    $PEF8BMLUISPVHI 5SJQMBN

    ·ͱΊ

    View full-size slide

  10. "HFOEB
    +BWB4DSJQUͰϞόΠϧΞϓϦ։ൃʁ
    4FODIB5PVDIೖ໳
    $PEF8BMLUISPVHI 5SJQMBN

    ·ͱΊ

    View full-size slide

  11. J04ΞϓϦͷ։ൃ
    0CKFDUJWF$ͰϓϩάϥϜΛॻ͘
    9DPEFʢ*%&ʣΛར༻͢Δ
    J04ͷ"1*Λར༻͢Δ
    J04ΞϓϦ։ൃͷϊ΢ϋ΢ΛֶͿ

    View full-size slide

  12. "OESPJEΞϓϦͷ։ൃ
    +BWBͰϓϩάϥϜΛॻ͘
    &DMJQTFʢ*%&ʣΛར༻͢Δ
    "OESPJEͷ"1*Λར༻͢Δ
    "OESPJEΞϓϦ։ൃͷϊ΢ϋ΢ΛֶͿ

    View full-size slide

  13. ૿͑ଓ͚ΔϓϥοτϑΥʔϜ
    8JOEPXT1IPOF
    #MBDL#FSSZ
    "NB[PO'JSF04
    5J[FO 'JSF'PY04

    View full-size slide

  14. )5.-ͰΞϓϦ։ൃʂ

    View full-size slide

  15. )5.-ͱ͸ʁ
    )5.-ͷճ໨ͷվగ൛
    ΞϓϦέʔγϣϯͱͯ͠ͷ8FC
    ɹ8FC4UPSBHF 'JMF"1* $BOWBT
    ࣮༻ஈ֊΁ʢࠓ೥ɺਖ਼ࣜקࠂ༧ఆʣ

    View full-size slide

  16. )5.-ͷϝϦοτ
    ΫϩεϓϥοτϑΥʔϜͰಈ࡞͢Δ
    8FCͷ։ൃܦݧΛ׆͔ͤΔ

    Πϯετʔϧ΍Ξοϓσʔτ͕ෆཁ

    View full-size slide

  17. 8FC։ൃऀ͕׳Εͨ࡞ۀϑϩʔ
    ࢖͍׳ΕͨςΩετΤσΟλ
    λʔϛφϧͱίϚϯυϥΠϯπʔϧ
    ϒϥ΢βͷ։ൃπʔϧͰσόοά

    View full-size slide

  18. )5.-ͷσϝϦοτ
    ΦϑϥΠϯͰಈ࡞ͤͮ͞Β͍
    ୺຤ͷػೳΛར༻Ͱ͖ͳ͍
    ύϑΥʔϚϯε͕ग़ͳ͍

    View full-size slide

  19. σϝϦοτΛຒΊΔ
    ΦϑϥΠϯͰಈ࡞ͤͮ͞Β͍
    ୺຤ͷػೳΛར༻Ͱ͖ͳ͍
    ύϑΥʔϚϯε͕ग़ͳ͍

    View full-size slide

  20. ϋΠϒϦουΞϓϦͱ͍͏ख๏

    View full-size slide

  21. ωΠςΟϒΞϓϦͷ
    ɹϒϥ΢βίϯϙʔωϯτʢ8FC7JFXʣ
    ্Ͱ)5.-ΞϓϦΛಈ࡞ͤ͞Δ
    ωΠςΟϒ
    )5.-
    ɹϒϥ΢βίϯϙʔωϯτ +BWB4DSJQU $44

    View full-size slide

  22. ωΠςΟϒ
    )5.-
    ɹϒϥ΢βίϯϙʔωϯτ +BWB4DSJQU $44
    )5.- +BWB4DSJQU $44͸
    ΞϓϦέʔγϣϯʹؚΊͯ഑෍͢Δ
    ʢΦϑϥΠϯͰ΋ಈ࡞͢Δʣ
    ϒϥ΢βίϯϙʔωϯτΛܦ༝ͯ͠
    ωΠςΟϒػೳΛ࣮ߦ͢Δ
    ʢωΠςΟϒϒϦοδʣ

    View full-size slide

  23. ωΠςΟϒ
    )5.-
    ɹϒϥ΢βίϯϙʔωϯτ +BWB4DSJQU $44
    )5.- +BWB4DSJQU $44͸
    ΞϓϦέʔγϣϯʹؚΊͯ഑෍͢Δ
    ʢΦϑϥΠϯͰ΋ಈ࡞͢Δʣ
    ϒϥ΢βίϯϙʔωϯτΛܦ༝ͯ͠
    ωΠςΟϒػೳΛ࣮ߦ͢Δ
    ʢωΠςΟϒϒϦοδʣ
    ͜͏͍ͬͨϋΠϒϦουΞϓϦΛ
    ؆୯ʹ࡞ΕΔΑ͏ʹͯ͘͠ΕΔͷ͕
    ɹ1IPOF(BQͱ͍͏ϑϨʔϜϫʔΫ

    View full-size slide

  24. ࠷ۙͷ1IPOF(BQ͸ͱͬͯ΋؆୯
    ίϚϯυϥΠϯπʔϧ

    View full-size slide

  25. 5SJQMBNͰ΋͓ੈ࿩ʹͳͬͯ·͢
    εςʔλεόʔͷ৭Λม͑ͨΓɺΞϓϦ಺ϒϥ΢βΛݺͼग़ͨ͠Γɻ

    View full-size slide

  26. ωΠςΟϒϒϦοδ͸ࣗ༝ʹ։ൃՄೳ
    +BWB΍0CKFDUJWF$ͰϓϥάΠϯΛॻ͚͹ɺ͍Ζ͍ΖͰ͖Δ
    $PSEPWB1MVHJO3FHJTUSZ
    IUUQQMVHJOTDPSEPWBJP

    View full-size slide

  27. 1IPOF(BQͱ$PSEPWBͷؔ܎
    "EPCF͕ओମ
    ϦϞʔτϏϧυ͕Ͱ͖Δ
    ίϛϡχςΟ͕ओମ
    1IPOF(BQͷઌΛߦ͘

    View full-size slide

  28. ͞Βʹ̎ͭͷ໰୊
    6*෦඼ΛͲ͏͢Δ͔
    +BWB4DSJQUͰෳࡶͳϓϩάϥϜΛͲ͏
    ૊ΈཱͯΔ͔

    View full-size slide

  29. ։ൃϑϨʔϜϫʔΫΛ࢖͓͏ʂ

    View full-size slide

  30. IUUQKRVFSZNPCJMFDPN
    IUUQCBDLCPOFKTPSH

    View full-size slide

  31. IUUQJPOJDGSBNFXPSLDPN
    IUUQTBOHVMBSKTPSH

    View full-size slide

  32. IUUQXXXTFODIBDPN

    View full-size slide

  33. "HFOEB
    +BWB4DSJQUͰϞόΠϧΞϓϦ։ൃʁ
    4FODIB5PVDIೖ໳
    $PEF8BMLUISPVHI 5SJQMBN

    ·ͱΊ

    View full-size slide

  34. 4FODIBͱ͸ʁ
    ΞϝϦΧʹ͋Δ։ൃπʔϧͷϕϯμʔ
    ւ֎Ͱ͸ߴ͍ධՁͱ࣮੷
    ໊ࣾ͸ʮઝ஡ʯ͔Βདྷ͍ͯΔ

    View full-size slide

  35. :VJͷ֦ுϥΠϒϥϦͱͯ͠ελʔτ
    ๏ਓԽɺͦͷޙɺ7$͔Βଟֹͷ౤ࢿ
    ΩϠϊϯ*5ιϦϡʔγϣϯζ͕ɹɹɹ
    ೔ຊͰϥΠηϯεΛൢച
    4FODIBͱ͸ʁ

    View full-size slide

  36. 4FODIB5PVDIͷμ΢ϯϩʔυ
    IUUQXXXTFODIBDPNQSPEVDUTUPVDI
    5PVDIͷ঎༻ϥΠηϯε͸ແྉͰ͢ʂ
    4FODIBͱ͸ʁ

    View full-size slide

  37. σεΫτοϓ޲͚ͷ&YU+4
    εϚʔτσόΠε޲͚ͷ4FODIB5PVDI
    ౷߹։ൃ؀ڥͷ4FODIB"SDIJUFDU
    ͦͷଞɺ(95ɺ"OJNBUPSɺ4QBDFͳͲ
    4FODIB੡඼

    View full-size slide

  38. +BWB4DSJQUͰ6*Λߏங

    View full-size slide

  39. +BWB4DSJQUͰ6*Λߏங

    View full-size slide

  40. %0.ʹ௚઀ΠϕϯτϋϯυϥΛ
    ઃఆ͠ͳ͍

    View full-size slide

  41. ΠϕϯτγεςϜΛ࢖͏

    View full-size slide

  42. ΫϥεγεςϜ
    ϓϩτλΠϓϕʔεͰ͸ͳ͘
    ΫϥεϕʔεͷΦϒδΣΫτࢦ޲
    ϓϩάϥϛϯά͕Ͱ͖Δ
    ΫϥεͷґଘੑΛ؅ཧʢSFRVJSFʣ
    ϑΝΠϧͷಈతϩʔσΟϯά

    View full-size slide

  43. .7$ύλʔϯ
    ϓϩάϥϜΛϞσϧɺϏϡʔɺ
    ίϯτϩʔϥʹ෼ׂͯ͠૊ΈཱͯΔ
    ࠷৽όʔδϣϯͰ͸.77.ύλʔϯΛ
    ࠾༻͢ΔΑ͏ʹ

    View full-size slide

  44. σʔλύοέʔδ
    σʔλΛ؆୯ʹ؅ཧ͢Δ࢓૊Έ
    ϞσϧɺετΞɺϓϩΩγ
    σʔλ؅ཧ͕ओ໨తͷΤϯλʔϓϥΠζ
    γεςϜͰॏๅ͢Δػೳ

    View full-size slide

  45. ςʔϚγεςϜ
    4BTTɺ$PNQBTTΛϕʔεʹͨ͠γεςϜ
    ม਺Λมߋ͢Δͱશମͷ഑৭͕มΘΔ
    .JYJOΛར༻ͯ͠৭ύλʔϯΛ࡞੒

    View full-size slide

  46. ίϚϯυϥΠϯπʔϧ
    4FODIB$NEʢίϚϯυʣ
    ϓϩδΣΫτͷ਽ܗੜ੒
    Ϋϥεͷ਽ܗੜ੒
    ΞϓϦέʔγϣϯͷϏϧυɹɹɹɹɹɹ
    ʢ݁߹ɺѹॖɺύοέʔδϯάɺFUDʣ

    View full-size slide

  47. υΩϡϝϯτ
    &YU+4Ͱ࡞ΒΕͨߴػೳυΩϡϝϯτ
    "1*ɺΨΠυɺαϯϓϧϓϩάϥϜ
    IUUQEPDTTFODIBDPN

    View full-size slide

  48. "HFOEB
    +BWB4DSJQUͰϞόΠϧΞϓϦ։ൃʁ
    4FODIB5PVDIೖ໳
    $PEF8BMLUISPVHI 5SJQMBN

    ·ͱΊ

    View full-size slide

  49. "HFOEB
    +BWB4DSJQUͰϞόΠϧΞϓϦ։ൃʁ
    4FODIB5PVDIೖ໳
    $PEF8BMLUISPVHI 5SJQMBN

    ·ͱΊ

    View full-size slide

  50. ·ͱΊ
    8FCͷٕज़Λ࢖ͬͯεϚϗΞϓϦ͕࡞Ε·͢
    1IPOF(BQΛ࢖͏ͱ͍Ζ͍Ζͳ͜ͱ͕Ͱ͖·͢
    6*෦඼΍ϓϩάϥϜߏஙͷαϙʔτͷͨΊʹɹɹɹ
    ։ൃϑϨʔϜϫʔΫΛ࢖͍·͠ΐ͏
    4FODIB5PVDIɺศརͩΑʂ

    View full-size slide

  51. ෇࿥ֶशϦιʔε
    ϋΠϒϦουΞϓϦ
    )5.-ϋΠϒϦουΞϓϦ։ൃʦ࣮ફʧೖ໳ʢٕज़ධ࿦ࣾʣ
    4FODIB5PVDI
    4FODIB5PVDIύʔϑΣΫτΨΠυ
    ΞεΩʔϝσΟΞϫʔΫε

    View full-size slide

  52. ෇࿥4FODIB΋͘΋͘ձ
    ΩϠϊϯ*5ιϦϡʔγϣϯζओ࠵
    IUUQXXXDBOPOJUTDPKQTFNJOBSTFODIBIUNM
    !
    !
    ࢀՃऀશһʹʮ4FODIB5PVDIͰͭ͘Δ
    )5.-ϞόΠϧΞϓϦʯ ᠳӭࣾ ԁ૬౰

    ΛϓϨθϯτ͠·͢ʂʂ
    !

    View full-size slide

  53. ෇࿥+BQBOFTF4FODIB'PSVN
    4FODIBࣾӡӦͷ೔ຊޠϑΥʔϥϜ
    IUUQTXXXTFODIBDPNGPSVNGPSVNEJTQMBZQIQ +BQBOFTF4FODIB'PSVN
    4FODIBΛ࢝Ίͯɺࠔͬͨ͜ͱ͕͋Ε͹ͥͻॻ͖ࠐΜͰԼ͍͞ʂ
    ࢲ΋ͨ·ʹ೷͍ͯ·͢ɻ

    View full-size slide

  54. 5IBOLZPV
    !LBXBOPTIJOPCV
    1IPUP$SFEJU
    IUUQXXXGMJDLSDPNQIPUPTXJMMJBNIPPL
    IUUQXXXGMJDLSDPNQIPUPTGJOOGSPEF
    IUUQXXXGMJDLSDPNQIPUPTNJLFZQIJMMJQT

    View full-size slide