iOSアプリ開発で格段に開発速度を高めているXCodeの機能

概要

2013/3/26にTwitterで縦書の俳句を投稿出来るアプリ「俳句ったー」をリリースしました。

開発のきっかけはTwitterの公式ウェブサイトが改行コードに対応しこれはネタアプリチャンスだと思い作りました。

3/14(木) 公式ウェブサイトが改行コードに対応
3/15(金) 帰りがけに「ねぇねぇ、@yoshiakistくん、デザインやらない？」と話す
3/16(土) @yoshiakist「デザイン出来ましたよw」
3/17(日) 寝坊して昼くらいからコーディング 翌0:30 Submit!!

つれー実質8時間くらいしかコーディングしてないわー してないわー

という格段に開発速度を早めているXCodeの機能を紹介します。

Storyboard

メインのStoryboardです。主要な画面遷移になります。

図のように、ViewController同士の画面遷移と画像設定などの各Viewのプロパティが書けるので、UI周りのコードはほぼ書いてません。
一見変わった画面遷移っぽいですがビューのアニメーションの都合でこういう構成にしました。真ん中のInput View Controllerが起点となって画面遷移が行われます。

Xib

俳句のプレビュー画面です。

Viewのみが必要な場合はXibを使います。こちらもStoryboardと同じくUIのコードはほぼ書いてません。文字が適当に打ってあるのは体裁を調整するためです。
なぜここだけStoryboard外でXibなのかは、入力画面からプレビューへの遷移を紙をめくったようなアニメーションにしたかったからです。(アニメーションを気にしなければStoryboardだけで済みました。)

/* 入力画面からプレビューへの画面遷移はこんな感じのコードです */
UINib *nib = [UINib nibWithNibName:@"Preview" bundle:nil];
self.preview = [[nib instantiateWithOwner:self options:0] objectAtIndex:0];
// -- いろいろ設定などする ---    
[UIView transitionFromView:self.view
                    toView:self.preview
                  duration:0.6f
                   options:UIViewAnimationOptionTransitionCurlUp
                completion:nil];

nibファイルからXibで設定したUIのViewが取り出せるというイメージです。

ContainerView

ViewControllerに子のViewControllerを持たせられる素晴らしい機能です。
上のStoryboardの画像で確認出来るように(一番左のContainer)、柔軟な画面設計が実現します。

その他

俳句ったーに限った話ですが、Twitterの投稿はSocial.frameworkのSLComposeViewControllerに丸投げでアカウント認証やTwitterAPIを気にせず済みますので早いです。
注意したところは、縦書を全角スペースで体裁整えているので俳句の字余りによってはTwitterの投稿制限である140文字を意外とすぐ超えてしまいます。
そしてSLComposeViewControllerのsetInitialText:は140文字を超える文字を渡すことが出来ない(空の文字列になる)ので、渡す前に確認する必要があります。

/* 元のコードからは改変してますがツイートの投稿画面表示はこんな感じです */
if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter] &&
    text.length <= 140) {

    SLComposeViewController *vc = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];
    [vc setInitialText:text];
    [self presentViewController:vc animated:YES completion:nil];
}

参考サイト

初めての Storyboard in iOS 5 Part 1
iOS5では使えない…Xcode4.5の新機能、StoryboardでのContainer Viewが便利！

まとめ

• Storyboard、Xibを使用することによりUI周りのコードは9割くらい削減出来ます。レイアウトの変更も容易ですし、何よりもUIに関することはここを見ればいいということが明確になるのがいろいろ捗ります。
• Sotryboard、XibでautoresizingMaskを適切に設定していれば、3.5inch、4inchの画面サイズもだいたいは対応出来ると思います。(俳句ったーの場合完全に対応出来るパターンです。)
• ContainerViewを使えば更にStoryboardの自由度がアップ。
• Storyboard、Xib、ContainerViewなど新しい機能はそれなりに学習コストがかかりますが、対象のアプリが使用出来るiOSのバージョンだったら使わない理由はないと個人的には思います。

なんかUI周りの話しかしませんでしたが、それだけUI周りをコードで書くのは時間がかかるしメンテも大変だなぁって話でした。