abematv on tvos

AbemaTV on Apple TV

tvOS入門CA.swift 2016/12/01

Yuji Hato

About me

Yuji HatoCyberAgent, Inc. / AbemaTV, Inc.

dekatotoro

@dekatotoro

Contributed services

Apple TV4th generation

・ 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・ New Siri Remote / Apple TV Remote

Apple TV4th generation

・ 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

Remote

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

Development Method

iOS と同様に UIKit で開発・ Traditional Apps

TVML と TVJS をで開発

・ Client-Server Apps

Limited App Size

Limited App Size

200MB

Limited Local Storage

Limited Local StorageService 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

User Interaction

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

User InteractionFocus


Parallax

User Interaction


Video

User Interaction

Icons and Images

https://developer.apple.com/tvos/human-interface-guidelines/icons-and-images/

Icons and ImagesApp Icon.


Layered Images.

Icons and Images

Layered Images.


Icons and Images


Top Shelf Images.

Icons and Images

Layout

Layout

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


Layout

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

Layout


Layout

Interface Elements

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


tvOS の概要を抑えたところで

AbemaTV on tvOS

2016/11/25 にリリースしました

AbemaTV on tvOS

開発スケジュール


２ヶ月

体制

体制

・ Designer 1 ( 兼務 )

・ Engineer 2 (1 名兼務 )

・ Director 1 ( 兼務 )

プロジェクト構成


iOS と同じプロジェクトで Target を分けるか、別プロジェクトにするか

iOS とは別プロジェクトで開発framework 化ができてないSwift3 対応スケジュール


進捗管理

進捗管理GitHub Projects

https://github.com/blog/2256-a-whole-new-github-universe-announcing-new-tools-forums-and-features

Libraries

Libraries

RxSwift RxCocoa Kingfisher Cartography AttributedLabel SwiftDate Cheetah SpringIndicator CryptoSwift KeychainAccess

SQLite.swift ReachabilitySwift SwiftyUserDefaults ProtocolBuffers-Swift Fabric Crashlytics Device

Overall

UI/UX

UI/UXOnAir Playback

OnAir Playback

UI/UX

Menu

UI/UX

Menu TabBar

UI/UX

OnAir Playback PageViewController

UI/UX

OnAir Info

UI/UX

OnAir Info CustomView

CollectionView

UI/UX

Overall

UI/UX

TimeTable

UI/UX

TimeTable CollectionView

CollectionView

ScrollView

UI/UX

TimeTable CollectionView

UI/UX

TimeTable

UI/UX

Detail Info

UI/UX

Overall

UI/UX

Ondemand

UI/UX

Ondemand SplitViewController

UI/UX

Ondemand Playback

UI/UX

Ondemand Playback

AVPlayerViewController

UI/UX

Overall

UI/UX

Setting

UI/UX

Setting

TableViewImageView

UI/UX

Overall

UI/UX

Conclusion

Conclusion

• 共通部分を Embedded Framework 化しておくと良い

• iOS との違いは Focus 周りがキモ• 標準の UI/UX に従う

• 画面大きくて開発が楽しい

Trial&Errorしながら開発中

AbemaTV on tvOS

Thank you

参考資料https://developer.apple.com/tvos/resources/

abematv on tvos

Software