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

株式会社キュリオシティソフトウェア 今城 善矩(@yimajo)

potatotips #11

今日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（等のプロパティ）を設定

大きさや位置（Frame）を設定

Auto Layoutを設定が出来るようになった

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

結果こういう感じになる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)}でそれに合うAutoLayoutを指定

注意点

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 iPhone5/5s

iPhone6Compact Regular Compact Compact

iPhone6+ Compact Regular Regular Compact

iPad Regular Regular Regular Regular

正しいがこの表の見せ方は分かりづらい…

一旦、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に区別できる

シンプルに書くとこうなる

Portrait Width

Portrait Height

iPhone4s iPhone5/5s iPhone6/6+

Compact Regular

iPad Regular Regular

iPhone -> w:C h:R iPad -> w:R h:R

注意点現状発売されている

iPhoneはw:C h:RでiPadはw:R h:Rだが、

将来的にw:R h:RなiPhoneが出ない という確証はない！

（XcodeからシミュレータをResizable iPhoneを 選択するとw:R h:RなiPhoneも実行できる）

ただし w:R h:R なiPhoneが出たとして

Appleのマーケテティング上それが iPhoneっていう名前なだけで

そのようなiPhoneは iPadのレイアウトと同じになったほうが ユーザーにとっては好ましい気がする…

つまり Size Classはマーケティング上の識別子である

iPhone,iPadの区別でレイアウトを考えるのでなく

サイズ分類でレイアウトを変えられるように 考えられた仕組みなんじゃないの？

それで達成したいのがAdaptive User Interface

まとめSize Class+IBでiPad用のレイアウトを手軽にできる、が

本質的にはiPhone/iPadを識別したいわけなくSizeのClassで分類してレイアウトを分けるもの

Size ClassやAuto Layoutなどの手段によってレイアウトをユーザーに最適にするのがAdaptivity

現状まだAdaptive User Interfaceはデザイナが把握していないだろうが、iPadのPortraitはw:R h:Rとしてレイアウトを実装しといても将来的に問題ない（本質には外れない）はず

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/

宣伝

株式会社キュリオシティソフトウェアではiOSアプリ開発のお仕事を募集しておりますカメラアプリやチャットアプリなどユーザーの日常に近いアプリ開発を得意としています

デザインから請け負う事もできますのでお気軽にお問い合わせください

http://curiosity.co.jp/