小学生でも分かった気になるiOS8のSize Class
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 73 views
Uploaded on

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

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post
    Be the first to comment
No Downloads

Views

Total Views
73
On Slideshare
50
From Embeds
23
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 23

https://twitter.com 22

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/