Swift

スタートアップガイド

アプリ開発

Swift

出典：ArcGIS Maps SDK for Swift - Tutorials - Display a map

マップを表示する

このチュートリアルでは ArcGIS Maps SDK for Swift を使用して、マップとベースマップレイヤーを表示する方法を紹介します。

マップには、地理データのレイヤーが含まれています。マップには、ベースマップレイヤーと、オプションで 1 つ以上のデータレイヤーを追加できます。マップビューを使用し、場所とズームレベルを設定することで、マップの特定の領域を表示できます。

このチュートリアルでは、地形ベースマップレイヤーを使用して、富士山付近を表示する地図を作成します。

このチュートリアルのトピックの背景情報については、Mapping API and location services guide の Maps (2D) とベースマップを参照してください。

前提条件

このチュートリアルを実施するには、以下が必要です。

API キーにアクセスするための ArcGIS 開発者アカウント。アカウントをお持ちでない場合は、サインアップ（無料）してください。アカウントの作成方法は「開発者アカウントの作成」をご覧ください。
開発環境がシステム要件を満たしていることを確認します。

認証の設定

このチュートリアルで使用するセキュアな ArcGIS ロケーションサービスにアクセスするには、ArcGIS Location Platform または ArcGIS Online アカウントを使用して、API キー認証またはユーザー認証を実装する必要があります。

このチュートリアルでは、API キー認証またはユーザー認証を実装することができます。以下の違いを比較してください。

ユーザーはサインインする必要がありません。
適切な権限を持つ API キーの認証情報を作成する必要があります。
API キーは長期間のアクセストークンです。
サービス使用料は API キーの所有者/開発者に請求されます。
実装が最も簡単な認証方法です。
新規の ArcGIS 開発者に推奨される方法です。

詳しくは API キー認証をご覧ください。

このチュートリアルで使用するセキュアなリソースにアクセスする権限を持つ、新しい API キーのアクセストークンを作成します。

API キーの作成のチュートリアルを完了し、以下の権限を持つ API キーを作成します。
- Privileges
  - Location services > Basemaps
API キーのアクセストークン をコピーし、安全な場所に貼り付けます。これは後のステップで使用します。

ユーザーは、ArcGIS アカウントでサインインする必要があります。
ユーザーアカウントには、アプリケーションで使用する ArcGIS サービスにアクセスする権限が必要です。
OAuth 認証情報の作成が必要です。
アプリケーションは、リダイレクト URL とクライアント ID を使用します。
サービスの使用料は、アプリケーションにサインインしたユーザーの組織に請求されます。

詳しくは、ユーザー認証をご覧ください。

このチュートリアルで使用するセキュアなリソースにアクセスするための新しい OAuth 認証情報を作成します。

ユーザー認証用の OAuth 認証情報を作成するチュートリアルを完了します。

client ID は、認証サーバー上でアプリを一意に識別します。サーバーは、提供された Client ID を持つアプリを見つけることができない場合、認証を続行しません。

Redirect URL（callback url とも呼ばれる）は、OAuth ログイン後にシステムがアプリに制御を戻す際に、認証サーバーからの応答を識別するために使用されます。必ずしもユーザーがナビゲートできる有効なエンドポイントを表しているわけではないので、redirect URL は my-app://auth のようなカスタムスキームを使用できます。アプリのコードで使用する redirect URL が、認証サーバーで設定された redirect URL と一致することを確認することが重要です。
ClientID と RedirectURL をコピーして安全な場所に貼り付けます。これらは後のステップで使用します。

このアプリケーションにアクセスするすべてのユーザーには、ベースマップスタイルサービスにアクセスするためのアカウント権限が必要です。

セキュリティと認証ガイド : 認証の種類について詳しくは、認証の種類をご覧ください。

開発またはダウンロード

このチュートリアルを完了するには、2 つの選択肢があります。

オプション 1:コードを開発するか
オプション 2:完成したソリューションをダウンロードする

オプション 1:コードを開発する

新しいアプリを作成する

始めるには、Xcode を使って iOS アプリを作成し、API を参照するように設定する。

Xcode を開き、メニューバーから [File] > [New] > [Project] をクリックします。
- [Choose a template for your new project] ウィンドウで、次の値を設定します。
  - Multiplatform iOS
  - Application App
- [Next] をクリックします。
- [Choose options for your new project] ウィンドウで、次の値を設定します。
  - Product Name: <your app name>
  - Organization Identifier: <任意の組織>
  - Interface: SwiftUI
  - Language: Swift
