iOS 7 エンジニア勉強会 @Yahoo

Yahoo! 株式会社
2013/10/07
資料は後ほどシェア

iOS 7 でアプリ開発はどう変わる (佐野さん)

iOS 7 のデザイン原則
- UI はコンテンツに従順 * Safari が分かりやすい * ナビゲーションバーが殆ど消える * コンテンツを強調
  - 分かりやすくスッキリしている
    - 余白がたっぷり
    - 平面的
    - アイコンよりもテキスト
  - 奥行きがある
    - iOS 7 = フラットを鵜呑みにしてはいけない
    - UI は平面的
    - OS 全体では奥行きが大切にされている
  - iOS 6 は操作が理解できる
  - iOS 7 はコンテンツに集中できる
    - iOS 7 はユーザーが学習済みであるというデザイン原則がある
iOS 7 時代の開発
- Xcode 5
  - テスト周りが充実
  - Storyboard と Autolayout (Xcode 5 からは標準)
    - iOS 7 と iOS 6 のコンポーネントの大きさの自動調整 (Autolayout)
- 対応
  - 120px アプリアイコン (必須, 無いとリジェクトされる)
  - クラッシュ対応
  - レイアウト崩れ対応
  - 下位互換のための分岐処理
- 重要
  - 新デザインガイドラインに則って Visual / UI を再検討
  - Multitasking などの新機能による UX 改善を検討
対応
- iOS 7 (60) と iOS 6 (35) で 95% , iOS 5 (3) と iOS 4 (2) で 5%
  - 6 : Autolayout / CollectionView
  - 5 : ARC / Storyboard
  - 4 : ユーザー数で見切り
- 基本は iOS 5 を見て ARC 対応でアプリを書く

既存アプリの iOS 7 対応 / ヤフオクアプリの対応 (西さん)

ヤフオクアプリ
- iOS 7 向けに実装方法を変更する
  - OS 毎に処理を分岐する
    - バージョン判定用のユーティリティメソッドを必ず用意する
  - UIViewController の潜り込みを回避する
    - iOS 7 では画面全体が表示領域になる
    - ステータスバーの高さは関係ない
      - NavigationBar を表示すると下に潜り込む
    - 拡張表示をやめる self.edgesForExtendedLayout = UIRectEdgeNone;
      - ただし、磨りガラス効果が消える
  - 階層構造の変更に対応する
    - UITableViewCell の上のコンポーネントから UITableViewCell にアクセスする場合
      - superview のクラスが UITableViewCell かどうかを再帰的に判定する
    - UITableViewCell から UITableView へのアクセスも同じ
- iOS 7 向けに装飾を行う
  - タブ上に罫線が表示される問題
    - UITabBarController に UIButton を addSubview していた
    - すると 1px ぐらいの罫線が出るようになってしまった
    - UITabBar の appearance の setBackgroundImage と setShadwowColor を使う
  - UITableViewCell の下に罫線を引く
    - UITableViewCell の appearance の separatorInset を 0 にする
  - 戻るの < を変える
    - UINavigationBar の appearance の backIndicatorImage / backIndicatorTransitionMaskImage を変える
  - UITableViewStyleGrouped のセクションタイトルが強制大文字になる
    - ブランド的にまずい
    - UITableViewStylePlain に変更
  - アクセサリは accessoryView に入れる
    - UITableViewCell の accessoryView に設定する
- iOS 6 の 10 倍ぐらい工数見積もりが必要
- UIAppearance を使って工数を減らす工夫が必要
- iOS 7 対応後の反応
  - マツキヨっぽいアイコン
  - iOS 7 対応後 DL は2倍に (一時的では無く、継続的に)

アプリのバックグラウンド処理 (平松さん)

