iOS 8のPhotoKitの概要＆Xcode 6.1／Storyboard／Auto Layout／iOSシミュレーターの基本的な使い方：iPhone 6／6 Plusアプリ開発入門（2）（2/4 ページ）

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

PhotoKit＋MapKitのサンプルアプリの画面構成

　写真の位置情報と地図を組み合わせたアプリということで、アプリ名は「PhotoMap」とします。「PhotoMap」の画面構成について説明しましょう。

　図2がメイン画面になります。画面上部の「NavigationBar」とそれ以外の領域を占める「MapView」のみで構成されるシンプルな画面です。位置情報を持った写真のサムネイル（AnnotationView）をMapView上配置します。

図2　メイン画面（通常時）

　MapView上のサムネイルをタップすると、図3のように「CalloutView」が表示されます。写真が持つ緯度経度情報を住所に変換したものをCalloutViewに表示します。

　CalloutViewをタップすると、図4の「詳細画面」へ画面遷移します。

図3　メイン画面 （ピン選択時）

　詳細画面は、画面上部の「NavigationBar」とそれ以外の領域を占める「TableView」で構成され、写真と住所を表示します。

図4　詳細画面

Xcode 6.1で新規プロジェクトの作成

　それでは、Xcodeのプロジェクトの作成から始めていきます。

　Xcodeを起動し［Create a new Xcode Project］をクリックしてください。

図5　Welcome to Xcode画面

テンプレートの選択

　［Choose a template for your new project］と記載されたダイアログが表示されます。前回と同様、［Single View Application］テンプレートを選択します。

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

プロジェクトの情報を入力する

　［Choose options for your new project］と記載されたダイアログが表示されます。以下のように入力／選択を行ってください。

• ［Product Name］に「PhotoMap」を入力
• ［Organization Name］に自分の名前をアルファベット小文字で入力（例「shingo hiraya」）
• ［Organization Identifier］に「com.sample」を入力
• ［Language］は「Swift」を選択
• ［Devices］は「iPhone」を選択

　入力／選択が完了したら、［Next］ボタンをクリックします。

図7　プロジェクト情報入力画面

プロジェクトを保存する

　プロジェクトの保存場所を聞かれるので、適当な場所を選択します。（ここでは、デスクトップを選択します）

　そして、［Create local git repository for this project］のチェックを外したことを確認し、［Create］ボタンをクリックします。

図8　プロジェクトファイルの保存場所を選択する画面

作成したプロジェクトを確認する

　プロジェクトを作成すると、以下のような［ワークスペース］ウィンドウが表示されます。

図9　プロジェクト作成直後［ワークスペース］ウィンドウ

　作成された各ファイルについて簡単に説明します。

• AppDelegate.swift

　アプリのライフサイクル周りのイベントに関連するクラスのソースファイルです。アプリ起動時の処理などは、このクラスに追加します。

• ViewController.swift

　ViewControllerクラスは［UIViewController］のサブクラスです。［UIViewController］はその名の通り、Viewを管理するクラスです。ViewControllerクラスはメイン画面を作るために使用します。

• Main.storyboard

　レイアウトや画面遷移はこのファイルで定義します。

• Images.xcassets

　画面に表示する画像素材を管理するためのファイルです。

• LaunchScreen.xib

　起動画面を定義するファイルです。