本記事では、b→dash mobile SDKをReact Nativeプロジェクトに導入する方法について紹介しています。
導入手順は、大きく下記の4つです。

　1. 推奨環境/動作環境を確認する
　2. ReactNativeの環境設定を行う
　3. iOSの環境設定を行う
　4. Androidの環境設定を行う

各手順の詳細は、以下をご参照ください。

※ b→dash mobile SDKのファイル「BDash-Mobile-ReactNativeSDK_vX.X.X.zip」については、貴社担当のカスタマーサクセス担当からお渡しいたします

1. 推奨環境/動作環境を確認する

b→dash mobile SDK(ReactNative用)の推奨環境と動作環境は、下記のとおりです。

ReactNativeの動作環境

※ 動作バージョンの調整(ダウングレードなど)が難しい場合は、貴社カスタマーサクセス担当までご連絡をお願いいたします

iOSの動作環境

Androidの動作環境

ビルド環境は、下記のとおりです。

※ targetSdkVersion: 29は現在対応中ですが、現行版で動作に影響する事象は確認できておりませんので、29に変更した際は動作確認いただくようにお願いいたします

本SDKの計測は、下記のプラットフォームで動作確認を行っております。

・Android 4.1, 4.2: SDK ver2系から動作対象外
・Android 4.4: SDK ver2.4.1から動作対象外
・Android 5.0: 動作確認済
・Android 6.0 / 7.0 / 8.0
・Android 9.0: 動作確認済(後述するAndroidManifest.xmlに追加設定必須)
・Android 10
・Android 11: 検証中

2. ReactNativeの環境設定を行う

ReactNativeプロジェクトへのSDK導入手順と、Expoを利用しているプロジェクトの追加対応について説明します。

SDKのインストール

b→dash mobile SDKは「BDash-Mobile-ReactNativeSDK_vX.X.X.zip」内に各種ファイルが格納されています。zip内の各ファイルは下記の用途で利用されます。

SDKを導入する手順は、下記のとおりです。

1.「BDash-Mobile-ReactNativeSDK_vX.X.X.zip」を展開し、「src」フォルダごとReactNativeプロジェクトのTOP階層に配置します。
2. SDKの「トラッキング機能」を利用するJavaScriptファイルで、下記のimportを実施します。

import BDashTrackerSDK from './src/bdash/BDashTrackerModule';

※「BDashTrackerSDK」は任意の名称に変更可能です

Expoを利用しているプロジェクトについて

b→dash SDKはネイティブ用のSDKのため、Expoプロジェクトにそのままでは組み込むことができません。Expoプロジェクトでは、下記の手順でejectを行う必要があります。ejectを行うことで、XcodeやAndroid Studio上からネイティブSDKのビルドを行えるようになります。

※ Expoからejectを行った場合、AndroidについてはPush通知の環境構築を行う必要があります

1.プロジェクトのバックアップを行ったうえで、Windowsの場合はコマンドプロンプト、Macの場合はターミナルを立ち上げます。下記コマンドを実行し、プロジェクトのディレクトリに移動します。

cd [対象のExpoプロジェクト]

ls -la

2. プロジェクトに移動したことを確認したら、下記コマンドを実行してejectを行います。

expo eject

実行すると、Androidのパッケージ名、続いてiOSのバンドル名の入力を求められることがあります。画面内容に沿って入力を行います。処理が完了するまでに数分かかるので、完了するまで待ちます。

3. 下記コマンドを実行してプロジェクト構成を確認します。

ls -la

新しくAndroidとiOSのディレクトリが作成されているのを確認できます。それぞれのディレクトリが各プラットフォームの「ネイティブのビルド環境」となります。AndroidはAndroid Studio、iOSはXcodeを利用してプロジェクトを開き、本記事の「3. iOSの環境設定を行う」「4. Androidの環境設定を行う」に従ってSDKの導入を行ってください。

3. iOSの環境設定を行う

XcodeプロジェクトへのSDKの設置、AppDelegateへのコード追加、プロパティリストの設定、各種サービスとの連携について説明します。

SDKのインストール

b→dash mobile SDK(iOS分)は「BDash-Mobile-ReactNativeSDK_vX.X.X.zip」内に各種ファイルが格納されています。zip内の各ファイルとその利用機能(ログ取得/Push通知/アプリ接客)の対応は、下記の折りたたみをご参照ください。

