Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
potatotips #11 
小学生でも分かった気になる 
iOS8のSize Class 
株式会社キュリオシティソフトウェア 
今城 善矩(@yimajo)
今日Size Classについて話すこと 
前編 
Size Classを用いてiPhone/iPadで同じStoryboardを使う方法 
後編 
Size Classの概念が難しい件について
前編: 
Size Classを用いてiPhone/iPadで同じ 
Storyboardを使う方法
例えばこういうデザインの時 
iPhone iPad
例えばこういうデザインの時 
iPhone iPad 
iPadのみのLabel配置したい!
例えばこういうデザインの時 
iPhone iPad 
iPadのみのLabel配置したい! 
iPadはFont大きくしたい!
例えばこういうデザインの時 
iPhone iPad 
iPadのみのLabel配置したい! 
iPadはFont大きくしたい! 
iPadは下の方を持ちづらい、ボタンが下すぎると嫌なのでマージン大きく!
これがSize Classで簡単にできて 
分かった気になるので 
1つずつやり方を説明する
前提 
Portraitのみでデバイス全画面 
のrootViewとして対応する 
iPhoneはSize Class w:C h:Rと 
して分類され 
iPadはSize Class w:R h:Rとし 
て分類される
Xcode6のInterface BuilderでSize Class 
によって出来る用になった事2つ 
1. UIコンポーネントをSize Class別に設置 
2. 一つのUIコンポーネントに対してSize Class別に設定
Xcode6のInterface BuilderでSize Class 
によって出来る用になった事2つ 
1. UIコンポーネントをSize Class別に設置 
2. 一つのUIコンポーネントに対してSize Class別に設定 
Font...
UIコンポーネントをSize Class 
ごとに配置する 
UIコンポーネントのFrameで 
+を押し 
w:R h:Rのinstalledのみを 
チェック☑すると 
iPadのみで存在する 
UILabelになる
Size ClassごとにFont設定 
UILabelの+をクリックし 
w:R h:Rの設定を追加すると 
iPad用のFontが 
設定される
Size ClassごとにFrameを設定するには 
これは+や☑installedは無く 
IB Design Viewの下で 
Size Classを切り替え 
その状態で指定した 
FrameがSize Classごとの 
設定となる 
...
結果こういう感じになる 
iPhone iPad
結果こういう感じになる 
iPhone iPad 
iPadのみUILabelをinstalled
結果こういう感じになる 
iPhone iPad 
iPadのみUILabelをinstalled 
iPadのみFontを75pt
結果こういう感じになる 
iPhone iPad 
iPadのみUILabelをinstalled 
iPadのみFontを75pt 
iPadはFrame{(x:100,y:585),(w:400,h:140)}でそれに合うAutoLayou...
注意点 
iPhoneのUILabelと 
iPadのUILabelを別々に作り 
共通のViewControllerのIBOutletに繋ぐと 
片方が切り離されるから注意しよう 
(共通のUILabelにしてFrameを別にすべき)
今の例は 
Portraitのみの画面だったため 
わりと説明がしやすかった
Size Classなんとなく分かった気になった 
はず 
後半でさらに補足する
後半: 
Size Classの概念が難しい件について
お前らがなんで 
Size Classを理解できない理 
解出来ないと嘆くかについて
ネット上に公開されている 
Size Classの記事はSize Classの 
必要性が感じられないし 
Adaptivityとかいう奴が意味不明
原因として 
1.画面の回転の話を持ちだされる(iOS8で回 
転検出が変わったことに起因) 
2. iPhone6+のために作られたような記載 
3.Compact,Regularってのが分かりづらい
1. 画面の回転に関係あるの? 
回転自体はSize Classと直接は関係がなく、 
縦/横画面でのUIコンポーネントの“配置”に 
関係している。 
回転自体はAdaptivityに関係があり、 
Size ClassはAdaptivity...
2. iPhone6+のためにある? 
iPhone6+はLandscape時に特殊だが、 
iPhone6+のためだけにあるわけでは 
ない。
3.Compact, Regularが分かりづらい 
CompactもRegularも何を基準としてそのよう 
な名前になっているのかが不明瞭 
この名前について深く考えずに 
サイズ分類のための記号だと 
思うほうが手っ取り早い
Size ClassのC,Rについて話題になると出てくるあの表… 
Portrait 
Width 
Portrait 
Height 
Landscape 
Width 
Landscape 
Height 
iPhone4s 
iPhone...
一旦、Landscapeのことを忘れよう 
Portrait 
Width 
Portrait 
Height 
Landscape 
Width 
Landscape 
Height 
iPhone4s 
iPhone5/5s 
iPhone...
シンプルに書くとこうなる 
Portrait 
Width 
Portrait 
Height 
iPhone4s 
iPhone5/5s 
iPhone6/6+ 
Compact Regular 
iPad Regular Regular 
...
注意点 
現状発売されている 
iPhoneはw:C h:RでiPadはw:R h:Rだが、 
将来的にw:R h:RなiPhoneが出ない 
という確証はない! 
(XcodeからシミュレータをResizable iPhoneを 
選択すると...
ただし 
w:R h:R なiPhoneが出たとして 
Appleのマーケテティング上それが 
iPhoneっていう名前なだけで 
そのようなiPhoneは 
iPadのレイアウトと同じになったほうが 
ユーザーにとっては好ましい気がする…
つまり 
Size Classはマーケティング上の識別子である 
iPhone,iPadの区別でレイアウトを考えるのでなく 
サイズ分類でレイアウトを変えられるように 
考えられた仕組みなんじゃないの? 
それで達成したいのがAdaptive ...
まとめ 
Size Class+IBでiPad用のレイアウトを手軽にできる、が 
本質的にはiPhone/iPadを識別したいわけなくSizeのClassで分 
類してレイアウトを分けるもの 
Size ClassやAuto Layoutなどの...
参考 
Adaptive User Interfaces 
https://developer.apple.com/design/adaptivity/ 
iOS Human Interface Guidelines : Adaptivity ...
宣伝 
株式会社キュリオシティソフトウェアではiOSアプリ開発のお仕事を募集しております 
カメラアプリやチャットアプリなどユーザーの日常に近いアプリ開発を得意としています 
デザインから請け負う事もできますので 
お気軽にお問い合わせください...
Upcoming SlideShare
Loading in …5
×

小学生でも分かった気になるiOS8のSize Class

14,830 views

Published on

この資料はクックパッド社主催のiOS/Android Tips交換会potatotips #11で発表した資料です。

https://github.com/potatotips/potatotips/wiki/potatotips-11
http://connpass.com/event/9639/

Published in: Technology
  • Be the first to comment

小学生でも分かった気になるiOS8のSize Class

  1. 1. potatotips #11 小学生でも分かった気になる iOS8のSize Class 株式会社キュリオシティソフトウェア 今城 善矩(@yimajo)
  2. 2. 今日Size Classについて話すこと 前編 Size Classを用いてiPhone/iPadで同じStoryboardを使う方法 後編 Size Classの概念が難しい件について
  3. 3. 前編: Size Classを用いてiPhone/iPadで同じ Storyboardを使う方法
  4. 4. 例えばこういうデザインの時 iPhone iPad
  5. 5. 例えばこういうデザインの時 iPhone iPad iPadのみのLabel配置したい!
  6. 6. 例えばこういうデザインの時 iPhone iPad iPadのみのLabel配置したい! iPadはFont大きくしたい!
  7. 7. 例えばこういうデザインの時 iPhone iPad iPadのみのLabel配置したい! iPadはFont大きくしたい! iPadは下の方を持ちづらい、ボタンが下すぎると嫌なのでマージン大きく!
  8. 8. これがSize Classで簡単にできて 分かった気になるので 1つずつやり方を説明する
  9. 9. 前提 Portraitのみでデバイス全画面 のrootViewとして対応する iPhoneはSize Class w:C h:Rと して分類され iPadはSize Class w:R h:Rとし て分類される
  10. 10. Xcode6のInterface BuilderでSize Class によって出来る用になった事2つ 1. UIコンポーネントをSize Class別に設置 2. 一つのUIコンポーネントに対してSize Class別に設定
  11. 11. Xcode6のInterface BuilderでSize Class によって出来る用になった事2つ 1. UIコンポーネントをSize Class別に設置 2. 一つのUIコンポーネントに対してSize Class別に設定 Font(等のプロパティ)を設定 大きさや位置(Frame)を設定 Auto Layoutを設定が出来るようになった
  12. 12. UIコンポーネントをSize Class ごとに配置する UIコンポーネントのFrameで +を押し w:R h:Rのinstalledのみを チェック☑すると iPadのみで存在する UILabelになる
  13. 13. Size ClassごとにFont設定 UILabelの+をクリックし w:R h:Rの設定を追加すると iPad用のFontが 設定される
  14. 14. Size ClassごとにFrameを設定するには これは+や☑installedは無く IB Design Viewの下で Size Classを切り替え その状態で指定した FrameがSize Classごとの 設定となる iPhone iPad
  15. 15. 結果こういう感じになる iPhone iPad
  16. 16. 結果こういう感じになる iPhone iPad iPadのみUILabelをinstalled
  17. 17. 結果こういう感じになる iPhone iPad iPadのみUILabelをinstalled iPadのみFontを75pt
  18. 18. 結果こういう感じになる iPhone iPad iPadのみUILabelをinstalled iPadのみFontを75pt iPadはFrame{(x:100,y:585),(w:400,h:140)}でそれに合うAutoLayoutを指定
  19. 19. 注意点 iPhoneのUILabelと iPadのUILabelを別々に作り 共通のViewControllerのIBOutletに繋ぐと 片方が切り離されるから注意しよう (共通のUILabelにしてFrameを別にすべき)
  20. 20. 今の例は Portraitのみの画面だったため わりと説明がしやすかった
  21. 21. Size Classなんとなく分かった気になった はず 後半でさらに補足する
  22. 22. 後半: Size Classの概念が難しい件について
  23. 23. お前らがなんで Size Classを理解できない理 解出来ないと嘆くかについて
  24. 24. ネット上に公開されている Size Classの記事はSize Classの 必要性が感じられないし Adaptivityとかいう奴が意味不明
  25. 25. 原因として 1.画面の回転の話を持ちだされる(iOS8で回 転検出が変わったことに起因) 2. iPhone6+のために作られたような記載 3.Compact,Regularってのが分かりづらい
  26. 26. 1. 画面の回転に関係あるの? 回転自体はSize Classと直接は関係がなく、 縦/横画面でのUIコンポーネントの“配置”に 関係している。 回転自体はAdaptivityに関係があり、 Size ClassはAdaptivityのために必要なんだけど それはとりあえず一旦忘れよう。
  27. 27. 2. iPhone6+のためにある? iPhone6+はLandscape時に特殊だが、 iPhone6+のためだけにあるわけでは ない。
  28. 28. 3.Compact, Regularが分かりづらい CompactもRegularも何を基準としてそのよう な名前になっているのかが不明瞭 この名前について深く考えずに サイズ分類のための記号だと 思うほうが手っ取り早い
  29. 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. 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. 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. 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. 33. ただし w:R h:R なiPhoneが出たとして Appleのマーケテティング上それが iPhoneっていう名前なだけで そのようなiPhoneは iPadのレイアウトと同じになったほうが ユーザーにとっては好ましい気がする…
  34. 34. つまり Size Classはマーケティング上の識別子である iPhone,iPadの区別でレイアウトを考えるのでなく サイズ分類でレイアウトを変えられるように 考えられた仕組みなんじゃないの? それで達成したいのがAdaptive User Interface
  35. 35. まとめ Size Class+IBでiPad用のレイアウトを手軽にできる、が 本質的にはiPhone/iPadを識別したいわけなくSizeのClassで分 類してレイアウトを分けるもの Size ClassやAuto Layoutなどの手段によってレイアウトをユー ザーに最適にするのがAdaptivity 現状まだAdaptive User Interfaceはデザイナが把握していない だろうが、iPadのPortraitはw:R h:Rとしてレイアウトを実装し といても将来的に問題ない(本質には外れない)はず
  36. 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. 37. 宣伝 株式会社キュリオシティソフトウェアではiOSアプリ開発のお仕事を募集しております カメラアプリやチャットアプリなどユーザーの日常に近いアプリ開発を得意としています デザインから請け負う事もできますので お気軽にお問い合わせください http://curiosity.co.jp/

×