tvOSアプリUIの勘所

iOSDC Japan 2018 での発表内容。

2018/08/31 16:50〜 Track D レギュラートーク（15分）

https://fortee.jp/iosdc-japan-2018/proposal/d3956aa0-cd00-426f-a91e-c029c9939ab8

なお、このスライドだけだとフォーカス・クイズのあたりなど全くわからない（アニメーションされないため）かと思います。

フォーカス・クイズはこちらに元ネタがあります > https://www.tokoro.me/posts/tvos_advent_calendar_1/

テレビのリモコンの取り扱いについてはこちらが元ネタです > https://www.tokoro.me/posts/tvos_advent_calendar_2/

TVUIKitなどtvOS 12の内容については詳細を「iOS 12 Programming」で執筆中になります > https://peaks.cc/iOS12

Transcript

1. tvOSΞϓϦUIͷצॴ
   ॴ ༑ଠ / Yuta Tokoro, iOS & tvOS App Programmer
   #iOSDC Japan 2018
   2018/08/31 16:50ʙ Track D ϨΪϡϥʔτʔΫʢ15෼ʣ
   

   View Slide

2. ॴ ༑ଠ / Yuta Tokoro
   @tokorom tokorom
   Spinners Inc.
   

   View Slide

3. ࣭໰
   • 1. tvOSͷΞϓϦΛ։ൃͨ͜͠ͱ͕͋Γ·͔͢ʁ
   
   • 2. iOSʢUIKitʣͷΞϓϦΛ։ൃͨ͜͠ͱ͕͋Γ·͔͢ʁ
   

   View Slide

4. Agenda
   • tvOSͱiOSΞϓϦͷҧ͍
   
   • ϑΥʔΧεͷऔΓѻ͍
   
   • ςϨϏͷϦϞίϯͷऔΓѻ͍
   
   • TVUIKit
   
   • Password AutoFillʢ͕࣌ؒ༨ͬͨΒ͓·͚ͱͯ͠ʣ
   

   View Slide

5. tvOSͱiOSΞϓϦͷҧ͍
   

   View Slide

6. tvOSΞϓϦ͸
   ؆୯ʹ࡞Ε·͔͢ʁ
   

   View Slide

7. ࡞Ε·͢ɻ
   

   View Slide

8. iOSΞϓϦ͔ΒtvOSΞϓϦΛ࡞ͬͨྫ
   30%
   50%
   20%
   ίʔυྔͷׂ߹
   iOSઐ༻
   tvOSઐ༻
   ڞ௨෦෼
   ※Swiftίʔυͷจࣈ਺
   

   View Slide

9. iOSΞϓϦ͔ΒtvOSΞϓϦΛ࡞ͬͨྫ
   73%
   27%
   ݩͷiOSίʔυͷ73%Λڞ༻
   iOSઐ༻
   ڞ௨෦෼
   

   View Slide

10. ͲͷลΓΛ௥Ճ։ൃʁ
    Model / Library
    View Controller
    View
    Storybord / xib
    

    View Slide

11. ͳͥ ڞ༻Ͱ͖Δʁ
    • tvOSΞϓϦͰ͸UIKit͕΄ͱΜͲͦͷ··࢖͑Δ
    
    • Foundation΍Core Graphics΋ͦͷ··࢖͑Δ
    
    • AVFoundation΍PhotoKitͳͲ΋࢖͑Δ
    

    View Slide

12. iOSΞϓϦ։ൃͱ
    ΄ͱΜͲಉ͡
    

    View Slide

13. Ͳ͕͜ҧ͏ʁ
    

    View Slide

14. tvOSΞϓϦͱiOSΞϓϦͷҧ͍
    • iPhoneɺiPadͳͲݶΒΕͨը໘΁ͷදࣔͰͳ͘ɺࢢൢͷ
    ςϨϏʹΞϓϦΛදࣔ͢Δ
    
    • iOSΞϓϦͷΑ͏ʹը໘ΛλονͰ͖ͣɺϑΥʔΧεͱ
    ͍͏֓೦Λѻ͏ඞཁ͕͋Δ
    
    • ςϨϏͷϦϞίϯͰૢ࡞Ͱ͖Δඞཁ͕͋Δ
    

    View Slide