プロジェクトファイル(xcodeproj)と同じ階層に、b→dash mobile SDKフォルダごと格納します。SDKパッケージ内のファイルはSwift言語のバージョンごとに分かれています。組み込むと下記のような画面になります。

利用ケースに応じて、下記の方針でSwiftバージョンを選択してください。

　1. 元々ReactNativeで利用されている場合: 現在のプロジェクトのビルド設定に合わせたSwiftのバージョンを選択
　2. ReactNative Expoからejectして利用される場合: サンプルコードをObjective-Cでご案内しているため、最新のSwift5を選択のうえ、プロジェクトの使用言語が「Objective-C」の場合の手順を実施

続いて、Xcodeでの組み込み手順は下記のとおりです。

1. Xcodeのプロジェクトのナビゲータエリア内の任意の場所を右クリックし、「Add Files to "ターゲット名"」をクリックします。SDKファイルを選択し「Add」をクリックします。
2. Tracker.swiftのみを選択し、「Add」をタップします。
3. 再度ナビゲータエリア内のプロジェクトフォルダを右クリックし、「Add Files to "ターゲット名"」をクリックします。
4. 「BDashSDK」フォルダを選択し「Add」をクリックします。
5. 「BDashSDK」フォルダに、下記のファイルを移動します。
　・Tracker.swift
　・Bridging-Header.h(プロジェクトの使用言語が「Objective-C」の場合)

AppDelegateへのコード追加

アプリ作成時に自動で生成されるAppDelegateクラスに対して、「BDash-Mobile-SDK_vX.X.X.zip」内に同梱されている「AppDelegate.swift」の必要部分のソースコードのコピーを行います。
SDKの初期化を実施するため、下記のコードを追加してください(Objective-Cの場合)。

#import "BDashMobileSDK.h"

 〜　省略

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

〜　省略

 // SDKの初期化コードを追加
[BDashMobileSDK initSDK];

 〜　省略
}

※ Swift版は現在準備中のため、Objective-C言語でAppDelegateを組み込むようにお願いいたします

- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler {

 〜　省略

[BDashMobileSDK checkNotification:response.notification.request.content.userInfo isActive:NO];

〜　省略

}

- (void)userNotificationCenter:(UNUserNotificationCenter *)center
       willPresentNotification:(UNNotification *)notification
         withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler {

 〜　省略

[BDashMobileSDK checkNotification:notification.request.content.userInfo isActive:YES];


 〜　省略

}

#import "BDashNotificationService.h"

 〜　省略

- (void)applicationWillEnterForeground:(UIApplication *)application {

 if (!BDashNotification.alreadyDisplayDialogBox) {
   return;
}

 [[BDashNotification getInstance] applicationWillEnterForeground:^(NSString * _Nonnull type, BOOL isNotificationToJS) {
  if (type == BDashNotification.ERROR) {
    NSLog(@"-- response error --")
 }

 [BDashMobileSDK checkForeground];

   if (isNotificationToJS) {
      [BDashNotificationService.sharedManager sendWithType:type];
   }
 }];
}

- (void)application:(UIApplication*) application didReceiveRemoteNotification:(NSDictionary*)userInfo {

[BDashMobileSDK checkNotification_iOS9:userInfo fetchCompletionHandler:^(UIBackgroundFetchResult a){}];
}

