SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

MKMapViewの利用

 SwiftUIでUIKitの機能を利用する場合は、最初にUIViewRepresentableプロトコルを実装したViewを作成します。UIViewRepresentableプロトコルを使ってMKMapViewを表示してみましょう。

地図を表示するViewを作成する

 UIViewRepresentableプロトコルを実装してMKMapViewを表示するViewを作成します。UIViewRepresentableプロトコル自体の仕様については、Appleのドキュメントで確認できます。

[リスト1]MapSample/ContentView.swift抜粋
import SwiftUI
import MapKit    // -------- ①

struct MapView: UIViewRepresentable {
    
    // 東京駅
    private var mapRegion = MKCoordinateRegion(center:
      CLLocationCoordinate2D(latitude: 35.6809591, longitude: 139.7673068),
      span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
    
    // View初期化処理
    func makeUIView(context: Context) -> MKMapView {    // -------- ②
        let mapView = MKMapView(frame: .zero)
        mapView.region = mapRegion
        mapView.selectableMapFeatures = [.physicalFeatures, .pointsOfInterest]  // 選択できる地点
        mapView.delegate = context.coordinator.         // delegate設定
        return mapView
    }
    
    // UI更新処理
    func updateUIView(_ uiView: MKMapView, context: Context) {
    }
    
    // デリゲート設定
    func makeCoordinator() -> MapViewCoordinator{    // -------- ③
         MapViewCoordinator(self)
    }
}

 MKMapViewを利用するために最初にMapKitをインポートします(①)。Viewの初期化処理の中で、東京駅を中心とした領域をMKMapViewに指定して初期化します(②)。同時に地図上の選択できる地点をselectableMapFeaturesプロパティで指定します。サンプルでは、physicalFeatures(山脈、河川などの地形上の特徴)、pointsOfInterest(美術館、カフェ、公園など人が集まる地点)を指定できるようにしています。地図の機能も利用したいので、MKMapViewDelegateを実装したMapViewCoordinatorクラスの名前でデリゲートを定義します(③)。MapViewCoordinatorクラスでは、次のようにMKMapViewDelegateを実装したクラスを定義し、そのメソッド内に処理を記述します。

[リスト2]MapSample/ContentView.swift抜粋
// MapViewのデリゲート
class MapViewCoordinator: NSObject, MKMapViewDelegate {
    var mapView: MapView
    
    init(_ control: MapView) {
        self.mapView = control
    }
# 以降はMKMapViewDelegateのメソッドで処理を記述
}

 上記の手順でMKMapViewの機能をSwiftUIからも利用できるようになります。

地図を表示する

 前項で作成したMapViewを画面に配置することで、地図を表示できます。

[リスト3]MapSample/ContentView.swift抜粋
struct ContentView: View {
    var body: some View {
        VStack {
            MapView().edgesIgnoringSafeArea(.all)
        }
    }
}
地図の表示
地図の表示

 UIViewRepresentableプロトコルを実装して定義したViewは、SwiftUIのUI部品と同じように扱うことができます。

次のページ
MKMapViewでの3Dマップの利用

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
iOS16の新機能に触れてみよう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 片渕 彼富(カタフチ カノトミ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/17010 2023/01/16 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング