方法 1: Expoプラグインの使用

2.1 Braze Expoプラグインのインストール {#21-install-the-braze-expo-plugin} {#21-install-the-braze-expo-plugin}

Braze Expoプラグインのバージョンが4.1.0以上であることを確認してください。サポートされているバージョンの完全なリストについては、Braze Expoプラグインリポジトリを参照してください。

以下のコードスニペットは、Braze Expoプラグインをインストールするコマンドです。

1
npx expo install @braze/expo-plugin

2.2 app.jsonにプラグインを追加する {#22-add-the-plugin-to-your-appjson} {#22-add-the-plugin-to-your-appjson}

app.jsonで、Braze Expoプラグインを追加します。APIキーとエンドポイントはここでは設定しません。JavaScriptからBraze.initialize()を使用してランタイムで提供します。実装のニーズに応じて、以下のオプション設定パラメーターを追加してください。

以下のコードスニペットは、app.jsonの設定例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "sessionTimeout": 60,
          "enableGeofence": false,
          "enableBrazeIosPush": false,
          "enableFirebaseCloudMessaging": false,
          "firebaseCloudMessagingSenderId": "YOUR-FCM-SENDER-ID",
          "androidHandlePushDeepLinksAutomatically": true,
          "enableSdkAuthentication": false,
          "logLevel": 0,
          "minimumTriggerIntervalInSeconds": 0,
          "enableAutomaticLocationCollection": false,
          "enableAutomaticGeofenceRequests": false,
          "dismissModalOnOutsideTap": true,
          "androidPushNotificationHtmlRenderingEnabled": true,
          "androidNotificationAccentColor": "#ff3344",
          "androidNotificationLargeIcon": "@drawable/custom_app_large_icon",
          "androidNotificationSmallIcon": "@drawable/custom_app_small_icon",
          "iosRequestPushPermissionsAutomatically": false,
          "enableBrazeIosPushStories": true,
          "iosPushStoryAppGroup": "group.com.example.myapp.PushStories",
          "iosForwardUniversalLinks": false
        }
      ]
    ]
  }
}

Androidプッシュ通知アイコンの設定

androidNotificationLargeIconとandroidNotificationSmallIconを使用する際は、アイコンを正しく表示するために以下のベストプラクティスに従ってください。

アイコンの配置と形式

Braze Expoプラグインでカスタムプッシュ通知アイコンを使用するには：

1. 以下のアイコン要件に従ってアイコンファイルを作成します。
2. プロジェクトのAndroidネイティブディレクトリandroid/app/src/main/res/drawable-<density>/に配置します。 例えば、android/app/src/main/res/drawable-mdpi/やandroid/app/src/main/res/drawable-hdpi/を使用します。
3. あるいは、React Nativeディレクトリ内でアセットを管理している場合、Expoのapp.jsonアイコン設定を使用するか、Expo設定プラグインを作成して、プリビルド時にアイコンをAndroidのdrawableフォルダにコピーできます。

Braze Expoプラグインは、Androidのdrawableリソースシステムを使ってこれらのアイコンを参照します。

アイコンの要件

• 小アイコン：透明なバックグラウンドに白いシルエットでなければなりません（これはAndroidプラットフォームの要件です）
• 大アイコン：フルカラーの画像を使用できます。
• 形式：PNG形式が推奨されます。
• 命名：小文字、数字、アンダースコアのみを使用してください（例：my_large_icon.png）

app.jsonでの設定

以下のコードスニペットは、app.jsonで@drawable/プレフィックスを使用してAndroid通知アイコンを参照する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidNotificationLargeIcon": "@drawable/large_icon",
          "androidNotificationSmallIcon": "@drawable/small_icon"
        }
      ]
    ]
  }
}

重要

アイコンを参照する際には、相対パス（例：src/assets/images/icon.png）を使用したり、ファイル拡張子を含めたりしないでください。Expoプラグインは、プリビルド処理後にAndroidネイティブフォルダ内でアイコンを正しく見つけられるように、@drawable/プレフィックスが必要です。

