> For the complete documentation index, see [llms.txt](https://documentation.pushly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.pushly.com/pushly-ja/integration/implementation-steps/react-native/sdk-react-native.md).

# SDK: React Native

## ステップ1: PushSDKライブラリをインポート

お好みのパッケージマネージャーを使ってPushSDKをインストールしてください。

{% tabs %}
{% tab title="Yarn" %}

```sh
yarn add @pushly/push-sdk-react-native
```

{% endtab %}

{% tab title="NPM" %}

```sh
npm install --save @pushly/push-sdk-react-native
```

{% endtab %}
{% endtabs %}

[<mark style="color:青;">自動リンクは自動的に提供されます</mark>](https://reactnative.dev/blog/2019/07/03/version-60#native-modules-are-now-autolinked) React Native のバージョン **0.60** 以上を使用している場合。

## ステップ2: Androidのセットアップ

### ステップ2.1: Gradle

必要な依存関係を使用して gradle スクリプトを更新します:

{% tabs %}
{% tab title="android/build.gradle" %}

```gradle
buildscript {
    ...
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.13'
    }
}
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="android/app/build.gradle" %}

```gradle
android {
    compileSdk 36
    ...

    defaultConfig {
        ...
        minSdk 24
        targetSdk 34
    }
}

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

{% endtab %}
{% endtabs %}

### ステップ2.2: Google Services

あなたの `google-services.json` ファイルを `android/app` ディレクトリに追加してください。

## ステップ3: iOSのセットアップ

### ステップ3.1: Podsをインストール

あなたの `<project_root>/ios` ディレクトリ内で次を実行します: `pod install`

### ステップ3.2: Notification Service Extensionを追加

画像やカスタムアクションをサポートするリッチ通知を有効にするには、Notification Service Extension が必要です。

アプリの **xcworkspace** を使ってXCodeを開きます。次に、 `File > New > Target` を選択し、その後 `Notification Service Extension` を iOS templates タブ内で選択して `次へ`.

<figure><img src="https://810756845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FIKOtBgXyBx78VJBxuNs9%2Fimage.png?alt=media&#x26;token=b0055514-7e75-4ce8-a0b3-bbba8f2543c6" alt=""><figcaption></figcaption></figure>

「NotificationServiceExtension」を `製品名` に入力し、アプリ拡張のその他の設定情報を入力してから `完了` をクリックしますが、 **後続のダイアログでは有効化をクリックしないでください。** 。

<figure><img src="https://810756845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2F96yVKAthjykdmnXGXlem%2Fimage.png?alt=media&#x26;token=b8ed3424-44e0-4259-b97b-bb1457411164" alt=""><figcaption></figcaption></figure>

クリック `キャンセル` サービス拡張を有効にするよう促すダイアログで \[キャンセル] をクリックし、モーダルを閉じた後にデプロイ先を設定できるようにします。

<img src="https://810756845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FcGXECnSyGjGGEUBg5KDM%2Fimage.png?alt=media&#x26;token=bc91b955-baa5-490f-a32b-dd7367657f9f" alt="" data-size="original">

拡張機能の `デプロイメントターゲット` を **メインのアプリケーションターゲットと同じ値に**.

### ステップ3.3: Service Extension に Pushly 依存関係を追加

あなたの `<project_root>/ios/Podfile`に、 **NotificationServiceExtension** をメインターゲットと同じレベルに追加します:

{% tabs %}
{% tab title="Podfile" %}

```ruby
target 'NotificationServiceExtension' do
  pod 'Pushly', '>= 1.0', '< 2.0'
end
```

{% endtab %}

{% tab title="Podfile の例" %}

```ruby
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "#{linkage} がリンクされた Frameworks で Pod を構成しています".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'PushlyDevApp' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # アプリケーションのルートへの絶対パス。
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'PushlyDevAppTests' do
    inherit! :complete
    # テスト用の Pods
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      config[:reactNativePath],
      # パッチを適用するために `mac_catalyst_enabled` を `true` に設定します
      # Mac Catalyst ビルドに必要な
      :mac_catalyst_enabled => false
    )
  end
end

target 'NotificationServiceExtension' do
  pod 'Pushly', '>= 1.0', '< 2.0'
end
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
このバージョン範囲は意図的に広く設定されており、アップグレード時に狭める必要はありません。React Native SDK の podspec には、ブリッジに必要な正確な `Pushly` バージョンがすでに宣言されており、CocoaPods は両方の要件を満たす単一のバージョンをインストールします。
{% endhint %}

サービス拡張の依存関係が Podfile に追加されたので、インストールを再実行する必要があります。 `<project_root>/ios` ディレクトリ内で次を実行します: `pod install`.

### ステップ3.4: Service Extension を更新

新しく作成された Notification Service Extension を開き、コードを以下に置き換えます:

{% tabs %}
{% tab title="Swift" %}

```swift
import Pushly

class NotificationService: PNNotificationServiceExtension {
}
```

{% endtab %}

{% tab title="Objective-C" %}

```objectivec
// ヘッダーファイルの import を保持してください
#import "NotificationService.h"

@import Pushly;

@interface NotificationService ()

@property (nonatomic, strong) void (^contentHandler)(UNNotificationContent *contentToDeliver);
@property (nonatomic, strong) UNMutableNotificationContent *bestAttemptContent;

@end

@implementation NotificationService

- (void)didReceiveNotificationRequest:(UNNotificationRequest *)request withContentHandler:(void (^)(UNNotificationContent * _Nonnull))contentHandler {
    self.contentHandler = contentHandler;
    self.bestAttemptContent = [request.content mutableCopy];
    
    [PNNotificationServiceExtensionHandler didReceiveExtensionRequest:request content:self.bestAttemptContent withContentHandler:contentHandler];
}

- (void)serviceExtensionTimeWillExpire {
    // システムによって拡張が終了される直前に呼び出されます。
    // これは、変更されたコンテンツの「最善の試行」を配信する機会として使用してください。そうしないと、元のプッシュペイロードが使用されます。
    [PNNotificationServiceExtensionHandler didRecieveExtensionTimeWillExpire:self.bestAttemptContent withContentHandler:self.contentHandler];

    self.contentHandler(self.bestAttemptContent);
}

@end
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
Xcode が Pushly を見つけられないと警告する場合は、ビルド先として実機デバイスまたは「Any iOS Device」オプションが選択されていることを確認してください。
{% endhint %}

### ステップ3.4: メインアプリケーションターゲットに機能を追加

{% hint style="warning" %}
Push Notifications 機能は、 **メインのアプリケーションターゲット**.
{% endhint %}

にのみ追加してください。ルートプロジェクトを選択してから、メインのアプリケーションターゲット > `Signing & Capabilities`

<figure><img src="https://810756845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FPEKQiayxyjIphpjeqxB1%2Fimage.png?alt=media&#x26;token=84e69c08-d120-4a48-a193-a272b9e4f109" alt=""><figcaption></figcaption></figure>

をクリックし、 `+ Capability` を追加して `Push Notifications`.

をクリックし、 `+ Capability` を追加して `Background Modes`.

を追加した後、 `Background Modes` 機能が有効になっていることを確認してください `Remote Notifications` が有効になっていることを確認してください。

<figure><img src="https://810756845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FMAfJ7lisFKGMxQvjpIaB%2Fimage.png?alt=media&#x26;token=7b5b4afb-0a24-4b0a-8ef6-594f763231ea" alt=""><figcaption></figcaption></figure>

をクリックし、 `+ Capability` を追加して `App Groups`.

をクリックし、 `+` にある `App Groups` セクションで新しい名前付きコンテナを追加します。PushSDK が情報を正しく取得できるよう、コンテナ名は `group.{app-bundle-id}.push`.

<figure><img src="https://810756845-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lry9Z27iWOZyQEGAgY7%2Fuploads%2FOR42sYi1kH4o1227pQpY%2Fimage.png?alt=media&#x26;token=c504305e-c703-4e7e-afff-834d9de68aac" alt=""><figcaption></figcaption></figure>

である必要があります。メインのアプリケーションターゲットで、新しく作成された App Group の横のチェックボックスをオンにします。

### ステップ3.5: Notification Service Extension に機能を追加

さて、あなたの **NotificationServiceExtension** ターゲットで `Signing & Capabilities` タブを選択します。

をクリックし、 `+ Capability` を追加して `App Groups`.

最後に、新しく作成された App Group の横のチェックボックスをオンにします。

## ステップ4: SDK の初期化

あなたの `index.tsx` または `app.tsx` ファイルで、以下のサンプル実装コードを使って PushSDK を初期化します。

次の `REPLACE_WITH_SDK_KEY` を `setConfiguration` メソッド内で、プラットフォーム設定ページの SDK キーに置き換えてください。

{% tabs %}
{% tab title="index.tsx" %}

```tsx
...
import { PushSDK, LogLevel } from '@pushly/push-sdk-react-native';

export const App = () => {
    ...

    // PushSDK は useEffect ブロック内で初期化することを推奨します
    // これにより、アプリが以下を呼び出そうとするのを防ぎます
    // PushSDK.setConfiguration() を再レンダリングのたびに実行するのを防ぎます
    React.useEffect(() => {
        PushSDK.setLogLevel(LogLevel.INFO);
        PushSDK.setConfiguration({ appKey: 'REPLACE_WITH_SDK_KEY' });

        PushSDK.showNativeNotificationPermissionPrompt().then(({ granted }) => {
            console.log(`権限が付与されました: ${granted}`);
        });
    }, []);
    
    // アプリの残りの部分
    ...
};
```

{% endtab %}
{% endtabs %}

Android デバイスまたはエミュレーターでアプリケーションを実行し（エミュレーターには `Google Play Store Services` がインストールされていることを確認してください）、iOS 向けにビルドする場合は iOS デバイスで実行して、正しくビルドされることを確認してください。

前のステップで追加したコードにより、アプリを開くとプッシュ権限ダイアログが表示されます。これは [SDK メソッド](/pushly-ja/integration/implementation-steps/react-native/sdk-react-native/sdkmesoddo.md) を使って、ダイアログの表示タイミングを制御するようにカスタマイズできます。

ダイアログを承認した後、プラットフォームにログインして `Notifications > Create Notification` に移動し、適切な **Native: iOS** または **Native: Android** チャネルを対象に、最初の通知を送信します。

## 次の手順

SDK が正しく動作していることを確認したら、次のような追加のオプション機能を引き続き追加できます:

* [<mark style="color:青;">通知の開封 / アプリリンク / ディープリンクの処理</mark>](/pushly-ja/integration/implementation-steps/react-native/sdk-react-native/dpurinku.md)
* [<mark style="color:青;">購読者のプロフィールに属性を付与する</mark>](/pushly-ja/integration/implementation-steps/react-native/sdk-react-native/sdkmesoddo.md)
* [<mark style="color:青;">購読者がどのコンテンツとやり取りしたかに関する情報を送信する</mark>](/pushly-ja/integration/implementation-steps/react-native/sdk-react-native/akutibiti.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://documentation.pushly.com/pushly-ja/integration/implementation-steps/react-native/sdk-react-native.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.