$30 off During Our Annual Pro Sale. View Details »

データバインディングによるインタラクティブなUIの効率的な表現

 データバインディングによるインタラクティブなUIの効率的な表現

久保田光則

June 09, 2013
Tweet

More Decks by 久保田光則

Other Decks in Programming

Transcript

  1. σʔλόΠϯσΟϯάʹΑΔ
    ΠϯλϥΫςΟϒͳ6*ͷޮ཰తͳදݱ
    ΞγΞϧגࣜձࣾ
    ٱอాޫଇ

    View Slide

  2. ΞδΣϯμ
    w ࣗݾ঺հ
    w σʔλόΠϯσΟϯάΛ࣮ࡍʹࢼͯ͠ΈΔ
    w ࠓ·Ͱͷ6*ͷ࡞Γํ
    w ϦΞΫςΟϒϓϩάϥϛϯά
    w ·ͱΊ

    View Slide

  3. ࣗݾ঺հ
    w ٱอాޫଇ!BOBUPP
    w ΞγΞϧגࣜձࣾ
    w 6*69σβΠφʔ݉ιϑτ΢ΣΞΤϯδχΞ

    View Slide

  4. 6*69σβΠφʔͬͯԿ
    w ϢʔβʔετʔϦʔ࡞ͬͨΓ
    w ϫΠϠϑϨʔϜॻ͍ͨΓ
    w ϏδϡΞϧσβΠϯͨ͠Γ

    View Slide

  5. ී௨ͷ։ൃ΋
    w 1)1 +BWB4DSJQU +BWB BOESPJE

    0CKFDUJWF$ $PDPB J04
    'BDUPS
    $ $ 4DBMB
    w ΘΓͱͳΜͰ΋΍Δ

    View Slide

  6. ϗϜϖ
    w IUUQBOBUPPKQ
    w IUUQEIBUFOBOFKQBOBUPP

    View Slide

  7. ࣗݾ঺հऴΘΓ

    View Slide

  8. ࿩ΛਐΊΔલͷഎܠ

    View Slide

  9. ࠷ۙͷ΢ΣϒΞϓϦͷ6*
    w ΊͬͪΌϦονʹͳ͖ͬͯͨ

    View Slide

  10. w ྫIUUQJ$MPVEDPNͷΧϨϯμʔ

    View Slide

  11. w ྫIUUQTUSJQFDPNͷ؅ཧը໘

    View Slide

  12. w ྫIUUQNPOBDBNPCJͷ*%&

    View Slide

  13. มΘ͖ͬͯͨ͜ͱ
    w 4JOHMF1BHF"QQMJDBUJPOͷීٴ
    w σεΫτοϓͷ(6*ʹ͍͖ۙͮͯͨ

    View Slide

  14. ͦΜͳத͜͜਺೥Ͱొ৔ͨ͠΋ͷ
    wσʔλόΠϯσΟϯά

    View Slide

  15. ޮ཰తʹ
    ϢʔβʔΠϯλʔϑΣΠε
    Λදݱ͢ΔͨΊͷύλʔϯ

    View Slide

  16. ݩʑ͸(6*Ͱར༻͞Ε͍ͯͨ

    View Slide

  17. ΢ΣϒϑϩϯτΤϯυ͕Ϧονʹ
    w ͦΕʹ൐͍ɺσʔλόΠϯσΟϯά΋(6*ͷੈք͔Β΢Σ
    ϒ΁ͱ߱Γ͖ͯͨ

    View Slide

  18. +4ϑϨʔϜϫʔΫͰͷ࠾༻૿Ճ
    w "OHVMBSKT
    w ,OPDLPVUKT
    w &NCFSKT
    w ,OPDLCBDLKT
    w #BUNBOKT
    w FUD

    View Slide

  19. ͬͦ͘͞
    σʔλόΠϯσΟϯά
    ͷ঺հ

    View Slide

  20. +4ͰͷσʔλόΠϯσΟϯά
    w +4ͱ%0.ͷؔ܎Λએݴ͢Δ࢓૊Έ
    w ͲͪΒ͔͕ߋ৽͞ΕΔͱ΋͏Ұํʹࣗಈ൓ө͞ΕΔ
    %0.ཁૉ
    +4ͷ
    ΦϒδΣΫτ

    View Slide

  21. ૣ଎ࢼͯ͠ΈΔ
    w ,OPDLPVUKT
    w Θ͔Γ΍͍͢σʔλόΠϯσΟϯάΛ
    αϙʔτ͍ͯ͠Δ'8

    View Slide

  22. )5.-ʹόΠϯσΟϯάΛॻ͘
    w %0.ཁૉͱ+BWB4DSJQUͷม਺ͱͷ
    ؔ܎Λએݴ
    First name:


    Hello
    !

    View Slide

  23. +4ଆͷΦϒδΣΫτΛએݴ͢Δ
    w +BWB4DSJQUଆͰఏڙ͢Δ஋Λ
    એݴͯ݁͠ͼ͚ͭΔ
    w ޙ͸஋͕มΘΕ͹উखʹ൓ө
    var MyViewModel = function() {
    this.name = ko.observable(‘’);
    };
    ko.applyBindings(new MyViewModel());

    View Slide

  24. σϞ
    w ૣ଎ࢼͯ͠ΈΔ

    View Slide

  25. σϞ
    w ؆୯ͳ50%0ΞϓϦΛ࡞ͬͯΈΔ ໿෼

    IUUQBOBUPPKQCJGUPEPBQQIUNM

    View Slide

  26. ར఺
    w %0.ߏ଄ʹؾΛ࢖Θͳͯ͘΋ྑ͍
    w ࣗಈͰ6*ߋ৽ɻ%0.ૢ࡞͔Β։์͞ΕΔ
    w ݁Ռɺίʔυ͕ݮΔ

    View Slide

  27. ܽ఺
    w ֶशίετ͕ඞཁ
    w ߟ͑ํͷస׵͕ඞཁ

    View Slide

  28. w ͳͥࠓ·Ͱͷ΍ΓํͰ͸ବ໨ͳͷ͔
    w σʔλόΠϯσΟϯάͷഎܠʹ͋Δߟ͑ํ͸

    View Slide

  29. ࠓ·Ͱ
    w զʑ͸+4ͰͲ͏΍ͬͯ6*Λ࡞͖͔ͬͯͨ
    w ΢ΣϒͰͷΠϯλϥΫςΟϒͳ6*Λߏ੒͢Δ΋ͷ͸

    View Slide

  30. ΢ΣϒϖʔδͷϨϯμϦϯά

    View Slide

  31. ϨϯμϦϯάͷྲྀΕ
    )5.- ύʔε ϨϯμϦϯά
    ຊ౰͸΋ͬͱෳࡶ
    $44
    %0.
    πϦʔ

    View Slide

  32. %0.πϦʔ
    )5.-υΩϡϝϯτΛදݱ͢ΔπϦʔߏ଄ͷσʔλ
    ֤ϊʔυ͸ϚʔΫΞοϓͱҰରҰͰରԠ

    View Slide

  33. ΠϯλϥΫςΟϒͳ6*Ͱ͸
    w Ϣʔβͷೖྗʹରͯ͠ಈతʹ6*ΛมԽͤ͞Δඞཁ
    w ೖྗͷྫϚ΢εͷΫϦοΫɺϑΥʔϜͷೖྗͳͲ

    View Slide

  34. +BWB4DSJQU͔Β%0.Λૢ࡞
    +BWB4DSJQU
    +4͔Βૢ࡞
    ࠶ϨϯμϦϯά ҧ͏ϨϯμϦϯά݁Ռ

    View Slide

  35. ࣌ܥྻͰද͢ͱ
    +BWB4DSJQU
    %0.πϦʔ
    զʑ͸܁Γฦ͠%0.ૢ࡞Λ͍ͯ͠Δ
    %0.ૢ࡞
    %0.ૢ࡞
    %0.ૢ࡞
    %0.ૢ࡞

    View Slide

  36. %0.πϦʔʹϑΥʔΧε
    w %0.πϦʔͷมԽ͕ಈతͳ6*Λߏ੒

    View Slide

  37. ͜Ε·Ͱͷ࣮૷Ξϓϩʔν
    w %0.πϦʔͷมԽΛશͯίʔσΟϯά
    w %0.ૢ࡞ओମͷ΍Γํ

    View Slide

  38. ͜ΕͰ6*ͷߏஙʹؔ͢Δ
    ໰୊͸ղܾ͔ͨ͠
    w ͦ͏͸ߦ͔ͳ͍

    View Slide

  39. ΍ͬͯΈΔͱ௒େม
    w ͳΜ͔ޮ཰͕ѱ͍
    w ίʔυͷྔ͕ݮΒͳ͍
    w ϝϯςφϯε͕େม

    View Slide

  40. ͱ͍͏ͷ΋
    w ৗʹ%0.πϦʔͷߏ଄Λ಄ʹೖΕ͍ͯͳ͍ͱߦ͚ͳ͍
    w %0.πϦʔͷߏ଄ʹґଘͨ͠ίʔυʹͳ͍ͬͯΔ
    w )5.-Λฤू͢ΔͱϏϡʔͷίʔυ͕յΕΔ͜ͱ΋

    View Slide

  41. ߟ͑ํͷస׵͕ඞཁ

    View Slide

  42. ϦΞΫςΟϒϓϩάϥϛϯά

    View Slide

  43. ϦΞΫςΟϒϓϩάϥϛϯά
    w ϓϩάϥϛϯάύϥμΠϜ
    w ϦΞϧλΠϜʹมԽ͢Δ஋Λѻ͏
    w σʔλόΠϯσΟϯάͱؔ࿈͢Δߟ͑ํ

    View Slide

  44. w ܭࢉΛهड़͢ΔͷͰ͸ͳ͘ɺ
    ܭࢉͷؔ܎Λએݴ͢Δ
    ϓϩάϥϛϯάύϥμΠϜ

    View Slide

  45. ؆୯ͳ਺ࣜͰߟ͑ͯΈΑ͏
    a = b + 4;

    View Slide

  46. ΋͠ɺC͕ͩͬͨΒ
    w ౰વɺBʹͳΔ
    a = b + 4;

    View Slide

  47. ΋͠ɺC͕ͩͬͨΒ
    w ౰વɺBʹͳΔ
    a = b + 4;

    View Slide

  48. B͸Cʹґଘ͍ͯ͠Δ
    w Cͷ஋ʹΑͬͯB͕ܾఆ͢Δ
    a = b + 4;

    View Slide

  49. a = b + 4;
    มԽ͢Δ஋ͷؔ܎
    w ͱͯ͠΋ݟͳͤΔ

    View Slide

  50. ϦΞΫςΟϒϓϩάϥϛϯάͰ͸
    w Ұ୴มԽ͢Δ஋ͷؔ܎ੑΛએݴ͢Ε͹
    উखʹ࠶ܭࢉͯ͘͠ΕΔ
    w ঢ়ଶ؅ཧ͔Β։์͞ΕΔ
    a = b + 4;

    View Slide

  51. ͦΕͬͯ࢖ΘΕͯΔͷ

    View Slide

  52. ͢Ͱʹ͋ͳͨ͸
    ϦΞΫςΟϒϓϩάϥϛϯά
    Λ஌͍ͬͯΔ

    View Slide

  53. ྫ&YDFM౳ͷදܭࢉιϑτ
    w ਺ࣜΛॻ͍͓ͯ͘ͱɺґଘ͢Δηϧͷத਎͕ߋ৽͞ΕΔͱ
    ࠶ܭࢉ͞ΕΔ

    View Slide

  54. ࣮͸ɺ6*ʹ΋
    w ͜ͷߟ͑ํ͕៉ྷʹ౰ͯ͸·Δ

    View Slide

  55. ྫͰߟ͑Α͏
    w SFNFNCFSUIFNJMLͷొ࿥ϑΥʔϜ

    View Slide

  56. ϑΥʔϜʹೖྗ͢Δͱ
    w Ϣʔβͷೖྗʹରͯ͠ΞϧλΠϜʹมԽ

    View Slide

  57. w ೖྗʹରͯ͠%0.πϦʔ͕
    ϦΞϧλΠϜʹมԽ

    View Slide

  58. ͔͠͠ɺ
    Α͘؍࡯ͯ͠ΈΔͱ

    View Slide

  59. Α͘ݟΔͱ
    w όϦσʔγϣϯͷ6*͸ϑΥʔϜʹґଘ͍ͯ͠Δ
    w͜ͷґଘͷؔ܎͸ෆม

    View Slide

  60. ͜ͷྫʹݶΒͣ
    ͲΜͳ6*Ͱ΋஋ؒͷؔ܎͕ଘࡏ
    ͢Δ

    View Slide

  61. σʔλόΠϯσΟϯά͸
    w ͜ͷϦΞΫςΟϒϓϩάϥϛϯάͷߟ͑ํΛ
    6*ʹద༻͍ͯ͠Δ
    w %0.ૢ࡞ओମͷߟ͑ํͱ͸શ͘ผ෺

    View Slide

  62. ͜Ε͔Βͷ࿩

    View Slide

  63. ࿩Λੲ΁໭͢
    w Πϯλʔωοτʹ઀ଓ͢Δͷʹ
    ϞσϜ͕ϐʔώϣϩ໐͍ͬͯͨ͋ͷࠒ
    w ωοτΛ͍ͯͨ͠ΒՈ଒ʹి࿩͕࢖͑ͳ͍ͱۤ৘ΛݴΘΕ
    Δ

    View Slide

  64. ͜ͷࠒͷ΢ΣϒΞϓϦ
    w αʔόαΠυͰͷॲཧ͕΄΅ϝΠϯ
    w +BWB4DSJQUͰԿ͔΍ͬͨΓ͸΄΅ແ͠
    w BKBYͱ͔ແ͍͠ɺ$44΋ແ͍
    w ςʔϒϧϨΠΞ΢τ͸ਖ਼ٛ

    View Slide

  65. ࣌͸ਐΈ
    w HPPHMF.BQͳͲͷొ৔
    w 8FCͱ͍͏ݴ༿͕όζϫʔυʹ
    w ΢ΣϒΞϓϦέʔγϣϯͱ͍͏ݴ༿͕౰વʹ

    View Slide

  66. ࠓʹࢸΔ
    w σεΫτοϓΞϓϦฒͷ6*
    w पลٕज़ͷߴ౓Խ

    View Slide

  67. աڈ͔ΒະདྷΛ༧ଌ͢Δ
    w )5.-ͷීٴ
    w ߴ౓ͳ6*Λ࣋ͬͨΞϓϦͷ૿Ճ
    w গͳ͘ͱ΋͋ͱ೥͙Β͍

    View Slide

  68. ͜Ε͔Β
    w ·ͩখ೉͍͠ཧ۶͸ඞཁͳ͍
    w ࠓඞཁͳͯ͘΋͜Ε͔Βඞཁʹͳͬͯ͘Δ

    View Slide

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

    View Slide