# \[React Native]SDKを導入する

{% hint style="warning" %}
**導入時の注意事項**

新規でのReact Native環境への導入、もしくは既存環境をReact Native環境に移行する場合、担当から詳細をご案内しております。\
適宜担当までご連絡をお願い致します。
{% endhint %}

## 前提条件

KARTE React Native SDKを導入するための前提条件に関しては、[公開リポジトリのREADME](https://github.com/plaidev/karte-react-native?tab=readme-ov-file#requirements)をご参照ください。

## 導入手順（共通）

### パッケージをインストールする

npm または yarn を利用してパッケージをインストールしてください。

{% tabs %}
{% tab title="npm" %}
{% code overflow="wrap" %}

```shell
npm install --save @react-native-karte/core
```

{% endcode %}
{% endtab %}

{% tab title="yarn" %}
{% code overflow="wrap" %}

```shell
yarn add @react-native-karte/core
```

{% endcode %}
{% endtab %}
{% endtabs %}

パッケージのインストールが完了したら、対応するプラットフォーム毎の導入手順に従い設定を進めてください。

{% hint style="warning" %}
**利用可能なパッケージについて**

@react-native-karte/core パッケージはイベントトラッキング機能のみを提供します。\
アプリ内メッセージ・プッシュ通知受信などのその他機能については、別途パッケージを導入する必要があります。\
利用可能なモジュールについては、[利用可能なパッケージ一覧](#利用可能なパッケージ一覧) をご覧ください。
{% endhint %}

## 導入手順（iOS）

### STEP1: Pod をインストール

{% code overflow="wrap" %}

```shell
USE_FRAMEWORKS=static npx pod-install ios
```

{% endcode %}

### STEP2: 設定ファイルをプロジェクトに追加する

SDKの初期化に必要な値（アプリケーションキーなど）が定義された設定ファイルをプロジェクトに追加します。

1. 管理画面から設定ファイルをダウンロードする\
   設定ファイルのダウンロード方法については[サポートサイト](https://support.karte.io/post/SRlsXvrikIKjpZcfahGdc)をご覧ください。
2. 設定ファイルをプロジェクト直下に配置する\
   設定ファイルを Xcodeプロジェクトのルートに追加して必要なターゲット全てに含まれるようにチェックを行います。

![](/files/xfmWELcIXG3RTYZuBSP8)

### STEP3: SDKの初期化コードを追加する

次にアプリケーションにSDKの初期化コードを追加します。

1. SDKのインポート宣言を追加 `UIApplicationDelegate (RCTAppDelegate)` を実装したクラスがあるファイルの先頭にインポート宣言を追加します。

{% tabs %}
{% tab title="Swift" %}
{% code title="AppDelegate.swift" overflow="wrap" %}

```swift
import KarteCore
```

{% endcode %}
{% endtab %}

{% tab title="Objective-C" %}
{% code title="AppDelegate.m" overflow="wrap" %}

```objectivec
#import <UIKit/UIKit.h>
#import <AppTrackingTransparency/ATTrackingManager.h>
#import <KarteCore/KarteCore-Swift.h>
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. SDKの初期化コードを追加 `application(_:didFinishLaunchingWithOptions:)` メソッド内に初期化コードを追加します。

{% tabs %}
{% tab title="Swift" %}
{% code title="AppDelegate.swift" overflow="wrap" %}

```swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  KarteApp.setup()
  // ...
  return true
}
```

{% endcode %}
{% endtab %}

{% tab title="Objective-C" %}
{% code title="AppDelegate.m" overflow="wrap" %}

```objectivec
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [KRTApp setupWithConfiguration:[KRTConfiguration default]];
  ...
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

### STEP4: URLスキームハンドラを追加する

KARTEで独自に定義したURLスキームを処理するために、`application(_:open:options:)` メソッド内にハンドラを追加します。

{% tabs %}
{% tab title="Swift" %}
{% code title="AppDelegate.swift" overflow="wrap" %}

```swift
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
  return KarteApp.application(app, open: url)
}
```

{% endcode %}
{% endtab %}

{% tab title="Objective-C" %}
{% code title="AppDelegate.m" overflow="wrap" %}

```objectivec
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  return [KRTApp application:app openURL:url];
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

なお iOS13 から利用可能な `UISceneDelegate` を実装している場合は、`scene(_:willConnectTo:options:)` および `scene(_:openURLContexts:)` メソッド内にハンドラを追加します。

{% tabs %}
{% tab title="Swift" %}
{% code title="SceneDelegate.swift" overflow="wrap" %}

```swift
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
  if let URLContext = connectionOptions.urlContexts.first {
    _ = KarteApp.application(UIApplication.shared, open: URLContext.url)
  }
}

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
  if let URLContext = URLContexts.first {
    _ = KarteApp.application(UIApplication.shared, open: URLContext.url)
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Objective-C" %}
{% code title="SceneDelegate.m" overflow="wrap" %}

```objectivec
- (void)scene:(UIScene *)scene willConnectToSession:(UISceneSession *)session options:(UISceneConnectionOptions *)connectionOptions {
  UIOpenURLContext *URLContext = connectionOptions.URLContexts.anyObject;
  if (URLContext) {
    [KRTApp application:[UIApplication sharedApplication] openURL:URLContext.URL];
  }
}

- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
  UIOpenURLContext *URLContext = URLContexts.anyObject;
  if (URLContext) {
    [KRTApp application:[UIApplication sharedApplication] openURL:URLContext.URL];
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Objective-C から SDK を利用する**

Objective-C から SDK を利用した場合、ビルド時にエラーが発生する場合があります。\
エラーが発生した場合は、[こちら](/ios-sdk-appendix/appendix-using-objective-c-ios-sdk.md) の記事を参考にしてください。
{% endhint %}

## 導入手順（Android）

### STEP1: SDKの初期化コードを追加する

1. SDKのインポート宣言を追加 `android.app.Application` クラスを継承したクラスがあるファイルの先頭にインポート宣言を追加します。

{% tabs %}
{% tab title="Kotlin" %}
{% code title="YourApplication.kt" overflow="wrap" %}

```kotlin
import io.karte.android.KarteApp
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code title="YourApplication.java" overflow="wrap" %}

```java
import io.karte.android.KarteApp;
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. SDKの初期化コードを追加 `onCreate` メソッド内に初期化コードを追加します。

{% tabs %}
{% tab title="Kotlin" %}
{% code title="YourApplication.kt" overflow="wrap" %}

```kotlin
class YourApplication : Application() {
  override fun onCreate() {
    super.onCreate()
    KarteApp.setup(this)
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code title="YourApplication.java" overflow="wrap" %}

```java
public class YourApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    KarteApp.setup(this);
  }
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**アプリケーションキーについて**

初期化時に指定するアプリケーションキー（Application Key）は、KARTE管理画面に記載されているAPIキーとは異なります。取得方法は[アプリケーションキーの確認方法](https://support.karte.io/post/1PbomDUORPoCrcvos2rq3T#1-0)をご確認ください。
{% endhint %}

### STEP2: 設定ファイルをプロジェクトに追加する

SDKの初期化に必要な値（アプリケーションキーなど）が定義された設定ファイルをプロジェクトに追加します。

1. 管理画面から設定ファイルをダウンロードする\
   設定ファイルのダウンロード方法については[サポートサイト](https://support.karte.io/post/SRlsXvrikIKjpZcfahGdc)をご覧ください。
2. 設定ファイルをプロジェクトに配置する 設定ファイルをプロジェクトのリソースに追加します。\
   該当するビルドバリアントの `res/values` ディレクトリに配置してください。

   ![](/files/dpmMgekDjbeJkVcymo7B)

### STEP3: 暗黙的インテントを解決するための設定を追加する（オプション）

一部の機能 \*1 を利用するためには、暗黙的インテントを解決するための設定を AndroidManifest.xml に追加する必要があります。

\*1. 管理画面に表示したQRコードを読み込みによるSDK機能の呼び出し

{% code title="AndroidManifest.xml" overflow="wrap" %}

```xml
<activity android:name=".XxxActivity">

  <!-- 任意のActivityに対して、以下の指定を行なってください -->
  <intent-filter >
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="<アプリ毎に定義したスキーム名を指定>" android:host="karte.io" />
  </intent-filter>
</activity>
```

{% endcode %}

## 利用可能なパッケージ一覧

KARTE React Native SDKでは機能毎にパッケージを提供しております。\
利用する機能に応じて、部分的にパッケージを導入することが可能です。

なお `core` パッケージの導入は必須です。

| Package name                         | Description                                                                           |
| ------------------------------------ | ------------------------------------------------------------------------------------- |
| @react-native-karte/core             | イベントトラッキング機能を提供します。                                                                   |
| @react-native-karte/in-app-messaging | アプリ内メッセージ機能を提供します。[（導入手順）](/react-native-sdk/iam-react-native-sdk.md)                 |
| @react-native-karte/notification     | プッシュ通知の受信および効果測定機能を提供します。[（導入手順）](/react-native-sdk/notification-react-native-sdk.md) |
| @react-native-karte/variables        | 設定値配信機能を提供します。[（導入手順）](/react-native-sdk/variables-react-native-sdk.md)               |
| @react-native-karte/visual-tracking  | ビジュアルトラッキング機能を提供します。[（導入手順）](/react-native-sdk/visual-tracking-react-native-sdk.md)   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://app.developers.karte.io/react-native-sdk/setup-react-native-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.