iOS 8アプリ開発のこれまで＆Swift 1.2への対応、プロパティオブザーバーとwillSetの基本的な使い方、セグエを使った画面遷移：iPhone 6／6 Plusアプリ開発入門（終）（3/6 ページ）

iPhone 6／6 PlusアプリをSwift言語で作成してみたいという初心者向けにiOS 8の新機能を使ったアプリの作り方を一から解説する入門連載。最終回は、これまでの連載を振り返り、これまで作成したPhotoKitを使ったサンプルアプリの仕上げとしてセグエを使った画面遷移を実装の仕方や、プロパティオブザーバーとwillSetの基本的な使い方を解説する。

[平屋真吾，クラスメソッド株式会社]

サンプルアプリの詳細画面の構成を確認

　UITableViewControllerのサブクラスとして「AssetViewController」を追加して、詳細画面のViewを管理するようにします。「AssetViewController」が管理するViewの構成は図4の通りです。

図4　「AssetViewController」の構成

　AssetViewController管理下のUITableViewで使用するCellクラスは以下の通りです。

セルのID	クラス	要素	機能
ImageCell	ImageCell（UITableViewCellのサブクラス）	1つのUIImageView	写真を表示
AddressCell	UITableViewCell	2つのUILabel	住所を表示

Main.storyboardに「Navigation Controller」と「TableViewController」を追加

　Storyboard上に「Navigation Controller」と詳細画面用の「TableViewController」を追加します。

　「ナビゲーターエリア」上の「Main.storyboard」ファイルをクリックして選択して「Main.storyboard」ファイルを表示します。Storyboard上の空白部分をダブルクリックすると「100％表示」「50％表示」を切り替えられますので、作業内容に応じて切り替えながら進めてみてください（図5）。

図5　Main.storyboardファイルを選択

　まずは、これまでの連載の中で実装してきた「ViewController」をNavigationControllerの管理下になるように変更します。

　Storyboard上の「ViewController」を選択した後に、メニューバーの［Editor］→［Embed In］→［Navigation Controller］を選択して、NavigationControllerを追加します（図6）。

図6　「Navigation Controller」を追加

　NavigationControllerが追加されました（図7）。

図7　「Navigation Controller」追加後のStoryboard

　次に、Storyboard上に詳細画面用のTableViewControllerを追加します。

　「ユーティリティエリア」下半分のリスト内の「TableViewController」を選択し、「TableViewController」を「エディターエリア」の空白部分にドラッグします（図8）。

図8　「TableViewController」を追加

　TableViewControllerが追加されました（図9）。

図9　「TableViewController」追加後のStoryboard

AssetViewController.swiftファイルを追加

　詳細画面の機能を実装するために、AssetViewController.swiftファイルを追加します。AssetViewControllerクラスはUITableViewControllerのサブクラスとして作成します。

　プロジェクトに「AssetViewController.swift」ファイルを追加しましょう。［ナビゲーターエリア］上の［PhotoMap］項目を右クリックして、出てきたメニューの［New File］を選択します（図10）。

図10　コンテキストメニュー

　テンプレート選択画面が表示されるので、［Cocoa Touch Class］を選択し、［Next］をクリックします（図11）。

図11　テンプレート選択画面

　追加するクラスのオプションについて以下のように入力し、［Next］をクリックします（図12）。

図12　オプション選択画面

　ファイルの保存先を選択します。以前の記事で作成した「ViewController.swift」ファイルと同じフォルダーを選択し、［Create］をクリックします（図13）。

図13　保存先選択画面

　「AssetViewController.swift」ファイルがプロジェクトに追加されました（図14）。

図14　「AssetViewController.swift」ファイル追加後の「ナビゲーターエリア」

ImageCell.swiftファイルを追加

　AssetViewController.swiftファイルを追加したときと同様の手順で「ImageCell.swift」ファイルを追加してください。

　追加するクラスのオプションは以下のように入力します（図15）。

図15　オプション選択画面

　以下のように「ImageCell.swift」ファイルがプロジェクトに追加されれば完了です（図16）。

図16　「ImageCell.swift」ファイル追加後の「ナビゲーターエリア」

Main.storyboard上の詳細画面の設定を更新

　Main.storyboard上の詳細画面を仕上げていきます。Main.storyboardを表示させて、「Table View Controller」の「Table View」を選択し、「Style」項目を「Grouped」に変更します（図17）。

図17　TableViewのStyle設定を変更

　続いて、Storyboard上の「Table View Controller」にカスタムクラスとしてAssetViewControllerクラスを関連付けます（図18）。

図18　「Table View Controller」とAssetViewControllerクラスを関連付ける

　以下のように、これまで「Table View Controller」と表示されていた部分が「Asset View Controller」になれば完了です（図19）。

図19　クラスを関連付けした後のStoryboard