Upgrade to Pro — share decks privately, control downloads, hide ads and more …

tvOSアプリUIの勘所

0d04162c7a3c2907c059a06dbcd23cf4?s=47 tokorom
August 31, 2018

 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

0d04162c7a3c2907c059a06dbcd23cf4?s=128

tokorom

August 31, 2018
Tweet

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

  66. None
  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