ReactNative用SDKを導入したい

推奨環境、動作環境

ReactNativeの動作環境

ReactNativeのb→dash mobile SDKの動作環境は、以下となります。

Androidの動作環境

Androidのb→dash mobile SDKの推奨環境と動作環境は以下の通りです。

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

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

ReactNativeの環境設定

SDKのインストール

ここではb→dash mobile SDKのReact Nativeプロジェクトへの導入方法について説明します。

SDKファイルの紹介

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

SDKファイルの配置

「BDash-Mobile-ReactNativeSDK_vX.X.X.zip」を展開し、「src」フォルダごとReative Nativeプロジェクトの TOP 階層に配置してください。

トラッキング機能を利用する

SDKの 「トラッキング機能」 を利用するJavaScriptファイルで、以下のimportを実施してください。

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

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

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

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

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

ターミナルからプロジェクトのディレクトリに移動する

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

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

ls -la

参考として、現在のプロジェクト構成としては下記のようになっています。

eject コマンドを実行する

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

expo eject

実行すると Android のパッケージ名 の入力を求められることがあります。その場合、画面内容に沿って入力を行います。

続いて iOS のバンドル名の入力を求められることがあります。この場合も、画面内容に沿って入力を行います。

処理が完了するまでに数分かかるので、完了するまで待ちます。

プロジェクト構成を確認する

プロジェクト構成を確認するコマンドを実行します。

ls -la

新しく Android と iOS ディレクトリが作成されているのを確認できます。

上記のディレクトリが、各プラットフォームの「ネイティブのビルド環境」となります。それぞれ、下記の公式の開発環境ツールを利用しプロジェクトを開きます。

• Android はAndroidStudioを利用する
• iOS はXCode を利用する

開発環境でプロジェクトを開けましたら、本記事のiOS、AndroidそれぞれでSDKの導入を行ってください。

SDKのインストール

ここではb→dash mobile SDKをXcodeのプロジェクトに設置する方法を説明します。

SDKファイルの紹介

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

ReactNativeでのSDKファイルの組み込み

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

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

XcodeでのSDKファイルの組み込み

Xcodeのプロジェクトのナビゲータエリア内の任意の場所を右クリックし、「Add Files to “ターゲット名”」 をクリックします。その後、SDKファイルを選択し「Add」をクリックします。

Tracker.swiftの追加

移動したTracker.swiftのみ選択し、「Add」をタップしてください。

「Add Files to “ターゲット名” 」をクリック

再度、プロジェクトのナビゲータエリア内のプロジェクトフォルダを右クリックし、「Add Files to “ターゲット名” 」をクリックします。

フォルダの選択

移動した「BDashSDK」フォルダを選択しAddをクリックします。

フォルダの移動

「BDashSDK」フォルダに、以下のファイルを移動します。
・Tracker.swift
・Bridgi ng-Header.h(プロジェクトの使用言語が「Objective-C」の場合)
以下は移動後のフォルダ階層となります。

#import "【プロジェクト名】-Swift.h"

AppDelegateへのコード追加

アプリ作成時に自動で生成されるAppDelegateクラスに対して、「BDash-Mobile-SDK_vX.X.X.zip」内に同法されている「AppDelegate.swift」の必要部分のソースコードのコピーを行います。

#import "BDashMobileSDK.h"

 〜　省略

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

〜　省略

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

 〜　省略
}

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

 〜　省略

 // Push通知から起動されたことをJavaScriptに連携する
[BDashMobileSDK checkNotification:response.notification.request.content.userInfo isActive:NO];

〜　省略

}

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

 〜　省略

 // Push通知から起動されたことをJavaScriptに連携する
[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 {

 // Push通知から起動されたことをJavaScriptに連携する
[BDashMobileSDK checkNotification_iOS9:userInfo fetchCompletionHandler:^(UIBackgroundFetchResult a){}];
}

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

 // Push通知から起動されたことをJavaScriptに連携する
[BDashMobileSDK checkNotification_iOS9:userInfo fetchCompletionHandler:completionHandler];

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

// deviceToken event
- (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つの設定値を「tracking.plist」へ登録します。

設定値の入力

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

設定した値を「BDashNotificationService」へ追加

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

Androidの環境設定

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

以下が利用している外部ライブラリの一覧になります。

※1. b→dash mobile SDKが対応している FCM バージョン（2021年3月時点）
・推奨バージョン：20.2.4
・動作確認済バージョン：20.0.1 & 20.1.7
マイナーバージョンが同列な場合は、上記のビルドバージョンをご利用ください。

※2. FCM のトークン処理を実施するクラス
トークン処理用クラスが 17.1.0 から変更されたため、アップデート時はご注意ください。

※3. サードパーティライブラリや独自ライブラリを実装している場合
受信処理が競合する場合があるため「Android用SDKでPush配信をしたい」の「Push受信サービスの競合について」をご確認ください。

※4. サポートライブラリは対象外
本SDK では AndroidX を採用しているため、サポートライブラリを利用している場合はAndroidX へのアップデートを行う必要があります。

※5. GSON について
最新のv2.8.6 ではビルドできないケースが報告されておりますので、実績のあるv2.8.5 をご利用ください。公式Issueはこちらをご覧ください。

※ react-native-firebase/massagingの利用について（2021年1月時点）
現在対応しておりませんので、Push通知を利用される場合は本手順書の内容に沿って、ネイティブ版のFCMライブラリのインストールをお願いします。すでにreact-native-firebase/messagingでPush通知を導入している場合には、バージョンの互換性を確認する必要があるため、担当までご連絡をお願いいたします。

<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の取得

b→dash mobile SDKをzipファイルにてカスタマーサクセス担当からお渡しさせていただきます。

ライブラリの追加

付属のZIPファイルを展開し、付属のsrcディレクトリを AndroidStudio 上の「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;
    }
}

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" />/* Your code... */

<meta-data> の追加

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 の除外設定

Proguard を使って難読化される場合は、アプリケーションの app ディレクトリに有る proguard-project.txt 又は proguard-rules.pro に以下の設定を追加してください。

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

Push通知の設定（※Push通知を利用する場合のみ）

Push通知を利用する場合は以下の設定を行ってください。

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

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

 設定ファイルの組み込み

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

組み込み完了後のイメージは以下の通りです。

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

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

パラメーター名	値
com.f_scratch.bdash.mobile.push.launch	【オプション】起動アクティビティをフルパスで指定します

下記は「起動対象にする Activity」を指定するパラメーターの記載例です。

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

受信時のアイコンの設定

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

パラメーター名	値
com.f_scratch.bdash.mobile.push.icon	【必須】drawable ディレクトリ内の画像を指定します。
com.f_scratch.bdash.mobile.push.accentColor	【オプション】Android5以降で「アイコンの背景色」を指定します。targetSdkVersion が21以上で有効になります。
com.f_scratch.bdash.mobile.push.bigIcon	【オプション】drawable ディレクトリ内の画像を指定します。Android 5.0 未満までの OS で自動的に有効になります。
com.f_scratch.bdash.mobile.push.lollipop.bigIcon	【オプション】drawable ディレクトリ内の画像を指定します。Android 5.0 以降の OS で自動的に有効になります。

Android 5以降での各パラメーターが反映されるイメージ画像です。

下記はパラメーターの設定例です。 「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サイトより )

drawable-dpi	Image size( width x height)
ldpi	18 x 18
mdpi	24 x 24
hdpi	36 x 36
xhdpi	48 x 48
xxhdpi	72 x 72
xxxhdpi	96 x 96

オプションの 「ビックアイコン」 のみを指定することは不可!?

オプションの 「ビックアイコン」 のみを指定することはできません。
Android OS の端末の表示仕様（見え方）は Android ICS, JellyBean, Lollipop 以降で見え方が異なるので事前にどのように見えるかご確認ください。
なおビックアイコンは Lollipop 未満と以降で見え方が異なるので、それぞれで指定できるようにしています。