15. େ͖͘ҧ͏ͷ͸
    User Interface
    

    View Slide

16. tvOSΞϓϦͱiOSΞϓϦͷҧ͍
    • iPhoneɺiPadͳͲݶΒΕͨը໘΁ͷදࣔͰͳ͘ɺࢢൢͷ
    ςϨϏʹΞϓϦΛදࣔ͢Δ
    
    • iOSΞϓϦͷΑ͏ʹը໘ΛλονͰ͖ͣɺϑΥʔΧεͱ
    ͍͏֓೦Λѻ͏ඞཁ͕͋Δ
    
    • ςϨϏͷϦϞίϯͰૢ࡞Ͱ͖Δඞཁ͕͋Δ
    

    View Slide

17. Agenda
    ✓tvOSͱiOSΞϓϦͷҧ͍
    
    • ϑΥʔΧεͷऔΓѻ͍
    
    • ςϨϏͷϦϞίϯͷऔΓѻ͍
    
    • TVUIKit
    
    • Password AutoFill
    

    View Slide

18. ϑΥʔΧε
    ͷऔΓѻ͍
    

    View Slide

19. ϑΥʔΧε͕ඞཁͳཧ༝
    

    View Slide

20. ϑΥʔΧε͕ඞཁͳཧ༝
    

    View Slide

21. ϑΥʔΧε͕ඞཁͳཧ༝
    

    View Slide

22. ϑΥʔΧεɾΫΠζ
    

    View Slide

23. ϑΥʔΧεɾΫΠζ 1
    

    View Slide

24. ϑΥʔΧεɾΫΠζ 1
    

    View Slide

25. ϑΥʔΧεɾΫΠζ 2
    

    View Slide

26. ϑΥʔΧεɾΫΠζ 2
    

    View Slide

27. ϑΥʔΧεɾΫΠζ 3
    

    View Slide

28. ϑΥʔΧεɾΫΠζ 3
    

    View Slide

29. ϑΥʔΧεɾΫΠζ 4
    

    View Slide

30. ϑΥʔΧεɾΫΠζ 4
    

    View Slide

31. ϑΥʔΧεɾΫΠζ ղઆ
    

    View Slide

32. ϑΥʔΧεɾΫΠζ ղઆ
    

    View Slide

33. ϑΥʔΧεɾΫΠζ ղઆ
    

    View Slide

34. ϑΥʔΧεɾΫΠζ ղઆ
    

    View Slide

35. ϑΥʔΧεͷऔΓѻ͍ Summary
    • ϑΥʔΧε͸tvOSಛ༗ͷ࠷ॏཁͷUI
    
    • ϑΥʔΧεʹؔ͢Δਖ਼͍͠஌ࣝΛಘΔ͜ͱ͕ɺྑ͍tvOS
    ΞϓϦΛ࡞Δۙಓ
    
    • جຊతʹ͸Apple७ਖ਼ΞϓϦͷUIͷڍಈʹ߹ΘͤΔ
    
    • ඪ४తͳUIΛ஌Δ͜ͱͰɺ͔ͦ͜Β׶͑ͯ֎͢બ୒͕Ͱ
    ͖ΔΑ͏ʹͳΔ
    

    View Slide

36. ςϨϏͷϦϞίϯ
    ͷऔΓѻ͍
    

    View Slide

37. Siri Remote
    

    View Slide

38. ςϨϏͷϦϞίϯ
    

    View Slide

39. ςϨϏͷϦϞίϯ
    

    View Slide

40. چܕApple TVͷRemote
    

    View Slide

41. ήʔϜίϯτϩʔϥ
    

    View Slide

42. ςϨϏͷϦϞίϯ
    

    View Slide

43. ςϨϏͷϦϞίϯͰಈ͘UIύʔπ
    • UIButton
    
    • UITextField
    
    • UITableView
    
    • UICollectionView
    
    • UIScrollViewʢϑΥʔΧεՄೳͳView͕ඞཁʣ
    
    • UIPageViewController
    
    • etc…
    

    View Slide

44. let leftArrow = UITapGestureRecognizer(
    target: self,
    action: #selector(leftArrowAction)
    )
    leftArrow.allowedPressTypes = [
    NSNumber(value: UIPressType.leftArrow.rawValue)
    ]
    view.addGestureRecognizer(leftArrow)
    

    View Slide