仕組み

Braze Expoプラグインは、Androidのdrawableディレクトリからアイコンファイルを参照します。npx expo prebuildを実行すると、ExpoはネイティブのAndroidプロジェクト構造を生成します。ビルドプロセス前に、アイコンはAndroidのdrawableフォルダ内に存在しなければなりません（手動で配置するか、設定プラグイン経由でコピーするかのいずれか）。プラグインはその後、これらのdrawableリソースを名前（パスや拡張子なし）で利用するようBraze SDKを設定します。これが設定で@drawable/プレフィックスが必要な理由です。

Android通知アイコンの詳細については、Androidの通知アイコンガイドラインを参照してください。

2.3 アプリケーションのビルドおよび実行 {#23-build-and-run-your-application} {#23-build-and-run-your-application}

アプリケーションをプリビルドすると、Braze Expoプラグインが動作するために必要なネイティブファイルが生成されます。

以下のコードスニペットは、アプリケーションをプリビルドするコマンドです。

1
npx expo prebuild

Expoドキュメントの指定に従い、アプリケーションを実行します。設定オプションを変更した場合は、アプリケーションを再度プリビルドして実行してください。

方法 2: React Native CLIの使用

Androidの設定

2.1 Kotlin Gradleプラグインの追加

以下のコードスニペットは、最上位プロジェクトのbuild.gradleのbuildscript > dependenciesにKotlin Gradleプラグインを追加する方法です。

1
2
3
4
5
6
7
buildscript {
    dependencies {
        ...
        // Choose your Kotlin version
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.10")
    }
}

これでプロジェクトにKotlinが追加されます。

2.2 Braze SDKの設定

プロジェクトのres/valuesフォルダにbraze.xmlファイルを作成します。APIキーとエンドポイントはJavaScriptからランタイムで提供されるため、このファイルでは不要です。以下のコードスニペットは、com_braze_enable_delayed_initializationで遅延初期化を有効にする方法です。

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <bool name="com_braze_enable_delayed_initialization">true</bool>
</resources>

注

braze.xmlには他のネイティブ設定値（プッシュ、セッションタイムアウト、ログ設定など）を追加することもできます。これらはJavaScriptからBraze.initialize()が呼び出された際に自動的に適用されます。

以下のコードスニペットは、AndroidManifest.xmlファイルに必要な権限です。

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

ヒント

Braze Android SDKバージョン12.2.0以降では、gradle.propertiesファイルにimportBrazeLocationLibrary=trueを設定することで、android-sdk-locationライブラリーを自動的にプルインできます。

2.3 ユーザーセッショントラッキングの実装

openSession()およびcloseSession()への呼び出しは自動的に処理されます。 以下のコードスニペットは、MainApplicationクラスのonCreate()メソッドに追加する内容です。

• java
• kotlin

1
2
3
4
5
6
7
8
import com.braze.BrazeActivityLifecycleCallbackListener;

@Override
public void onCreate() {
    super.onCreate();
    ...
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());
}

1
2
3
4
5
6
7
import com.braze.BrazeActivityLifecycleCallbackListener

override fun onCreate() {
    super.onCreate()
    ...
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener())
}

2.4 インテント更新の処理

MainActivityでandroid:launchModeがsingleTaskに設定されている場合、以下のコードスニペットをMainActivityクラスに追加してください。

• java
• kotlin

1
2
3
4
5
@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    setIntent(intent);
}

1
2
3
4
override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    setIntent(intent)
}

iOSの設定

2.5（オプション）ダイナミックXCFrameworkに関するPodfileの設定

特定のBrazeライブラリー（例：BrazeUI）をObjective-C++ファイルにインポートするには、#import構文を使用する必要があります。Braze Swift SDKのバージョン7.4.0以降、バイナリにはこの構文と互換性のあるダイナミックXCFrameworkとしてのオプションの配布チャネルがあります。

この配布チャネルを使用する場合は、PodfileでCocoaPodsのソースの場所を手動で上書きしてください。以下のサンプルを参照し、{your-version}をインポートする関連バージョンに置き換えてください。