通知チャンネルの設定

通知チャンネルを有効にするためには、以下の必須設定をmanifest で定義を行う必要があります。

最初に「通知チャンネル」を作成したあと、「通知チャンネル名/説明」の更新は問題なく可能ですが、通知の重要度などはAPIを通して変更することができません。変更を行う場合は、既存の通知チャンネルを削除し新しく作り直す必要があります。

パラメーター名	値
com.f_scratch.bdash.mobile .push.channel.id	【必須】通知チャンネルIDをユニークで指定します。
com.f_scratch.bdash.mobile .push.channel.name	【必須】通知チャンネル名を指定します。
com.f_scratch.bdash.mobile .push.channel.desc	【オプション】通知チャンネルの説明を行います。
com.f_scratch.bdash.mobile .push.channel.badge	【オプション】通知チャンネルでバッジを付けるか指定します。 実際にバッジが付くかはホームアプリと OS の双方に依存します。 現SDK では正式にサポートはしていません。（デフォルト値は true）
com.f_scratch.bdash.mobile .push.channel.importance	【オプション】通知の重要度を以下の定数を指定します。 Oreo の前と同じ挙動を期待する場合はhigh を指定します。 （デフォルト値は high） high：NotificationManager.IMPORTANCE_HIGH default：NotificationManager.IMPORTANCE_DEFAULT low：NotificationManager.IMPORTANCE_LOW min：NotificationManager.IMPORTANCE_MIN none：NotificationManager.IMPORTANCE_NONE

下記はパラメーターの設定例です。種類によって value/resource の差異があるため設定の際はご注意ください。

<meta-data android:name="com.f_scratch.bdash.mobile.push.channel.id"
   android:value="【通知チャンネルIDを指定します。ユニークである必要があります】">
</meta-data>

<meta-data android:name="com.f_scratch.bdash.mobile.push.channel.name"
   android:resource="@string/【通知チャンネル名を指定します】">
</meta-data>

<meta-data android:name="com.f_scratch.bdash.mobile.push.channel.desc"
   android:resource="@string/【通知チャンネルの説明を記載します】">
</meta-data>

<meta-data android:name="com.f_scratch.bdash.mobile.push.channel.badge"
   android:value="【バッジを表示する: true 表示しない: false】">
</meta-data>

<meta-data android:name="com.f_scratch.bdash.mobile.push.channel.importance"
   android:value="【重要度を指定します】">
</meta-data>

 組み込みの設定画面

Android版では組み込みの「Push通知の設定画面」を用意しています。

APIレベル26(Android 8.0)以降は「通知チャンネル」が導入されたため、本機能はAndroid7.0以下で利用することを想定しています。Android 8.0については、「アプリ設定」の通知設定で切り替えます。

デザインテーマとしては３パターン用意しております。

BDashSDK_ThemeBDashSDK_Theme.grayBDashSDK_Theme.green

組み込みの「設定画面」を利用する場合は、以下の情報を <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);

言語は「日本語」と「英語」の２言語に対応しています。

好みのデザインテーマに変更するには⁇

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

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

Push通知の受信処理に独自のペイロード解析を行っている場合、Android では「FirebaseMessagingService」クラスを継承し実装することになります。b→dash Mobeile 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>

この定義はmanifest内に1つしか定義ができないため、アプリで定義すると SDK の定義が上書きされ「b→dash の通知受信」が行われなくなります。アプリとSDK双方で受信できるように、下記の対策を取る必要があります。

アプリ側で「b→dash 受信クラス」を継承し処理を切り分ける
フック処理を実装し「メッセージ種別」によって処理するメソッドを分ける

サンプルコードは以下のようになります。

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);
    }
}

※1 「b→dash の通知と判断」する場合、第二引数data のペイロードの中に “jp_co_fscratch” というキーが定義されているのでそちらをご利用ください。 値には 1 が入ってますが、値そのものは無視してください。