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

Beyond the Native!

Beyond the Native!

エクセルソフト・エンバカデロ共催セミナー
「モバイル向けクロスプラットフォーム開発ツールのイマを体感 ~3大モバイルアプリ開発ツールを総ざらえ~」

Shinobu Kawano

December 18, 2014
Tweet

More Decks by Shinobu Kawano

Other Decks in Programming

Transcript

  1. Beyond the Native!
    )5.-̑ΞϓϦέʔγϣϯ։ൃπʔϧ4FODIBͷ͝঺հ
    2014.12.18 @ XLsoft + Embarcadero’s Seminar

    View full-size slide

  2. Zofari is joining Yahoo!

    View full-size slide

  3. WHO AM I?
    KAWANO Shinobu
    Sales Engineer at
    Canon IT Solutions, Inc
    Twitter : kawanoshinobu
    GitHub : kawanoshinobu

    View full-size slide

  4. 4FODIB஡๪ɺ΋͘΋͘ձ

    View full-size slide

  5. I — open source programming.

    View full-size slide

  6. (Sencha Insights #6)
    Ext.ux.AccordionList by KAWANO Shinobu
    This Sencha Touch component allows you to create lists whose items can be
    expanded to reveal further nested list items. A very useful project whose source
    code can be found on GitHub.
    (Sencha Insights #9)
    Hello, Sencha Touch Flat UI Theme
    If you're keen on the "Flat Design" trend then this open source Sencha Touch
    theme is what you're looking for. It is a very attractive and trendy theme that can
    be dropped into your applications now.
    (Sencha Insights #14)
    Sencha Touch + WebRTC!
    This demo shows off a WebRTC extension for Sencha Touch that shows how the
    technology can work within a Sencha Touch app. A very interesting demo!

    View full-size slide

  7. 4FODIBϑϨʔϜϫʔΫͷ͝঺հ
    σϞϯετϨʔγϣϯ
    2"
    AGENDA

    View full-size slide

  8. 4FODIBϑϨʔϜϫʔΫͷ͝঺հ
    σϞϯετϨʔγϣϯ
    2"
    AGENDA

    View full-size slide

  9. ૿͑ଓ͚ΔϓϥοτϑΥʔϜ
    8JOEPXT .BD049 -JOVY
    J04
    "OESPJE ,JOEMF'JSF
    8JOEPXT1IPOF
    #MBDL#FSSZ
    5J[FO 'JSF'PY04

    View full-size slide

  10. J04ΞϓϦͷ։ൃ
    0CKFDUJWF$ͰϓϩάϥϜΛॻ͘
    9DPEFʢ*%&ʣΛར༻͢Δ
    J04ͷ"1*Λར༻͢Δ
    J04ΞϓϦ։ൃͷϊ΢ϋ΢ΛֶͿ
    όʔδϣϯΞοϓʹରԠ͢Δ

    View full-size slide

  11. "OESPJEΞϓϦͷ։ൃ
    +BWBͰϓϩάϥϜΛॻ͘
    &DMJQTFʢ*%&ʣΛར༻͢Δ
    "OESPJEͷ"1*Λར༻͢Δ
    "OESPJEΞϓϦ։ൃͷϊ΢ϋ΢ΛֶͿ
    όʔδϣϯΞοϓʹରԠ͢Δ

    View full-size slide

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

    View full-size slide

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

    ։ൃίετɺอकίετͷ࡟ݮʂ

    View full-size slide

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

    View full-size slide

  15. )5.-ͷσϝϦοτ
    ػೳཁ݅Λຬͨͤͳ͍৔߹͕͋Δ
    ϓογϡ௨஌ɺ഑෍ɺFUD
    ϢʔβʔମݧΛଛͳ͏৔߹͕͋Δ

    View full-size slide

  16. σϝϦοτΛຒΊΔ
    ػೳཁ݅Λຬͨͤͳ͍৔߹͕͋Δ
    ϓογϡ௨஌ɺ഑෍ɺFUD
    ϢʔβʔମݧΛଛͳ͏৔߹͕͋Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. اۀ޲͚ͷϞόΠϧΞϓϦ͸ɺա൒਺͕
    )5.-Λ༻͍ͨϋΠϒϦουΞϓϦʹͳΔ
    IUUQXXXHBSUOFSDPNOFXTSPPNJE

    View full-size slide

  24. σϝϦοτΛຒΊΔ
    ػೳཁ݅Λຬͨͤͳ͍৔߹͕͋Δ
    ϓογϡ௨஌ɺ഑෍ɺFUD
    ϢʔβʔମݧΛଛͳ͏৔߹͕͋Δ

    View full-size slide

  25. ϥΠϒϥϦɺπʔϧΛ׆༻͢Δ

    View full-size slide

  26. ϥΠϒϥϦɺπʔϧΛ׆༻͢Δ
    )5.-ΞϓϦΛ࡞ΔͨΊͷϥΠϒϥϦ͸
    Φʔϓϯιʔεͷ΋ͷ͕΄ͱΜͲʂ

    View full-size slide

  27. ΦʔϓϯιʔεͷϥΠϒϥϦ
    ͋Δ໨తʹಛԽͨ͠୯ػೳͷίʔυ

    ޮՌతʹ૊Έ߹ΘͤΔͷ͸৬ਓܳͷੈք
    কདྷੑ

    ϝϯςφϯε͕์ஔ͞ΕΔ͜ͱ΋͋Δ
    υΩϡϝϯτ

    ιʔείʔυ͕࢓༷ɺͱ͍͏͜ͱ΋

    View full-size slide

  28. ੜଘظؒͷ୹͍ΞϓϦͳΒɺͦΕͰ΋Α͔ͬͨ
    ظؒݶఆͷαΠτ
    झຯͷΞϓϦ
    FUD

    View full-size slide

  29. اۀγεςϜͰ͸ͦΕͰ͸ࠔΔʂ

    View full-size slide

  30. اۀγεςϜ։ൃͷಛ௃
    ௕ظʢ೥ʙʣͷϝϯςφϯε
    εΩϧͷҟͳΔϝϯόʔͰͷڠۀ

    ඼࣭΍ਐ௙Λ͍͔ʹ҆ఆͤ͞Δ͔
    ෯޿͍ϒϥ΢βରԠ
    ཁһͷ֬อɺҭ੒

    View full-size slide

  31. ϥΠϒϥϦͷબఆ
    ϥΠϒϥϦͷ૊Έ߹Θͤ

    ʢෆ੔߹͕͓͖ͳ͍͔ʣ
    ϥΠϒϥϦͷόʔδϣϯΞοϓ
    ϓϩδΣΫτͷӬଓੑ
    ࣗ৴Λ࣋ͬͯ൑அͰ͖·͔͢ʁ

    View full-size slide

  32. ͦ͜ʹ4FODIBͷଘࡏཧ༝͕͋Γ·͢ʂ

    View full-size slide

  33. ϑϧελοΫʢશ෦ࠐΈʣʂ
    ๛෋ͳ6*ίϯϙʔωϯτ
    ΫϥεγεςϜ
    .7$ɺ.77.ΞʔΩςΫνϟ
    σʔλύοέʔδ
    ϢʔςΟϦςΟؔ਺
    ςʔϚγεςϜ
    Ϗϧυπʔϧ
    ౷߹։ൃ؀ڥʢ*%&ʣ
    FUD

    View full-size slide

  34. اۀγεςϜ։ൃΛҙࣝͨ͠ઃܭ
    ෯޿͍ϒϥ΢βαϙʔτ
    *&ɺ*&͔Β࠷৽ͷ$ISPNF·Ͱ
    େྔσʔλૢ࡞࣌ͷύϑΥʔϚϯε
    ۀ຿ΞϓϦʹదͨ͠6*ίϯϙʔωϯτ
    άϦου
    νϟʔτɺάϥϑ
    νʔϜ։ൃΛॏࢹ
    FUD

    View full-size slide

  35. ։ൃϕϯμʔʹΑΔαϙʔτ
    υΩϡϝϯτ
    νϡʔτϦΞϧɺ8FCJOBS
    ແঈαϙʔτ
    ༗ঈαϙʔτ
    ٕज़ίϯαϧςΟϯά
    τϨʔχϯά
    ܧଓతͳόʔδϣϯΞοϓ

    FUD

    View full-size slide

  36. େاۀͰͷಋೖ࣮੷ʂ

    View full-size slide

  37. ͜ΕͳΒ҆৺ͯ͠ར༻Ͱ͖Δʂ

    View full-size slide

  38. ͓٬༷΋)BQQZ

    5
    H 5

    View full-size slide

  39. “We're choosing Sencha as our name because it
    evokes next-generation software development
    and it's easy to remember, spell and pronounce.
    Sencha -- the name of a popular Japanese green
    tea -- is in the tradition of Java, and represents a
    new level of development.”
    Ext JS + jQTouch + Raphaël = Sencha
    http://www.sencha.com/blog/ext-js-jqtouch-raphael-sencha/
    Tips: SENCHA?

    View full-size slide

  40. SENCHA EXT JS

    View full-size slide

  41. SENCHA TOUCH

    View full-size slide

  42. SENCHA ARCHITECT

    View full-size slide

  43. ͓໰͍߹Θͤ͸ͪ͜Βʂ

    View full-size slide

  44. 4FODIBϑϨʔϜϫʔΫͷ͝঺հ
    σϞϯετϨʔγϣϯ
    2"
    AGENDA

    View full-size slide

  45. 5SJQMBN͸झຯͰ࡞੒ͨ͠
    ΦʔϓϯιʔεΞϓϦͰ͢ɻ
    ˞4FODIB੡඼͸঎༻ϥΠηϯεͱ
    ΦʔϓϯιʔεϥΠηϯεʢ(1-ʣͷ
    σϡΞϧϥΠηϯεͰ͢ɻ

    View full-size slide

  46. 5SJQMBNͷٕज़త಺৘
    ✈ϥΠϒϥϦ
    4FODIB&YU+4
    4FODIB5PVDI
    ✈πʔϧ
    4FODIB"SDIJUFDU
    8FC4UPSN
    "QQ*OTQFDUPS4FODIB
    4JFTUB
    $PSEPWB
    9DPEF "OESPJE4%,
    (JU
    ✈σʔλετϨʔδ
    1BSTF N#BB4

    ✈ϓογϡ௨஌
    1BSTF N#BB4

    ✈Ϣʔβʔೝূ
    'BDFCPPL"1*
    ✈ϒϥ΢β
    (PPHMF$ISPNF

    View full-size slide

  47. Desktop Interface

    View full-size slide

  48. Smart Phone Interface

    View full-size slide

  49. Available on the App Store

    View full-size slide

  50. Ұൠతͳ8FCϖʔδ
    IUNMMBOHKB
    IFBE
    TDSJQUUZQFUFYUKBWBTDSJQUTSDlKTFYUBMMKT
    TDSJQUʜ
    IFBE
    CPEZ
    EJWJETJUFOBWDMBTTTJUFOBW
    BISFGDMBTTNFOVJDPO
    JDMBTTGBGBCBSTJ
    B

    View full-size slide

  51. 4FODIB
    IUNMMBOHKB
    IFBE
    TDSJQUUZQFUFYUKBWBTDSJQUTSDlKTFYUBMMKT
    TDSJQUʜ
    IFBE
    CPEZ
    CPEZ
    IUNM

    View full-size slide

  52. 4FODIB
    IUNMMBOHKB
    IFBE
    TDSJQUUZQFUFYUKBWBTDSJQUTSDlKTFYUBMMKT
    TDSJQUʜ
    IFBE
    CPEZ
    CPEZ
    IUNM

    View full-size slide

  53. ී௨ͱ͸ҧ͏Ξϓϩʔν

    View full-size slide

  54. +BWB4DSJQUͰ6*Λఆٛ

    View full-size slide

  55. ϨΰϒϩοΫͷΑ͏ʹੵΈ্͛Δ

    View full-size slide

  56. ϓϩύςΟΛઃఆ

    View full-size slide

  57. Ͱ͖͕͋Γʂ

    View full-size slide

  58. +4Ͱ6*Λఆٛ͢ΔϝϦοτ
    อकੑͷେ෯ͳ޲্
    6*ͷϥΠϑαΠΫϧͷ؅ཧ
    (6*πʔϧͰͷ8:4*8:(։ൃ

    View full-size slide

  59. +4Ͱ6*Λఆٛ͢ΔσϝϦοτ
    ಈతʹ%0.Λੜ੒͢Δίετ
    ίϯϙʔωϯτຖͷϝϞϦར༻

    View full-size slide

  60. +4Ͱ6*Λఆٛ͢ΔσϝϦοτ
    ಈతʹ%0.Λੜ੒͢Δίετ
    ίϯϙʔωϯτຖͷϝϞϦར༻
    ϨΨγʔϒϥ΢βʷ
    ࠷ۙͷϒϥ΢β˓
    কདྷˑˑˑ

    View full-size slide

  61. BUILT IN THEME

    View full-size slide

  62. CUSTOM COMPONENT

    View full-size slide

  63. Native Packaging (iOS)

    View full-size slide

  64. Native Packaging (Android)

    View full-size slide

  65. )5.-͸௿ίετɾΫϩεϓϥοτϑΥʔϜ
    8FCͰෆՄೳͳػೳཁ݅͸ϋΠϒϦουͰ࣮ݱ
    ߴ඼࣭ͳ)5.-ΞϓϦΛ։ൃ͢ΔͳΒ

    ϑϧελοΫͰ࣮੷े෼ͷ4FODIBͰʂ
    CONCLUSION

    View full-size slide

  66. ଓʑͱ੒ޭࣄྫ͕ੜ·Ε͍ͯ·͢ʂ

    View full-size slide

  67. 4FODIBΛ׆༻ͯ͠৽͍࣌͠୅ͷ
    ΞϓϦέʔγϣϯΛ։ൃ͠·͠ΐ͏ʂ

    View full-size slide

  68. PHOTO CREDITS
    http://www.flickr.com/photos/zergev/8430388219/
    http://www.flickr.com/photos/jstar/409405305
    http://www.flickr.com/photos/msittig/7268114390/
    http://www.flickr.com/photos/finnfrode/9420285303
    http://www.flickr.com/photos/74576085@N00/5428693024/
    http://www.flickr.com/photos/greencolander/3203922211
    http://www.flickr.com/photos/tetsumo/3802078924
    http://www.flickr.com/photos/losangelespersonaltrainer/
    9784885695
    4FODIB͸ɺ4FODIB*ODͷొ࿥঎ඪͰ͢ɻ
    .JDSPTPGUɺ8JOEPXTɺ*OUFSOFU&YQMPSFS͸ɺถࠃ.JDSPTPGU$PSQPSBUJPOͷถࠃɺ೔ຊ͓Αͼͦͷଞͷࠃʹ͓͚Δొ࿥঎ඪ·
    ͨ͸঎ඪͰ͢ɻ
    .BD͸ɺถࠃ͓ΑͼͦͷଞͷࠃͰొ࿥͞Ε͍ͯΔ"QQMF*ODͷ঎ඪͰ͢ɻ
    ͦͷଞهࡌ͞Ε໊ͨࣾɺ੡඼໊౳͸ɺͦΕͧΕ֤ࣾͷొ࿥঎ඪ·ͨ͸঎ඪͰ͢ɻ

    View full-size slide