Swift MkMapViewで地図アプリ作成してみた（01）- 地図を表示する

#記事一覧
[Swift MkMapViewで地図アプリ作成してみた（記事一覧）](https://qiita.com/rain_00_00_09/items/3151b3faf2303fe78312)

#環境
- Xcode 10.01 (Swift 4.2.1) 2018/10/30リリース

#プロジェクトを作成する
1. Xcodeを立ち上げて、Create a new Xcode projectを押す。

    <div align="center"><img width="200" alt="WelcometoXcode.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/739daf38-9d9c-efa6-7e75-599bc178c608.png"></div>

2. Single View Appを選択してNextを押す。

    <div align="center"><img width="200" alt="SingleViewApp.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/d5382c6f-9e09-9168-bdef-1612ca6bfbdf.png"></div>

3. Product Nameにアプリ名称を入力する。

    Nextを押すと(4.)の画像にあるGeneralの設定画面が表示される。
    <div align="center"><img width="200" alt="Product Name.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/2b39ff6c-21b9-900a-705a-0ebcab22a650.png"></div>

4. Display Name、Deployment Target、Deviceを設定する。
 - Display Name：アプリのアイコンなどに表示される名前
 - Deployment Target：iOSバージョン
 - Device：デバイス（iPhone / iPad / Universal）

    <div align="center"><img width="200" alt="General.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/d5ce0d1b-c121-701d-52e8-558e754362db.png"></div>

#MkMapViewで地図を表示する
1. storyboardに表示されるデバイスを設定しておく。

    <div align="center"><img width="400" alt="Device.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/661eb310-c73a-6940-4d38-37719c6c48cf.png"></div>

    <div align="center"><img width="400" alt="Device2.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/78c49e34-154a-3466-6e33-42686abd7559.png"></div>

2. storyboardにMkMapViewを貼り付ける。
    「command + shift + l（エル）」を押すとObjectを選択するWindowが表示される。
    Map Kit Viewをstoryboard上のデバイスまでドラックしてドロップする。

    <div align="center"><img width="400" alt="MkMapView.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/a90a5313-937e-3489-14b3-0df9522e3238.png"></div>
    貼り付けたMkMapViewを画面いっぱいに引き伸ばす。

    <div align="center"><img width="400" alt="MkMapView2.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/21946da3-fa32-0815-50dd-e7ab4c522050.png"></div>

3. ViewController.swiftにMkMapViewの変数を定義する。

    ```swift:MkMapViewの変数を定義
    import UIKit
    import MapKit
    
    class ViewController: UIViewController {
    
        @IBOutlet var mapView: MKMapView!
    
        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
        }
    }
    ```

4. mapView変数にMkMapViewを紐付ける。

    Map Viewで右クリックし、Referencing Outletsの○をView Controllerまでドラックしてドロップする。
    <div align="center"><img width="400" alt="MapViewOutlet.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/cf4cce53-8a35-9e67-7939-0f83584ba6cc.png"></div>
    紐付ける変数を選択する。
<div align="center"><img width="400" alt="MapViewOutlet2.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/18afda69-9cad-893b-c4b4-8410f56f66ed.png"></div>
　
5. ▶︎を押してPCシミュレータを起動する。

    <div align="center"><img width="400" alt="Runsimulator.png" src="https://qiita-image-store.s3.amazonaws.com/0/362635/aa0c8efa-cfa1-0991-a153-b1a8088f0664.png"></div>

#記事一覧
[Swift MkMapViewで地図アプリ作成してみた（記事一覧）](https://qiita.com/rain_00_00_09/items/3151b3faf2303fe78312)