45. ςϨϏͷϦϞίϯͷ্Լࠨӈ
    • γϛϡϨʔλͰૢ࡞͢Δ৔߹͸ɺΩʔϘʔυͷ্Լࠨӈ
    Ωʔ
    
    • Siri RemoteͷλοναʔϑΣεͷ୺ͷλοϓͰ΋ಉ͡Π
    ϕϯτ͕ൃੜ
    

    View Slide

46. λοναʔϑΣε୺ͷޡλοϓ
    

    View Slide

47. ςϨϏͷϦϞίϯͷऔΓѻ͍ Summary
    • ςϨϏͷϦϞίϯͰ΋tvOSΞϓϦΛૢ࡞Ͱ͖Δɺ͔ͭɺ
    ςϨϏ͕͋Ε͹΄΅ηοτͰ࢖ΘΕΔ
    
    • ήʔϜΞϓϦͰͳ͚Ε͹ςϨϏͷϦϞίϯͰ΋ɺͻͱͱ
    ͓Γͷૢ࡞͕Ͱ͖Δ͜ͱ͕๬·͍͠
    
    • UIKitͷίϯϙʔωϯτ͸Կ΋͠ͳͯ͘΋ςϨϏͷϦϞί
    ϯͰૢ࡞Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ΋ͷ͕ଟ͍
    
    • ͦΕ͕Ώ͑ͷ༧ظͤ͵ޡಈ࡞΋͋ΔͨΊඞཁʹԠͯ͡ର
    ॲ
    

    View Slide

48. Agenda
    ✓tvOSͱiOSΞϓϦͷҧ͍
    
    ✓ϑΥʔΧεͷऔΓѻ͍
    
    ✓ςϨϏͷϦϞίϯͷऔΓѻ͍
    
    • TVUIKit
    
    • Password AutoFill
    tvOS 12
    

    View Slide

49. TVUIKit
    

    View Slide

50. TVUIKit
    TVPosterView
    

    View Slide

51. TVUIKit
    TVCaptionButton
    

    View Slide

52. TVUIKit
    TVMonogramView
    

    View Slide

53. TVUIKit
    TVCardView
    

    View Slide

54. ࡉ͔͗͢Δ!?
    

    View Slide

55. ඞཁͳͷʁ
    

    View Slide

56. ඞཁͰ͢ɻ
    

    View Slide

57. ϑΥʔΧεͱࢹࠩޮՌ
    

    View Slide

58. UICollectionViewͱϑΥʔΧε
    

    View Slide

59. UICollectionViewͱϑΥʔΧε
    

    View Slide

60. UITableViewͱϑΥʔΧε
    

    View Slide

61. ϑΥʔΧεΞχϝʔγϣϯͷ࣮૷
    

    View Slide

62. // UICollectionViewDelegate
    func collectionView(_ collectionView: UICollectionView,
    didUpdateFocusIn context: UICollectionViewFocusUpdateContext,
    with coordinator: UIFocusAnimationCoordinator)
    {
    if
    let indexPath = context.previouslyFocusedIndexPath,
    let previously = collectionView.cellForItem(at: indexPath)
    {
    coordinator.addCoordinatedAnimations({
    // ͜͜ͰϑΥʔΧεͷΞχϝʔγϣϯΛ࣮૷
    })
    }
    // ผ్ΞϯϑΥʔΧεͷΞχϝʔγϣϯΛ࣮૷
    }
    

    View Slide

63. ϑΥʔΧεΞχϝʔγϣϯͷ࣮૷
    

    View Slide

64. ϑΥʔΧεΞχϝʔγϣϯͷ࣮૷
    

    View Slide

65. imageView.adjustsImageWhenAncestorFocused = true
    

    View Slide

66. View Slide

67. TVUIKit
    

    View Slide

68. TVPosterView
    

    View Slide

69. let posterView = TVPosterView(image: image)
    posterView.title = "title"
    posterView.subtitle = "subtitle"
    

    View Slide

70. TVCaptionButton
    

    View Slide

