地図を使ったアプリを実際に自作してみよう――シリーズ【文系リーマンでもできる!iPhoneアプリ開発で週末副業・実践編】

写真拡大

 初心者でも始められるiPhoneアプリの作り方を紹介してきていますが、今回はいよいよ実践編です。今まで解説したことを活用して、実際に動くアプリを作ってみましょう。

 アプリの動作イメージはこんな感じです。

・地図アプリを起動してみる
・地図上にピンを表示してみる
・ピンをタップしたら文字が出るようにする

 第2回で紹介したXcodeの使い方を参考に、新規プロジェクトを作成しましょう。

 「Product Name」は、Mapとして保存します。「Devices」は、iPhoneを設定しましょう。

 それでは実際にiPhoneアプリを作成してみましょう。

◆地図アプリに必須の「MapKit」

 はじめに、今回は地図を使うので、アプリから地図を呼び出すために使われるiOSの「MapKit」というフレームワークを追加しましょう。

 プロジェクトの作成が終わったら作業ウィンドウが表示されるかと思います。「Linked Frameworks and Libraries」というメニューから「+」ボタンを押して追加することができるようになっています。

⇒【画像】はコチラ http://hbol.jp/?attachment_id=126103

 検索フォームにMapと打つと「MapKit.framework」が出てくるはずなので、選択して「Add」ボタンを押しましょう。

 このフレームワークが無いとアプリ上に地図が起動しないので、設定しておく必要があります。

◆フレームワークを導入したらいざ作成!

 Marketのフレームワークを導入したらアプリを形作っていきます。「Main.storyboard」を開いて右下のオブジェクト一覧から「Map Kit View」を選択して、エディタエリアにドラッグ&ドロップします。

⇒【画像】はコチラ http://hbol.jp/?attachment_id=126105

 移動したオブジェクトの四隅を画面いっぱいにドラッグしましょう。

 上下左右に青い点線が表示されるように配置すると画面の中央に配置することができます。

 ここまで完了したらひとまずiOSシミュレーターを起動しましょう。地図アプリが立ち上がっているはずです。

◆「コード」を書いてみよう

 ここからはコードを少し書いていきます。

 まずは、StoryBoardとViewController.swiftを表示させるために右上にある丸が2つ重なっているマークを押します。そして、地図をアプリで使えるようにMapKitを「import UIKit」と書かれた下にインポートしておきます。

 続いてStoryBoardに設置したMKMapViewをViewController.swiftで実装するために紐付けを行いましょう。

 controlキーを押したままMapViewをドラッグします。

⇒【画像】はコチラ http://hbol.jp/?attachment_id=126108

 Nameは、分かりやすく「mapView」としておきます。

◆指定した位置を表示させる

 今回は新宿駅を表示させるコードを書いてみたいと思います。

override func viewDidLoad() {
super.viewDidLoad()

 以下よりソースコードを書いていきます。

// 表示したい位置を緯度経度で設定
let position = CLLocationCoordinate2DMake(35.690553, 139.699579)

// 表示する範囲の幅を設定(数字が小さいほどズームされる)
let range = MKCoordinateSpanMake(0.005, 0.005)

// 位置と表示をMapViewにセット
let area = MKCoordinateRegionMake(position, range)
mapView.setRegion(area, animated:true)

 CLLocationCoordinate2DMakeメソッドというのは、表示位置を指定するために必要な部分です(緯度,経度)で表記しましょう(今回は新宿駅の緯度経度を参照しています)。

 続いて、MKCoordinateSpanMakeメソッドで表示する範囲を指定します。()内の数字が小さくなればなるほど表示される範囲は狭くなります。

 表示位置と範囲が決まったらMapViewにセットしましょう。