方法1：Expoプラグインを使用する

2.1 Braze Expoプラグインをインストールする {#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}

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での設定

以下のコードスニペットは、@drawable/プレフィックスを使用してapp.jsonで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}

アプリケーションをプレビルドすると、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（オプション）ダイナミックXCFrameworks用にPodfileを設定する

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

この配布チャネルを使用する場合は、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での設定

以下のコードスニペットは、@drawable/プレフィックスを使用してapp.jsonで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>

以下のコードスニペットは、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ライブラリを自動的に取り込むことができます。