既存アプリをiOS7に対応させる際に気をつけること

shimocchi

2013.11.15

フロントエンジニア

既にリリース済みであるiOS5、またはiOS6向けに作られたアプリを、iOS7に対応させる際に気を付けたことを、まとめてみました。

今回は実際に作業した中で、特に気になった点を中心にまとめています。ここで触れていない点もたくさんありますので、詳細はApple公式サイトで確認してみて下さい。

iOS7 Design Resources

iOS7 二通りの対応方法
- Xcode4+iOS-SDK6の組み合わせによる対応
- Xcode5+iOS-SDK7の組み合わせによる対応
Xcodeまわりで気をつけること
- プロビジョニング・プロファイルの紐付け方が違う

iOS7 二通りの対応方法

実際に作業してみて分かったのですが、一口にiOS7対応と言っても二通りの方法がありました。（厳密に言うと片方は対応したとは言えませんが。）

Xcode4+iOS-SDK6の組み合わせによる対応

一つは、Xcode4+iOS-SDK6の組み合わせで、iOS7上での表示崩れやバグ発生箇所を修正する方法です。
この方法の目的は、あくまで既存アプリがiOS7上で正常に動くようにすることだけです。iOS7のUIに最適化しません。ほぼiOS6でのUIがそのまま表示されます。

Xcode5+iOS-SDK7の組み合わせによる対応

もう一つは、Xcode5+iOS-SDK7の組み合わせで、iOS7に対応したレイアウトや実装に最適化する方法です。
この方法の目的は、iOS7標準の実装に最適化することです。Xcodeのメジャーバージョンが上がっていることからも分かりますが、新たに作業が必要となる項目がかなりあります。特に、Xcode4でのAutoLayoutとXcode5でのAutoLayoutとで互換性が低く、ほぼ全てのAutoLayout設定箇所で再設定が必要になるのは、とても面倒です。

Xcodeまわりで気をつけること

Xcode4からXcode5にバージョンアップされたことで、便利なこともたくさんありますが、移行する場合や併用させる場合（注1）には、気をつけなければいけないこともいくつかありました。

実際に気をつけたのは、以下のようなことです。

プロビジョニング・プロファイルの紐付け方が違う

Xcode4までは、プロビジョニング・プロファイルの管理はオーガナイザー上で行っていました。しかし、Xcode5からはPreference内にある「アカウント管理」内で行うよう変更されました。場所が変わっただけなら良かったのですが、アプリへの紐付け方も変わってしまいました。

Xcode4までは、Developerサイト側で適切なプロビジョニング・プロファイルを作成し、開発PC側のオーガナイザーで同期するだけでした。Xcode5では「アカウント管理」内で同期するというところまでは、同じようなフローなのですが、プロジェクトの「Build Settings -> Code Signing」内に「Provisioning Profile」欄が追加されているので、ここに紐付けるプロビジョニング・プロファイルを設定しなければいけません。とりわけAd-HocとDistributionの切り替えは、ここで行う必要があるので注意が必要です。

Xcode5+iOS-SDK6は出来ない

UIViewまわりで気をつけること
- UITableViewCellReorderControlのある階層が違う
Apple公式の移行ガイド
- - 必須項目
  - 推奨項目
まとめ

Xcode5+iOS-SDK6は出来ない

Xcode5でビルドに使用出来るSDKは7以降となるようです。SDK6以前はインストール出来ません。SDK6またはSDK5でビルドする必要がある場合は、Xcode4が必要です。（注1）

注1
AppStoreからXcodeをインストールした場合は、一度Xcode4から5にバージョンアップしてしまうと、古いバージョンに戻せません。また現時点では、AppStoreにはXcode4がありません。Xcode4をインストールするには、iOS Dev Centerからダウンロードします。
iOS Dev CenterのXcode5のダウンロードボタンの近くに、「Looking for an older version of Xcode?」というリンクがあるので、Xcode4を探してダウンロードします。カテゴリを「Developer Tools」に絞ると見つけやすくなります。

UIViewまわりで気をつけること

iOS7では、ビューに階層構造を持たせることを、強く意識しています。そのため、一部のUIコンポーネントの構造が変わっているようです。
UIコンポーネントをカスタマイズする方法の一つとして、ビューの子階層を辿っていくことがあるかと思いますが、そういった実装をしている箇所がiOS7で動かないといったケースがありました。