バックグラウンド処理
- 音楽聴きながら Facebook アプリ使う
- バックグラウンド状態でもアプリが活躍する
- iOS 6 でもある程度はできていた
- iOS 7
  - Background Fetch
    - 従来はアプリを起動して読み込んで、コンテンツが表示される
    - 読み込みがユーザーの体験を妨げている
    - 起動したら即コンテンツが表示されるべき
    - Background Fetch はこれを実現する
      - 数日間のアプリの利用状況を iOS 7 が勝手にサンプリングして、その結果を使って iOS 7 が勝手にフェッチする
      - 自分で間隔を調整することは出来ない
      - Background Modes で "Background fetch" にチェックする
        
        Project の Capabilities から
      - AppDelegate の起動直後で設定を行う
      - http://dev.classmethod.jp/references/ios-background-fetch/
      - シミュレータでフェッチをエミュレートできる
    - 日常的に頻繁に使うアプリ向け
  - Silent Push Notification
    - Remote Notification の拡張版
    - iOS 6 : プッシュから起動して、コンテンツを受け取って、見せる
    - iOS 7 : コンテンツを準備出来た状態でプッシュを出して、表示させられる
    - http://dev.classmethod.jp/references/ios7-apns-background/
    - 不定期にコンテンツを受け取るアプリ向け (LINE / カカオトーク)
  - Background Transfer
    - バックグラウンドで大容量ファイルの DL / UL が可能
    - Task Completion のような時間制限無し
    - NSURLSession 系 API を使う
    - ファイルストレージサービスなどでは使える
      - Wifi の下でのみ使える機能
      - Background fetch / Silent Push などと組み合わせると強力
  - これらは電池を食う
  - ユーザーは自分で設定を切ることができる
  - 設定状態が取得できる API はまだ公開されていない

Xcode 5 でのデバッグ / CI (田村さん / メディアサービスカンパニー)

新機能
- Apple ID 連携
  - Automatic Configuration
    - Preferences → Accounts から設定できる
    - Provisioning Profile の取り込みもここから行うようになった
- Capabilities
  - Apple 提供サービスを ON/OFF でコントロール
  - 必要な Framework も管理
- Asset Catalog
  - 様々なサイズの画像を一元管理可能
  - 既存の画像からもごそっとカタログを作ることが可能
- Source Control
  - Git の操作が一通り可能
    - Push To Remote 機能もあるよ
  - SVN にも対応している
  - Blame
    - Editor → Show Blame for Line で誰がどこの行を、いつ、どうコミットしたのかを見られる
- デバッグゲージ
  - デバッグ開始でメモリ情報が色々と見られる
- データ Tips
  - 変数をマウスオーバーして吹き出しの中の目のアイコンをクリックしてオブジェクトの中身を見られる
  - NSData であれば16進データ / UIImage であれば画像 / UIColor であれば色
  - NSURL オブジェクトを見ると面白い
  - OS X Mavericks では CLLocation を覗くと地図が見られる
- ブレークポイント
  - デバッグツールバーで BreakPoint のオンオフが簡単にできる
- View の階層構造
  - lldb デバッガで po [view recursiveDescription] 発行
- Storyboard で Assistant Editor → Preview で iOS 6 / 7 の見た目切り替えをプレビューできる
- JavaDoc のようなコメントを書くと QuickHelp でコメントがポップアップされる
- https://developer.apple.com/wwdc/videos の 400, 407 のビデオが分かりやすい
UnitTest / CI (Bots)
- Test Navigator
  - Xcode 4 までのテストはコンソール表示で分かりづらかった
  - ファイルとテストの関係や、テストメソッドを1つだけのリトライも可能
  - TestFailureBreakpoint というものがあり、テストで失敗したときだけ止まる
- XCTest.framework
  - Xcode 4 までは SenTestingKit.framework
  - Xcode 5 ではこれに加えて XCTest が追加されている (Sen テストを XCTest にコンバート可能)
  - これらは殆ど挙動が同じ
    - AssertNotHoge メソッドが追加されている感じ
- CI (Continuous Integration)
  - Xcode 専用の Jenkins みたいなもの
  - OS X Mavericks Server が動作する Mac に USB で端末つないでおくと自動で UnitTest 可能
    1. 開発
    2. Git リポジトリにコミット
    3. Bots がプルしてビルドしてテスト
    4. 結果を開発環境に送信
  - 複数の実機に対して UnitTest 可能
  - Warning / Error をその場で直してまた CI 可能
  - 使うのが超簡単
  - 409 番ビデオ / Xcode Continuous Integration Guide / あとはググるとよい

魅せる UI の作り方 (佐藤さん / カカオジャパン)

