この資料はクックパッド社主催のiOS/Android Tips交換会potatotips #11で発表した資料です。 https://github.com/potatotips/potatotips/wiki/potatotips-11 http://connpass.com/event/9639/

1. potatotips #11
小学生でも分かった気になる
iOS8のSize Class
株式会社キュリオシティソフトウェア
今城 善矩(@yimajo)

2. 今日Size Classについて話すこと
前編
Size Classを用いてiPhone/iPadで同じStoryboardを使う方法
後編
Size Classの概念が難しい件について

3. 前編:
Size Classを用いてiPhone/iPadで同じ
Storyboardを使う方法

4. 例えばこういうデザインの時
iPhone iPad

5. 例えばこういうデザインの時
iPhone iPad
iPadのみのLabel配置したい！

6. 例えばこういうデザインの時
iPhone iPad
iPadのみのLabel配置したい！
iPadはFont大きくしたい！

7. 例えばこういうデザインの時
iPhone iPad
iPadのみのLabel配置したい！
iPadはFont大きくしたい！
iPadは下の方を持ちづらい、ボタンが下すぎると嫌なのでマージン大きく！

8. これがSize Classで簡単にできて
分かった気になるので
1つずつやり方を説明する

9. 前提
Portraitのみでデバイス全画面
のrootViewとして対応する
iPhoneはSize Class w:C h:Rと
して分類され
iPadはSize Class w:R h:Rとし
て分類される

10. Xcode6のInterface BuilderでSize Class
によって出来る用になった事2つ
1. UIコンポーネントをSize Class別に設置
2. 一つのUIコンポーネントに対してSize Class別に設定

11. Xcode6のInterface BuilderでSize Class
によって出来る用になった事2つ
1. UIコンポーネントをSize Class別に設置
2. 一つのUIコンポーネントに対してSize Class別に設定
Font（等のプロパティ）を設定
大きさや位置（Frame）を設定
Auto Layoutを設定が出来るようになった

12. UIコンポーネントをSize Class
ごとに配置する
UIコンポーネントのFrameで
+を押し
w:R h:Rのinstalledのみを
チェック☑すると
iPadのみで存在する
UILabelになる

13. Size ClassごとにFont設定
UILabelの+をクリックし
w:R h:Rの設定を追加すると
iPad用のFontが
設定される

14. Size ClassごとにFrameを設定するには
これは+や☑installedは無く
IB Design Viewの下で
Size Classを切り替え
その状態で指定した
FrameがSize Classごとの
設定となる
iPhone iPad

15. 結果こういう感じになる
iPhone iPad

16. 結果こういう感じになる
iPhone iPad
iPadのみUILabelをinstalled

17. 結果こういう感じになる
iPhone iPad
iPadのみUILabelをinstalled
iPadのみFontを75pt

18. 結果こういう感じになる
iPhone iPad
iPadのみUILabelをinstalled
iPadのみFontを75pt
iPadはFrame{(x:100,y:585),(w:400,h:140)}でそれに合うAutoLayoutを指定

19. 注意点
iPhoneのUILabelと
iPadのUILabelを別々に作り
共通のViewControllerのIBOutletに繋ぐと
片方が切り離されるから注意しよう
（共通のUILabelにしてFrameを別にすべき）

20. 今の例は
Portraitのみの画面だったため
わりと説明がしやすかった

21. Size Classなんとなく分かった気になった
はず
後半でさらに補足する

22. 後半:
Size Classの概念が難しい件について

23. お前らがなんで
Size Classを理解できない理
解出来ないと嘆くかについて

24. ネット上に公開されている
Size Classの記事はSize Classの
必要性が感じられないし
Adaptivityとかいう奴が意味不明

25. 原因として
1.画面の回転の話を持ちだされる（iOS8で回
転検出が変わったことに起因）
2. iPhone6+のために作られたような記載
3.Compact,Regularってのが分かりづらい

26. 1. 画面の回転に関係あるの？
回転自体はSize Classと直接は関係がなく、
縦/横画面でのUIコンポーネントの“配置”に
関係している。
回転自体はAdaptivityに関係があり、
Size ClassはAdaptivityのために必要なんだけど
それはとりあえず一旦忘れよう。

27. 2. iPhone6+のためにある？
iPhone6+はLandscape時に特殊だが、
iPhone6+のためだけにあるわけでは
ない。

28. 3.Compact, Regularが分かりづらい
CompactもRegularも何を基準としてそのよう
な名前になっているのかが不明瞭
この名前について深く考えずに
サイズ分類のための記号だと
思うほうが手っ取り早い

29. Size ClassのC,Rについて話題になると出てくるあの表…
Portrait
Width
Portrait
Height
Landscape
Width
Landscape
Height
iPhone4s
iPhone5/5s
iPhone6
Compact Regular Compact Compact
iPhone6+ Compact Regular Regular Compact
iPad Regular Regular Regular Regular
正しいがこの表の見せ方は分かりづらい…

30. 一旦、Landscapeのことを忘れよう
Portrait
Width
Portrait
Height
Landscape
Width
Landscape
Height
iPhone4s
iPhone5/5s
iPhone6
Compact Regular Compact Compact
iPhone6+ Compact Regular Regular Compact
iPad Regular Regular Regular Regular
そうすると全てのiPhoneはw:C h:Rになり
iPadはw:R h:Rに区別できる

31. シンプルに書くとこうなる
Portrait
Width
Portrait
Height
iPhone4s
iPhone5/5s
iPhone6/6+
Compact Regular
iPad Regular Regular
iPhone -> w:C h:R
iPad -> w:R h:R

32. 注意点
現状発売されている
iPhoneはw:C h:RでiPadはw:R h:Rだが、
将来的にw:R h:RなiPhoneが出ない
という確証はない！
（XcodeからシミュレータをResizable iPhoneを
選択するとw:R h:RなiPhoneも実行できる）

33. ただし
w:R h:R なiPhoneが出たとして
Appleのマーケテティング上それが
iPhoneっていう名前なだけで
そのようなiPhoneは
iPadのレイアウトと同じになったほうが
ユーザーにとっては好ましい気がする…

34. つまり
Size Classはマーケティング上の識別子である
iPhone,iPadの区別でレイアウトを考えるのでなく
サイズ分類でレイアウトを変えられるように
考えられた仕組みなんじゃないの？
それで達成したいのがAdaptive User Interface

35. まとめ
Size Class+IBでiPad用のレイアウトを手軽にできる、が
本質的にはiPhone/iPadを識別したいわけなくSizeのClassで分
類してレイアウトを分けるもの
Size ClassやAuto Layoutなどの手段によってレイアウトをユー
ザーに最適にするのがAdaptivity
現状まだAdaptive User Interfaceはデザイナが把握していない
だろうが、iPadのPortraitはw:R h:Rとしてレイアウトを実装し
といても将来的に問題ない（本質には外れない）はず

36. 参考
Adaptive User Interfaces
https://developer.apple.com/design/adaptivity/
iOS Human Interface Guidelines : Adaptivity and Layout
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/
mobilehig/LayoutandAppearance.html
Size Classes Design Help
https://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/
AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1

37. 宣伝
株式会社キュリオシティソフトウェアではiOSアプリ開発のお仕事を募集しております
カメラアプリやチャットアプリなどユーザーの日常に近いアプリ開発を得意としています
デザインから請け負う事もできますので
お気軽にお問い合わせください
http://curiosity.co.jp/