[はじめてのiOSアプリ]xcodeで地図アプリを作成（その４）

# はじめに

iOSアプリを作ってみたいけど
何から始めて良いのかわからない

とりあえず、
「やってみました」記事を参考に
地図アプリを真似てみようと思う

という記事の４回目です。

今回は、位置情報と連携した地図表示までします。

# 位置情報と連動した地図表示
1. MapKitをインポート
   - 画面左側のファイルツリーから[ViewController.swift]を選択し、画面中央に表示されるエディタで、以下のように修正
   - 【なぜ？】
     - 地図ライブラリ(MapKit)を使うことを宣言することで、地図表示のプログラムを記述できるようになる

    ```swift:ViewController.swift
    import UIKit
    import CoreLocation
    import MapKit  // この行を追加
    
    class ViewController: UIViewController, CLLocationManagerDelegate {
    ```
1. MapKit用の変数(mapView)を追加
   - 同様に[ViewController.swift]を以下のように修正
   - 【なぜ？】
     - この変数を通してプログラムで地図位置を取り扱うため

    ```swift:ViewController.swift
    class ViewController: UIViewController, CLLocationManagerDelegate {
        @IBOutlet var mapView: MKMapView!  // この行を追加
        var locationManager: CLLocationManager!
    ```
1. MapViewにおいて現在位置を表示するように設定
   - 同様に[ViewController.swift]を以下のように修正
   - 【なぜ？】
     - 現在位置が表示された方が見やすいから
     - 試しにtureではなくfalseを設定してみたら、透明人間みたいに表示されないから面白いかも(笑)

    ```swift:ViewController.swift
        locationManager.startUpdatingLocation()
        locationManager.requestWhenInUseAuthorization()

        mapView.showsUserLocation = true  // この行を追加
    }
    ```
1. エディタ画面を２画面表示する
   - 画面左側のファイルツリーから[Main storyboard]を選択し、[Add Editor on Right]ボタンをクリックし、[Main storyboard]が２画面表示されるようにする
   - 【なぜ？】
     - この後の処理で[Main storyboard]に表示されている[MapView]を[ViewController.swift]に関連づけしやすくするため<br>
<img width="232" alt="AddEditor.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/79564bba-88d4-fe2f-46c4-9ab320ae22a1.png">
1. [ViewController.swift]と[Main storyboard]を同時に表示する
   - 画面左側のファイルツリーから[ViewController.swift]を選択する
   - 【なぜ？】
     - [Main storyboard]と[ViewController.swift]が同時に表示されていると[MapView]の関連づけが容易にできるため<br>
<img width="1316" alt="EditViewControllerStoryboard.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/e2b74db4-eb53-6e74-a354-f3597995319f.png">
1. MapKit用の変数(mapView)とMapViewとを関連づける
   - Ctrl+クリックで[MapView]を選択することでOutletを表示<br>
<img width="246" alt="MapViewOutlet.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/21776b13-0626-edb4-8953-d27b78a244dd.png">
   - [Referencing Outlets]の○印から、変数mapviewにドラッグ＆ドロップで接続(connect)する<br>
![ConnectOutlet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/5dba877c-a512-8237-de5a-41382e9309db.png)
1. 接続(connect)後の状態がこれ↓
<img width="246" alt="ConnectedOutlet.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521802/2bd76bf5-ac29-0b55-3cb4-38807a8bab5c.png">
1. 最新の位置情報を画面の中心に設定
   - 同様に[ViewController.swift]を以下のように修正
   - 【なぜ？】
     - 現在地が中心に表示されないと意味ないから
     - 常に現在地しか表示されないのは、それはそれで使いにくいが.....

    ```swift:ViewController.swift
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations:[CLLocation]) {
        let longitude = (locations.last?.coordinate.longitude.description)!
        let latitude = (locations.last?.coordinate.latitude.description)!
        print("[DBG]longitude : " + longitude)
        print("[DBG]latitude : " + latitude)

        mapView.setCenter((locations.last?.coordinate)!, animated: true)  // この行を追加
    }
    ```
1. テスト実行
   - Xcode 左上の矢印アイコンをクリック
   - Simulatorのメニューから[Debug]-[Location]-[City Run]など（移動するやつ）を選択
   - 地図を拡大表示すると、地図上を移動していることを確認できる

# 今回の到達点
- Simulatorを使い、更新される位置情報に追従して地図上の位置（現在地）が移動するようになった

# 連載
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その１：プロジェクト作成）](https://qiita.com/shinobee/items/1f6d26451336bf736484)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その２：地図表示）](https://qiita.com/items/50e1acee3024c3e26fb9)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その３：位置情報取得）](https://qiita.com/items/b8d287d2e34af20aab64)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その４：位置情報と連携した地図表示）](https://qiita.com/items/a91c49ebf5301d936120)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その５：アプリアイコン設定）](https://qiita.com/items/24804294ab86635ee5d3)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その６：拡大・縮小ボタン追加）](https://qiita.com/items/12c54c4e253bc48cad4d)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その７：地図を拡大・縮小）](https://qiita.com/items/4406c4fdf2fbdcc40533)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その８：地名表示）](https://qiita.com/items/3363779d0ea11ca6073c)
1. [[はじめてのiOSアプリ]xcodeで地図アプリを作成（その９：ソースコード管理）](https://qiita.com/items/d0e63020b0dce4c70542)

<!-- eof -->