SlideShare a Scribd company logo
〜 tvOSアプリ実装編 〜
株式会社CyberZ OPENREC事業部
エンジニア
辰己 佳祐
自己紹介
• 辰己 佳祐 (23)
• 所属 – 株式会社CyberZ OPENREC事業部
• 職種 – エンジニア
(主にOPENREC.tvのiOS, tvOS担当)
• 755 – たつみんのFRESH!トーク
• 趣味 – お菓子作り, 沖縄三線
• アプリ – AppStoreで「Keisuke Tatsumi」で検索求ム
Agenda
• はじめに
• フォーカスの概念
• applicationFrameの話
• ボタンのクリック検知について
• 最後に
Agenda
• はじめに
• フォーカスの概念
• applicationFrameの話
• ボタンのクリック検知について
• 最後に
はじめに
2015年12月にOPENREC.tvはAppleTVに対応しました!
はじめに
• 今回は実際に実装してみてわかったtvOSの
アプリ開発はiOSと比べてここが違う!と感じ
たことについて発表します
Agenda
• はじめに
• フォーカスの概念
• applicationFrameの話
• ボタンのクリック検知について
• 最後に
フォーカスの概念
tvOSではフォーカスという概念がとても重要
な特徴の一つとなっています
画像参照元URL:http://www.fastcodesign.com/3050952/four-fun-design-flourishes-in-apple-tvs-new-tvos
Siri Remote
Touchサーフェスによるトラックパッドのようなカーソル
移動がメインになっているため、いまどこにカーソルが
いるのかを判断するためにフォーカスの概念が導入さ
れています
画像参照元URL:http://simpleguide.blog.jp/archives/46949468.html
フォーカス検知
UIKit 内でフォーカス検知できるUIパーツ
– UITabBar
– UIButton
– UITableViewCell
– UICollectionViewCell
– UISegmentedControl
– UITextField
– UISearchBar
(2016/02/10 調べ)
フォーカス検知
フォーカスが当たっているビュー上に設置した UIImageView の場合
画像参照元URL:https://dribbble.com/shots/2239752--tvOS-Icon-Parallax-Effect
フォーカス移動の検知
context.nextFocusedView : 現在フォーカスが当たっているビュー
context.previouslyFocusedView : 一つ前にフォーカスが当たっていたビュー
フォーカスの移動を検知するためのメソッド
Agenda
• はじめに
• フォーカスの概念
• applicationFrameの話
• ボタンのクリック検知について
• 最後に
applicationFrameの話
applicationFrameプロパティが使えない
applicationFrameの話
実際に書こうとすると、、、
applicationFrameプロパティが使えない
使っちゃダ〜メ♡
applicationFrameの話
UIKit.frameworkのUIScreenクラス内にあるプロパティ欄にも、、、
実際に書こうとすると、、、
applicationFrameプロパティが使えない
使っちゃダ〜メ♡
ダメよ〜ダメダメ♡
どうしてダメなのか > <
1. AppleTVにはステータスバーの概念が無い
から
ステータスバーなんて無かった
見渡す限りのダメよ〜ダメダメ♡
どうしてダメなのか > <
1. AppleTVにはステータスバーの概念が無い
から
2. AppleTVにはマルチタスキングのようなスプ
リットビューの概念が無いから
マルチタスキング
iPadでは、iOS 9の【Slide Over】と【Split View】という機能の追加で、
2つのアプリを同時に起動して操作できるようになった
画像参照元URL:http://www.appbank.net/2015/09/17/iphone-news/1096738.php
どうしてダメなのか > <
1. AppleTVにはステータスバーの概念が無い
から
2. AppleTVにはマルチタスキングのようなスプ
リットビューの概念が無いから
3. テレビは回転を検知できないから
どうしてダメなのか > <
1. AppleTVにはステータスバーの概念が無い
から
2. AppleTVにはマルチタスキングのようなスプ
リットビューの概念が無いから
3. テレビは回転を検知できないから
つまり
スクリーンのフレームサイズが1パターン(ランドスケープで全画面)
しかないので、applicationFrameを使う必要がなくなる
Agenda
• はじめに
• フォーカスの概念
• applicationFrameの話
• ボタンのクリック検知について
• 最後に
ボタンのクリック検知について
iOSでよくあるボタンアクションの実装
ボタンのクリック検知について
iOSでよくあるボタンアクションの実装
ボタンは同じは
ず
tvOSでも同じコードで実装でしょ?そうでしょ?
はんのうがない。
ただの しかばね のようだ。
あれ?故障かな?と思ったら
何かおかしいと思って、UIKitの中身を覗いて
みると、forControlEventsのオプション指定に新
たな項目が増えていました。それが、、、
あれ?故障かな?と思ったら
何かおかしいと思って、UIKitの中身を覗いて
みると、forControlEventsのオプション指定に新
たな項目が増えていました。それが、、、
UIControlEventPrimaryActionTriggered
ー (そのUIパーツの)主なアクションを引き起こす
tvOSでのボタンのクリック検知
tvOSでのボタンアクションの実装
iOSでよくあるボタンアクションの実装
Agenda
• はじめに
• フォーカスの概念
• applicationFrameの話
• ボタンのクリック検知について
• 最後に
最後に
今回発表させていただいた内容はtvOSとiOSの
違いのほんの一部です!
続きはブログで!
ご清聴ありがとうございました

More Related Content

Similar to tvOSとiOSがこんなに違うわけがない ~tvOSアプリ実装編~

プログラミングはじめの一歩 先生:関根 元和
プログラミングはじめの一歩 先生:関根 元和プログラミングはじめの一歩 先生:関根 元和
プログラミングはじめの一歩 先生:関根 元和
schoowebcampus
 
SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化
SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化
SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化
SORACOM,INC
 
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
Shoei Takamaru
 
DevOpsを実現する為のChef活用テクニック
DevOpsを実現する為のChef活用テクニックDevOpsを実現する為のChef活用テクニック
DevOpsを実現する為のChef活用テクニック
Yu Kitazume
 
(Best) practices for working globally in IT industry - DMM.Study Night
(Best) practices for working globally in IT industry - DMM.Study Night(Best) practices for working globally in IT industry - DMM.Study Night
(Best) practices for working globally in IT industry - DMM.Study Night
Eiji Shinohara
 
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリできる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:WebからはじまるアプリMasami Yabushita
 
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Masami Yabushita
 
Hello Engineer World! 新人リケジョの1年
Hello Engineer World! 新人リケジョの1年Hello Engineer World! 新人リケジョの1年
Hello Engineer World! 新人リケジョの1年Satoko Shiroi
 
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったことPHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
 
Apple審査を一発通過! iOS開発経験0でも出来る じげん流Swift開発のすべて
Apple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべてApple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべて
Apple審査を一発通過! iOS開発経験0でも出来る じげん流Swift開発のすべて
Masaru Gushiken
 
Swiftを迷わず選んだ理由
Swiftを迷わず選んだ理由Swiftを迷わず選んだ理由
Swiftを迷わず選んだ理由
zuckerburg
 
20181205 #dev reljp_#37_beajouneyman
20181205 #dev reljp_#37_beajouneyman20181205 #dev reljp_#37_beajouneyman
20181205 #dev reljp_#37_beajouneyman
Journeyman
 
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
Masayuki KaToH
 
個人で開発したアプリがベスト新着に選ばれた話
個人で開発したアプリがベスト新着に選ばれた話個人で開発したアプリがベスト新着に選ばれた話
個人で開発したアプリがベスト新着に選ばれた話
Motoki Narita
 
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
Masami Yabushita
 
DevOps、その前に
DevOps、その前にDevOps、その前に
DevOps、その前に
Yuta Matsumura
 
