iOS16/SwiftUI4で高度になった地図機能に触れてみよう

iOS16の新機能に触れてみよう 第3回

選択した地点から周りを見回せる「Look Around」

　Look Aroundとはその名の通り、周りを見回すという意味です。マップ上の選択した地点から周りを見回せるという、Google ストリートビューと同様の機能です。この機能も、iOS16以降は開発者が作成するアプリで利用できるようになりました。

Look Aroundを利用する

　地図のある地点の周りの画像情報は、MKLookAroundSceneというオブジェクトで扱います。3Dデータと同様に、MKLookAroundSceneオブジェクトは地図のすべての地点に存在するわけではなく、存在しないこともあります。まず最初に、MKLookAroundSceneを管理するクラスを定義します。

［リスト7］MapLookAroundSample/ContentView.swift抜粋

// MKLookAroundSceneを参照するためのオブジェクト
class LookAroundLoader: ObservableObject  {
    @Published var scene: MKLookAroundScene?
}

　MKLookAroundSceneオブジェクトが存在しないことも考慮して、オプショナル型のプロパティとして定義します。また、MKLookAroundSceneを参照できるのは、MKLookAroundViewControllerクラスというViewControllerなので、こちらもUIViewRepresentableプロトコルを用いてViewを作成します。

［リスト8］MapLookAroundSample/ContentView.swift抜粋

// MKLookAroundViewControllerをSwiftUIで使えるように
struct LookAroundView: UIViewRepresentable {
    @EnvironmentObject var lookAroundLoader: LookAroundLoader
    let view = MKLookAroundViewController()
    
    func makeUIView(context: Context) -> UIView {
        return view.view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
        // MKLookAroundViewがあれば表示する
        if let scene = lookAroundLoader.scene {
            view.scene = scene
        }
    }
}

　作成したLookAroundLoaderクラスをEnvironmentObjectプロパティで定義することで、Viewの外部と接続できるようにします。

地図からLook Aroundを検索する

　前項で作成した処理は、MKLookAroundSceneオブジェクトを管理し表示する準備するものでした。次は、MKLookAroundSceneオブジェクトを検索して取得するという処理を作成します。地図上のタップした地点でMKLookAroundSceneオブジェクトを取得して画面と共有するために、MapView構造体内にLookAroundLoaderクラスをEnvironmentObject型のプロパティとして宣言します。

［リスト9］MapLookAroundSample/ContentView.swift抜粋

struct MapView: UIViewRepresentable {
    @EnvironmentObject var mapSetting: MapSetting
    @EnvironmentObject var lookAroundLoader: LookAroundLoader
# 略

　MKLookAroundSceneオブジェクトを取得するには、MKLookAroundSceneRequestクラスを用います。MKLookAroundSceneRequestクラスには、位置情報が必要です。そこで、地図上のタップした地点にアノテーションを生成し、位置情報を取得します。その後で、アノテーションの位置情報からMKLookAroundSceneオブジェクトを取得するという処理をMKMapViewDelegateのメソッドを利用して作成します。

［リスト10］MapLookAroundSample/ContentView.swift抜粋

class MapViewCoordinator: NSObject, MKMapViewDelegate {
    # 略
    // アノテーション生成
    func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
        let markerView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "LookAroundPlace")
        markerView.animatesWhenAdded = true
        markerView.titleVisibility = .adaptive
        return markerView
    }
    
    // アノテーション選択時
    func mapView(_ mapView: MKMapView, didSelect annotation: MKAnnotation) {
        // アノテーションからMKLookAroundSceneを検索
        let sceneRequest = MKLookAroundSceneRequest(coordinate: annotation.coordinate)    // -------- ①
        sceneRequest.getSceneWithCompletionHandler { [unowned self] scene, error in
            if let error {
                print(error)
            } else if let scene {
                // MKLookAroundSceneがあればセットする
                self.mapView.lookAroundLoader.scene = scene    // -------- ②
            }
        }
    }
}

　アノテーションを生成する／アノテーションを選択するというメソッドは、MKMapViewDelegateに存在しますので、これらをそのまま利用しています。アノテーションを生成した処理の直後に、アノテーションを選択したという処理が自動的に実行されます。選択したアノテーションのcoordinateプロパティで位置情報が参照できますので、この位置情報からMKLookAroundSceneRequestを実行し（①）、MKLookAroundSceneオブジェクトが取得できた場合は、MapViewのプロパティであるlookAroundLoader.sceneにセットします。

Look Aroundを表示する

　最後にContentView側の処理を作成します。地図をタップした地点でLook Aroundのデータが存在すれば表示する、という処理を作成します。前項までで定義した処理をバインディング変数を用いて画面側と接続します。

［リスト11］MapLookAroundSample/ContentView.swift抜粋

struct ContentView: View {
    @ObservedObject var mapSetting = MapSetting()
    @ObservedObject var lookAroundLoader = LookAroundLoader()    // -------- ①
    
    var body: some View {
        ZStack {
            MapView().environmentObject(mapSetting).environmentObject(lookAroundLoader)    // -------- ②
                .edgesIgnoringSafeArea(.all)
        }.overlay(alignment: .bottom) {
            VStack {
                // MKLookAroundViewがあれば表示する
                if lookAroundLoader.scene != nil {    // -------- ③
                    HStack {
                        LookAroundView().environmentObject(lookAroundLoader)
                            .frame(width: 160).frame(height: 120)
                        Spacer()
                    }.padding([.leading, .top], 20)
                }
# 略

　ObservedObject型のプロパティとしてLookAroundLoaderクラスのインスタンスを宣言します（①）。MapViewと接続（②）、MKLookAroundViewが存在する場合は、オーバーレイの上部にLookAroundViewを表示する（③）、という処理を作成します。バインディング変数を利用して複数のViewでデータを共有することで、Look Aroundの機能も比較的短いコードでSwiftUIで利用できます。

Look Aroundの確認

　地図上の選択できる地点は、最初の節のサンプルの通りselectableMapFeaturesプロパティで指定しています。例えば地図上の「東京ステーションギャラリー」を選択すると、その地点にアノテーションが生成され、Look Aroundも取得され、表示されます。Look Aroundのサムネイルをクリックすると、MKLookAroundViewControllerが起動されGoogleストリートビューのように周りの景色を閲覧することができます。

まとめ

　iOS16以降で利用できる地図の新機能について説明しました。プレインストールされている地図アプリと同様の機能が、開発者が作成するアプリでも利用できることが実感できたと思います。次回はChartsの機能について説明します。

参考資料

• WWDC2022
• What's new in SwiftUI
• Apple Developer Documentation SwiftUI