ArcGIS Developers 開発リソース集 > スタートアップガイド > アプリ開発 > Android

Android

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

マップを表示する

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

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

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

ステップ

新しい Android Studio プロジェクトを作成します

Android Studio を使用してアプリを作成し、API を参照するように構成します。

Android Studio を開きます。
- [Welcome to Android Studio] ウィンドウで [New Project] をクリックします。
  または、メニューバーで [File] → [New] → [New Project] をクリックします。
- [Create New Project] ウィンドウで、[Phone and Tablet] タブが選択されていることを確認してから、[Empty Activity] を選択して、[Next] をクリックします。
- 次のウィンドウで、以下の項目を設定します。
  - Name: Display a map
  - Package name： com.example.app に変更します。または、組織に合わせて変更してください。
  - Save location: 新しいフォルダに設定します。
  - Minimum SDK: API 26 (“Oreo”; Android 8.0)
  - Build configuration language: Kotlin DSL (build.gradle.kts)
プロジェクトのツールウィンドウで、現在のビューが Android であることを確認してください。チュートリアルの説明では、そのビューを参照しています。

ビュー名が Android 以外の名前（プロジェクトやパッケージなど）の場合、プロジェクトツールウィンドウのタイトルバーの左端のコントロールをクリックし、リストから Android を選択します。

プロジェクトツールウィンドウから、[Gradle Scripts] > [build.gradle.kts (Project: Display_a_map)] を開きます。ファイルの内容を次のコードに置き換えます。

build.gradle.kts (Project: Display_a_map)

// すべてのサブプロジェクト/モジュールに共通の構成オプションを追加できる最上位のビルド ファイル
plugins {
    id("com.android.application") version "8.2.0" apply false
    id("org.jetbrains.kotlin.android") version "1.9.10" apply false
}

プロジェクトツールウィンドウから、[Gradle Scripts] > [build.gradle.kts (Module: app)] を開きます。ファイルの内容を次のコードに置き換えます。

build.gradle.kts (Module: Display_a_map)

    plugins {
        id("com.android.application")
        id("org.jetbrains.kotlin.android")
    }

    android {
        compileSdk = 34

        defaultConfig {
            applicationId = "com.example.app"
            minSdk = 26
            targetSdk = 34
            versionCode = 1
            versionName = "1.0"

            testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
        }

        buildTypes {
            release {
                isMinifyEnabled = false
                proguardFiles(
                    getDefaultProguardFile("proguard-android-optimize.txt"),
                    "proguard-rules.pro"
                )
            }
        }
        compileOptions {
            sourceCompatibility = JavaVersion.VERSION_17
            targetCompatibility = JavaVersion.VERSION_17
        }

        buildFeatures {
            compose = true
            buildConfig = true
        }

        composeOptions {
            kotlinCompilerExtensionVersion = "1.5.3"
        }

        kotlinOptions {
            jvmTarget = "17"
        }

        packaging {
            resources {
                excludes += "/META-INF/DEPENDENCIES"
            }
        }

        namespace = "com.example.app"
    }

    dependencies {
        implementation("androidx.core:core-ktx:1.12.0")
        implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
        implementation("androidx.activity:activity-compose:1.8.2")
        // Jetpack Compose の BOM
        implementation(platform("androidx.compose:compose-bom:2023.10.01"))
        // Jetpack Compose の依存関係
        implementation("androidx.compose.ui:ui")
        implementation("androidx.compose.material3:material3")
        // ArcGIS Map Kotlin SDK の依存関係
        implementation("com.esri:arcgis-maps-kotlin:200.4.0")
        // Toolkit の依存関係
        implementation(platform("com.esri:arcgis-maps-kotlin-toolkit-bom:200.4.0"))
        implementation("com.esri:arcgis-maps-kotlin-toolkit-geoview-compose")
    }

プロジェクトツールウィンドウから、[Gradle Scripts] > [settings.gradle.kts] を開きます。ファイルの内容を次のコードに置き換えます。

settings.gradle.kts (Display a map)

pluginManagement {
    repositories {
        google()
        mavenCentral()
        gradlePluginPortal()
    }
}