【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210
【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210
【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210
Osamu Ise
 
nomad-cliの紹介
nomad-cliの紹介nomad-cliの紹介
nomad-cliの紹介
Kohki Miki
 
Techcrunch hackathon 2013
Techcrunch hackathon 2013Techcrunch hackathon 2013
Techcrunch hackathon 2013Nao Tokui
 
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
schoowebcampus
 

Similar to tvOSとiOSがこんなに違うわけがない ~tvOSアプリ実装編~ (20)

プログラミングはじめの一歩 先生:関根 元和
プログラミングはじめの一歩 先生:関根 元和プログラミングはじめの一歩 先生:関根 元和
プログラミングはじめの一歩 先生:関根 元和
 
SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化
SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化
SORACOM Conference Discovery 2017 | C2. 製造業が挑む 製品のIoTソリューション化
 
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
20141112 Tech Valley #3 note - スタートアップでこだわったこと - takamaru
 
DevOpsを実現する為のChef活用テクニック
DevOpsを実現する為のChef活用テクニックDevOpsを実現する為のChef活用テクニック
DevOpsを実現する為のChef活用テクニック
 
(Best) practices for working globally in IT industry - DMM.Study Night
(Best) practices for working globally in IT industry - DMM.Study Night(Best) practices for working globally in IT industry - DMM.Study Night
(Best) practices for working globally in IT industry - DMM.Study Night
 
できる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリできる!スマホアプリ:Webからはじまるアプリ
できる!スマホアプリ:Webからはじまるアプリ
 
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
Firefox OSアーキテクチャクイックツアー - FxOSコードリーディングミートアップ#21向け追記版
 
Hello Engineer World! 新人リケジョの1年
Hello Engineer World! 新人リケジョの1年Hello Engineer World! 新人リケジョの1年
Hello Engineer World! 新人リケジョの1年
 
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったことPHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
 
Apple審査を一発通過! iOS開発経験0でも出来る じげん流Swift開発のすべて
Apple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべてApple審査を一発通過!iOS開発経験0でも出来るじげん流Swift開発のすべて
Apple審査を一発通過! iOS開発経験0でも出来る じげん流Swift開発のすべて
 
Swiftを迷わず選んだ理由
Swiftを迷わず選んだ理由Swiftを迷わず選んだ理由
Swiftを迷わず選んだ理由
 
20181205 #dev reljp_#37_beajouneyman
20181205 #dev reljp_#37_beajouneyman20181205 #dev reljp_#37_beajouneyman
20181205 #dev reljp_#37_beajouneyman
 
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
KANAZAWA アプリ開発塾 2015 アプリ制作マスターへの道
 
個人で開発したアプリがベスト新着に選ばれた話
個人で開発したアプリがベスト新着に選ばれた話個人で開発したアプリがベスト新着に選ばれた話
個人で開発したアプリがベスト新着に選ばれた話
 
できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16できる!スマホアプリ:Webからはじまるアプリ for CMU16
できる!スマホアプリ:Webからはじまるアプリ for CMU16
 
DevOps、その前に
DevOps、その前にDevOps、その前に
DevOps、その前に
 
【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210
【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210
【Halo】スマホアプリ3つの法則 ボケてをアプリ化するときにやったこと121210
 
nomad-cliの紹介
nomad-cliの紹介nomad-cliの紹介
nomad-cliの紹介
 
Techcrunch hackathon 2013
Techcrunch hackathon 2013Techcrunch hackathon 2013
Techcrunch hackathon 2013
 
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
デザイナーでも安心!はじめてのiOSアプリ開発 先生:関根 元和
 

tvOSとiOSがこんなに違うわけがない ~tvOSアプリ実装編~

