小学生でも分かった気になるios8のsize class
DESCRIPTION
この資料はクックパッド社主催のiOS/Android Tips交換会potatotips #11で発表した資料です。 https://github.com/potatotips/potatotips/wiki/potatotips-11 http://connpass.com/event/9639/TRANSCRIPT
![Page 1: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/1.jpg)
小学生でも分かった気になる iOS8のSize Class
株式会社キュリオシティソフトウェア 今城 善矩(@yimajo)
potatotips #11
![Page 2: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/2.jpg)
今日Size Classについて話すこと
前編
Size Classを用いてiPhone/iPadで同じStoryboardを使う方法
後編
Size Classの概念が難しい件について
![Page 3: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/3.jpg)
前編: Size Classを用いてiPhone/iPadで同じ Storyboardを使う方法
![Page 4: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/4.jpg)
例えばこういうデザインの時iPhone iPad
![Page 5: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/5.jpg)
例えばこういうデザインの時iPhone iPad
iPadのみのLabel配置したい!
![Page 6: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/6.jpg)
例えばこういうデザインの時iPhone iPad
iPadのみのLabel配置したい!
iPadはFont大きくしたい!
![Page 7: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/7.jpg)
例えばこういうデザインの時iPhone iPad
iPadのみのLabel配置したい!
iPadはFont大きくしたい!
iPadは下の方を持ちづらい、ボタンが下すぎると嫌なのでマージン大きく!
![Page 8: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/8.jpg)
これがSize Classで簡単にできて 分かった気になるので
1つずつやり方を説明する
![Page 9: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/9.jpg)
前提Portraitのみでデバイス全画面のrootViewとして対応する
iPhoneはSize Class w:C h:Rとして分類され
iPadはSize Class w:R h:Rとして分類される
![Page 10: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/10.jpg)
Xcode6のInterface BuilderでSize Classによって出来る用になった事2つ
1. UIコンポーネントをSize Class別に設置
2. 一つのUIコンポーネントに対してSize Class別に設定
![Page 11: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/11.jpg)
Xcode6のInterface BuilderでSize Classによって出来る用になった事2つ
1. UIコンポーネントをSize Class別に設置
2. 一つのUIコンポーネントに対してSize Class別に設定
Font(等のプロパティ)を設定
大きさや位置(Frame)を設定
Auto Layoutを設定が出来るようになった
![Page 12: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/12.jpg)
UIコンポーネントをSize Classごとに配置する
UIコンポーネントのFrameで +を押し
w:R h:Rのinstalledのみを チェック☑すると
iPadのみで存在する UILabelになる
![Page 13: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/13.jpg)
Size ClassごとにFont設定
UILabelの+をクリックし w:R h:Rの設定を追加すると
iPad用のFontが 設定される
![Page 14: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/14.jpg)
Size ClassごとにFrameを設定するには
これは+や☑installedは無く
IB Design Viewの下で Size Classを切り替え その状態で指定した
FrameがSize Classごとの 設定となる
iPhone iPad
![Page 15: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/15.jpg)
結果こういう感じになるiPhone iPad
![Page 16: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/16.jpg)
結果こういう感じになるiPhone iPad
iPadのみUILabelをinstalled
![Page 17: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/17.jpg)
結果こういう感じになるiPhone iPad
iPadのみUILabelをinstalled
iPadのみFontを75pt
![Page 18: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/18.jpg)
結果こういう感じになるiPhone iPad
iPadのみUILabelをinstalled
iPadのみFontを75pt
iPadはFrame{(x:100,y:585),(w:400,h:140)}でそれに合うAutoLayoutを指定
![Page 19: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/19.jpg)
注意点
iPhoneのUILabelと iPadのUILabelを別々に作り
共通のViewControllerのIBOutletに繋ぐと 片方が切り離されるから注意しよう
(共通のUILabelにしてFrameを別にすべき)
![Page 20: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/20.jpg)
今の例は Portraitのみの画面だったため わりと説明がしやすかった
![Page 21: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/21.jpg)
Size Classなんとなく分かった気になった はず
後半でさらに補足する
![Page 22: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/22.jpg)
後半: Size Classの概念が難しい件について
![Page 23: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/23.jpg)
お前らがなんで Size Classを理解できない理解出来ないと嘆くかについて
![Page 24: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/24.jpg)
ネット上に公開されている Size Classの記事はSize Classの 必要性が感じられないし
Adaptivityとかいう奴が意味不明
![Page 25: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/25.jpg)
1.画面の回転の話を持ちだされる(iOS8で回転検出が変わったことに起因)
2. iPhone6+のために作られたような記載
原因として
3.Compact,Regularってのが分かりづらい
![Page 26: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/26.jpg)
1. 画面の回転に関係あるの?
回転自体はSize Classと直接は関係がなく、 縦/横画面でのUIコンポーネントの“配置”に
関係している。
回転自体はAdaptivityに関係があり、 Size ClassはAdaptivityのために必要なんだけど
それはとりあえず一旦忘れよう。
![Page 27: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/27.jpg)
2. iPhone6+のためにある?
iPhone6+はLandscape時に特殊だが、 iPhone6+のためだけにあるわけでは
ない。
![Page 28: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/28.jpg)
3.Compact, Regularが分かりづらい
CompactもRegularも何を基準としてそのような名前になっているのかが不明瞭
この名前について深く考えずに サイズ分類のための記号だと 思うほうが手っ取り早い
![Page 29: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/29.jpg)
Size ClassのC,Rについて話題になると出てくるあの表…
Portrait Width
Portrait Height
Landscape Width
Landscape Height
iPhone4s iPhone5/5s
iPhone6Compact Regular Compact Compact
iPhone6+ Compact Regular Regular Compact
iPad Regular Regular Regular Regular
正しいがこの表の見せ方は分かりづらい…
![Page 30: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/30.jpg)
一旦、Landscapeのことを忘れよう
Portrait Width
Portrait Height
Landscape Width
Landscape Height
iPhone4s iPhone5/5s
iPhone6Compact Regular Compact Compact
iPhone6+ Compact Regular Regular Compact
iPad Regular Regular Regular Regular
そうすると全てのiPhoneはw:C h:Rになり iPadはw:R h:Rに区別できる
![Page 31: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/31.jpg)
シンプルに書くとこうなる
Portrait Width
Portrait Height
iPhone4s iPhone5/5s iPhone6/6+
Compact Regular
iPad Regular Regular
iPhone -> w:C h:R iPad -> w:R h:R
![Page 32: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/32.jpg)
注意点現状発売されている
iPhoneはw:C h:RでiPadはw:R h:Rだが、
将来的にw:R h:RなiPhoneが出ない という確証はない!
(XcodeからシミュレータをResizable iPhoneを 選択するとw:R h:RなiPhoneも実行できる)
![Page 33: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/33.jpg)
ただし w:R h:R なiPhoneが出たとして
Appleのマーケテティング上それが iPhoneっていう名前なだけで
そのようなiPhoneは iPadのレイアウトと同じになったほうが ユーザーにとっては好ましい気がする…
![Page 34: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/34.jpg)
つまり Size Classはマーケティング上の識別子である
iPhone,iPadの区別でレイアウトを考えるのでなく
サイズ分類でレイアウトを変えられるように 考えられた仕組みなんじゃないの?
それで達成したいのがAdaptive User Interface
![Page 35: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/35.jpg)
まとめSize Class+IBでiPad用のレイアウトを手軽にできる、が
本質的にはiPhone/iPadを識別したいわけなくSizeのClassで分類してレイアウトを分けるもの
Size ClassやAuto Layoutなどの手段によってレイアウトをユーザーに最適にするのがAdaptivity
現状まだAdaptive User Interfaceはデザイナが把握していないだろうが、iPadのPortraitはw:R h:Rとしてレイアウトを実装しといても将来的に問題ない(本質には外れない)はず
![Page 36: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/36.jpg)
Size Classes Design Helphttps://developer.apple.com/library/ios/recipes/xcode_help-IB_adaptive_sizes/chapters/AboutAdaptiveSizeDesign.html#//apple_ref/doc/uid/TP40014436-CH6-SW1
参考
iOS Human Interface Guidelines : Adaptivity and Layouthttps://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LayoutandAppearance.html
Adaptive User Interfaceshttps://developer.apple.com/design/adaptivity/
![Page 37: 小学生でも分かった気になるiOS8のSize Class](https://reader033.vdocuments.pub/reader033/viewer/2022052508/559b20971a28abd5738b46e9/html5/thumbnails/37.jpg)
宣伝
株式会社キュリオシティソフトウェアではiOSアプリ開発のお仕事を募集しておりますカメラアプリやチャットアプリなどユーザーの日常に近いアプリ開発を得意としています
デザインから請け負う事もできますのでお気軽にお問い合わせください
http://curiosity.co.jp/