[iOS]Storyboardで始めるiPhoneアプリ開発 #1 – pushセグエを使う

はじめに

iPhoneアプリは、Macが１台あれば作ることができます。
(OSのバージョンは10.7.4以降である必要があります)

「とりあえず動くものを作ってみよう!」といった感じで簡単なアプリを作ってみたいと思います。
「アプリの画面」や「画面の遷移」を視覚的に作成できる「Storyboard」を使いながら、
コードを書かずにできるとこまでを今回はやってみます。

Storyboardとは

Xcode4.2から導入されました。iOS5以降を対象としたアプリの開発で使用出来ます。
下の画像のような画面で「画面内のUIパーツのレイアウト」や、「画面から画面への遷移」を視覚的に作成出来ます。

開発の準備

用意するものは以下の通りです。

• OS X 10.7.4以降がインストールされたMac
• 開発ツール「Xcode」

Xcodeは無料でインストールできます。最新版のバージョンは4.6.2です。
Xcodeの概要とインストール手順等は以下の記事などを参考にしてみてください。

• iOSアプリ開発初心者に捧ぐ開発環境Xcodeの概要とインストール

今回はXcode4.6.2を使用します。
その他の設定は以下の通りとします(デフォルトで以下のようになっているかと思います)

• iOS SDK 6.1
• Apple LLVM compiler 4.2
• Storyboard使用
• ARC使用

プロジェクト作成

それではアプリ開発を進めていきたいと思います。
Xcodeを起動し、新規プロジェクトを作成します。iPhoneアプリ開発ではアプリごとにプロジェクトを作成して開発を進めていきます。
「Create a new Xcode project」をクリックします。

Single View Applicationを選択し、「Next」をクリックします。

次の画面ではアプリ名などを入力し、「Next」をクリックします。

Product Name	アプリの名前を入力する欄です。今回はstoryboardsTestとします。
Organization Name	(自分の名前を入力します)
Company Identifier	(本来は会社名を入力しますが、今回はテスト用のプロジェクトなので適当な名前で構いません)
Class Prefix	空欄のままで
Use Storyboards	チェックを入れます(デフォルト)
Use Automatic Reference Counting	チェックを入れます(デフォルト)
Include Unit Tests	チェックを入れません

保存場所を選択し、「create」をクリックします。

プロジェクトが作成されました。Xcode画面の各部の主な名称や役割は以下の通りです。

1つ目の画面を作成する

それでは、画面の作成を進めていきましょう。
Xcode画面左側の「ナビゲーションエリア」内に自動で生成されたファイルが表示されています。
アプリの動作に必要なファイルはひと通り作成されています。
「MainStoryboard.storyboard」をクリックし、Storyboardファイルの内容を表示します。

Storyboardファイルが表示できました。画面が一つ存在します。この画面の左についてる矢印は最初に表示される画面を意味しています。

ラベルを追加する

この状態では真っ白の画面だけの状態なのでラベルを追加します。
Xcode画面左側の「ユーティリティエリア」下部のオブジェクト一覧から「Label」を選択します。

Storyboardファイル内の画面へドラッグ＆ドロップします。

ラベルが追加されました。

追加したラベルをダブルクリックすると文字列を変更できます。
"MainView"に変更しました。
以後、この画面をMainViewと呼ぶことにします。

アプリを動かす

この状態でアプリを動かしてみます。Runボタンを押すと実行出来ます。

iPhoneシミュレーターが起動し、アプリが動きました。

アプリの実行を止めるにはStopボタンを押します。

2つ目の画面を作成する

続いて、２つ目の画面を作ります。
オブジェクト一覧の「View Controller」を選択し、MainViewの隣へドラッグ＆ドロップします。

2つ目の画面が追加されました。

MainViewと同様にラベルを追加します。こちらはラベルの文字列を「SubView」にしました。
こちらの画面はSubViewと呼ぶことにします。

もうひとつ設定を行います。
MainViewとSubViewの見分けがつくようにSubViewに背景色を設定します。
SubViewの空白部分をクリックした後、属性インスペクタを選択し、Background項目をクリックします。
メニューが出てくるので一番下のOther...をクリックします。
カラーパレットが出てくるので色を選択します。

オレンジ色を選択しました。

画面の遷移を設定する

セグエ

続いて、MainViewからSubViewへの画面遷移を設定します。
MainViewにボタンを追加し、ボタンを押したらSubViewに遷移するようにしてみたいと思います。

Storyboardで画面遷移を作るには「セグエ」と呼ばれるオブジェクトを使います。セグエには

• Modal セグエ
• Push セグエ
• Custom セグエ

の３つがあります。ここではPushセグエを使ってみたいと思います。

Pushセグエは横方向へスライドするアニメーションと共に画面遷移するものです。
Pushセグエの場合、「NavigationController」というパーツが必要なので追加します。

NavigationControllerとボタンを追加する

MainViewのステータスバー(画面上部の黒帯)をクリックしてMainViewの「ViewController」を選択状態にします。

次に、メニューバーの「Editer」→「Embed In」→「Navigation Controller」を選択します。

Navigation Controllerが追加されました。

追加されたNavigation ControllerはMainViewに関連付けられています。

MainViewにボタンを追加します。
オブジェクト一覧から「Label」を選択し、MainViewへドラッグ＆ドロップします。

ボタンをラベルの下へ持ってきてボタンのタイトルをSubViewに変更しました。
このボタンを押すとMainViewからSubViewへ遷移するようにします。

画面遷移を設定する

「ボタンを押したらSubViewに遷移する」ように設定します。
追加したボタンをクリックし、controlキーを押しながらボタンをSubView上までドラッグするとSubViewが選択され青くなるので、その位置でドロップします。
ドロップするとメニューが出てきます。

pushを選択します。

画面遷移を担当するオブジェクトである「セグエ」が追加されました。

ここで、Runボタンをクリックしてアプリを実行してみます。
MainViewの「SubView」ボタンを押すと、SubViewに遷移します。
MainViewへ戻るためのボタンは上部NavigationBarに自動で追加されています。「Back」ボタンを押すとMainViewへ戻ることができます。

pushセグエはこんな動きの画面遷移になります。

まとめ

今回はPushセグエを使った画面遷移を作ってみました。
次回は、別のセグエを使った画面遷移を扱ってみます。

参考サイト

• iOS Storyboardによる画面遷移の実装(Navigation Controller)
• storyboardとは (objective-c)