Swift3でMapViewのPinを縮小した写真にしたい

Question

MapViewを使い、現在地で撮った写真をPinの画像にするフォトアルバムを作ろうとしています。
pickerViewで写真を撮った後に画像の配列に写真を入れて、それをPinの画像にしようとしています。
コードは以下のようにしました。
PickerViewを起動し、写真を撮るまではOKなのですが、撮り終わった後に

fatal error: Index out of range
というエラーメッセージで落ちてしまいます。
おそらく画像をUIimageの配列に入れる処理が悪いのだと思うのですが
解決方法が分かりません。
修正するヒントなどありましたら教えていただければと思います。

import UIKit
import CoreLocation
import MapKit

class MapViewController: UIViewController {
    
    @IBOutlet weak var mapView: MKMapView!
    @IBOutlet weak var locationLabel: UILabel!
    
    var locationManager = CLLocationManager()
    var locationData:CLLocation?
    var imageArray: Array<UIImage> = Array<UIImage>()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //ロケーションの状態表示を使用不可にしておく
        disableLocationLabel()
 
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.distanceFilter = 1.0
        mapView.setUserTrackingMode(.follow, animated: true)
        
        locationManager.delegate = self
        mapView.delegate = self
        mapView.showsScale=true
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    //画面呼び出し後のメソッド
    override func viewDidAppear(_ animated: Bool) {
        
        if(CLLocationManager.locationServicesEnabled() == true){
            switch CLLocationManager.authorizationStatus() {
                
            //未設定の場合
            case CLAuthorizationStatus.notDetermined:
                locationManager.requestWhenInUseAuthorization()
                
            //機能制限されている場合
            case CLAuthorizationStatus.restricted:
                alertMessage(message: "位置情報サービスの利用が制限されている利用できません。「設定」⇒「一般」⇒「機能制限」")
                
            //「許可しない」に設定されている場合
            case CLAuthorizationStatus.denied:
                alertMessage(message: "位置情報の利用が許可されていないため利用できません。「設定」⇒「プライバシー」⇒「位置情報サービス」⇒「アプリ名」")
                
            //「このAppの使用中のみ許可」に設定されている場合
            case CLAuthorizationStatus.authorizedWhenInUse:
                //位置情報の取得を開始する。
                locationManager.startUpdatingLocation()
                
            //「常に許可」に設定されている場合
            case CLAuthorizationStatus.authorizedAlways:
                //位置情報の取得を開始する。
                locationManager.startUpdatingLocation()
            }
            
        } else {
            //位置情報サービスがOFFの場合
            alertMessage(message: "位置情報サービスがONになっていないため利用できません。「設定」⇒「プライバシー」⇒「位置情報サービス」")
        }
    }

    //表示を使用不可に変更
    func disableLocationLabel(){
        locationLabel.text = "GPSが使用許可になっていません"
    }
    
    //警告アラートを表示
    func alertMessage(message:String) {
        let aleartController = UIAlertController(title: "注意", message: message, preferredStyle: .alert)
        let defaultAction = UIAlertAction(title:"OK", style: .default, handler:nil)
        aleartController.addAction(defaultAction)
        
        present(aleartController, animated:true, completion:nil)
    }

    //写真ボタンを押した時
    @IBAction func takePhoto(_ sender: UIButton) {
        
        //カメラが使えるか確認する
        if UIImagePickerController.isSourceTypeAvailable(.camera){
            //ImagePickerを表示する
            let cameraPicker = UIImagePickerController()
            cameraPicker.sourceType = UIImagePickerControllerSourceType.camera
            cameraPicker.delegate = self
            self.present(cameraPicker, animated: true, completion: nil)
        }
    }
    
    //戻るボタンを押した時
    @IBAction func backButton(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
    }
}

//MARK: CLLocationManagerDelegate
extension MapViewController:CLLocationManagerDelegate{
    
    //位置情報が更新された時に呼ばれる
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        
        //Locationの最後の値を取り出す
        locationData = locations.last
        
        //緯度
        if var ido = locationData?.coordinate.latitude{
            ido = round(ido * 1000000)/1000000
        }
        //経度
        if var keido = locationData?.coordinate.longitude{
            keido = round(keido * 1000000)/1000000
        }
        //標高
        if var hyoukou = locationData?.altitude{
            hyoukou = round(hyoukou*100)/100
        }
        
        //MAP中央の座標
        let center = CLLocationCoordinate2D(latitude: (locationData?.coordinate.latitude)!, longitude: (locationData?.coordinate.longitude)!)
        
        //地図のセンターに設定する
        mapView.setCenter(center, animated: true)
        
        //ロケーション表示（デバッグ用）
        locationLabel.text = "GPS:\(center.latitude)  \(center.longitude)"
        