dependencyResolutionManagement {
    @Suppress("UnstableApiUsage")
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    @Suppress("UnstableApiUsage")
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://esri.jfrog.io/artifactory/arcgis") }
    }
}

rootProject.name = "Display a map"
include(":app")

Gradle の変更を同期します。[Sync now] プロンプトをクリックするか、ツールバーの更新アイコン(Sync Project with Gradle Files)をクリックします。同期に数分かかるかもしれません。
プロジェクトツールウィンドウから、[app] > [manifests] > [AndroidManifest.xml] を開きます。Android マニフェストを更新して、インターネット接続を許可します。

これらの新しい要素を manifest 要素内に挿入します。他のステートメントを変更または削除しないでください。

今後追加する ArcGIS の機能によっては、マニフェストに追加のアクセス許可を追加する必要がある可能性があります。

AndroidManifest.xml
```
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

// 追加開始
<uses-permission android:name="android.permission.INTERNET"/>
// 追加終了
```

マップを作成する

プロジェクトツールウィンドウから、[app] > [Kotlin+java] > [com.example.app] を右クリックし、リストから [New] > [package] を選択します。パッケージ名に com.example.app.screens と入力し、キーボードの [Enter] キーを押します。このステップで、すべての UI ファイルを含む新しいパッケージが作成されます。
作成した screens パッケージを右クリックし、リストから [New] > [Kotlin Class/File] を選択します。ポップアップウィンドウで [File] を選択し、ファイル名に MainScreen と入力し、キーボードの [Enter] キーを押します。

MainScreen.kt で、Android Studio によって自動的に挿入されたコード行をすべて削除します。次に、以下のオプトインアノテーション、パッケージ名、インポートを追加します。

以下のコードブロックでコンポーザブル関数 com.arcgismaps.tookit.geoviewcompose.MapView をインポートしていることを確認してください。これは ArcGIS Maps SDK for Kotlin Toolkit で定義されています。コンポーザブルに対応したコードでは ArcGIS Maps SDK API の com.arcgismaps.mapping.view.MapView という名前のクラスは使用しないでください。

MainScreen.kt

@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.Basemap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.BasemapStyleLanguageStrategy
import com.arcgismaps.mapping.BasemapStyleParameters
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.example.app.R
import java.util.Locale

ArcGISMap を返す createMap() という名前のトップレベル関数を作成します。

MainScreen.kt
```
fun createMap(): ArcGISMap {

}
```
BasemapStyle.ArcGISTopographic を使用して ArcGISMap を作成し、マップ上で apply{} を呼び出します。この関数は ArcGISMap を返します。

apply{} の詳細については Kotlin の Scope functions を参照してください。

MainScreen.kt
```
fun createMap(): ArcGISMap {

    // 追加開始
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {

    }
    // 追加終了

}
```

apply ブロックで、x (経度) と y (緯度) の座標と縮尺を持つ Viewpoint を作成します。この Viewpoint を ArcGISMap の initialViewpoint プロパティに割り当てます。また、ベースマップのデフォルトのラベル表示は英語のため、日本語に変更します。

MainScreen.kt

fun createMap(): ArcGISMap {

    // 追加開始
    val basemapStyleParams = BasemapStyleParameters()
    basemapStyleParams.languageStrategy = BasemapStyleLanguageStrategy.Specific(Locale("ja"))
    // 追加終了        

    return ArcGISMap(Basemap(BasemapStyle.ArcGISTopographic, basemapStyleParams)).apply {

        // 追加開始
        initialViewpoint = Viewpoint(
            latitude = 35.360626,
            longitude = 138.727363,

            scale = 200000.0

        )
        // 追加終了

    }

}

マップを保持する MainScreen を作成する。

MapView を呼び出す MainScreen という名前のコンポーザブル関数を作成します。

MainScreen.kt

// 追加開始
@Composable
fun MainScreen() {

}
// 追加終了

fun createMap(): ArcGISMap {
    ・・・

remember ブロックを追加し、その中で createMap() を呼び出します。そして remember を map というローカル変数に割り当てます。

トップレベルのコンポーザブル関数は再構成時に状態を保持するために使用されます。

MainScreen.kt
```
@Composable
fun MainScreen() {

    // 追加開始
    val map = remember {
        createMap()
    }
    // 追加終了

}
```

Android Jetpack Compose からいくつかのコンポーザブル関数を呼び出します。Scaffold を呼び出し、アプリ名 (R.string.app_name) を含む Text で TopAppBar を渡します。

MainScreen.kt

@Composable
fun MainScreen() {

    val map = remember {
        createMap()
    }

    // 追加開始
    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

    }
    // 追加終了

}

