"EBQUJWF6* ղ૾౓ͷҟͳΔσόΠε΍ը໘ͷ޲͖ʹରԠ͢Δ ࠷దͳϨΠΞ΢τ΁ :VKJ)BUP Զίϯ4VNNFS%BZ

Yuji Hato CyberAgent, Inc. / AbemaTV, Inc. dekatotoro @dekatotoro Contributed services "CPVUNF

"EBQUJWF6* Size Clases "CFNB57ͷରԠྫ 1SBDUJDF "HFOEB

"EBQUJWF6*

"EBQUJWF6* IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED %FWJDF4J[F

IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "EBQUJWF6* %FWJDF4J[Fº%JSFDUJPO

IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "EBQUJWF6* %FWJDF4J[Fº%JSFDUJPOº.VMUJUBTLJOH

IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTWJTVBMEFTJHOBEBQUJWJUZBOEMBZPVU "EBQUJWF6* %FWJDF4J[F

IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "EBQUJWF6* %FWJDF4J[Fº%JSFDUJPOº.VMUJUBTLJOH

σόΠεͷαΠζ΍޲͖ɺঢ়ଶʹ߹Θͤͯ ࠷దͳϨΠΞ΢τʹ͢Δ "EBQUJWF6*

4J[F$MBTTFT

4J[F$MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED $PNQBDUº3FRVMBSQBUUFSO

4J[F$MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED $PNQBDUº3FRVMBSQBUUFSO

4J[F$MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED %FWJDF4J[Fº%JSFDUJPOº.VMUJUBTLJOH

4J[F$MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED "QQMZUPTJ[FDMBTT

IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTWJTVBMEFTJHOBEBQUJWJUZBOEMBZPVU 4J[F$MBTTFT %FGJOJUJPO

IUUQTEFWFMPQFSBQQMFDPNEFTJHOIVNBOJOUFSGBDFHVJEFMJOFTJPTWJTVBMEFTJHOBEBQUJWJUZBOEMBZPVU 4J[F$MBTTFT %FGJOJUJPOGPS.VMUJUBTLJOH

IUUQTEFWFMPQFSBQQMFDPNMJCSBSZBSDIJWFEPDVNFOUBUJPO8JOEPXT7JFXT$PODFQUVBM"EPQUJOH.VMUJUBTLJOH0OJ1BE 2VJDL4UBSU'PS4MJEF0WFS"OE4QMJU7JFXIUNMBQQMF@SFGEPDVJE51$)48 4J[F$MBTTFT %FGJOJUJPOGPS.VMUJUBTLJOH

IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4J[F$MBTTFT .BOZDPNCJOBUJPOTˠQBUUFSO

public protocol UITraitEnvironment : NSObjectProtocol { @available(iOS 8.0, *) public var traitCollection: UITraitCollection { get } @available(iOS 8.0, *) public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) } 4J[F$MBTTFT

open class UIView : UIResponder, NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace, UIFocusItem, CALayerDelegate { open class UIViewController : UIResponder, NSCoding, UIAppearanceContainer, UITraitEnvironment, UIContentContainer, UIFocusEnvironment { 4J[F$MBTTFT

public protocol UITraitEnvironment : NSObjectProtocol { @available(iOS 8.0, *) public var traitCollection: UITraitCollection { get } @available(iOS 8.0, *) public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) } 4J[F$MBTTFT

@available(iOS 8.0, *) open class UITraitCollection : NSObject, NSCopying, NSSecureCoding { open var userInterfaceIdiom: UIUserInterfaceIdiom { get } open var displayScale: CGFloat { get } open var horizontalSizeClass: UIUserInterfaceSizeClass { get } open var verticalSizeClass: UIUserInterfaceSizeClass { get } @available(iOS 9.0, *) open var forceTouchCapability: UIForceTouchCapability { get } @available(iOS 10.0, *) open var layoutDirection: UITraitEnvironmentLayoutDirection { get } @available(iOS 10.0, *) open var preferredContentSizeCategory: UIContentSizeCategory { get } @available(iOS 10.0, *) open var displayGamut: UIDisplayGamut { get } … } 4J[F$MBTTFT

@available(iOS 8.0, *) open class UITraitCollection : NSObject, NSCopying, NSSecureCoding { open var userInterfaceIdiom: UIUserInterfaceIdiom { get } open var displayScale: CGFloat { get } open var horizontalSizeClass: UIUserInterfaceSizeClass { get } open var verticalSizeClass: UIUserInterfaceSizeClass { get } @available(iOS 9.0, *) open var forceTouchCapability: UIForceTouchCapability { get } @available(iOS 10.0, *) open var layoutDirection: UITraitEnvironmentLayoutDirection { get } @available(iOS 10.0, *) open var preferredContentSizeCategory: UIContentSizeCategory { get } @available(iOS 10.0, *) open var displayGamut: UIDisplayGamut { get } … } 4J[F$MBTTFT

4J[F$MBTTFT IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED $PNQBDUº3FRVMBSQBUUFSO

extension UITraitCollection { var isPortrait: Bool { return verticalSizeClass == .regular && horizontalSizeClass == .compact } var isLandscape: Bool { return verticalSizeClass == .compact && horizontalSizeClass == .regular } var isCompactLandscape: Bool { return verticalSizeClass == .compact && horizontalSizeClass == .compact } var isRegularRegular: Bool { return verticalSizeClass == .regular && horizontalSizeClass == .regular } } 4J[F$MBTTFT

public protocol UITraitEnvironment : NSObjectProtocol { @available(iOS 8.0, *) public var traitCollection: UITraitCollection { get } @available(iOS 8.0, *) public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) } 4J[F$MBTTFT

IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4J[F$MBTTFT

IUUQTEFWFMPQFSBQQMFDPNWJEFPTQMBZXXED 4J[F$MBTTFT

4J[F$MBTTFT iPhone ॳظදࣔ viewDidLoad viewWillAppear traitCollectionDidChange viewWillLayoutSubviews viewDidLayoutSubviews viewDidAppear ճస࣌ willTransition(to:with:) viewWillTransition(to:with:) traitCollectionDidChange viewWillLayoutSubviews viewDidLayoutSubviews iPad ॳظදࣔ viewDidLoad viewWillAppear traitCollectionDidChange viewWillLayoutSubviews viewDidLayoutSubviews viewDidAppear ճస࣌ (traitCollection͕มߋͳ͍৔߹) viewWillTransition(to:with:) viewWillLayoutSubviews viewDidLayoutSubviews

4J[F$MBTTFT iPhone ॳظදࣔ viewDidLoad viewWillAppear traitCollectionDidChange viewWillLayoutSubviews viewDidLayoutSubviews viewDidAppear ճస࣌ willTransition(to:with:) viewWillTransition(to:with:) traitCollectionDidChange viewWillLayoutSubviews viewDidLayoutSubviews iPad ॳظදࣔ viewDidLoad viewWillAppear traitCollectionDidChange viewWillLayoutSubviews viewDidLayoutSubviews viewDidAppear ճస࣌ (traitCollection͕มߋͳ͍৔߹) viewWillTransition(to:with:) viewWillLayoutSubviews viewDidLayoutSubviews

1SBDUJDF

6*5SBJU$PMMFDUJPOͷมԽʹΑΔ MBZPVUมߋ 1SBDUJDF

1SBDUJDF

1SBDUJDF 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX

1SBDUJDF

1SBDUJDF

1SBDUJDF

1SBDUJDF

1SBDUJDF

1SBDUJDF

TDSPMM͕ԼͷΈʹͳΔ 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 1SBDUJDF

શͯ4DSPMM͍ͤͨ͞ 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 1SBDUJDF

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { super.traitCollectionDidChange(previousTraitCollection) if traitCollection.isPortrait { if rootStackView.arrangedSubviews.contains(leftView) { rootStackView.removeArrangedSubview(leftView) leftView.removeFromSuperview() } if !scrollableStackView.arrangedSubviews.contains(leftView) { scrollableStackView.insertArrangedSubview(leftView, at: 0) } } else { if scrollableStackView.arrangedSubviews.contains(leftView) { scrollableStackView.removeArrangedSubview(leftView) leftView.removeFromSuperview() } if !rootStackView.arrangedSubviews.contains(leftView) { rootStackView.insertArrangedSubview(leftView, at: 0) } } } 1SBDUJDF

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { super.traitCollectionDidChange(previousTraitCollection) if traitCollection.isPortrait { if rootStackView.arrangedSubviews.contains(leftView) { rootStackView.removeArrangedSubview(leftView) leftView.removeFromSuperview() } if !scrollableStackView.arrangedSubviews.contains(leftView) { scrollableStackView.insertArrangedSubview(leftView, at: 0) } } else { if scrollableStackView.arrangedSubviews.contains(leftView) { scrollableStackView.removeArrangedSubview(leftView) leftView.removeFromSuperview() } if !rootStackView.arrangedSubviews.contains(leftView) { rootStackView.insertArrangedSubview(leftView, at: 0) } } } 1SBDUJDF

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) { super.traitCollectionDidChange(previousTraitCollection) if traitCollection.isPortrait { if rootStackView.arrangedSubviews.contains(leftView) { rootStackView.removeArrangedSubview(leftView) leftView.removeFromSuperview() } if !scrollableStackView.arrangedSubviews.contains(leftView) { scrollableStackView.insertArrangedSubview(leftView, at: 0) } } else { if scrollableStackView.arrangedSubviews.contains(leftView) { scrollableStackView.removeArrangedSubview(leftView) leftView.removeFromSuperview() } if !rootStackView.arrangedSubviews.contains(leftView) { rootStackView.insertArrangedSubview(leftView, at: 0) } } } 1SBDUJDF

4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 4UBDL7JFX 4DSPMM7JFX 4UBDL7JFX 7*FX 7*FX 7*FX -FGU7JFX *NBHF7JFX 1SBDUJDF

4J[FมԽʹΑΔMBZPVUมߋ 1SBDUJDF

1SBDUJDF

1SBDUJDF

1SBDUJDF

1SBDUJDF

static func cellSize(isPortrait: Bool, parentSize: CGSize, isRegularRegular: Bool, safeArea: UIEdgeInsets) -> CGSize { let nextContentRatio: Double = 0.2 // νϥݟͤൺ཰ʢద౰ʣ let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:R͸)2ͭɺͦΕҎ֎͸4ͭ let numberOfItemsFactor: Double = numberOfItems + nextContentRatio let sideMargin: CGFloat = isRegularRegular ? 60 : 12 let cellSpace: CGFloat = 24 let margin = sideMargin + safeArea.left + safeArea.right let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems) let remainWidth = parentSize.width - totalCellSpace let width = remainWidth / CGFloat(numberOfItemsFactor) let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80 let thumbnailHeight = width / 16 * 9 let height = thumbnailHeight + textAreaHeight return CGSize(width: width, height: height) } 1SBDUJDF ے೑

static func cellSize(isPortrait: Bool, parentSize: CGSize, isRegularRegular: Bool, safeArea: UIEdgeInsets) -> CGSize { let nextContentRatio: Double = 0.2 // νϥݟͤൺ཰ʢద౰ʣ let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:R͸)2ͭɺͦΕҎ֎͸4ͭ let numberOfItemsFactor: Double = numberOfItems + nextContentRatio let sideMargin: CGFloat = isRegularRegular ? 60 : 12 let cellSpace: CGFloat = 24 let margin = sideMargin + safeArea.left + safeArea.right let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems) let remainWidth = parentSize.width - totalCellSpace let width = remainWidth / CGFloat(numberOfItemsFactor) let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80 let thumbnailHeight = width / 16 * 9 let height = thumbnailHeight + textAreaHeight return CGSize(width: width, height: height) } 1SBDUJDF

static func cellSize(isPortrait: Bool, parentSize: CGSize, isRegularRegular: Bool, safeArea: UIEdgeInsets) -> CGSize { let nextContentRatio: Double = 0.2 // νϥݟͤൺ཰ʢద౰ʣ let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:R͸)2ͭɺͦΕҎ֎͸4ͭ let numberOfItemsFactor: Double = numberOfItems + nextContentRatio let sideMargin: CGFloat = isRegularRegular ? 60 : 12 let cellSpace: CGFloat = 24 let margin = sideMargin + safeArea.left + safeArea.right let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems) let remainWidth = parentSize.width - totalCellSpace let width = remainWidth / CGFloat(numberOfItemsFactor) let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80 let thumbnailHeight = width / 16 * 9 let height = thumbnailHeight + textAreaHeight return CGSize(width: width, height: height) } 1SBDUJDF

static func cellSize(isPortrait: Bool, parentSize: CGSize, isRegularRegular: Bool, safeArea: UIEdgeInsets) -> CGSize { let nextContentRatio: Double = 0.2 // νϥݟͤൺ཰ʢద౰ʣ let numberOfItems: Double = isPortrait ? 2 : 4 // (W:C, H:R͸)2ͭɺͦΕҎ֎͸4ͭ let numberOfItemsFactor: Double = numberOfItems + nextContentRatio let sideMargin: CGFloat = isRegularRegular ? 60 : 12 let cellSpace: CGFloat = 24 let margin = sideMargin + safeArea.left + safeArea.right let totalCellSpace: CGFloat = margin + cellSpace * CGFloat(numberOfItems) let remainWidth = parentSize.width - totalCellSpace let width = remainWidth / CGFloat(numberOfItemsFactor) let textAreaHeight: CGFloat = isRegularRegular ? 120 : 80 let thumbnailHeight = width / 16 * 9 let height = thumbnailHeight + textAreaHeight return CGSize(width: width, height: height) } 1SBDUJDF

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransition(to: size, with: coordinator) collectionView.reloadData() } 1SBDUJDF

J1BEͷॎԣͰҟͳΔϨΠΞ΢τʹ͢Δ 1SBDUJDF

1SBDUJDF

override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? { if UIDevice.current.userInterfaceIdiom == .pad, let rootViewController = UIApplication.shared.keyWindow?.rootViewController { let portraitTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)]) let landscapeTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .compact)]) let rootViewSize = rootViewController.view.bounds.size let size = view.bounds.size if isMultiTasking(rootViewSize: rootViewSize) { if rootViewController.traitCollection.isRegularRegular { return landscapeTraitCollection } else { return portraitTraitCollection } } else if size.width > size.height { return landscapeTraitCollection } else { return portraitTraitCollection } } return traitCollection } 1SBDUJDF

override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? { if UIDevice.current.userInterfaceIdiom == .pad, let rootViewController = UIApplication.shared.keyWindow?.rootViewController { let portraitTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)]) let landscapeTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .compact)]) let rootViewSize = rootViewController.view.bounds.size let size = view.bounds.size if isMultiTasking(rootViewSize: rootViewSize) { if rootViewController.traitCollection.isRegularRegular { return landscapeTraitCollection } else { return portraitTraitCollection } } else if size.width > size.height { return landscapeTraitCollection } else { return portraitTraitCollection } } return traitCollection } 1SBDUJDF

override func overrideTraitCollection(forChildViewController childViewController: UIViewController) -> UITraitCollection? { if UIDevice.current.userInterfaceIdiom == .pad, let rootViewController = UIApplication.shared.keyWindow?.rootViewController { let portraitTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .regular)]) let landscapeTraitCollection = UITraitCollection(traitsFrom: [UITraitCollection(horizontalSizeClass: .compact), UITraitCollection(verticalSizeClass: .compact)]) let rootViewSize = rootViewController.view.bounds.size let size = view.bounds.size if isMultiTasking(rootViewSize: rootViewSize) { if rootViewController.traitCollection.isRegularRegular { return landscapeTraitCollection } else { return portraitTraitCollection } } else if size.width > size.height { return landscapeTraitCollection } else { return portraitTraitCollection } } return traitCollection } 1SBDUJDF

1SBDUJDF

1SBDUJDF

"CFNB57ͷରԠྫ

"CFNB57ͷରԠྫ J1IPOF

"CFNB57ͷରԠྫ J1IPOF

"CFNB57ͷରԠྫ J1IPOF

"CFNB57ͷରԠྫ J1BE

"CFNB57ͷରԠྫ J1BE

"CFNB57ͷରԠྫ 6*4QMJU7JFX$POUSPMMFS

"CFNB57ͷରԠྫ J1IPOF J1BE

·ͱΊ

·ͱΊ 4J[F$MBTTͱ5SBJU$PMMFDUJPOΛཧղ͢Δ "VUP-BZPVUº4J[F$MBTTº6*4UBDL7JFXºے೑ ։ൃɾϝϯςφϯε޻਺͸૿Ճ͢ΔͷͰࣄۀత؍఺΋ॏཁ

5IBOLZPV