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

iPhone 6／6 PlusアプリをSwift言語で作成してみたいという初心者向けにiOS 8の新機能を使ったアプリの作り方を一から解説する入門連載。今回は、iOS 8のPhotoKitの概要とXcode 6.1の画面構成、新規プロジェクトの作り方、StoryboardとAuto Layoutによる画面作成方法、iOSシミュレーターの使い方などを解説する。

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

StoryboardとAuto Layoutで画面作成

　それでは、アプリの実装に入りましょう。

　［ナビゲータエリア］上で［Main.storyboard］ファイルをクリックして選択してください。［Main.storyboard］ファイルの内容が［エディタエリア］に表示されます。

　「画面内の要素のレイアウト」や「画面間の遷移」などは、基本的にStoryboard上で定義します。

図10　Main.storyboardファイルについて

　［エディタエリア］上で［View Controller］を選択し、［ユーティリティエリア］上部の［Identity Inspector］アイコンをクリックして［Identity Inspector］を表示します。

　［Identity Inspector］内の［Class］項目を確認してください。値は［ViewController］になっていると思います。

　Storyboard上の［View Controller］は［ViewController］クラスにひも付いています。「Storyboard上で定義できないもの」や「動的に処理する必要があるもの」などはクラスファイルの方で実装します。

　今回はSwiftでの実装なのでViewController.swiftファイルに記述します。

図11　［View Controller］にひも付いたクラスの確認

MapViewを追加する

　Storyboard上の［View Controller］にMapViewを追加します。

　［ユーティリティエリア］下部のテキストフィールドに「map」というキーワードを入力してください。テキストフィールドの上隣りのエリアに［MapKit View］が絞り込まれて表示されます。

図12　MapKit View項目を表示

　次に［MapKit View］を、Storyboard上の［View Controller］の中央辺りにドラッグします。

図13　Storyboard上でMapKitの追加する

Auto Layoutを設定する

　次にMapViewにAuto Layoutを設定します。先ほど追加した［MapView］を選択した状態で、［エディタエリア］右下の［Pin］メニューをクリックしてAuto Layoutの画面を表示させます。

図14　Auto Layoutの設定画面を表示する

　図15の通りに設定してください。［MapView］と［MapViewの親のView］との間のAuto Layout設定が追加されます。

図15　Auto Layoutの設定画面