Editor's Notes

  1. では、まずは「はじめに」から、
  2. 2015年12月にOPENREC.tvはAppleTVに対応しました!(拍手) AppleTVに対応するにあたって、プロジェクトのメンバーの一人として僕も実装を担当させていただきました。
  3. その経験を踏まえ、今回は実際に実装してみてわかったtvOSのアプリ開発はiOSと比べてここが違う!と感じたことについて発表します
  4. tvOSのアプリ開発では、iOSのときに使っていた操作方法であるタップ、スワイプ、パン、ピンチ(Appleでは不可) 、ドラッグ(AppleTVでは不可)に加えて、 フォーカスという概念がとても重要な特徴の一つとなっています
  5. AppleTV第四世代の新しいリモコンである Siri Remote ではTouchサーフェスによるトラックパッドのようなカーソル移動がメインになっているため、いまどこにカーソルがいるのかを判断するためにフォーカスの概念が導入されています。 なので、UIを設計する際は各UIパーツがフォーカスを検知できるのかどうかを知っておく必要があります。
  6. 現時点で、tvOSのUIKit内でフォーカスを検知できるUIパーツは・・・の7種類です。
  7. また、フォーカスが当たっているビュー上に設置した UIImageView オブジェクトは adjustsImageWhenAncestorFocused プロパティをYESにすると、フォーカスが当たった際にサイズが自動的に大きくなり、スワイプに応じたパララックスの動きが付与されます。フォーカスが当たらないビューには非常に便利なプロパティなのですが、指定できるのはUIImageViewだけです。
  8. 続いて、各ビューにフォーカスが当たったときに呼ばれるのが UIFocusEnvironment プロトコルの - (void)didUpdateFocusInContext:withAnimationCoordinator: メソッドです。context.nextFocusedViewは現在フォーカスが当たっているビューを、context.previouslyFocusedViewは一つ前にフォーカスが当たっていたビューを取得することができます。 UIFocusEnvironment は UIView クラスや UIViewController クラスで定義されているため、そのサブクラスであれば、このメソッドでフォーカスの移動を検知できます。
  9. iOSではデバイスに応じたスクリーンサイズを取得する際に、UIScreenクラスから bounds と applicationFrame という2つのプロパティが使えましたが、tvOSでは後者の applicationFrame が使えなくなりました。
  10. 実際に使おうとすると、このようにエラーが出ます。
  11. また、UIKit.framework内にもtvOSでは使用禁止という指定がされています。 iOSの開発でこのapplicationFrameが使えないとなると、OPENREC.tv Ver.4.0で対応したiPad対応がまともにできない状況になってしまいます。 恐ろしい!では、どうしてapplicationFrameプロパティが使えないのでしょうか?理由は大きく3つあります。
  12. このようにことごとく、statusBar関連のプロパティが使えなくなっています。
  13. これはAppleTVにはまだありません。
  14. まあ、テレビを使ってる時に回転させることって無いですよね?
  15. つまり、スクリーンのフレームサイズが1パターン(ランドスケープで全画面)しかないので、applicationFrameを使う必要がなくなるのです。 しかし、今後AppleTVでマルチタスキングが実装されたときには、applicationFrameは復活してもらわないと困りそうですね。
  16. iOSアプリの開発ではボタンを押したときのアクションを実装するときに、よくこのようなコードで実装します。
  17. フォーカスの違いはあれど、iOSでのボタンを押し込むタップと同じく、ボタンをクリックするという概念はtvOSでもおなじはず! そう思って同じコードで実装してみました。すると、クリックしても、
  18. 何かおかしいと思って、UIKitの中身を覗いてみると、forControlEventsのオプション指定に新たな項目が増えていました。それが、
  19. UIControlEventPrimaryActionTriggered というより長い名前になったオプションです。英語の意味から察するに、そのクラスの主なアクションを引き起こすためのオプションのようですね。あらゆるアクションを包括的に検知できるということかな?と考え、これを使ってみると、一発で反応しました!
  20. なので、tvOSでボタンを押したときのアクションを実装する際にはこのように書きましょう。