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

• WordPressコミュニティへ参加するのが好きで、もくもく会もやってます。

• Ruby on Rails / Ruby ビギナーズ倶楽部@Co-Edoはじめました( ́ ▽ ` )ﾉ

• スマホアプリ開発初心者な、アプリケーションエンジニア（Rails / LAMP / Java / Oracle）

Self-Intoroduction

http://ror-beginners.doorkeeper.jp/

http://wp-moku.doorkeeper.jp/

1）必要な前提知識

・ Size Classes・ PDFをベクター画像として認識

2）Xcode6からの新しい仕組み

Today's Agenda

・ Adaptive User Interface

詳細は次回

Adaptive(適応性) User Interface

• iPhone(4s～6)/iPhone 6 Plus/iPad/iWatchと多様化する

• 色々な画面サイズにうまく適応させる設計手法

デバイスに対応出来るように、iOS8以降取り入れられた考え方。

• これからのiOSアプリ開発には必須の考え方。

iPadPortrait

Horizontal = RegularVertical = Regular

LandscapeHorizontal = RegularVertical = Regular

iPhonePortrait

Horizontal = Compact

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

「アダプティブ」と「レスポンシブ」

アダプティブ・デザイン レスポンシブ・デザイン

・両方とも、特定の画面サイズ（ブレークポイント）で レイアウトを切り替える手法。

・ブレークポイント間でも ﹅ ﹅ ﹅

レイアウトが変化する。・ブレークポイントごとに

﹅ ﹅ ﹅

　レイアウトが変化する。

・画面サイズに対する最適化のアプローチが違う。

・ブレークポイント間は、 ﹅ ﹅

　レイアウトが最適化されない。

「アダプティブ」と「レスポンシブ」

アダプティブ・デザイン レスポンシブ・デザイン

・ブレークポイントごとな ﹅ ﹅ ﹅

　ので、読み込みが早い。

・ブレークポイント間も最適化 ﹅ ﹅

　されるので読み込みが遅い。

メリット

デメリット

・全てのデバイスのサイズに、 ﹅ ﹅ ﹅

　レイアウトが最適化される。

画面サイズ以外の「アダプティブ・デザイン」

利用するユーザーの背景や特性によって、 表示するコンテンツを切り替える。

年齢性別 職業

時間

場所

Xcode6からの新しい仕組み

■ Size Classes(Class)・「Use Auto Layout」と 　「Use Size Classes」をチェックしておく。 　（デフォルト設定されている。）

・あらかじめ定義されたデバイスの種類を指定して、 　反映するレイアウトを切替えることができる。

・幅と高さで、Compact/Any/Regularを 　組み合わせて、対応するデバイスをオブジェクトに 　設定ができる。

なんのこっちゃ!!

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

DEMO

Xcode6からの新しい仕組み

・w Any h Anyは、全ての画面サイズに 　対応するレイアウトができる。

・でも、iPadでは表示させたいけど、 iPhoneでは表示させたくないオブジェクトが 　場合はどうするの？

■ Size Classes(Class)

Xcode6からの新しい仕組み

・オブジェクトごとに、Size Classesの 　定義を指定することができる。

■ Size Classes(Class)

例えば： 「w Regular h Compact」を選択すると 5.5-inchのデバイスからのアクセスのみの レイアウトが実装できる。

Xcode6からの新しい仕組み

長くなってきたので、詳細は次回に:)

■ PDFをベクター画像として認識

参考にした書籍

詳細！Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応

Swiftではじめる iPhoneアプリ開発の教科書 【iOS 8&Xcode 6対応】

参考にした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

わからないー！ だれか教えてー♪

Swiftビギナーズ倶楽部は

わからないことは周りの人に聞いて、気軽に教え合って、 皆の疑問を１つでも解決して、楽しんで開発していきましょう。

Let's study together！

Thank you :)