Swiftビギナーズ倶楽部@Co-Edoで発表したスライドです。 多様化してきたiOS8以降の開発に対応できるように、マルチデバイス対応についてまとめました。 Xcode6からの新機能Size Classesについてフォーカスして情報整理しています。

1. iOS8 マルチデバイス対応
Swiftビギナーズ倶楽部 第３回 Size Classes編

2. • WordPressコミュニティへ参加するのが好きで、もくもく会もやってます。
• Ruby on Rails / Ruby ビギナーズ倶楽部@Co-Edoはじめました( ́ ▽ ` )ﾉ
• スマホアプリ開発初心者な、アプリケーションエンジニア（Rails / LAMP / Java / Oracle）
Self-Intoroduction
http://ror-beginners.doorkeeper.jp/
http://wp-moku.doorkeeper.jp/

3. 1）必要な前提知識
・ Size Classes
・ PDFをベクター画像として認識
2）Xcode6からの新しい仕組み
Today's Agenda
・ Adaptive User Interface
詳細は次回

4. Adaptive(適応性) User Interface
• iPhone(4s∼6)/iPhone 6 Plus/iPad/iWatchと多様化する
• 色々な画面サイズにうまく適応させる設計手法
デバイスに対応出来るように、iOS8以降取り入れられた考え方。
• これからのiOSアプリ開発には必須の考え方。

5. え？？
レスポンシブ
デザインのこと？

6. 「アダプティブ」と「レスポンシブ」
アダプティブ・デザイン レスポンシブ・デザイン
・両方とも、特定の画面サイズ（ブレークポイント）で
レイアウトを切り替える手法。
・ブレークポイント間でも
レイアウトが変化する。
・ブレークポイントごとに
レイアウトが変化する。
・画面サイズに対する最適化のアプローチが違う。

7. ・ブレークポイント間は、
レイアウトが最適化されない。
「アダプティブ」と「レスポンシブ」
アダプティブ・デザイン レスポンシブ・デザイン
・ブレークポイントごとな
ので、読み込みが早い。
・ブレークポイント間も最適化
されるので読み込みが遅い。
メリット
デメリット
・全てのデバイスのサイズに、
レイアウトが最適化される。

8. 画面サイズ以外の「アダプティブ・デザイン」
利用するユーザーの背景や特性によって、
表示するコンテンツを切り替える。
年齢
性別 職業
時間
場所

9. Xcode6からの新しい仕組み
■ Size Classes(Class)
・「Use Auto Layout」と
「Use Size Classes」をチェックしておく。
（デフォルト設定されている。）
・あらかじめ定義されたデバイスの種類を指定して、
反映するレイアウトを切替えることができる。
・幅と高さで、Compact/Any/Regularを
組み合わせて、対応するデバイスをオブジェクトに
設定ができる。

10. なんのこっちゃ!!

11. 百聞は一見に如かず
A picture is worth a thousand words.

12. DEMO

13. Xcode6からの新しい仕組み
・w Any h Anyは、全ての画面サイズに
対応するレイアウトができる。
・でも、iPadでは表示させたいけど、
iPhoneでは表示させたくないオブジェクトが
場合はどうするの？
■ Size Classes(Class)

14. Xcode6からの新しい仕組み
・オブジェクトごとに、Size Classesの
定義を指定することができる。
■ Size Classes(Class)
例えば：
「w Regular h Compact」を選択すると
5.5-inchのデバイスからのアクセスのみの
レイアウトが実装できる。

15. Xcode6からの新しい仕組み
長くなってきたので、詳細は次回に:)
■ PDFをベクター画像として認識

16. 参考にした書籍
詳細！Swift iPhoneアプリ開発 入門ノート
Swift 1.1+Xcode 6.1+iOS 8.1対応
Swiftではじめる iPhoneアプリ開発の教科書
【iOS 8&Xcode 6対応】

17. 参考にしたWebサイト
・Developers.IO
「[iOS 8] マルチデバイス対応の新機能」
http://dev.classmethod.jp/references/ios8-trait-collection/
・DX.univ
レスポンシブからアダプティブへ ∼ 必要な情報を、必要なときに、必要としている人へ
http://dx.24-7.co.jp/adaptive-design-with-sesors/
・River
レスポンシブ・デザインとアダプティブ・デザインの定義を整理してみた
http://parashuto.com/rriver/responsive-web/definitions-of-responsive-design-and-adaptive-design
・Mobile First Marketing Lab.
レスポンシブデザインとアダプティブデザインについて考えたまとめ記事4本
http://www.aiship.jp/knowhow/archives/17294

18. わからないー！
だれか教えてー♪
Swiftビギナーズ倶楽部は
わからないことは周りの人に聞いて、気軽に教え合って、
皆の疑問を１つでも解決して、楽しんで開発していきましょう。

19. Let's study together！
Thank you :)