- 他のすべてのオプションのチェックを外します。
- [Next] をクリックします。
- プロジェクトを保存する場所を選択して、[Create] をクリックします。
Project Navigator で、<your app name>.App をクリックします。Editor で、.App struct を右クリックします。 [Refactor]、[Rename…] の順に選択して、構造体の名前を MainApp に変更します。右上の [Rename] ボタンをクリックして、新しい名前を確認します。これにより、影響を受けるすべての領域の構造体 (struct) とファイルの名前が変更されます。
Swift Package Manager を使用して API への参照を追加します。
MainApp.swift ファイルで、ArcGIS のインポート後にエラーが表示される場合があります。Scene と Scene protocol を区別することで、エラーを解決します。これを行うには、SwiftUI 接頭辞を Scene に追加します。
MainApp.swift
```
// 追加開始
var body: some SwiftUI.Scene {
// 追加終了
    WindowGroup {
        ContentView()

    }
}
```

開発者認証情報を設定する

アプリのユーザーが ArcGIS Location Services にアクセスできるようにするには、認証の設定ステップで作成した開発者認証情報を使用して、リソースへの要求を認証します。

API キーアクセストークンを ArcGISEnvironment に渡します。

Project Navigator で、[MainApp.swift] をクリックします。

MainApp 構造体にイニシャライザーを実装し、ArcGISEnvironment.apiKey プロパティーに API キーのアクセストークンを設定します。

MainApp.swift

import SwiftUI

import ArcGIS

@main
struct MainApp: App {

    // 追加開始
    init() {
        ArcGISEnvironment.apiKey = APIKey("<#アクセストークンを入力#>")
    }
    // 追加終了

ベストプラクティス : アクセストークンは、このチュートリアルの便宜のためにコードに直接格納されています。本番環境では、認証情報をソースコードに直接保存しないでください。

Authenticator toolkit コンポーネントを使用して OAuth 認証情報を管理し、ArcGISEnvironment に渡します。

以下の手順に従って、ArcGIS Maps SDK for Swift Toolkit パッケージをアプリケーションに追加します。

Project Navigator で、[MainApp.swift] をクリックします。

コードに import ArcGISToolkit を追加します。
MainApp 構造体で Authenticator ツールキットコンポーネントを宣言し、初期化します。
MainApp 構造体にイニシャライザーを実装します。
OAuthUserConfiguration を使用して Authenticator の新しいインスタンスを作成します。
PortalURL、clientID、および redirectURL の値を追加します。
authenticator を ArcGISEnvironment.authenticationManager に渡して、チャレンジを処理します。

MainApp.swift

import SwiftUI

import ArcGIS
// 追加開始
import ArcGISToolkit
// 追加終了
@main
struct MainApp: App {
// 追加開始
@ObservedObject var authenticator: Authenticator

init() {

    authenticator = Authenticator(oAuthUserConfigurations: [
        OAuthUserConfiguration(

            portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
            clientID: ""<#YOUR-CLIENT-ID#>"",
            redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!

        )
    ])
    ArcGISEnvironment.authenticationManager.handleChallenges(using: authenticator)

}
// 追加終了

body で、ContentView に.authenticator(authenticator) 修飾子を追加します。

MainApp.swift

    var body: some SwiftUI.Scene {

        WindowGroup {
            ContentView()

                // 追加開始
                .authenticator(authenticator)
                // 追加終了
        }
    }

ベストプラクティス : OAuth 認証情報は、このチュートリアルの便宜のためにコードに直接格納されています。本番環境では、認証情報をソースコードに直接保存しないでください。

マップの追加

地形ベースマップレイヤーを含むマップを作成します。マップは、富士山付近が中心になります。

Project Navigator で、[ContentView.swift] をクリックします。
Editor で、API を参照する import ステートメントを追加します。
ContentView.swift
```
import SwiftUI

// 追加開始
import ArcGIS
// 追加終了
```

デフォルト値を持つ Map タイプの map という名前の @State プロパティーラッパーを追加します。arcGISTopographic ベースマップスタイルで Map を作成し、それを返します。

ContentView.swift

struct ContentView: View {

    // 追加開始
    @State private var map = {
        //ベースマップのラベルを日本語で表示します。
        let bsp = BasemapStyleParameters(language: BasemapStyleLanguage.specific(Locale.Language(identifier: "ja")))

        let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))

        return map
    }()
    // 追加終了

}

ArcGIS Enterprise ユーザーは、ArcGIS Location ベースマップスタイルサービスにアクセスできません。ArcGIS Enterprise ユーザ向けのアプリを作成する場合は、ユーザーがアクセスできるベースマップを含む マップ を作成する必要があります。

マップの initialViewpoint プロパティーを、富士山付近の座標を持つ Viewpoint で設定します。

ContentView.swift

struct ContentView: View {

    @State private var map = {
        //ベースマップのラベルを日本語で表示します。
        let bsp = BasemapStyleParameters(language:BasemapStyleLanguage.specific(Locale(languageCode: "ja")))
        let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))

        // 追加開始
        map.initialViewpoint = Viewpoint(latitude: 35.360626, longitude: 138.727363, scale: 200000)
        // 追加終了

        return map
    }()

}

マップビューの追加