1
2
3
pod 'BrazeKit', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeKit.podspec'
pod 'BrazeUI', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeUI.podspec'
pod 'BrazeLocation', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeLocation.podspec'

2.6 Podのインストール

React Nativeではライブラリーがネイティブプラットフォームに自動でリンクされるため、CocoaPodsを使用してSDKをインストールできます。

以下のコードスニペットは、プロジェクトのルートフォルダからPodをインストールする方法です。

1
2
3
4
5
# To install using the React Native New Architecture
cd ios && pod install

# To install using the React Native legacy architecture
cd ios && RCT_NEW_ARCH_ENABLED=0 pod install

2.7 Braze SDKの設定

BrazeReactInitializer.configureをAppDelegateで使用して、ネイティブ設定を登録します。提供したクロージャは保存され、JavaScriptからBraze.initialize(apiKey, endpoint)が呼び出された際に適用されます。

• swift
• objective-c

1
2
import BrazeKit
import braze_react_native_sdk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  static var braze: Braze? = nil

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    BrazeReactInitializer.configure { configuration in
      configuration.logger.level = .info
      configuration.push.automation = true
    } postInitialization: { braze in
      AppDelegate.braze = braze
    }

    // ... React Native setup

    return true
  }
}

1
2
@import BrazeKit;
@import braze_react_native_sdk;

1
2
3
4
5
6
7
8
9
10
11
12
13
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [BrazeReactInitializer configure:^(BRZConfiguration *configuration) {
    configuration.logger.level = BRZLoggerLevelInfo;
    configuration.push.automation = [[BRZConfigurationPushAutomation alloc] initWithAutomationEnabled:YES];
  } postInitialization:^(Braze *braze) {
    // Store the Braze instance for later use.
  }];

  /* Other configuration */

  return YES;
}

重要

BrazeReactInitializer.configure()は設定を保存するだけです。JavaScriptからBraze.initialize()が呼び出されるまでBrazeインスタンスは存在しないため、configure()の後にAppDelegateでBraze SDKメソッドを呼び出さないでください。 Braze.initialize()を再度呼び出すと、同じconfigureおよびpostInitializationブロックが新しいBrazeインスタンスに適用されます。

方法 1: Expoプラグインの使用

ステップ 2.1: Braze Expoプラグインのインストール

Braze React Native SDKのバージョンが1.37.0以上であることを確認してください。サポートされているバージョンの完全なリストについては、Braze React Nativeリポジトリを参照してください。

以下のコードスニペットは、Braze Expoプラグインをインストールするコマンドです。

1
npx expo install @braze/expo-plugin

ステップ 2.2: app.jsonにプラグインを追加する

app.jsonで、Braze Expoプラグインを追加します。以下の設定オプションを指定できます。

以下のコードスニペットは、app.jsonの設定例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidApiKey": "YOUR-ANDROID-API-KEY",
          "iosApiKey": "YOUR-IOS-API-KEY",
          "baseUrl": "YOUR-SDK-ENDPOINT",
          "sessionTimeout": 60,
          "enableGeofence": false,
          "enableBrazeIosPush": false,
          "enableFirebaseCloudMessaging": false,
          "firebaseCloudMessagingSenderId": "YOUR-FCM-SENDER-ID",
          "androidHandlePushDeepLinksAutomatically": true,
          "enableSdkAuthentication": false,
          "logLevel": 0,
          "minimumTriggerIntervalInSeconds": 0,
          "enableAutomaticLocationCollection": false,
          "enableAutomaticGeofenceRequests": false,
          "dismissModalOnOutsideTap": true,
          "androidPushNotificationHtmlRenderingEnabled": true,
          "androidNotificationAccentColor": "#ff3344",
          "androidNotificationLargeIcon": "@drawable/custom_app_large_icon",
          "androidNotificationSmallIcon": "@drawable/custom_app_small_icon",
          "iosRequestPushPermissionsAutomatically": false,
          "enableBrazeIosPushStories": true,
          "iosPushStoryAppGroup": "group.com.example.myapp.PushStories",
          "iosForwardUniversalLinks": false
        }
      ],
    ]
  }
}

