tvOS をさわってみようTanaka Keisuke @ Classmethod, Inc.

自己紹介

田中 圭介（たなか けいすけ）

クラスメソッド入社 2 年目

iOS 開発歴 5 年

札幌勤務

もくじ

Apple TV とは？

tvOS

Sample Code of Apple

Apple TV app の作り方

ユーザインタフェースの制御

Parallax Artwork

Apple TV とは？

Apple TV

Apple が 開発 / 販売 するセットトップボックス

放送信号を受信して映像をテレビに映す装置

テレビではない

Apple TV でできること

映画 / 番組 を 購入して観る

音楽聴く

写真を見る

ゲームをする

アプリケーションを楽しむ

Air Play で Mac や iPhone の画面をテレビに映す

拡張ディスプレイとして使うことも可能 (Mac)

Home Screen

Top Shelf

shelf = 棚

画面上部のコンテンツが表示されている領域部分

その下にある 5 つのアプリのどれかを選択することによって表示内容が変化

旧モデルとの大きな違い

リモコン

Touch サーフェス

Siri

アプリ

App Store からダウンロード

OS

tvOS

リモコン

Touch サーフェス上で操作

スワイプ

クリック

タップ

Siri で検索も可能

声で 巻き戻し / 早送り もできる

ゲームコントローラも接続可能

アプリ

App Store からダウンロードできる

→ Apple TV app が開発可能になった！

tvOS

tvOS

新型 Apple TV に搭載される OS

iOS 9 がベース

Client-Server Apps

簡単に作成する方法が提供された

TVML

アップル独自のマークアップ言語

UI を記述

JavaScript

アプリの振る舞いを記述

New tvOS Frameworks

TVMLJS

TVML のページをロードするための JavaScript API を提供

TVMLKit

アプリに JavaScript と TVML の要素を組み込む方法を提供

ネイティブコードと JavaScript の橋渡し

TVServices

Top Shelf extension の追加方法を提供

利用可能 iOS Frameworks

Accelerate

AudioToolbox

AudioUnit

AVFoundation

AVKit

CFNetwork

CloudKit

CoreBluetooth

CoreData

CoreFoundation

CoreGraphics

CoreImage

CoreLocation

CoreMedia

CoreSpotlight

CoreText

CoreVideo

Darwin

Foundation

GameController

GameKit

GameplayKit

GLKit

ImageIO

MachO

MediaAccessibility

MediaPlayer

MediaToolbox

Metal

MetalKit

MetalPerformanceShaders

MobileCoreServices

ModelIO

OpenGLES

SceneKit

Security

simd

SpriteKit

StoreKit

Swift Standard Library

SystemConfiguration

UIKit

利用可能 iOS Frameworks

今のところ全 42 種

iOS と tvOS で小さな違いあり

UIKit は使える

UIWebView や WebKit は使えない

リソース制限

Apple TV に永続的なローカルストレージはない

データの保存には iCloud を利用する

Apple TV app の最大サイズは 200 MB

200 MB を超える場合は On-Demand Resources を利用する

ダウンロードしたデータはアプリ実行中に削除されることはない

しかしアプリ停止中には削除される可能性がある

Sample Code of Apple

UIKitCatalog (tvOS)

UIKit のデモ

ビューやコントロールの使い方を示す

TVMLCatalog

TVMLKit のデモ

TVML のコンテンツを表示する方法を示す

ターミナルで client ディレクトリに移動して以下のコマンドを実行する

$ python -m SimpleHTTPServer 9001

Client-server model

Client-server app flow

Apple TV app の作り方

To build a client-server app

1. Xcode を開き、新規プロジェクトを作成

2. tvOS テンプレートから Single View Application を選択

3. ViewController と Main.storyboard を削除

4. info.plist を開き、Main storyboard file base name を削除

※ App Transport Security の設定も必要であれば行う

5. AppDelegate を編集

6. JavaScript ファイルを作成

7. TVML ファイルを作成

ユーザインターフェースの制御

Focus

リモコンや外部入力装置からのユーザ入力の効果を画面上に示す

フォーカスベースのインタラクションモデルでは、単一のビューがフォーカス対象となる

他の項目を選択することによりフォーカスを移動できる

Focus

UIKit の特定のクラスはこの動作が自動的に提供されている

UIButton, UITextField, UITableView, UICollectionView, UITextView, UISegmentedControl, UISearchBar

フォーカスの更新をプログラムで求めることはできるが、フォーカスをセットしたり移動することはできない

Focus Engine

フォーカスとフォーカス移動を制御するシステム

イベントが発生すると、どこにフォーカスを更新すべきか自動的に決定し、アプリに通知する

スクリーン上で予期せぬ動きが起こらないことを保証する

異なるアプリケーションで同様に動作する

通信には UIFocusEnvironment プロトコルを使用する

UIFocusEnvironment

preferredFocusedView

デフォルトのフォーカスビューを指定する

- shouldUpdateFocusInContext:

フォーカス可能かを判断する

- didUpdateFocusInContext:withAnimationCoordinator:

フォーカスが更新された時に呼ばれる

フォーカスの動き

ユーザが左にスワイプした場合、フォーカスエンジンは現在のフォーカスビューの左側にフォーカス可能なビューを見つけようとする

新しいビューが見つかった場合、そのビューに移動してフォーカスを合わせる

新しいビューが見つからなかった場合、フォーカスは現在のフォーカスビューに残る

フォーカス不能なビュー

canBecomeFocused メソッドが NO を返す

hidden プロパティが YES

alpha プロパティが 0

user interaction が disabled

他のビューによって隠されている

Quick Look でデバッグ

1. 以下のメソッドのどちらかにブレイクポイントを設定する

shouldUpdateFocusInContext:

didUpdateFocusInContext:withAnimationCoordinator:

2. context のパラメータを選択する

3. Quick Look のアイコンをクリック

表示される情報

直前の focused view は 赤

探索経路の輪郭は 赤ドット

focusable UIView は 紫 かつ 異なるパターンカラー

focusable UIFocusGuide は 青 かつ 異なるパターンカラー

Parallax Artwork

Parallax Artwork

parallax = 視差

奥行きを表現する効果のある画像

アプリアイコンには必須

focusable UI elements にはオプショナル

拡張子は (.lsr)

Parallax Previewer

LSR ファイルを 閲覧 / 作成 するためのアプリ

まとめ

まとめ

Apple TV app が開発可能になった

TVML と JavaScript でプログラムが書ける

リソース制限が厳しい

Focus という概念が重要

Parallax Artwork は必須

Reference

App Programming Guide for tvOS

https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/index.html

Human Interface Guidelines

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

iOS 9.1 to tvOS 9.0 API Diffs

https://developer.apple.com/library/prerelease/tvos/releasenotes/General/tvOS90APIDiffs/

UIKit Catalog (tvOS)

https://developer.apple.com/library/prerelease/tvos/samplecode/UICatalogFortvOS/Introduction/Intro.html

TVML Catalog

https://developer.apple.com/library/prerelease/tvos/samplecode/TVMLCatalog/Introduction/Intro.html

tvOS Download

https://developer.apple.com/tvos/download/