« フレッシュリーダー終了のお知らせ | メイン | Facebook と Mixi のに対応したので気付いたことメモ »

2010年08月20日

3時間でiPhoneアプリをiPad対応にした あとで読む

ま、実際には5時間かかったんですけどね。最初だったから。ちなみに審査は実質5日くらい。

IMG_0010%201.PNG

これはツイキャス・ビュワーの iPad アプリ。というかユニバーサル・バイナリなのでiPhoneと共通です。

夕方5時からiPad化初めて、10時には完成、2時間で試験パターンまわして深夜0時に申請、という流れです。

自分メモですけど、何かの参考に。
(ちなみに内容的には最低限のiPad対応、かと思いますー)


【準備】

実はこれがすごく大事。iPhone アプリを作るときに以下のことに注意して作ります。

- 画面は左右ぐるぐる回転できるようにしておく
- ぐるぐる回転したときに、frame = CGRect なんて使わなくていいように Interface Builder のアラインパラメータを綺麗に設計する
- なので、画面構成要素は極力コードで動的にじゃなくてXIBで作成する。NavigationControllerくらいは動的作成でも影響ないけど。
- 基本、ステータスバーは表示した方がいい。(iOS4になってからゲーム以外でステータスバー隠すのはNGだと思ってるんだけど)
- 設定メニューなど、一貫したグループのXIBファイルは分けておく(超重要)。


で、iPad化します。手順は簡単で、

1. Targets から Project を選択して 「Upgrade Current Target for iPad」を選択
2. Universal アプリを選択して OK

すると、Resources-iPad ってのができるので、中身を確認します。
Main XIB ができてるはず。ただし画面サイズはiPhone サイズ。

で、上記の iPhone 注意点を守ってつくっていれば、これで iPad アプリ、ほぼ完成しているはずです。

なにしろ iPhone 用の XIB がそのまま iPad でも使えるので。
しかもちゃんと設計していれば画面サイズが変更されてても大丈夫。IB万歳!

ただ、やはり個別にちゃんと設計したいよね、ということもあるかと思います、ていうかそうすべきなので IB の File メニューから

- Create iPad Version

を選択します。すると新しい XIB が一つもらえて情報全部コピーされているはずです。
こいつを適当な名前つけて保存して、Info.plist の Main nib file base name (iPad) に新しい XIB のファイル名を指定すればOKです。


あとは Project > Edit Project で Targeted Device Family を iPhone/iPad に変更してください。

コレで完成です。

いや、もっとなんかあるっしょ・・・ということで、詳しくは iPad Human Interface Guideline (日本語) を読んでいただくとして、一番大きいのは

- ナビゲーションで全画面移動じゃなくて PopOver に変更したい!

というものかと思います。上の画面の右側に PopOver してるやつね。

これはドキュメント読んでもらってもいいんですが、めちゃ簡単に使えます。
今まで NavigationController に push してたところを

UINavigationController* nav = [[UINavigationController alloc] initWithRootViewController: 表示したいController];
[nav setToolbarHidden: NO];
[nav setNavigationBarHidden: NO];
// これに初期コントローラーを登録してPopup表示
self.mPopoverController = [[UIPopoverController alloc]initWithContentViewController: nav];
[self.mPopoverController presentPopoverFromBarButtonItem:起動元のButtonItem
permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];
[nav release];


って変更すればOKです。
なお、mPopoverController を self. で保持している理由ですが、(これは保持してなくてもいいんですが)ユーザーアクションじゃなくてプログラム的にPopOverを消去したいときにポインタ持ってないとPopOver消せないので保持しています。


ツイキャスビュワーの場合、設定メニューとかが PopOver になってるんですが、これ、猛烈に便利な点は横320pxデフォルトなんで、iPhoneのXIBリソースがそのまま使えます。

ツイキャスビュワーだと設定メニューは XIB分けてるので、それをそのまま流用すればおk。つまり、XIBもコードも一切いじることなく、テストもほぼ不要で PopOver の設定メニューが完成します。


あ、あとちょっとはまりそうなところというかポイントだけ。

【iPad化にあたり】

- ステータスバーを隠すとか、ナビゲーションバーを隠すというギミックは極力使わない。
(ステータスバーは、画面の回転とアラートの向きがずれる可能性があるし、ナビゲーションバーは再表示したときにうまく機能しないことがある)
- ヒューマンインターフェースGuidelineは、ガイドラインなので、あまり真剣に悩まない。ボタン類とか、画面上部推奨されてるけど明らかに下にあるほうが(親指操作できるし)便利っしょ。
- PopOver使うと、下の画面がみえた状態になるので更新タイミング注意。つまりiPhoneだとViewが消えたり現れたりする時点で画面更新しておけばよかったけど、PopOver使ってる場合、たとえばPopOver内でログアウトしたら元のビューの表示もその時点で「ログアウト状態」に変更する必要がある、など。


あ、あと最後に用意する画像。ちょい増えましたのでね。

【アイコン画像】

29x29 (設定メニュー: オプション)
58x58 (iPhone4 設定メニュー: オプション)
57x57 (iPhone)
50x50 , 72x72 (iPad)
114x114 (iPhone4 - ファイル名に @2xつける)
512x512 (AppStore)

【起動画面】
Default.png = 320x480
Default@2x.png = 640x960
Default-Portrait.png = 768 x 1004
Default-Landscape.png = 1024 x 748 (※微妙に20px少ないのがポイントです)


と、これだけ用意しておけばおk。

あとは Info.plist の Supported interface orientations (iPad) をちょろりといじればいい感じかと。詳しくは iOS Application Programming Guide: Build-Time Configuration Detailsにて。


以上、ご参考までに。

あ、よろしければ以前の記事もあわせてどーぞ。
iPhone アプリを iPad 対応にする方法(プログラミング編) : 管理人@Yoski


※ユニバーサルアプリにしたら、審査の開始も承認も早かったような気がします!

Follow yoski on Twitter

ワード

投稿者 aka : 2010年08月20日 14:54  / 2010年08月 / メモ

トラックバック

人気ブログランキング - a++ My RSS 管理人ブログ

このエントリーのトラックバックURL:
http://210.188.206.194/mt-tb-sf.cgi/842

コメント

配信のほうはipad対応しないんですか?

投稿者 Anonymous : 日時 2010年10月11日 04:53

コメントしてください

あわせて読みたい




保存しますか?


あとで読む | to read | フレッシュリーダー | フレッシュミーティング | RSSフィード.cc | あわせて読みたい | track feed MyRSS管理人