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

インタラクションデザインと実装

nakajijapan
October 10, 2016

 インタラクションデザインと実装

nakajijapan

October 10, 2016
Tweet

More Decks by nakajijapan

Other Decks in Technology

Transcript

  1. TIJCVZBTXJGU
    !OBLBKJKBQBO
    ΠϯλϥΫγϣϯ
    σβΠϯͱ࣮૷

    View full-size slide

  2. huin ͞Μ
    גࣜձࣾFablic͞Μ
    ʹײँʂ

    View full-size slide

  3. @nakajijapan
    GMO PEPABO inc.
    Principal Engineer
    iOS / Web / OS X
    About Me
    Daichi Nakajima

    View full-size slide

  4. ϋϯυϝΠυ࡞඼Λ
    ചΕΔɺങ͑Δɻ
    ࠃ಺࠷େڃͷ
    ϋϯυϝΠυϚʔέοτ

    View full-size slide

  5. NKJMultiMovieCaptureView
    NKJMovieComposer
    NKJPagerViewController
    PhotoSlider
    Teiten
    GitHub
    Sengiri
    Shari
    frustration.me
    Kazaguruma

    View full-size slide

  6. Apple Pay JP
    launch partner

    View full-size slide

  7. ΠϯλϥΫγϣϯ
    ͱ࣮૷

    View full-size slide

  8. ΠϯλϥΫγϣϯ
    σβΠϯͱ͸

    View full-size slide

  9. ΠϯλϥΫγϣϯ

    View full-size slide

  10. ΠϯλϥΫγϣϯ
    ૬ޓ࡞༻
    wikipedia

    View full-size slide

  11. ΠϯλϥΫγϣϯ
    ͓ޓ͍͕
    ίϛϡχέʔγϣϯ͢Δ͜ͱ
    wikipedia

    View full-size slide

  12. ΠϯλϥΫγϣϯσβΠϯ
    ͓ޓ͍͕
    ίϛϡχέʔγϣϯ͢Δ͜ͱ
    wikipedia
    खॿ͚

    View full-size slide

  13. Ԡ༻ඒज़
    ʙΠϯλϥΫγϣϯσβΠϯͷڭՊॻʙ

    View full-size slide

  14. Ԡ༻ඒज़ͱ͸
    ඒज़Λ೔༻඼΍ߦࣄͳͲ΁
    Ԡ༻͢Δ͜ͱ

    View full-size slide

  15. ඒज़ͱ͸
    ࢹ֮ʹΑͬͯͱΒ͑Δ͜
    ͱΛ໨తͱͯ͠දݱ͞Ε
    ͨ଄ܗܳज़ͷ૯শ
    wikipedia

    View full-size slide

  16. wදݱऀ͕఻͍͑ͨ͜ͱΛؑ৆ऀʹ఻͑Δ
    wܗΛ଄ΒΕͨ΋ͷ
    wֆըɺூࠁɺݐஙɺ޻ܳ౳
    ඒज़ͱ͸

    View full-size slide

  17. Ԡ༻ඒज़ͱ͸
    ඒज़Λ೔༻඼΍ߦࣄͳͲ΁
    Ԡ༻͢Δ͜ͱ
    wikipedia

    View full-size slide

  18. Ԡ༻ඒज़ͱ͸
    ؾ࣋ͪΑ͘࢖ͬͯ΋Β͏ͨ
    Ίʹศརʹ͢Δ͜ͱ
    wikipedia

    View full-size slide

  19. ࣮༻తͰ͋Δ͜ͱ

    View full-size slide

  20. •໨ඪΛཱͯΔ
    •࣮ߦ͢Δ
    •ධՁ͢Δ
    ਓؒͷߦಈαΠΫϧ

    View full-size slide

  21. ҙਤ
    ܗ੒
    ߦಈ
    ܾఆ
    ࣮ߦ
    ஌֮
    ղऍ
    ධՁ
    ϊʔϚϯ
    ͷࣣஈ֊
    Ϟσϧ

    View full-size slide

  22. ҙਤ
    ܗ੒
    ߦಈ
    ܾఆ
    ࣮ߦ
    ஌֮
    ղऍ
    ධՁ
    ϊʔϚϯ
    ͷࣣஈ֊
    Ϟσϧ
    ΑΓখ͍ͯ͘͞͠
    ͘͜ͱ͕࢖͍΍͢
    ͞΁ͷۙಓ

    View full-size slide

  23. •ϩάΠϯ৘ใͷೖྗΛ͠ͳ͚Ε͹͍͚ͳ͍
    •߲໨ʹ͸༷ʑͳ੍ݶ͕͋Δ
    •શͯਖ਼͍͠৘ใʹͳΒͳ͍ͱSign upͰ͖ͳ
    ͍
    Sign up

    View full-size slide

  24. •ೖྗ͸େมɺ࠷େݶܰݮͤ͞Δ
    •ϦΞϧλΠϜʹద੾ͳ৘ใΛೖྗͤ͞Δ
    Α͏༠ಋ͠ɺ࣌ؒ୹ॖ
    •ϧʔϧΛ໌֬ʹͯ͠ঢ়ଶΛ஌֮ͤ͞Δ
    Sign up

    View full-size slide

  25. Sign up
    let selector = #selector(self.existsMinneID(_:))
    NSObject.cancelPreviousPerformRequestsWithTarget(self, selector: selector, object: cell)
    • UITextFieldDelegate#textFieldDidChange
    • Connection

    View full-size slide

  26. Keep a context

    View full-size slide

  27. • ࡏݿΛมߋͰ͖Δ
    Cart

    View full-size slide

  28. •ίϯςΩετΛҡ࣋͢Δ
    •ͳΜͷ࡞඼ΛબΜͩͷ͔
    •͙͢ʹࢦఆͷࡏݿʹมߋͰ͖Δ
    •ෆՄࢹτϦΨʔ
    •શମΛ֬ೝͰ͖ΔΑ͏ʹͰ͖Δ
    Cart

    View full-size slide

  29. Implementation

    View full-size slide

  30. Implementation
    • Container View Controller
    • presentViewControllerΛಠ࣮ࣗ૷͢Δ
    • No UIViewControllerTransitioningDelegate!
    • Ξχϝʔγϣϯͷதؒ஍఺Ͱը໘ΛࢭΊ
    ͔ͨͬͨͷͰར༻͍ͯ͠ͳ͍

    View full-size slide

  31. Implementation
    • Shari
    • https://github.com/nakajijapan/Shari

    View full-size slide

  32. Prevent mistakes

    View full-size slide

  33. • Scroll View಺ʹ͸ΧςΰϦͷҰཡ͕ଘࡏ
    • Կճ͔εϫΠϓ͠ͳ͚Ε͹͍͚ͳ͍৔߹͕
    ͋Δ
    • ը໘ྖҬʹ͸ݶք͕͋Δ
    • ؆୯ʹྖҬΛ޿͛ΔΘ͚ʹ͸͍͔ͳ͍
    Scroll View

    View full-size slide

  34. Implementation
    • εϫΠϓޙ̍ඵ͸εϫΠϓྖҬ͕޿͛Δ
    • ̍ඵҎ಺ʹεϫΠϓ͕͋Ε͹Ωϟϯηϧ
    • ͳ͚Ε͹εϫΠϓྖҬ͕໭Δ
    scroll view
    scroll view
    4XJQF
    scroll view scroll view

    View full-size slide

  35. Implementation

    View full-size slide

  36. Implementation
    let selector = #selector(self.unlockUserInteractionWithScrollView(_:))
    NSObject.cancelPreviousPerformRequestsWithTarget(self, selector: selector, object:
    scrollView)
    NSTimer.scheduledTimerWithTimeInterval(0.1, target: self, selector: selector, userInfo: nil,
    repeats: false)
    • Lazy Execution and Cancel

    View full-size slide

  37. ΠϯλϥΫγϣϯσβΠϯ
    ͓ޓ͍͕
    ίϛϡχέʔγϣϯ͢Δ͜ͱ
    wikipedia
    खॿ͚

    View full-size slide

  38. ΠϯλϥΫγϣϯσβΠϯ
    ࣮༻తͰ͋Δ͜ͱ

    View full-size slide

  39. •໨ඪΛཱͯΔ
    •࣮ߦ͢Δ
    •ධՁ͢Δ
    ਓؒͷߦಈαΠΫϧ

    View full-size slide

  40. • ঢ়گΛ఻͑ͯϑΟʔυόοΫΛఏڙ͢Δ
    • ίϯςΩετΛҡ࣋͢Δ
    • ϛεΛࣄલʹ๷͙
    ·ͱΊ

    View full-size slide