71. let captionButton = TVCaptionButtonView()
    captionButton.contentImage = image
    captionButton.title = "title"
    captionButton.subtitle = "subtitle"
    

    View Slide

72. UIMonogramView
    

    View Slide

73. let monogramView = TVMonogramView()
    monogramView.image = image
    monogramView.title = "name"
    monogramView.subtitle = “category"
    

    View Slide

74. UIMonogramView
    

    View Slide

75. UIMonogramView
    

    View Slide

76. TVCardView
    

    View Slide

77. let cardView = TVCardView()
    let originalView: UIView = {
    // ಠࣗͷViewͷߏங
    }()
    cardView.contentView.addSubview(originalView)
    

    View Slide

78. TVCardView
    

    View Slide

79. TVLockupView
    

    View Slide

80. TVUIKit
    TVDigitEntryViewController
    

    View Slide

81. let digitEntry = TVDigitEntryViewController()
    digitEntry.titleText = "৽͍͠ύείʔυΛ࡞੒"
    digitEntry.promptText = "4ܻͷ਺ࣈΛೖྗ͍ͯͩ͘͠͞ɻ"
    digitEntry.entryCompletionHandler = { entry in
    print(entry)
    }
    present(digitEntry, animated: true)
    

    View Slide

82. TVDigitEntryViewController
    

    View Slide

83. tvOS 11ͱಉ࣌αϙʔτͰ͖Δʁ
    

    View Slide

84. #if canImport(TVUIKit)
    import TVUIKit
    #endif
    @available(tvOS 12.0, *)
    private func showPassCodeEntry() {
    let digitEntry = TVDigitEntryViewController()
    // digitEntryͷϓϩύςΟઃఆΛͯ͠…
    present(digitEntry, animated: true)
    }
    

    View Slide

85. Summary
    • tvOSΞϓϦ͸؆୯ʹ࡞ΕΔ
    
    • ϑΥʔΧεΛ஌Δͷ͕ྑ͍tvOSΞϓϦΛ࡞Δۙಓ
    
    • ςϨϏͷϦϞίϯ΋๨Εͣʹ
    
    • TVUIKitʹΑΓtvOSΞϓϦΛ࡞Δͷ͕ΑΓ؆୯ʹ
    

    View Slide

86. Password AutoFill
    

    View Slide

87. Password AutoFill
    

    View Slide

88. Password AutoFill
    

    View Slide

89. Password AutoFill
    

    View Slide

90. Password AutoFill
    

    View Slide

91. More Information
    https://peaks.cc/iOS12
    iOS 12 Programming
    ୈ10ষ tvOS 12ͷ৽ػೳ
    ϦϦʔε༧ఆ೔ 2018೥10݄31೔
    

    View Slide

92. Password AutoFill
    

    View Slide

93. Password AutoFill
    

    View Slide

94. Password AutoFill
    

    View Slide

95. Password AutoFill
    

    View Slide

96. Summary
    • tvOSΞϓϦ͸؆୯ʹ࡞ΕΔ
    
    • ϑΥʔΧεΛ஌Δͷ͕ྑ͍tvOSΞϓϦΛ࡞Δۙಓ
    
    • ςϨϏͷϦϞίϯ΋๨Εͣʹ
    
    • TVUIKitʹΑΓtvOSΞϓϦΛ࡞Δͷ͕ΑΓ؆୯ʹ
    
    • Password AutoFill΋ରԠ͸؆୯
    

    View Slide

97. ॴ ༑ଠ / Yuta Tokoro
    @tokorom tokorom
    More Information
    https://peaks.cc/iOS12
    iOS 12 Programming
    ୈ10ষ tvOS 12ͷ৽ػೳ
    ϦϦʔε༧ఆ೔ 2018೥10݄31೔
    

    View Slide

98. ݩࢁ ࿨೭ / Kazuyuki Motoyama
    @kudakurage
    More Information
    http://kudakurage.hatenadiary.com/entry/2017/11/16/113657
    Spinners Inc.
    UIσβΠϯدΓͷهࣄ
    

    View Slide

99. Ҿ༻
    • Apple Human Interface Guidelines
    
    • Apple tvOS Application Programming Guide
    
    • WWDC 2018 Videos
    
    • www.apple.com
    

    View Slide