iOS 7 らしい UI
- フラットデザイン？それだけ？
  - 物理法則に基づいたリアルなアニメーション
  - 視差を利用した奥行き表現
  - など
- UIKit Dynamics
  - UIKit のための2次元物理エンジン
  - あくまでも簡易的でアニメーションを置き換えるものではない
  - ゲームのためのものでもない (ゲームは SpriteKit で)
  - <ここで UIKit Dynamics のデモ多数。凄い。うねうね動いてる。>
  - 弾性 / 摩擦 / 質量 / 抵抗 / 回転に対する抵抗など色々と変えられる
    - UIKit Dynamics Catalog というものが Apple から出ている
- Motion Effects
  - 端末の傾きに応じて視差効果を与える
    - iOS 7 ホームのパララックス効果みたいなの
    - UIAlertView でもそうなってるよ
  - API が提供されていて簡単に実現できる
  - UIInterpolationMotionEffects のインスタンスを X 軸 / Y 軸に作る
  - UIMotionEffectGroup のインスタンスの motionEffects プロパティに配列で追加
  - View の motionGroup プロパティに UIMotionEffectGroup のインスタンスを追加
- Blur Effect
  - API が公開されていない
  - WWDC のサンプルコードに UIImage のカテゴリが配布されている UIImage+ImageEffects
    - 静止画用なので動的コンテンツへの利用は難しい
  - <UIKitDynamics を使って物理アニメーション付きの磨りガラスビューが写真の上に落ちてくるデモ>
  - UIKit の標準コントロールを使うと簡単
  - 自前実装はパフォーマンスに注意

iOS 7 UI の考え方 (藤原さん)

iOS 7 のデザイン理念
- iOS 7 Design Resources (Apple 公式)
1. 控えめ
  - 天気アプリ
    - フルレイアウトを有効活用
  - 地図アプリ
    - ドロップシャドウやグラデーションが本来の地図より目立っちゃ駄目だから再考する
  - コントロールセンター
    - 裏に何があるか見せることで、そこが終わりでは無いことを示す
2. 明瞭
  - カレンダーアプリ
    - ホワイトスペースを活用
  - メモアプリ
    - 簡潔な色使いにする
  - メールアプリ
    - システムフォントを使って読みやすさを確保する
    - 境界無しのボタンを活用する (状況によっては背景を置いたりせよ)
3. 奥行き
  - カレンダーアプリ
    - 年月日
    - 年表示から月を選択するとその月のカレンダーが拡大されたようなエフェクトがかかる
    - 月表示から日を選択するとその週の日付が上に表示され、下に日のスケジュールが出る
    - つまり、アニメーションに構造がある = レイヤーデザイン
- iOS 7 は Android や Windows Phone と違い、1枚1枚はフラットだが、レイヤーがある
  - ミニマリズム & レイヤーデザイン
- UI 設計時のポイント
  1. コンテンツファースト
    - まず全画面にコンテンツを置く
  2. コントローラを操作するためのビューを透過で置く
  3. その上にコントローラを置く
    - コントローラは非スキューモーフィズ
- トランジション
  - 動きによってユーザ学習
何故フラットが流行っているのか
- メタファの限界
- メタファ = 何かに例えた表現
- あんまり使われなくなった現実世界の道具を模しても意味があまりない
- みんなスマホとかに慣れた (若者) から、本当にやりたかった必要な要素だけのデザインで良い
  - 高齢者には辛い
Yahoo の天気アプリ, 知恵袋アプリ
- フラット化
- ホワイトスペースをキッチリ調整
- 基本は iOS 6 の形を踏襲
iOS 7 のデザインの進化の方向は正しい方向
- いきなり全部この世界観に持って行くと、ユーザーは学習が大変
- 学習状況に合わせて徐々に移行していくと良いだろう

ryugoo/iOS7Yahoo.md

iOS 7 でアプリ開発はどう変わる (佐野さん)

既存アプリの iOS 7 対応 / ヤフオクアプリの対応 (西さん)

アプリのバックグラウンド処理 (平松さん)

Xcode 5 でのデバッグ / CI (田村さん / メディアサービスカンパニー)

魅せる UI の作り方 (佐藤さん / カカオジャパン)

iOS 7 UI の考え方 (藤原さん)