Scaffold の末尾のラムダで、ArcGIS Maps SDK for Kotlin Toolkit で定義されている MapView コンポーザブルを呼び出し、最大サイズとデフォルトのパディングを持つ Modifier を設定します。そして、map を arcGISMap パラメーターとして渡します。

MainScreen.kt

@Composable
fun MainScreen() {

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

        // 追加開始
        MapView(
            modifier = Modifier.fillMaxSize().padding(it),
            arcGISMap = map
        )
        // 追加終了

    }

}

MainActivity クラス内で MainScreen を呼び出す

[app] > [kotlin+java] > [com.example.app] の MainActivity.kt を開きます。パッケージ宣言 (最初の行) と MainActivity クラスの定義以外のすべての行を削除します。

MainActivity.kt
```
package com.example.app

class MainActivity : ComponentActivity() {

}
```

MainActivity.kt に import 文を追加します。

MainActivity.kt

package com.example.app

// 追加開始
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.example.app.screens.MainScreen
import com.example.app.ui.theme.DisplayAMapTheme
// 追加終了

class MainActivity : ComponentActivity() {

}

onCreate() ライフサイクル関数の setContent() ブロックでは、デフォルトのテーマ設定を適用して、コンポーザブル関数である MainScreen を呼び出します。これを行うには、onCreate() に以下のコードを追加します。

MainActivity.kt

class MainActivity : ComponentActivity() {

    // 追加開始
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            DisplayAMapTheme {
                MainScreen()
            }
        }

    }
    // 追加終了
}

API キーを設定する

API キーを使用すると、ArcGIS Online でホストされているサービス、Web マップ、および Web シーンにアクセスできるようになります。

MainActivity クラスで setApiKey() メソッドを作成し、ApiKey.create() を呼び出し、API キーを文字列として渡すことで、ArcGISEnvironment.apiKey プロパティを設定します。引用符を忘れないでください。

MainActivity.kt
```
class MainActivity : ComponentActivity() {
    ・・・
}

// 追加開始
private fun setApiKey() {

    ArcGISEnvironment.apiKey = ApiKey.create("API キー")

}
// 追加終了
```

onCreate() ライフサイクルメソッド内で setContent{} の前に setApiKey() を呼び出します。

MainActivity.kt

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // 追加開始
        setApiKey()
        // 追加終了

        setContent {
            DisplayAMapTheme {
                MainScreen()
            }
        }

    }

}

アプリを実行する

[Run] > [Run] > [app] をクリックして、アプリを実行します。

Android Studio では、アプリを実行するのに、実際の Android 端末と Android エミュレータの 2 通りの方法があります。

Android デバイス

パソコンと Android 端末を、USB または Wi-Fi で接続します。詳しくは、「Android デバイスを接続する方法」をご覧ください。

Android エミュレータ

Android エミュレータで動作させるための AVD(Android Virtual Device)を作成します。詳しくは、「Android Emulator 上でアプリを実行する」をご覧ください。

デバイスの選択

Android Studio でアプリをビルドして実行する場合、まずデバイスを選択する必要があります。Android Studio のツールバーから、現在利用可能なデバイス（仮想および物理の両方）のドロップダウンリストにアクセスできます。

ツールバーのリストにアクセスできない場合は、[Tools] → [Device Manader] をクリックします。

富士山を中心に、地形ベースマップレイヤーが追加されたマップが表示されます。マップビュー上でマウスホイールをダブルクリック、ドラッグ、およびスクロールして、マップを操作します。

アプリの動作が確認できたら ArcGIS のセキュリティと認証について学びましょう！

Android

マップを表示する

ステップ

新しい Android Studio プロジェクトを作成します

マップを作成する

マップを保持する MainScreen を作成する。

MainActivity クラス内で MainScreen を呼び出す

API キーを設定する

アプリを実行する

Android デバイス

Android エミュレータ

デバイスの選択