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

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

Storyboard上に画面遷移用の「セグエ」を追加

　「セグエ」は2つのUIViewController間の画面切り替えなどを担当するオブジェクトです。Storyboard上の地図画面と詳細画面との間にセグエを追加して、画面遷移を実現します。

　セグエを追加しましょう。Storyboard上の「View Controller」をクリックして［control］キーを押しながら、Storyboard上の「View Controller」を「Asset View Controller」までドラッグし、ドロップします（図37）。

図37　地図画面と詳細画面との間にセグエを追加

　ドロップするとメニューが表示されるので、「show」を選択します（図38）。

図38　セグエの種類を選択するためのメニュー

　追加したセグエをコードから扱えるように、セグエに識別子を設定します（図39）。

図39　セグエに識別子を設定

　これで、Storyboardの編集は全て完了です。

ViewControllerクラスを修正

　前回の記事までに実装してきた「ViewController.swift」ファイルに3つのメソッドを追加します。

「prepareForSegue:sender:」メソッド

　このメソッドはセグエが実行される前に呼ばれます。「assetViewControllerSegue」はStoryboard上で指定した識別子と同じです。メソッド内でAssetViewControllerのannotationプロパティに注釈オブジェクトを代入しています。

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if let identifier = segue.identifier {
        if identifier == "assetViewControllerSegue" {
            let annotationView = sender as! MKAnnotationView
            
            let assetViewController = segue.destinationViewController as! AssetViewController
            assetViewController.annotation = annotationView.annotation as? PhotoAnnotation
        }
    }
}

「ViewController.swift」ファイルに追加する「prepareForSegue:sender:」メソッド

「mapView:didSelectAnnotationView:」メソッド

　このメソッドは注釈ビューが選択されたときに呼ばれます。地図の中心を選択された注釈ビューの座標に移動させる処理を記述します。

func mapView(mapView: MKMapView!, didSelectAnnotationView view: MKAnnotationView!) {
    let coordinate :CLLocationCoordinate2D = view.annotation.coordinate
    var region :MKCoordinateRegion = mapView.region
    region.center = coordinate
    mapView.setRegion(region, animated: true)
}

「ViewController.swift」ファイルに追加する「mapView:didSelectAnnotationView:」メソッド

「mapView:annotationView:calloutAccessoryControlTapped:」メソッド

　このメソッドは注釈ビュー上のボタンがタップされたときに呼ばれます。画面遷移を実行する処理を記述します。

func mapView(mapView: MKMapView!, annotationView view: MKAnnotationView!, calloutAccessoryControlTapped control: UIControl!) {
    self.performSegueWithIdentifier("assetViewControllerSegue", sender: view)
}「ViewController.swift」ファイルに追加する「mapView:annotationView:calloutAccessoryControlTapped:」メソッド

完成したサンプルアプリをiOSシミュレーターで動作確認

　［Run］ボタンをクリックしてiOSシミュレーターで動作を確認しましょう（図40）。

　アプリを動かすと、地図上にカスタムの注釈ビュー（写真のサムネイル）が表示されます。注釈ビューをタップすると、吹き出しが表示されます。ここまでは前回の記事までの時点で実装済みでした。

　吹き出しをタップすると、詳細画面が表示され、詳細画面には写真と住所が表示されます。

図40　iOSシミュレーター（iPhone 6）の実行結果

サンプルアプリはGitHub上で公開

　本記事で行った作業は以下の通りです。

• Swift 1.2への対応
• 詳細画面実装
• 地図画面の修正
• 地図画面から詳細画面への遷移を実装

　解説が少々駆け足になってしまいましたが、これで「PhotoMap」の実装は完了です。

　「PhotoMap」の各機能を別の方法で実装したり、さらに機能を追加したりすることで理解が深まると思います。作成した「PhotoMap」プロジェクトはGitHub上で公開していますので、参考にしてみてください。

• hirayaCM/PhotoMapSwift - @IT Swift Vol.6

「iPhone 6／6 Plusアプリ開発入門」バックナンバー

• iOS 8アプリ開発のこれまで＆Swift 1.2への対応、プロパティオブザーバーとwillSetの基本的な使い方、セグエを使った画面遷移
• Swiftのカスタムクラスの作り方――プロトコル、サブクラス、イニシャライザー、タイププロパティメソッドのオーバーライド、デリゲートについて注釈の作成で学ぶ
• OptionalなどSwiftとObjective-Cの違いを意識してPhotos Frameworkを使う
• Swiftでの変数の定義、Xcodeでのアウトレット接続、iOSシミュレーターへの画像素材追加
• iOS 8のPhotoKitの概要＆Xcode 6.1／Storyboard／Auto Layout／iOSシミュレーターの基本的な使い方
• 開発者が知っておきたいiOS 8の新機能＆Xcode 6のインストールと基本的な使い方

著者紹介

平屋真吾

クラスメソッド株式会社 iPhoneアプリサービス事業部所属のプログラマーです。iOSアプリの開発がメインですが、デザインやAWSなども勉強中です。

ブログ：http://dev.classmethod.jp/author/hiraya-shingo/