Apple TV tvOS入門 Iosdc2017

iOSDC 2017/09/17
Yuji Hato
Apple TV tvOS入門

About me
Yuji Hato
CyberAgent, Inc. / AbemaTV, Inc.
dekatotoro
@dekatotoro
Contributed services

・64-bit A8 processor
・32GB or 64GB of storage
・2GB of RAM
・10/100Mbps Ethernet
・WiFi 802.11a/b/g/n/ac
・1080p resolution
・HDMI 1.4
Apple TV
4th generation
・A10X Fusion
・32GB or 64GB of storage
・3GB of RAM
・Gigabit Ethernet
・Wi-Fi with MIMO 802.11ac
・2160p resolution
・HDMI 2.0
4K

32GB 15,800円
64GB 20,800円
※2016/09に値下げ
・32GB 18,400円 →15,800円（2,600円値下げ）
・64GB 24,800円 →20,800円（4,000円値下げ）
Apple TV (tvOS)
4th generation 4K
32GB 19,800円
64GB 21,800円

https://developer.apple.com/tvos/human-interface-guidelines/remote-and-controllers/
Remote

Swipe Click Tap
https://developer.apple.com/tvos/human-interface-guidelines/remote-and-controllers/
Remote

Development Method
iOSとほぼ同様に開発
・Traditional Apps
TVMLとTVJSをで開発
・Client-Server Apps

Limited Local Storage
Service Online/Local Persistent/Temporary limit
iCloud Key-Value Store
(KVS)
Online Persistent 1MB max
CloudKit Online Persistent -
UserDefaults Local Persistent 500KB max
Keychain Local Persistent -
CacheDirectory Local Temporary May be purged
TemporaryDirectory Local Temporary May be purged

https://developer.apple.com/tvos/human-interface-guidelines/overview/
User Interaction
Focus

https://developer.apple.com/tvos/human-interface-guidelines/app-architecture/focus-and-selection/
Parallax
User Interaction

https://developer.apple.com/tvos/human-interface-guidelines/visual-design/video/
Video
User Interaction

https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/
Icons and Images
App Icon.

https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/app-icon/
Layered Images.
Icons and Images

Layered Images.
Icons and Images

Top Shelf Images.
Icons and Images

Layout
1920 x 1080
3840 x 21604K

https://developer.apple.com/tvos/human-interface-guidelines/visual-design/
Layout

https://support.apple.com/ja-jp/HT202763
Layout

https://developer.apple.com/tvos/human-interface-guidelines/visual-design/layout/
Layout

Tab Bars
Interface Elements
https://developer.apple.com/tvos/human-interface-guidelines/interface-elements/

TableView
Interface Elements

CollectionView
Interface Elements

Split Views
Interface Elements

Text Fields
Interface Elements

Keyboards
Interface Elements

Search
Interface Elements

Button
Interface Elements

Navigation Bars
Interface Elements

Page Controls
Interface Elements

Activity Indicators
Interface Elements

Alerts
Interface Elements

Gesture
• Swipe
• Touch
• Select

Gesture
UITapGestureRecognizer
• upArrow
• downArrow
• leftArrow
• rightArrow
• select
• menu
• playPause

