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

shibuya.swift #5
http://shibuya-swift.connpass.com/event/39841/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. View Slide

7. Apple Pay JP
   launch partner
   

   View Slide

8. View Slide

9. View Slide

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

    View Slide

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

    View Slide

12. ΠϯλϥΫγϣϯ
    

    View Slide

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

    View Slide

14. View Slide

15. View Slide

16. Interface
    

    View Slide

17. Interface
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. View Slide

23. ඒज़
    

    View Slide

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

    View Slide

25. View Slide

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

    View Slide

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

    View Slide

28. View Slide

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

    View Slide

30. ࣮༻తͰ͋Δ͜ͱ
    

    View Slide

31. View Slide

32. ਓ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. ☺
    

    View Slide

37. վળ
    

    View Slide

38. Case Study
    

    View Slide

39. Sign up
    

    View Slide

40. Feedback
    

    View Slide

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

    View Slide

42. View Slide

43. View Slide

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

    View Slide

45. Sign up
    

    View Slide

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

    View Slide

47. Cart
    

    View Slide

48. Keep a context
    

    View Slide

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

    View Slide

50. View Slide

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

    View Slide

52. Implementation
    

    View Slide

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

    View Slide

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

    View Slide

55. Scroll View
    

    View Slide

56. Prevent mistakes
    

    View Slide

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

    View Slide

58. View Slide

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

    View Slide

60. Implementation
    

    View Slide

61. 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 Slide

62. ·ͱΊ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

67. Thanks.
    
    

    View Slide