- (void)application:(UIApplication*) application didReceiveRemoteNotification:(NSDictionary*)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler {

[BDashMobileSDK checkNotification_iOS9:userInfo fetchCompletionHandler:completionHandler];

- (void)application:(UIApplication *)application didRegisterUserNotificationSettings: (UIUserNotificationSettings
*)notificationSettings{
　〜 省略
 [[BDashNotification getInstance] didRegisterUserNotificationSettings:notificationSettings];
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData
*)deviceToken {
 〜 省略
 [[BDashNotification getInstance] didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}

- (void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {

 if (application.applicationState != UIApplicationStateActive
     || application.applicationIconBadgeNumber != 0) {
   application.applicationIconBadgeNumber = 0;
   [application cancelLocalNotification:notification];
 }
}

プロパティリストへの設定値の入力

b→dash mobile SDKの設定ファイル(プロパティリスト)である「tracking.plist」に対して、下記3つの設定値を入力します。

設定の手順は、下記のとおりです。

1. Xcodeのプロジェクトのナビゲータエリア内に表示される「tracking.plist」をクリックします。
2. tracking.plist内に、上記の設定値を入力します。

3.「BDashNotificationService」からも設定値を読み取れるように、Target Membership欄にある「BDashNotificationService」にチェックを入れます。

各種サービスとの連携

b→dash mobile SDKを利用するために必要な、CocoaPodsとFirebase Cloud Messaging(FCM)の連携手順を説明します。

下記バージョンの「CocoaPods」と「Firebase Cloud Messaging(FCM)」をインストールします。

・FCMバージョン: 5.19.0
・CocoaPodsバージョン: 1.10.0

## Podfile への導入例
pod 'Firebase/Core','5.19.0'
pod 'Firebase/Messaging','5.19.0'

Push通知を行う場合の追加設定(Firebase Console連携)

Push通知を利用するためには、Firebase Consoleにて「サーバーキー」を発行する必要があります。また、証明書である「.p12」または「.p8」ファイルをFirebase Consoleに登録する必要があります。登録手順については、公式ドキュメントをご参照ください。

続いて、下記の手順でFirebase構成ファイルとXcodeの設定を行います。

1. Xcodeのプロジェクトのナビゲータエリア内の任意の場所を右クリックし、「Add Files to "ターゲット名"」をクリックします。「GoogleService-Info.plist」を選択し「Add」をクリックします。
2. Xcodeのプロジェクト設定を開き、Capabilitiesから「Push Notification」をONにします。
3. プロジェクト内の「Info.plist」に「FirebaseAppDelegateProxyEnabled(Boolean)」のプロパティを追加し、バリューに「NO」を設定します。

※ b→dashのSDK内に同封されている「AppDelegate.swift」では、下記のフレームワークを使用しています
　・import Firebase
　・import UserNotifications
　・import CoreData
　・import AVFoundation
　・import AudioToolbox
　・import SystemConfiguration
　・import UIKit

4. Androidの環境設定を行う

外部ライブラリの確認、SDKインストール、Push通知設定、SDKが生成するディレクトリ構成について説明します。

利用している外部ライブラリについて

下記が、利用している外部ライブラリの一覧です。

※1. b→dash mobile SDKが対応しているFCMバージョン
　・推奨バージョン: 20.2.4
　・動作確認済バージョン: 20.0.1 & 20.1.7
　マイナーバージョンが同列な場合は、上記のビルドバージョンをご利用ください
※2. FCMのトークン処理用クラスが17.1.0から変更されたため、アップデート時はご注意ください
※3. サードパーティライブラリや独自ライブラリを実装している場合、受信処理が競合する場合があるため「Android用SDKでPush配信をしたい」の「Push受信サービスの競合について」をご確認ください
※4. 本SDKではAndroidXを採用しているため、サポートライブラリを利用している場合はAndroidXへのアップデートを行う必要があります
※5. 最新のv2.8.6ではビルドできないケースが報告されておりますので、実績のあるv2.8.5をご利用ください。公式Issueはこちらをご覧ください
※ react-native-firebase/messagingの利用には対応しておりません。Push通知を利用される場合は本手順書の内容に沿って、ネイティブ版のFCMライブラリのインストールをお願いします

<app/build.gradle>

android{
　　compileSdkVersion 28
　　..
}

<build.gradle>

dependencies{
　　classpath 'com.android.tools.build:gradle:3.2.0'
}

android.enableJetifier=true
android.useAndroidX=true

SDKのインストール

b→dash mobile SDKをAndroidアプリケーションへインストールする手順を説明します。

※ ご提供しているSDK(zip内)のSampleディレクトリに、b→dashが提供している「Push通知」と「アプリ接客」のサンプルプロジェクトが同梱されています
※ 導入のサンプルコードは全てJava言語で記載していますので、Kotlinを利用されている場合は適宜読み替えて導入をお願いいたします

ライブラリの追加

付属のZIPファイルを展開し、付属のsrcディレクトリをAndroid Studio上の「JAVAパッケージ」の直下にDrag & Dropを行い組み込みます。下記はパッケージ名が「com.example.test.mytest」の場合の組み込み例です。

※ SDKのsrcディレクトリ内のパッケージ名は「com.f_scratch.bdash.mobile.react」となります。組み込む際にパッケージが異なってしまっても動作そのものには影響はありませんが、今後の互換性を担保するためには、上記のパッケージ名に合わせる事を強く推奨しています

build.gradleの編集

b→dash mobile SDKのコンパイルに必要な設定を、プロジェクトのbuild.gradleに追加します。下記はAndroid Studio 3.6.3以降のサンプルコードです。

repositories{
    flatDir{
        dirs 'libs'
    }
}
dependencies {
    … 省略 …{
    implementation(name:'bdash-mobile-sdk', ext:'aar')
   implementation 'com.google.android.gms:play-services-ads-identifier:17.0.0'
   // Push通知を利用する場合は必須
   implementation 'com.google.firebase.gms:firebase-messaging:20.2.4'

   // AndroidX を利用. 「Android5 環境でのバグについて」もご確認ください
   implementation 'androidx.appcompat:appcompat:1.2.0'
}

apply plugin: 'com.google.gms.google-services'

configurations.all {
　resolutionStrategy.eachDependency { details ->
　　if (details.requested.group == 'androidx.core') {
　　　details.useVersion '【利用バージョンを指定します】'
　　}
　}
}

ApplicationクラスとActivityへのSDK初期化コードの追加

SDKの初期化とJS側への連携を行うために、プロジェクトに下記のコードを追加します。

import com.f_scratch.bdash.mobile.react.BDashPackage;
import com.f_scratch.bdash.mobile.react.BDashMobileSDK;

public class TrackerApplication extends Application
 implements ReactApplication {

    public void onCreate(){
        super.onCreate();
        … 省略
        // b→dash SDK の初期化関数を呼び出します
        BDashMobileSDK.initSDK(this);
    }
    @Override
    protected List getPackages() {
      List packages = new PackageList(this).getPackages();
      … 省略
      packages.add(new BDashPackage());
      return packages;
    }
}

Push通知、アプリ接客を行う場合は、MainActivityに下記のコードを追加します。MainActivityはマニフェストで <action android:name="android.intent.action.MAIN" /> を設定しているアクティビティです。React Nativeのデフォルト設定ではMainActivityに設定されています。

public class MainActivity extends ReactActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Push通知を利用する場合は、下記を設定します。
        BDashMobileSDK.checkPushNotification(this, getReactNativeHost());

        // Web接客 を利用する場合は、下記を設定します。
        BDashMobileSDK.setMainActivity(this);

    }

AndroidManifest.xmlの編集

b→dash mobile SDKの動作に必要な設定を、AndroidManifest.xmlに追加します。<application>の前に、下記のパーミッションの設定を追加します。

下記はパラメーターの記載例です。

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.VIBRATE" />

<uses-library android:name="org.apache.http.legacy" android:required="false" />

続いて、b→dash mobile SDKの実行に必要な下記の<meta-data>を、manifestの<application>内に追加します。

<meta-data android:name="APP_BDASH_ACCOUNT_ID"
android:value="カスタマーサクセス担当より連絡しますので、その値を入力してください。" />

<meta-data android:name="APP_BDASH_APP_ID"
android:value="カスタマーサクセス担当より連絡しますので、その値を入力してください。" />

Proguardを使って難読化される場合は、アプリケーションのappディレクトリにあるproguard-project.txtまたはproguard-rules.proに下記の設定を追加してください。本SDKのパッケージは「com.f_scratch.bdash.mobile.analytics」となっており、難読化は対象外の設定とします。

-keep class com.f_scratch.bdash.mobile.analytics.**{
    *;
}

Push通知の設定(Push通知を利用する場合のみ)

Push通知を利用する場合は、下記の設定を行います。

Googleアカウントとサーバーキーの事前準備

Push通知を利用するにはGoogleアカウントが必要となりますので事前にご用意ください。また、Firebase Consoleにて「サーバーキー」を発行しておく必要があります。詳細は公式ドキュメントをご参照ください。

設定ファイル(google-services.json)の組み込み

Firebase Consoleにて任意のプロジェクトを作成し、ダウンロードしたgoogle-services.jsonをプロジェクトのappディレクトリに組み込みます。

起動するアクティビティの設定

Push通知を受け取った時、標準ではandroid.intent.category.LAUNCHERのActivityが起動します。独自に指定する場合は、下記の<meta-data>をmanifestの<application>内に追加します。

<meta-data
 　android:name="com.f_scratch.bdash.mobile.push.launch"
　 android:value="パッケージ名も含めてActivityを指定します" />

受信時のアイコンの設定

デフォルトでは「アプリケーション組み込みのアイコン」が利用されます。アプリケーションのアイコンと通知アイコンの画像サイズは異なっているため、イメージが崩れてしまうのを防ぐためにもmanifestで定義を行う必要があります。設定可能なパラメーターは下記のとおりです。

下記はパラメーターの設定例です。「drawableディレクトリ」の画像を指定します。

<!-- BDash SDK の通知時のアイコン(必須) -->
<meta-data android:name="com.f_scratch.bdash.mobile.push.icon"
           android:value="@drawable/【画像ファイルを指定します】" />

<!-- BDash SDK のアイコン背景色(オプション)-->
<meta-data android:name="com.f_scratch.bdash.mobile.push.accentColor"
           android:value="@color/【色を指定します】" />

<!-- BDash SDK の通知時のビッグアイコン(オプション)Android 5.0未満で自動有効 -->
<meta-data android:name="com.f_scratch.bdash.mobile.push.bigIcon"
           android:value="@drawable/【画像ファイルを指定します】" />

<!-- BDash SDK の通知時のビッグアイコン(オプション)Android 5.0以降で自動有効 -->
<meta-data android:name="com.f_scratch.bdash.mobile.push.lollipop.bigIcon"
           android:value="@drawable/【画像ファイルを指定します】" />

通知アイコンの画像サイズは、Android Developerサイトより下記が推奨されています。

通知チャンネルの設定

通知チャンネルを有効にするためには、下記の設定をmanifestで定義します。

組み込みの設定画面

Android版では組み込みの「Push通知の設定画面」を用意しています。APIレベル26(Android 8.0)以降は「通知チャンネル」が導入されたため、本機能はAndroid7.0以下で利用することを想定しています。Android 8.0については、「アプリ設定」の通知設定で切り替えます。
デザインテーマはBDashSDK_Theme、BDashSDK_Theme.gray、BDashSDK_Theme.greenの3パターンを用意しています。

組み込みの「設定画面」を利用する場合は、下記の情報を<activity>として定義します。

<activity
 android:name="com.f_scratch.bdash.mobile.analytics.notification.BDashNotificationSettings"
android:screenOrientation="portrait"
android:theme="@style/BDashSDK_Theme"
/>

プログラムコードからは下記のように呼び出します。

Intent intent = new Intent(this, BDashNotificationSettings.class);
startActivity(intent);

※ 言語は「日本語」と「英語」の2言語に対応しています
※ デザインテーマはお客様の方でオーバライドすることもできます。parent属性に「BDashSDK_Theme」を指定した上で、ヘッダカラー色の要素「colorPrimary」の上書きが可能です

Push受信サービスの競合について(FCM導入済みの場合のみ)

Push通知の受信処理に独自のペイロード解析を行っている場合、Androidでは「FirebaseMessagingService」クラスを継承し実装することになります。b→dash Mobile SDKでは上記のクラスを継承しmanifestファイルに下記定義を行っています。

<service
android:name="com.f_scratch.bdash.mobile.analytics.notification.FCMReceiverService">
<intent-filter>
   <action android:name="com.google.firebase.MESSAGING_EVENT" />
 </intent-filter>
</service>

import com.f_scratch.bdash.mobile.analytics.notification.FCMReceiverService;
// b→dash の通知サービスを継承させます.
public class HookFCMReceiverService extends FCMReceiverService {   
   @Override
   public void onCreate() {
       // 必須です. super クラスの onCreate() を呼び出します
       super.onCreate();
  }
  @Override
  public void onMessageReceived(RemoteMessage message, Bundle data) {
      if( アプリの通知と判断 又は b→dash SDK の通知 と判断する(※1) ){
          // アプリ側の通知処理を行います
        } else {
          // b→dash 側の通知処理を行います  
          super.onMessageReceived(message, data);
        }
      }
    @Override
    public void onNewToken(String token) {
       // 現行SDK では onNewToken は未実装なので下記は必須ではありません
       // SDK v2.3.0 からは必須になります。
       super.onNewToken(token);
    }
    @Override
    public void onDeletedMessages() {
       super.onDeletedMessages();
    }
    @Override
    public void onMessageSent(String msgId) {
        super.onMessageSent(msgId);
    }
}

[参考]SDKが生成するディレクトリ構成

導入されるアプリケーションの[パッケージ名]以下に、SDKは下記の構成で「フォルダ/ファイル」を生成します。

・shared_prefs - com.f_scratch.bdash.mobile.analytics.gcm.xml
・files - com.fsbdash.mobile.analytics.ser - [ログデータ/SDKデータ用のファイル]