小学生でも分かった気になるiOS8のSize Class
45 likes15,898 views
この資料はクックパッド社主催のiOS/Android Tips交換会potatotips #11で発表した資料です。 https://github.com/potatotips/potatotips/wiki/potatotips-11 http://connpass.com/event/9639/
More Related Content
More from 今城 善矩 (13)
小学生でも分かった気になるiOS8のSize Class
- 1. potatotips #11 小学生でも分かった気になる iOS8のSize Class 株式会社キュリオシティソフトウェア 今城 善矩(@yimajo)
- 2. 今日Size Classについて話すこと 前編 Size Classを用いてiPhone/iPadで同じStoryboardを使う方法 後編 Size Classの概念が難しい件について
- 3. 前編: Size Classを用いてiPhone/iPadで同じ Storyboardを使う方法
- 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
- 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を別にすべき）
- 21. 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/