Androidプッシュ通知アイコンの設定

androidNotificationLargeIconとandroidNotificationSmallIconを使用する際は、アイコンを正しく表示するために以下のベストプラクティスに従ってください。

アイコンの配置と形式

Braze Expoプラグインでカスタムプッシュ通知アイコンを使用するには：

1. 以下のアイコン要件に従ってアイコンファイルを作成します。
2. プロジェクトのAndroidネイティブディレクトリandroid/app/src/main/res/drawable-<density>/に配置します（例：android/app/src/main/res/drawable-mdpi/、drawable-hdpi/など）。
3. あるいは、React Nativeディレクトリ内でアセットを管理している場合、Expoのapp.jsonアイコン設定を使用するか、Expo設定プラグインを作成して、プリビルド時にアイコンをAndroidのdrawableフォルダにコピーできます。

Braze Expoプラグインは、Androidのdrawableリソースシステムを使ってこれらのアイコンを参照します。

アイコンの要件

• 小アイコン：透明なバックグラウンドに白いシルエットでなければなりません（これはAndroidプラットフォームの要件です）
• 大アイコン：フルカラーの画像を使用できます。
• 形式：PNG形式が推奨されます。
• 命名：小文字、数字、アンダースコアのみを使用してください（例：my_large_icon.png）

app.jsonでの設定

以下のコードスニペットは、app.jsonで@drawable/プレフィックスを使用してAndroid通知アイコンを参照する方法です。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidNotificationLargeIcon": "@drawable/large_icon",
          "androidNotificationSmallIcon": "@drawable/small_icon"
        }
      ]
    ]
  }
}

重要

アイコンを参照する際には、相対パス（例：src/assets/images/icon.png）を使用したり、ファイル拡張子を含めたりしないでください。Expoプラグインは、プリビルド処理後にAndroidネイティブフォルダ内でアイコンを正しく見つけられるように、@drawable/プレフィックスが必要です。

仕組み

Braze Expoプラグインは、Androidのdrawableディレクトリからアイコンファイルを参照します。npx expo prebuildを実行すると、ExpoはネイティブのAndroidプロジェクト構造を生成します。ビルドプロセス前に、アイコンはAndroidのdrawableフォルダ内に存在しなければなりません（手動で配置するか、設定プラグイン経由でコピーするかのいずれか）。プラグインはその後、これらのdrawableリソースを名前（パスや拡張子なし）で利用するようBraze SDKを設定します。これが設定で@drawable/プレフィックスが必要な理由です。

Android通知アイコンの詳細については、Androidの通知アイコンガイドラインを参照してください。

ステップ 2.3: アプリケーションのビルドおよび実行

アプリケーションをプリビルドすると、Braze Expoプラグインが動作するために必要なネイティブファイルが生成されます。

以下のコードスニペットは、アプリケーションをプリビルドするコマンドです。

1
npx expo prebuild

Expoドキュメントの指定に従い、アプリケーションを実行します。設定オプションを変更した場合は、アプリケーションを再度プリビルドして実行する必要があります。

方法 2: React Native CLIの使用

Androidの設定

ステップ 2.1: Kotlin Gradleプラグインの追加

以下のコードスニペットは、最上位プロジェクトのbuild.gradleのbuildscript > dependenciesにKotlin Gradleプラグインを追加する方法です。

1
2
3
4
5
6
7
buildscript {
    dependencies {
        ...
        // Choose your Kotlin version
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.10")
    }
}

これでプロジェクトにKotlinが追加されます。

ステップ 2.2: Braze SDKの設定

Brazeサーバーに接続するには、プロジェクトのres/valuesフォルダにbraze.xmlファイルを作成します。以下のコードスニペットはbraze.xmlの設定例です。APIキーとエンドポイントを実際の値に置き換えてください。

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string translatable="false" name="com_braze_api_key">YOU_APP_IDENTIFIER_API_KEY</string>
  <string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>