既存アプリのios 7対応 | ios 7エンジニア勉強会

64
既存アプリのiOS7対応 西 磨翁 2013107

Upload: yahoo

Post on 15-Jan-2015

38.559 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

既存アプリのiOS7対応

西 磨翁2013年10月7日

Page 2: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

本日の事例となるアプリ

Page 3: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会
Page 4: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7対応にも特集されました

Page 5: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

ヤフオク!アプリ

Page 6: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

IOS6

Page 7: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

IOS7対応 途中

Page 8: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

IOS7対応 最終形

Page 9: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

作業は大きく分けて2つ

•iOS7向けに実装方法を変更する

•iOS7向けに装飾を行う

アイコンの準備・変更については今回は割愛します

Page 10: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

ヤフオク!アプリについて

•iPhoneが日本に登場してまもなくリリースした歴史あるアプリ

•iOS4.3以降をサポート中

Page 11: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7向けに実装方法を変更する

Page 12: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

1.OS毎に処理を分岐する

Page 13: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

このようなメソッドを用意しておいてOS毎の分岐処理に備えましょう

+ (BOOL)isOverThisVersion:(NSString *)version{! NSString!*currentVersion =![[UIDevice currentDevice]systemVersion];! return! (! [currentVersion! ! ! ! ! compare:! ! ! ! ! ! version! ! ! ! ! options:! ! ! ! ! ! NSNumericSearch! ! ! ! ]! !=!NSOrderedAscending! ! ! );}

Page 14: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

2.UIViewControllerでの潜り込みに対処する

Page 15: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

画面の上部が表示されない!?

Page 16: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7では画面全体が表示領域となる

Page 17: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

NavigationBarに潜りこんでしまう

Page 18: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

NavigationBarに潜りこんでしまう

Page 19: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

対処方法表示領域の拡張をやめさせる

Page 20: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

self.edgesForExtendedLayout = UIRectEdgeNone;

※IOS7の時のみ実行するようにしましょうまた、すりガラスの表現が失われます

Page 21: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UIViewControllerにTableViewをaddSubviewした場合にも

発生します

Page 22: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

画面の上部が潜り込む・・

Page 23: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

同じようにself.edgesForExtendedLayout =

UIRectEdgeNone;※IOS7の時のみ実行するようにしましょうまた、すりガラスの表現が失われます

Page 24: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

3.階層構造の変更に対応するその1

Page 25: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UITableViewCell

UITableViewCellContent

UIButtonなどのコンポーネント

UITableViewCell

UITableViewCellContent

UIButtonなどのコンポーネント

UITableViewCellScrollView

iOS6 iOS7

コンポーネントからsuperview.superviewでUITableViewCellにアクセスできなくなりました。

superview

superview

superview

superview

superview

Page 26: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

対処方法

Page 27: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

+ (UITableViewCell*)searchTableViewCell:(UIView*)view{ id target = [view superview]; if (!target) { return nil; } if ([target isKindOfClass:[UITableViewCell class]]) { return target; } return [self searchTableViewCell:target];}

UITableViewCellを探索して取得するようにする

Page 28: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

superviewでUITableViewCellにアクセスしようとすること自体、Appleが推奨する方法ではありません。新規にアプリを作る場合は他の方法をご検討ください。

今後動かなくなる可能性があります。

ヤフオク!アプリは開発の歴史が長く、修正の影響範囲が大きかったため今回はこのような対応となりました。

ご注意!

Page 29: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

4.階層構造の変更に対応するその2

Page 30: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UITableViewCellからsuperviewでUITableViewにアクセスできなくなりました

UITableView

UITableViewCell

UITableView

UITableViewCell

UITableViewWrapperView

iOS6 iOS7

superview

superview

superview

Page 31: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UITableView *tableView = nil; if (iOS7なら~) { //iOS7ではcell.superviewではUITableViewWrapperViewが返却される。 //このためUITableViewを取得するためにはcell.superview.superviewと //処理する必要がある tableView = (UITableView*)cell.superview.superview; }else{ tableView = (UITableView*)cell.superview; }

UITableViewCellの例と同じように探索してもよいし、単純な分岐でも大丈夫

Page 32: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

superviewでUITableViewにアクセスしようとすること自体、Appleが推奨する方法ではありません。新規にアプリを作る場合は他の方法をご検討ください。

今後動かなくなる可能性があります。

ヤフオク!アプリは開発の歴史が長く、修正の影響範囲が大きかったため今回はこのような対応となりました。

くどいようですが・・・ご注意!

Page 33: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

ヤフオク!アプリでは以上までの対応を行ってようやく動作するようになりました。

Page 34: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

とりあえず動くレベル

Page 35: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

もっとカッコよくしたい!

Page 36: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会
Page 37: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7向けに装飾を行う

Page 38: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

5.タブ上に罫線が表示される問題を解決する

Page 39: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UITabBarControllerにUIButtonをaddSubviewしていると発生する

Page 40: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

対処方法

Page 41: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

//ダミーのタブバー背景 [[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]]; //罫線除去 [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];

Page 42: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

6.iOS6と同様の罫線表示にする

Page 43: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7標準 罫線を引く

Page 44: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

//セルの罫線のインデントをなくす [UITableViewCell appearance].separatorInset = UIEdgeInsetsZero;

Page 45: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

7.「<」アイコンを変更する

Page 46: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7標準 独自アイコン

Page 47: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

//ナビゲーションバーの戻るのアイコンを変更[UINavigationBar appearance].backIndicatorImage = [UIImage imageNamed:@"header_allow_ios7.png"];[UINavigationBar appearance].backIndicatorTransitionMaskImage = [UIImage imageNamed:@"header_allow_ios7.png"];

iOS7より新たに追加されたメソッド

Page 48: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

8.UITableViewStyleGroupedの強制大文字に対応する

Page 49: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS6 iOS7

Page 50: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UITableViewStylePlainに変更するまたは

tableView:viewForHeaderInSection:を実装する

他にも方法はありそうですが上記どちらかでOK

Page 51: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

UITableViewStylePlainにしました

iOS7でも小文字が使える

Page 52: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

9.accessoryはaccessoryViewに配置する

Page 53: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

iOS7だと右づめになっていない

Page 54: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

[cell.contentView addSubview:sw];↓

cell.accesoryView = sw;

Page 55: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

その他のUIの色はtintColorをUIAppearanceで一括指定することで対応しました

Page 56: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

まとめ• iOS6がリリースされた時と比べ対応工数が格段に多い。UI変更も含めると余裕を持った工数見積が必要。ヤフオク!アプリの場合、iOS6の対応を行った時よりも10倍程度の工数がかかった。

• UIAppearanceを活用して装飾に関する修正量を減らすようにする

Page 57: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

APPENDIX

Page 58: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

リリース後の反応について

Page 59: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会
Page 60: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会
Page 61: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会
Page 62: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会
Page 63: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

色々なご意見を頂いていますが、IOS7対応後、

DL数はかなり増えました。一時的ではなく現在も継続してい

ます

Page 64: 既存アプリのiOS 7対応 | iOS 7エンジニア勉強会

IOS7対応の参考になれば幸いですご清聴ありがとうございました