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෼ʣ
2. ॴ ༑ଠ / Yuta Tokoro @tokorom tokorom Spinners Inc.
3. ࣭໰ • 1. tvOSͷΞϓϦΛ։ൃͨ͜͠ͱ͕͋Γ·͔͢ʁ • 2. iOSʢUIKitʣͷΞϓϦΛ։ൃͨ͜͠ͱ͕͋Γ·͔͢ʁ
4. Agenda • tvOSͱiOSΞϓϦͷҧ͍ • ϑΥʔΧεͷऔΓѻ͍ • ςϨϏͷϦϞίϯͷऔΓѻ͍ • TVUIKit • Password AutoFillʢ͕࣌ؒ༨ͬͨΒ͓·͚ͱͯ͠ʣ
5. tvOSͱiOSΞϓϦͷҧ͍
6. tvOSΞϓϦ͸ ؆୯ʹ࡞Ε·͔͢ʁ
7. ࡞Ε·͢ɻ
8. iOSΞϓϦ͔ΒtvOSΞϓϦΛ࡞ͬͨྫ 30% 50% 20% ίʔυྔͷׂ߹ iOSઐ༻ tvOSઐ༻ ڞ௨෦෼ ※Swiftίʔυͷจࣈ਺
9. iOSΞϓϦ͔ΒtvOSΞϓϦΛ࡞ͬͨྫ 73% 27% ݩͷiOSίʔυͷ73%Λڞ༻ iOSઐ༻ ڞ௨෦෼
10. ͲͷลΓΛ௥Ճ։ൃʁ Model / Library View Controller View Storybord / xib
11. ͳͥ ڞ༻Ͱ͖Δʁ • tvOSΞϓϦͰ͸UIKit͕΄ͱΜͲͦͷ··࢖͑Δ • Foundation΍Core Graphics΋ͦͷ··࢖͑Δ • AVFoundation΍PhotoKitͳͲ΋࢖͑Δ
12. iOSΞϓϦ։ൃͱ ΄ͱΜͲಉ͡
13. Ͳ͕͜ҧ͏ʁ
14. tvOSΞϓϦͱiOSΞϓϦͷҧ͍ • iPhoneɺiPadͳͲݶΒΕͨը໘΁ͷදࣔͰͳ͘ɺࢢൢͷ ςϨϏʹΞϓϦΛදࣔ͢Δ • iOSΞϓϦͷΑ͏ʹը໘ΛλονͰ͖ͣɺϑΥʔΧεͱ ͍͏֓೦Λѻ͏ඞཁ͕͋Δ • ςϨϏͷϦϞίϯͰૢ࡞Ͱ͖Δඞཁ͕͋Δ
15. େ͖͘ҧ͏ͷ͸ User Interface
16. tvOSΞϓϦͱiOSΞϓϦͷҧ͍ • iPhoneɺiPadͳͲݶΒΕͨը໘΁ͷදࣔͰͳ͘ɺࢢൢͷ ςϨϏʹΞϓϦΛදࣔ͢Δ • iOSΞϓϦͷΑ͏ʹը໘ΛλονͰ͖ͣɺϑΥʔΧεͱ ͍͏֓೦Λѻ͏ඞཁ͕͋Δ • ςϨϏͷϦϞίϯͰૢ࡞Ͱ͖Δඞཁ͕͋Δ
17. Agenda ✓tvOSͱiOSΞϓϦͷҧ͍ • ϑΥʔΧεͷऔΓѻ͍ • ςϨϏͷϦϞίϯͷऔΓѻ͍ • TVUIKit • Password AutoFill
18. ϑΥʔΧε ͷऔΓѻ͍
19. ϑΥʔΧε͕ඞཁͳཧ༝
20. ϑΥʔΧε͕ඞཁͳཧ༝
21. ϑΥʔΧε͕ඞཁͳཧ༝
22. ϑΥʔΧεɾΫΠζ
23. ϑΥʔΧεɾΫΠζ 1
24. ϑΥʔΧεɾΫΠζ 1
25. ϑΥʔΧεɾΫΠζ 2
26. ϑΥʔΧεɾΫΠζ 2
27. ϑΥʔΧεɾΫΠζ 3
28. ϑΥʔΧεɾΫΠζ 3
29. ϑΥʔΧεɾΫΠζ 4
30. ϑΥʔΧεɾΫΠζ 4
31. ϑΥʔΧεɾΫΠζ ղઆ
32. ϑΥʔΧεɾΫΠζ ղઆ
33. ϑΥʔΧεɾΫΠζ ղઆ
34. ϑΥʔΧεɾΫΠζ ղઆ
35. ϑΥʔΧεͷऔΓѻ͍ Summary • ϑΥʔΧε͸tvOSಛ༗ͷ࠷ॏཁͷUI • ϑΥʔΧεʹؔ͢Δਖ਼͍͠஌ࣝΛಘΔ͜ͱ͕ɺྑ͍tvOS ΞϓϦΛ࡞Δۙಓ • جຊతʹ͸Apple७ਖ਼ΞϓϦͷUIͷڍಈʹ߹ΘͤΔ • ඪ४తͳUIΛ஌Δ͜ͱͰɺ͔ͦ͜Β׶͑ͯ֎͢બ୒͕Ͱ ͖ΔΑ͏ʹͳΔ
36. ςϨϏͷϦϞίϯ ͷऔΓѻ͍
37. Siri Remote
38. ςϨϏͷϦϞίϯ
39. ςϨϏͷϦϞίϯ
40. چܕApple TVͷRemote
41. ήʔϜίϯτϩʔϥ
42. ςϨϏͷϦϞίϯ
43. ςϨϏͷϦϞίϯͰಈ͘UIύʔπ • UIButton • UITextField • UITableView • UICollectionView • UIScrollViewʢϑΥʔΧεՄೳͳView͕ඞཁʣ • UIPageViewController • etc…
44. let leftArrow = UITapGestureRecognizer( target: self, action: #selector(leftArrowAction) ) leftArrow.allowedPressTypes = [ NSNumber(value: UIPressType.leftArrow.rawValue) ] view.addGestureRecognizer(leftArrow)
45. ςϨϏͷϦϞίϯͷ্Լࠨӈ • γϛϡϨʔλͰૢ࡞͢Δ৔߹͸ɺΩʔϘʔυͷ্Լࠨӈ Ωʔ • Siri RemoteͷλοναʔϑΣεͷ୺ͷλοϓͰ΋ಉ͡Π ϕϯτ͕ൃੜ
46. λοναʔϑΣε୺ͷޡλοϓ
47. ςϨϏͷϦϞίϯͷऔΓѻ͍ Summary • ςϨϏͷϦϞίϯͰ΋tvOSΞϓϦΛૢ࡞Ͱ͖Δɺ͔ͭɺ ςϨϏ͕͋Ε͹΄΅ηοτͰ࢖ΘΕΔ • ήʔϜΞϓϦͰͳ͚Ε͹ςϨϏͷϦϞίϯͰ΋ɺͻͱͱ ͓Γͷૢ࡞͕Ͱ͖Δ͜ͱ͕๬·͍͠ • UIKitͷίϯϙʔωϯτ͸Կ΋͠ͳͯ͘΋ςϨϏͷϦϞί ϯͰૢ࡞Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ΋ͷ͕ଟ͍ • ͦΕ͕Ώ͑ͷ༧ظͤ͵ޡಈ࡞΋͋ΔͨΊඞཁʹԠͯ͡ର ॲ
48. Agenda ✓tvOSͱiOSΞϓϦͷҧ͍ ✓ϑΥʔΧεͷऔΓѻ͍ ✓ςϨϏͷϦϞίϯͷऔΓѻ͍ • TVUIKit • Password AutoFill tvOS 12
49. TVUIKit
50. TVUIKit TVPosterView
51. TVUIKit TVCaptionButton
52. TVUIKit TVMonogramView
53. TVUIKit TVCardView
54. ࡉ͔͗͢Δ!?
55. ඞཁͳͷʁ
56. ඞཁͰ͢ɻ
57. ϑΥʔΧεͱࢹࠩޮՌ
58. UICollectionViewͱϑΥʔΧε
59. UICollectionViewͱϑΥʔΧε
60. UITableViewͱϑΥʔΧε
61. ϑΥʔΧεΞχϝʔγϣϯͷ࣮૷
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({ // ͜͜ͰϑΥʔΧεͷΞχϝʔγϣϯΛ࣮૷ }) } // ผ్ΞϯϑΥʔΧεͷΞχϝʔγϣϯΛ࣮૷ }
63. ϑΥʔΧεΞχϝʔγϣϯͷ࣮૷
64. ϑΥʔΧεΞχϝʔγϣϯͷ࣮૷
65. imageView.adjustsImageWhenAncestorFocused = true
67. TVUIKit
68. TVPosterView
69. let posterView = TVPosterView(image: image) posterView.title = "title" posterView.subtitle = "subtitle"
70. TVCaptionButton
71. let captionButton = TVCaptionButtonView() captionButton.contentImage = image captionButton.title = "title" captionButton.subtitle = "subtitle"
72. UIMonogramView
73. let monogramView = TVMonogramView() monogramView.image = image monogramView.title = "name" monogramView.subtitle = “category"
74. UIMonogramView
75. UIMonogramView
76. TVCardView
77. let cardView = TVCardView() let originalView: UIView = { // ಠࣗͷViewͷߏங }() cardView.contentView.addSubview(originalView)
78. TVCardView
79. TVLockupView
80. TVUIKit TVDigitEntryViewController
81. let digitEntry = TVDigitEntryViewController() digitEntry.titleText = "৽͍͠ύείʔυΛ࡞੒" digitEntry.promptText = "4ܻͷ਺ࣈΛೖྗ͍ͯͩ͘͠͞ɻ" digitEntry.entryCompletionHandler = { entry in print(entry) } present(digitEntry, animated: true)
82. TVDigitEntryViewController
83. tvOS 11ͱಉ࣌αϙʔτͰ͖Δʁ
84. #if canImport(TVUIKit) import TVUIKit #endif @available(tvOS 12.0, *) private func showPassCodeEntry() { let digitEntry = TVDigitEntryViewController() // digitEntryͷϓϩύςΟઃఆΛͯ͠… present(digitEntry, animated: true) }
85. Summary • tvOSΞϓϦ͸؆୯ʹ࡞ΕΔ • ϑΥʔΧεΛ஌Δͷ͕ྑ͍tvOSΞϓϦΛ࡞Δۙಓ • ςϨϏͷϦϞίϯ΋๨Εͣʹ • TVUIKitʹΑΓtvOSΞϓϦΛ࡞Δͷ͕ΑΓ؆୯ʹ
86. Password AutoFill
87. Password AutoFill
88. Password AutoFill
89. Password AutoFill
90. Password AutoFill
91. More Information https://peaks.cc/iOS12 iOS 12 Programming ୈ10ষ tvOS 12ͷ৽ػೳ ϦϦʔε༧ఆ೔ 2018೥10݄31೔
92. Password AutoFill
93. Password AutoFill
94. Password AutoFill
95. Password AutoFill
96. Summary • tvOSΞϓϦ͸؆୯ʹ࡞ΕΔ • ϑΥʔΧεΛ஌Δͷ͕ྑ͍tvOSΞϓϦΛ࡞Δۙಓ • ςϨϏͷϦϞίϯ΋๨Εͣʹ • TVUIKitʹΑΓtvOSΞϓϦΛ࡞Δͷ͕ΑΓ؆୯ʹ • Password AutoFill΋ରԠ͸؆୯
97. ॴ ༑ଠ / Yuta Tokoro @tokorom tokorom More Information https://peaks.cc/iOS12 iOS 12 Programming ୈ10ষ tvOS 12ͷ৽ػೳ ϦϦʔε༧ఆ೔ 2018೥10݄31೔
98. ݩࢁ ࿨೭ / Kazuyuki Motoyama @kudakurage More Information http://kudakurage.hatenadiary.com/entry/2017/11/16/113657 Spinners Inc. UIσβΠϯدΓͷهࣄ
99. Ҿ༻ • Apple Human Interface Guidelines • Apple tvOS Application Programming Guide • WWDC 2018 Videos • www.apple.com