ようやくNDAも解禁されたので、さっそくiOS 7の対応事例を公開させていただきます!
資料はslideshareにて公開しています。このブログでは、スライドの流れを簡単に紹介したいと思います。
1. まずはFastCheckinの紹介
「FastCheckin」は素早く簡単にfoursquareにチェックインするためのアプリです。
FastCheckin
カテゴリ: ソーシャルネットワーキング
価格: ¥85
今回はこのアプリの対応事例について説明します。
2. アプリアイコンの修正
まずはアプリアイコンの修正から始めました。
ご存知の通り、iOS 7ではアイコンの角半径も変更されており、これまでの角半径に合わせて作られたアイコンは修正する必要がありました。
Apple、開発者に対し「iOS 7」対応のアイコンの提出を要求
▲角丸を修正しないと、上の図のように残念な結果になってしまう。
いつもアイコンの作成をお願いしているデザイナーさんに角丸修正をお願いしたところ、数時間で対応してくださいました!
3. 表示崩れの修正
最新のXcode 5でビルドしてみたところ、画面全体がナビゲーションバーの裏側に潜り込んでしまいました。
iOS 7ではステータスバーを含む画面全体が表示領域となります。(上の図ではわかりやすくするために、UITableViewの背景を赤にしています)このため、セルの描画領域がステータスバーの裏側から始まると思われそうですが、通常はview内のcontentInsetが自動調整され、ナビゲーションバーと重ならないようになっています。
ただし、FastCheckinのように独自にPullToRefreshを実装している場合は、せっかく自動調整されたcontentInsetを上書きしてしまいます。このため、画面全体がナビゲーションバーの裏側に潜り込んでしまいました。
この対処法として、iOS 7から追加されたedgesForExtendedLayoutプロパティにUIRectEdgeNoneを設定して、画面全体を表示領域とするのをやめました。
このedgesForExtendedLayoutプロパティには、上下左右どの位置のEdge(縁、端)を表示領域とするか設定できるようです。例えば、UIRectEdgeTopを設定すると画面上部(ナビゲーションバーの後ろ)も表示領域として扱います。edgesForExtendedLayoutプロパティにはデフォルトでUIRectEdgeAll(すべての位置)が設定されています。
ただし、UIRectEdgeNoneを設定することでiOS 7の綺麗な半透過効果が得られなくなり、ナビゲーションバーも少し灰色が強い色味になります。今回は暫定対応としてUIRectEdgeNoneを設定することを選択しましたが、最終的にはPullToRefreshの実装をiOS標準のUIRefreshControlに置き換える等して、全画面表示に対応したいと考えております。
4. かかった工数
FastCheckinではiOS標準のパーツを中心に使っていたので、対応期間は1日で済みました。
逆に、ナビゲーションバーやタブバー等を自前で実装しているアプリは、iOS 7対応が大変かもしれません。
5. 失敗事例(おまけ)
無事 iOS 7対応が完了し、アプリ申請まで完了できたFastCheckinですが、リリース後に思わぬ自体が…
アップデートされたけど、なんかアイコンがおかしいんだが…(;^ω^) pic.twitter.com/8tFUVQ0A8z
— Og🌗エンジニア🏝宮崎 (@koogawa) 2013年9月11日
iOS 6でアプリアイコンを見た際に、とても残念な表示崩れが発生してしまいました。
原因はすぐに分かりました。どうやら、Xcode 5から使えるようになったAsset Catalogを使うと、アイコンごとにPrerendered(光沢感の有無)が設定できるようです。
FastCheckinではなぜかiOS 6での表示アイコンのみ光沢感を出す設定になっていました(^^;
いやぁ、各iOSバージョンでの表示確認は大事ですね!
まとめ
というわけで、iOS 7に対応したFastCheckinは、9/18のiOS 7一般公開と同時にApp Storeにリリースすることができました。
ただいま、iOS 7リリースを記念して無料セールを実施中なので、foursquareをご利用の方はこれを機にぜひFastCheckinをダウンロードしてみてください!m(_ _)m
FastCheckin
カテゴリ: ソーシャルネットワーキング
価格: ¥85