Gesture
let gesture = UITapGestureRecognizer(target: self, action: #selector(menuButtonPressed(_:)))
gesture.allowedPressTypes = [NSNumber(value: UIPressType.menu.rawValue)]
view.addGestureRecognizer(gesture)

Gesture
gesture.allowedPressTypes = [NSNumber(value: UIPressType.menu.rawValue)]

Gesture
UISwipeGestureRecognizer
• right
• left
• up
• down

Gesture
let gesture = UISwipeGestureRecognizer(target: self, action: #selector(swipeUp(_:)))
gesture.direction = .up
view.addGestureRecognizer(gesture)

Gesture
gesture.direction = .up

https://developer.apple.com/tvos/human-interface-guidelines/overview/
Focus

Focus
Focusはいつ更新されるの？

Focus
• システムが更新を要求したとき
• ユーザーの操作
• アプリケーションが更新を要求したとき

Focus
Focusは誰が更新するの？

Focus
https://developer.apple.com/library/content/documentation/General/Conceptual/AppleTV_PG/WorkingwiththeAppleTVRemote.html
Focus Engine

Focus
Focus Engineが検索する範囲は、現在Focusされて
いるViewの大きさに応じて決まり、そのViewを起点
として、動きの方向にあるFocus可能な領域を見つけ
て更新
Focus Engine

Focus
Focus Engineは、View階層のFocus動作を定義する
UIFocusEnvironmentプロトコルに従ってFocusを制
御
Focus Engine

Focus
https://devstreaming-cdn.apple.com/videos/wwdc/2017/224sn8vw625k1e86/224/224_focus_interaction_in_tvos_11.pdf
UIFocusEnvironment

Focus
public var preferredFocusEnvironments: [UIFocusEnvironment] { get }
public func shouldUpdateFocus(in context: UIFocusUpdateContext) -> Bool
public func setNeedsFocusUpdate()
public func updateFocusIfNeeded()
public func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator:
UIFocusAnimationCoordinator)
@available(tvOS 11.0, *)
optional public func soundIdentifierForFocusUpdate(in context: UIFocusUpdateContext) ->
UIFocusSoundIdentifier?
UIFocusEnvironmentプロトコル

Focus
public var preferredFocusEnvironments: [UIFocusEnvironment] { get }

Focus
public func shouldUpdateFocus(in context: UIFocusUpdateContext) -> Bool

Focus
public func setNeedsFocusUpdate()
public func updateFocusIfNeeded()

Focus
public func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator:

Focus
optional public func soundIdentifierForFocusUpdate(in context: UIFocusUpdateContext) ->
UIFocusSoundIdentifier?

Focus
UIFocusEnvironmentに準拠しているクラス

Focus
• UIView
• UIViewController
• UIPresentationController

Focus
public protocol UIFocusItem : UIFocusEnvironment {
public var canBecomeFocused: Bool { get }
}
UIFocusItemプロトコル

Focus
Focus可能なUIKitのクラス

Focus
• UIButton
• UITextField
• UITableView
• UICollectionView
• UITextView
• UISegmentedControl
• UISearchBar
• etc..

Focus
https://devstreaming-cdn.apple.com/videos/wwdc/2017/224sn8vw625k1e86/224/224_focus_interaction_in_tvos_11.pdf

Focus
UILabelなどデフォルトでフォーカスされないViewを
フォーカスさせるには？

Focus
class CustomLabel: UILabel {
isUserInteractionEnabled = true
isUserInteractionEnabled = true
override var canBecomeFocused: Bool {
return true
}
}
} }
UILabel for Focus

Focus
override func didUpdateFocus(in context: UIFocusUpdateContext, with coordinator:
UIFocusAnimationCoordinator) {
super.didUpdateFocus(in: context, with: coordinator)
// Focus
if context.nextFocusedView == self {
coordinator.addCoordinatedFocusingAnimations({ [weak self] context in
self?.transform = CGAffineTransform(scaleX: 1.4, y: 1.4)
}, completion: nil)
}
// UnFocus
if context.previouslyFocusedView == self {
coordinator.addCoordinatedUnfocusingAnimations({ [weak self] context in
self?.transform = CGAffineTransform.identity
}, completion: nil)
}
}
UILabel for Focus

Focus
// Focus
if context.nextFocusedView == self {
coordinator.addCoordinatedFocusingAnimations({ [weak self] context in
self?.transform = CGAffineTransform(scaleX: 1.4, y: 1.4)
}, completion: nil)
}
UILabel for Focus

Focus
// UnFocus
if context.previouslyFocusedView == self {
coordinator.addCoordinatedUnfocusingAnimations({ [weak self] context in
self?.transform = CGAffineTransform.identity
}, completion: nil)
}
UILabel for Focus

Focus
UITableView, UICollectionViewのFocusは？