特に顕著だったのは、以下の点です。

UITableViewCellReorderControlのある階層が違う

UITableViewCellを並び替える時に、下図のようなボタンが表示されます。このUIの名称が「UITableViewCellReorderControl」というのですが、propertyが用意されていないため、アイコン画像や表示位置をカスタマイズする時にUITableViewCellの子階層を辿っていきます。

具体例として、iOS6で以下のようなコードがあったとします。

[sourcecode lang="objc" highlight="4"]
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    for (UIView *view in cell.subviews) {
        if ([[[view class] description] isEqualToString:@"UITableViewCellReorderControl"]) {
            // デフォルトの画像を非表示に
            for (UIImageView *knobView in view.subviews) {
                if ([knobView isKindOfClass:[UIImageView class]]) {
                    [knobView setImage:nil];
                    break;
                }
            }
        }
    }
}
[/sourcecode]

[sourcecode lang="objc" highlight="4"]

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

{

for (UIView *view in cell.subviews) {

if ([[[view class] description] isEqualToString:@"UITableViewCellReorderControl"]) {

// デフォルトの画像を非表示に

for (UIImageView *knobView in view.subviews) {

if ([knobView isKindOfClass:[UIImageView class]]) {

[knobView setImage:nil];

break;

}

[/sourcecode]

同じ処理をiOS7で実現するためには、以下のように修正しないと期待する動きになりません。

[sourcecode lang="objc" highlight="6"]
-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    for (UIView *view in cell.subviews) {
        if ([[[view class] description] isEqualToString:@"UITableViewCellScrollView"] {
            for (UIView *viewTwo in view.subviews) {
                if ([[[view class] description] isEqualToString:@"UITableViewCellReorderControl"]) {
                    // デフォルトの画像を非表示に
                    for (UIImageView *knobView in view.subviews) {
                        if ([knobView isKindOfClass:[UIImageView class]]) {
                            [knobView setImage:nil];
                            break;
                        }
                    }
                }
            }
        }
    }
}
[/sourcecode]

[sourcecode lang="objc" highlight="6"]

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath

{

for (UIView *view in cell.subviews) {

if ([[[view class] description] isEqualToString:@"UITableViewCellScrollView"] {

for (UIView *viewTwo in view.subviews) {

if ([[[view class] description] isEqualToString:@"UITableViewCellReorderControl"]) {

// デフォルトの画像を非表示に

for (UIImageView *knobView in view.subviews) {

if ([knobView isKindOfClass:[UIImageView class]]) {

[knobView setImage:nil];

break;

}

[/sourcecode]

Apple公式の移行ガイド

最後にAppleがiOS7に最適化するための、移行ガイドを公開しているのでまとめてみました。
移行ガイドには、必須項目と推奨項目とに分けられています。

iOS7 UI Transition Guide

必須項目

アプリアイコンの更新（iPhone:120x120px / iPad:152x152px）
起動画像はステータスバー領域まで含むようにする
RetinaDisplayとiPhone5のサポート

推奨項目

バーやキーボードといった半透明のUIが認識できることを確認する
カスタムバーボタンのアイコンの再デザイン
ボタンの背景画像やベゼル（枠）を見直してボーダーレスボタンの準備をする
UIのサイズや位置をハードコードしてる場合はシステムが提供する値から動的に得る値に置き換える（基本的にはAutoLayoutを使う）
iOS7ではアプリのテキストサイズをユーザーが調節出来るダイナミック型のフォントが使える
画面の下からのスワイプアップでコントロールセンターが出現した場合はジェスチャーをアプリに配信しない
ドロップシャドウ、グラデーション、ベゼルを使用することによる影響を再考する（iOS7の美学は滑らかさと階層構造だから）
必要であればiOS6のAutoLayoutやStoryboardの設定を更新したり非推奨APIを使用していないか確認したりする

まとめ

全てのアプリに当てはまるとは限りませんが、既存アプリをiOS7に最適化するためには、画面デザインから見直さなければならないケースもありそうです。そのため場合によっては、かなりの作業工数が発生することも考えられます。また開発環境にも大きな変更点があるので、その対応も並行して進めていかなければいけません。

iOS7への最適化を一気に進めようとすると大変なので、上で挙げたポイントなどに注意しつつ、段階的に対応していく方がいいのではないかと思いました。

アイキャッチ画像：Decouvrez iOS 7 GUI PSD