SDKを導入する

前提条件

本SDKは、React Native 0.60 以上で動作することを確認しております。

なお各プラットフォーム毎に導入条件が定められております。

導入手順(共通)

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

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

npm install --save @react-native-karte/core
yarn add @react-native-karte/core

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

🚧

利用可能なパッケージについて

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

導入手順(iOS)

STEP1: Pod をインストール

npx pod-install ios

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

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

  1. 管理画面から設定ファイルをダウンロードする
    設定ファイルのダウンロード方法についてはサポートサイトをご覧ください。

  2. 設定ファイルをプロジェクト直下に配置する
    設定ファイルを Xcodeプロジェクトのルートに追加して必要なターゲット全てに含まれるようにチェックを行います。

516

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

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

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

🚧

インポート時にエラーが表示される場合の対処方法について (React Native 0.68以上)

AppDelegate クラスが Objective-C++ (.mm) に書かれている場合に Use of '@import' when C++ modules are disabled, consider using -fmodules and -fcxx-modules のエラーが出る場合があります。
その場合はアプリケーションの Targets -> Build Settings -> Apple Clang - Custom Compiler Flags > Other C++ Flags-fcxx-modules フラグを追加してビルドすることでエラーを消すことができます。

設定画面については、以下のスクリーンショットを参照してください。

998
  1. SDKの初期化コードを追加
    application(_:didFinishLaunchingWithOptions:) メソッド内に初期化コードを追加します。
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [KRTApp setupWithConfiguration:[KRTConfiguration default]];
  ...
}

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

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

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

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

- (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];
  }
}

🚧

Objective-C から SDK を利用する

Objective-C から SDK を利用した場合、ビルド時にエラーが発生する場合があります。
エラーが発生した場合は、こちら の記事を参考にしてください。

導入手順(Android)

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

  1. SDKのインポート宣言を追加
    android.app.Application クラスを継承したクラスがあるファイルの先頭にインポート宣言を追加します。
import io.karte.android.KarteApp
  1. SDKの初期化コードを追加
    onCreate メソッド内に初期化コードを追加します。
public class YourApplication extends Application {
  
  @Override
  public void onCreate() {
    super.onCreate();
    KarteApp.setup(this, "アプリケーションキー");
  }
}

STEP2: 暗黙的インテントを解決するための設定を追加する(オプション)

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

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

<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>

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

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

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

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