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

» 2014年12月02日 18時00分 公開
[平屋真吾,クラスメソッド株式会社]

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

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。