Focus
Focus用のdelegateがtvOS用にあります

Focus
UITableViewDelegate for Focus
optional public func tableView(_ tableView: UITableView, canFocusRowAt
indexPath: IndexPath) -> Bool
optional public func tableView(_ tableView: UITableView,
shouldUpdateFocusIn context: UITableViewFocusUpdateContext) -> Bool
optional public func tableView(_ tableView: UITableView, didUpdateFocusIn
context: UITableViewFocusUpdateContext, with coordinator:
optional public func indexPathForPreferredFocusedView(in tableView:
UITableView) -> IndexPath?

Focus
optional public func collectionView(_ collectionView: UICollectionView, canFocusItemAt indexPath:
IndexPath) -> Bool
optional public func collectionView(_ collectionView: UICollectionView, shouldUpdateFocusIn context:
UICollectionViewFocusUpdateContext) -> Bool
optional public func collectionView(_ collectionView: UICollectionView, didUpdateFocusIn context:
UICollectionViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator)
optional public func indexPathForPreferredFocusedView(in collectionView: UICollectionView) ->
IndexPath?
optional public func collectionView(_ collectionView: UICollectionView,
targetIndexPathForMoveFromItemAt originalIndexPath: IndexPath, toProposedIndexPath
proposedIndexPath: IndexPath) -> IndexPath
optional public func collectionView(_ collectionView: UICollectionView,
targetContentOffsetForProposedContentOffset proposedContentOffset: CGPoint) -> CGPoint
UICollectionViewDelegate for Focus

Focus
open var remembersLastFocusedIndexPath: Bool
UITableView, UICollectionView for Focus

Focus
UIImageViewのFocusは？

Focus
open var adjustsImageWhenAncestorFocused: Bool
open var focusedFrameGuide: UILayoutGuide { get }
open var overlayContentView: UIView { get }
open var masksFocusEffectToContents: Bool
UIImageView for Focus

Focus
open var adjustsImageWhenAncestorFocused: Bool

Focus
imageView.adjustsImageWhenAncestorFocused = true
https://developer.apple.com/tvos/human-interface-guidelines/overview/focus-and-parallax/

Focus
open var overlayContentView: UIView { get }

Focus
let overlayView = UIView(frame: imageView.frame)
overlayView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
imageView.overlayContentView.addSubview(overlayView)

Focus
imageView.overlayContentView.addSubview(overlayView)

Focus
// UICollectionView delegate
func collectionView(_ collectionView: UICollectionView, didUpdateFocusIn context:
UICollectionViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
// Focus
if let cell = context.nextFocusedView as? CostomCollectionViewCell {
coordinator.addCoordinatedFocusingAnimations({ context in
cell.imageView.overlayContentView.alpha = 0
}, completion: nil)
}
// UnFocus
if let cell = context.previouslyFocusedView as? CostomCollectionViewCell {
coordinator.addCoordinatedUnfocusingAnimations({ context in
}, completion: nil)
}
}

Focus
// Focus
if let cell = context.nextFocusedView as? CostomCollectionViewCell {
coordinator.addCoordinatedFocusingAnimations({ context in
}, completion: nil)
}

Focus
// UnFocus
if let cell = context.previouslyFocusedView as? CostomCollectionViewCell {
coordinator.addCoordinatedUnfocusingAnimations({ context in
}, completion: nil)
}

Focus
Focus Update Notification

Focus
extension NSNotification.Name {
public static let UIFocusDidUpdate: NSNotification.Name
public static let UIFocusMovementDidFail: NSNotification.Name
}
public let UIFocusUpdateContextKey: String
public let UIFocusUpdateAnimationCoordinatorKey: String

Focus
public static let UIFocusDidUpdate: NSNotification.Name

Focus
public static let UIFocusMovementDidFail: NSNotification.Name
}

Focus
open class UIFocusGuide : UILayoutGuide {
open var isEnabled: Bool
open var preferredFocusEnvironments: [UIFocusEnvironment]!
}
UIFocusGuide