マップビューは、マップを表示する UI コンポーネントです。また、タッチジェスチャを使用したナビゲーションなど、マップとのユーザーインタラクションも処理します。Xcode と SwiftUI を使用してマップビューを追加します。

body で、前の手順で作成したマップを使用して MapView を作成します。

ContentView.swift

struct ContentView: View {

    @State private var map = {
        //ベースマップのラベルを日本語で表示します。
        let bsp = BasemapStyleParameters(language:BasemapStyleLanguage.specific(Locale(languageCode: "ja")))
        let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))

        map.initialViewpoint = Viewpoint(latitude: 35.360626, longitude: 138.727363, scale: 200000)

        return map
    }()

    var body: some View {

        // 追加開始
        MapView(map: map)
        // 追加終了

    }

}

MapView は Apple View プロトコルに準拠しています。

ソリューションを実行する

Project Navigator で、[MainApp.swift] をクリックします。
ContentView に .ignoresSafeArea() 修飾子を追加します。ContentView の body には MapView が含まれており、この修飾子により、マップビューがセーフエリアを超えてすべての端まで表示されるようになります。
MainApp.swift
```
var body: some Scene {
    WindowGroup {
        ContentView()
            // 追加開始
            .ignoresSafeArea()
            // 追加終了

    }
}
```
<Command + R> を押してアプリを実行します。
Xcode シミュレータを使用する場合、システムは以下の最低要件を満たしている必要があります ( macOS 14 (Sonoma), Xcode 16, iOS 18)。物理的なデバイスを使用する場合は、システム要件を参照してください。
富士山を中心とした地形ベースマップレイヤーのマップが表示されます。マップビューをピンチ、ドラッグ、およびダブルタップして、マップを操作します。

あるいは、以下のチュートリアルソリューションをダウンロードすることもできます。

オプション 2:完成したソリューションをダウンロードする

Download solution をクリックし、マシンの任意の場所にファイルを解凍します。
Xcode で .xcodeproj ファイルを開きます。

ダウンロードしたソリューションには認証情報が含まれていないため、認証の設定セクションで作成した開発者認証情報を追加する必要があります。

ソリューションに開発者認証情報を設定する

アプリのユーザが ArcGIS 位置情報サービスにアクセスできるようにするには、認証の設定ステップで作成した開発者認証情報を使用して、リソースへの要求を認証します。

API キーアクセストークンを ArcGISEnvironment に渡します。

Project Navigator で、[MainApp.swift] をクリックします。

AuthenticationMode を .apiKey に設定する。

MainApp.swift

// Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.

// 追加開始
private var authenticationMode: AuthenticationMode { .apiKey }
// 追加終了

apiKey プロパティーに API キーのアクセストークンを設定します。

MainApp.swift

// Please enter an API key access token if your application uses API key authentication.

// 追加開始
private let apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")
// 追加終了

Authenticator toolkit コンポーネントを使用して OAuth 認証情報を管理し、ArcGISEnvironment に渡します。

Project Navigator で、[MainApp.swift] をクリックします。

AuthenticationMode を .user に設定します。

MainApp.swift

// Change the `AuthenticationMode` to `.user` if your application uses OAuth credentials.

    // 追加開始
    private var authenticationMode: AuthenticationMode { .user }
    // 追加終了

portalURL、clientID、redirectURL の値を設定します。

MainApp.swift

// Setup an `Authenticator` with OAuth configuration if your application uses OAuth credentials.
@ObservedObject var authenticator = Authenticator(
    oAuthUserConfigurations: [
        OAuthUserConfiguration(

            // Please enter OAuth credentials for user authentication.

            // 追加開始
            portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
            clientID: "<#YOUR-CLIENT-ID#>",
            redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!
            // 追加終了

        )
    ]
)

アプリを実行する

アプリを実行するには、<Command + R> キーを押します。

Xcode シミュレータを使用する場合、システムは以下の最低要件を満たしている必要があります ( macOS 14 (Sonoma), Xcode 16, iOS 18)。物理的なデバイスを使用する場合は、システム要件を参照してください。

カリフォルニア州サンタモニカ山脈を中心とした地形ベースマップレイヤーの地図が表示されるはずです。マップビューをピンチ、ドラッグ、ダブルタップしてマップを探索します。

次のチュートリアル

これらのチュートリアルでは、追加の API 機能、ArcGIS ロケーションサービス、および ArcGIS ツールの使用方法について説明します。(英語ページ)

Kotlin Flutter

Swift

マップを表示する

前提条件

認証の設定

開発またはダウンロード

オプション 1:コードを開発する

新しいアプリを作成する

開発者認証情報を設定する

マップの追加

マップ ビューの追加

ソリューションを実行する

オプション 2:完成したソリューションをダウンロードする

ソリューションに開発者認証情報を設定する

アプリを実行する

次のチュートリアル

マップビューの追加