        //500m四方を表示する
        let myRegion : MKCoordinateRegion = MKCoordinateRegionMakeWithDistance(center, 500, 500)
        mapView.setRegion(myRegion, animated: true)
        
    }
    
    //位置情報のステータスが変わった時
    func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorizationStatus) {
        
        switch status{
        //利用許可に変更された
        case .authorizedAlways,.authorizedWhenInUse:
            locationManager.startUpdatingLocation()
        //利用不可に変更された
        case .denied:
            locationManager.stopUpdatingLocation()
            disableLocationLabel()
            
        default://制限されているか、ユーザーが決定していない、その他
            //ロケーションの更新を停止する
            locationManager.stopUpdatingLocation()
            
            //トラッキングモードをnoneにする
            mapView.setUserTrackingMode(.none, animated: true)
            disableLocationLabel()
        }
    }
}

//MapViewのDelegate
extension MapViewController:MKMapViewDelegate{

    //ピンを表示する時の処理
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {

        // 現在地は外す
        if annotation is MKUserLocation {
            return nil
        }
        
        let pinID = "PIN"
        var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: pinID) as? MKPinAnnotationView
        //Annotationが見つからなかった場合は新しく作成
        if annotationView == nil {
            annotationView = MKPinAnnotationView(annotation: annotation, reuseIdentifier: pinID)
            
            let size: CGSize = CGSize(width: 42, height: 42)
            
            //写真を描画する
            UIGraphicsBeginImageContext(size)
            
            imageArray[Int(annotation.title!!)!].draw(in: CGRect(x:0, y:0, width : size.width,height: size.height))
            let resizeImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()

            annotationView?.image = resizeImage

            //タップした時に吹き出しが表示されるようにする
            annotationView?.canShowCallout = true
            annotationView?.rightCalloutAccessoryView = UIButton(type: UIButtonType.detailDisclosure)
            
        } else {
            annotationView!.annotation = annotation
        }
        return annotationView
    }

    //吹き出しをタップした時に呼ばれる
    //画像を表示するように遷移する
    func mapView(_ mapView: MKMapView, annotationView view: MKAnnotationView, calloutAccessoryControlTapped control: UIControl) {
        //画面遷移
        
        //Annotationを非選択にしてColloutを非表示にする
        mapView.deselectAnnotation(view.annotation, animated: true)
    }
}

//Pickerコントローラー
extension MapViewController:UIImagePickerControllerDelegate{
    //写真を撮り終わった後の処理
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        if let pickerImage = info[UIImagePickerControllerOriginalImage] as? UIImage{
            //画像用の配列に入れる
            imageArray.append(pickerImage)
        }
        
        self.dismiss(animated: true, completion: nil)

        //最後に取得した位置でCLLocationCoordinate2Dを作成する
        let center : CLLocationCoordinate2D = CLLocationCoordinate2DMake((locationData?.coordinate.latitude)!, (locationData?.coordinate.longitude)!)
        mapView.setCenter(center, animated: true)
        

        let pin : MKPointAnnotation = MKPointAnnotation()
        pin.coordinate = center
        pin.title = "\(mapView.annotations.count)"
        pin.subtitle = "\(String(describing: locationData?.coordinate.latitude )),\(String(describing: locationData?.coordinate.longitude))"
        mapView.addAnnotation(pin)
    }
    
    //Pickerイメージでキャンセルされた時
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        self.dismiss(animated: true, completion: nil)
    }
}

//
extension MapViewController:UINavigationControllerDelegate{
    
}

Answer 1

解決済みですが、少し気になったことを書かせていただきます。

まず、アノテーションの生成は、pickerImageのif文の中に入れた方がいいと思います。
現在のコードだと、画像の取得に失敗したときにアノテーションと画像の数がズレてしまいます。
（失敗することがあるのかどうかは知りませんが‥）

pin.titleに入れる番号はimageArray.countを使うようにすれば「-1」という謎の補正が不要になります。
ただし、処理順をアノテーション生成 → 画像保存の順に変更しないといけません。

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
    
    self.dismiss(animated: true, completion: nil)
    
    if let pickerImage = info[UIImagePickerControllerOriginalImage] as? UIImage{
    
        //まずアノテーションを生成
        //最後に取得した位置でCLLocationCoordinate2Dを作成する
        let center : CLLocationCoordinate2D = CLLocationCoordinate2DMake((locationData?.coordinate.latitude)!, (locationData?.coordinate.longitude)!)
        mapView.setCenter(center, animated: true)
    
        let pin : MKPointAnnotation = MKPointAnnotation()
        pin.coordinate = center
        pin.title = "\(imageArray.count)" //※修正
        pin.subtitle = "\(String(describing: locationData?.coordinate.latitude )),\(String(describing: locationData?.coordinate.longitude))"
        mapView.addAnnotation(pin)
        
        //画像用の配列に入れる
        imageArray.append(pickerImage)
        
    } else {
        print("nil")
    }
}

Answer 2

ピンを表示する時の処理を以下のように変更しました。

    //ピンを表示する時の処理
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        
        // 現在地は外す
        if annotation is MKUserLocation {
            return nil
        }
        
        let pinID = "PIN"
        let annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: pinID)
        
        //var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: pinID) as? MKPinAnnotationView
        let size: CGSize = CGSize(width: 42, height: 42)
        
        //写真を描画する
        UIGraphicsBeginImageContext(size)
        imageArray[Int(annotation.title!!)!].draw(in: CGRect(x:0, y:0, width : size.width,height: size.height))
        
        let resizeImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        annotationView.annotation = annotation
        annotationView.image = resizeImage

        //タップした時に吹き出しが表示されるようにする
        annotationView.canShowCallout = true
        //吹き出しにボタンをつける
        annotationView.rightCalloutAccessoryView = UIButton(type: UIButtonType.detailDisclosure)
        
        return annotationView
    }

同時にPickerControlerの処理を以下のように変更しました

    //写真を撮り終わった後の処理
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
        
        self.dismiss(animated: true, completion: nil)
        
        //画像が作成できた場合 アノテーション作成 画像保存
        if let pickerImage = info[UIImagePickerControllerOriginalImage] as? UIImage{
            //アノテーション作成
            //最後に取得した位置でCLLocationCoordinate2Dを作成する
            let center : CLLocationCoordinate2D = CLLocationCoordinate2DMake((locationData?.coordinate.latitude)!, (locationData?.coordinate.longitude)!)
            mapView.setCenter(center, animated: true)               //地図のセンターに設定する
            let pin : MKPointAnnotation = MKPointAnnotation()       //ピンを作成する
            pin.coordinate = center                                 //最後に取得した位置情報を設定する
            pin.title = "\(imageArray.count)"
            
            pin.subtitle = "\(String(describing: locationData?.coordinate.latitude )),\(String(describing: locationData?.coordinate.longitude))"
            //地図にピンを立てる
            mapView.addAnnotation(pin)
            //画像用の配列に入れる
            imageArray.append(pickerImage)
        }else{
            print("画像作成に失敗した")
        }
        
    }

Answer 3

imageArray[ Int(annotation.title!!)! - 1].draw(in: CGRect(x:0, y:0, width : size.width,height: size.height))
と記述を変更したらエラーは出なくなりました。
ただ、写真は表示できていないままです

Comments

[fuzzball]

画像を表示するにはMKAnnotationViewを使いますので、
var annotationView = mapView.dequeueReusableAnnotationView(withIdentifier: pinID)
と
annotationView = MKAnnotationView(annotation: annotation, reuseIdentifier: pinID)
に変更すれば大丈夫かと。

[Bongo]

画像表示部分関連で気になったのですが、質問者さんご提示のコードですと、アノテーションビューを新規生成した場合は大丈夫そうですが、既存のアノテーションビューを取得した場合にはビューに画像を設定する部分がスキップされてしまうのではないかと思いました。このあたりの挙動はどうなるのでしょう?

[fuzzball]

するどいｗ
画像もそのまま使い回されてしまうので、おそらく質問者さんの意図した動作にはならないと思います。

[Robokun]

ご指摘ありがとうございます。
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView?
この部分のコードを変更して　意図した動きになりました。

解決方法に修正したコードを載せて起きます

Answer 4

imagePickerControllerの中で画像をimageArrayに追加し、併せてMKPointAnnotationを追加しており、画像の数とMKPointAnnotationの数が常に一致することを前提としている、ということでしょうか。
となると、もし両者の不一致があればimageArrayのアクセス時にインデックスの不整合が発生しうると思われます。
imagePickerControllerの当該部分周辺にブレークポイントを仕掛けるなどして、ご確認されるとよさそうです。

Comments

[Robokun]

ピンのTitleに振った番号で写真を読み出していたのですが、
ご指摘のようにimageArrayとのIndexとの不整合が起きていました。
imageArray[ Int(annotation.title!!)! - 1].draw(in: CGRect(x:0, y:0, width : size.width,height: size.height))
というように修正しました。

ただ、PINの画像が表示されないという症状は残ってしまいました
ただ、質問が分かりづらくなるので　新たな質問でその点はお尋ねしようと思います
ありがとうございました

Answer 5

・修正するヒント

＜当該エラー発生ステップ（行）の特定＞
・エラー時にスタックトレースを確認
・ステップ実行するとか、怪しいところにログ出力をさせてみるなどを行い、どの部分で当該エラーが出ているのかを絞り込みます

＜エラー発生ステップ内容の確認＞
・特定できない場合
特定の仕方が悪い可能性が高い、想定する場所とは違うところでエラーになっている可能性を疑ってみる

・エラーが発生しているステップを特定できたのであれば、そのステップが想定通りの動作をしているのか、変数は想定通りの値になっているのかなどを確認します。

・エラー内容から、配列のインデックス（添え字）の指定した値が、想定より大きい値になっている可能性があるので、その点を重点的に確認するだけで良いかもしれませんが。