Focus
UIFocusGuide
FocusGuide
preferredFocusEnvironments

Focus
focusGuide = UIFocusGuide()
view.addLayoutGuide(focusGuide)
// Anchor the top left of the focus guide.
focusGuide.topAnchor.constraint(equalTo: button.topAnchor).isActive = true
focusGuide.leftAnchor.constraint(equalTo: collectionView.leftAnchor).isActive = true
// Anchor the width and height of the focus guide.
focusGuide.heightAnchor.constraint(equalTo: button.heightAnchor).isActive = true
focusGuide.widthAnchor.constraint(equalTo: collectionView.widthAnchor).isActive = true
focusGuide.preferredFocusEnvironments = [button]
UIFocusGuide

Focus
focusGuide = UIFocusGuide()
view.addLayoutGuide(focusGuide)
UIFocusGuide

Focus
// Anchor the top left of the focus guide.
focusGuide.topAnchor.constraint(equalTo: button.topAnchor).isActive = true
focusGuide.leftAnchor.constraint(equalTo: collectionView.leftAnchor).isActive = true
UIFocusGuide

Focus
// Anchor the width and height of the focus guide.
focusGuide.heightAnchor.constraint(equalTo: button.heightAnchor).isActive = true
focusGuide.widthAnchor.constraint(equalTo: collectionView.widthAnchor).isActive = true
UIFocusGuide

Focus
focusGuide.preferredFocusEnvironments = [button]
UIFocusGuide

Focus
Focusがうまくいかない場合

Focus
• canBecomeFocusedがfalseになってないか
• isHiddenがtrueになってないか
• alphaが0でないか
• isUserInteractionEnabledがfalseになってないか
• viewが隠れていないか
Focusがうまくいかない場合

Focus
The result of the focus update was determined from the following
preferred focus search:
|
| Starting preferred focus search:
| |--> Searching <UIFocusSystem 0x60000028dc00>...
| |--> Searching <UIScreen 0x6080001d3fb0>...
| |--> Searching <UIWindow 0x7fb79cb02af0>...
| |--> Searching
<tvos_sample_for_iosdc.RootViewController 0x7fb79c904da0>...
| |--> Searching <UIView
Focus Update Logging

Focus
po UIFocusDebugger.status()
<UIButton 0x7f97bac05b90> is currently focused.
UIFocusDebugger

Focus
po UIFocusDebugger.simulateFocusUpdateRequest(from:
imageView)
Simulating a fake focus update request from <UIImageView 0x7ff3ce2106d0>...
(<tvos_sample_for_iosdc.MainCollectionViewCell 0x7ff3ce20fe60> is currently focused)
The following issues were found that would normally prevent this environment's request from being accepted by the focus
system (these will be ignored for the purposes of this test):
- ISSUE: This environment does not contain the currently focused item.
Starting preferred focus search:
|--> Searching <UIImageView 0x7ff3ce2106d0>...
No more preferences for this environment, and there are no focusable items in this environment to prefer by default.
This environment does not prefer a valid focusable item, nor any other environments.
Simulated Result: Successfully updated focus to nil.
UIFocusDebugger

Focus
po UIFocusDebugger.checkFocusability(for: label)
The following issues were found that would prevent this item from being focusable:
- ISSUE: This view has isUserInteractionEnabled set to NO. Views must allow user
interaction to be focusable.
UIFocusDebugger

Conclusion
• iOSとの違いはFocus
• 標準のUI/UXに準拠しよう
• tvOS対応は難しくない

Thank you
参考資料
https://developer.apple.com/videos/play/wwdc2017/209/
https://developer.apple.com/videos/play/wwdc2017/224
https://developer.apple.com/tvos/resources/

Apple TV tvOS入門 Iosdc2017

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to Apple TV tvOS入門 Iosdc2017

Similar to Apple TV tvOS入門 Iosdc2017 (20)

More from Yuji Hato

More from Yuji Hato (8)

Recently uploaded

Recently uploaded (20)

Apple TV tvOS入門 Iosdc2017

Editor's Notes