> 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-expopuraguin/sdk-expopuraguin.md).

# SDK: Expoプラグイン

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

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

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

```sh
yarn add @pushly/push-sdk-expo
```

{% endtab %}

{% tab title="NPM" %}

```sh
npm install --save @pushly/push-sdk-expo
```

{% endtab %}
{% endtabs %}

このプラグインは、Pushly React Native SDKに必要なネイティブ設定を適用します

## ステップ2: Expo設定にプラグインを追加する

### ステップ2.1: Google Services

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

### ステップ2.2: app.config.js

プラグインをExpo設定に追加し、App Group ID、AndroidアプリケーションID（次の中のパッケージと一致する必要があります `google-services.json`）、およびあなたの `google-services.json` ファイルへのパスを指定してください:

{% tabs %}
{% tab title="app.config.js" %}

```gradle
export default {
  expo: {
    ...,
    plugins: [
      [
        '@pushly/push-sdk-expo',
        {
          ios: {
            enableNse: true,
            nseTargetName: 'NotificationServiceExtension',
            nseBundleIdSuffix: '.NotificationServiceExtension',
            appGroupId: 'group.com.pushly.PushSdkReactNativeExample',
            iosDeploymentTarget: '15.0',
            swiftVersion: '5.0',
          },
          android: {
            applicationId: 'com.example.myapp',
            googleServicesFile: './app/google-services.json',
            applyGoogleServicesPlugin: true,
          },
        },
      ],
    ],
  },
};
```

{% endtab %}
{% endtabs %}

<table><thead><tr><th>プロパティ</th><th>定義</th></tr></thead><tbody><tr><td><pre><code>ios.enableNse
</code></pre></td><td>プラグインにNotificationServiceExtensionをインストールさせます</td></tr><tr><td><pre><code>ios.nseTargetName
</code></pre></td><td>NotificationServiceExtensionのユーザー定義名。 <br><code>デフォルト: NotificationServiceExtension</code></td></tr><tr><td><pre><code>ios.nseBundleIdSuffix
</code></pre></td><td>NotificationServiceExtensionのバンドルIDサフィックス。値はPRODUCT_BUNDLE_IDENTIFIER環境変数に追加されます。<br><code>デフォルト: .NotificationServiceExtension</code></td></tr><tr><td><pre><code>ios.appGroupId
</code></pre></td><td>PushSDKが情報を正しく取得できるようにするため、コンテナは次の名前にする必要があります <code>group.{app-bundle-id}.push</code>.</td></tr><tr><td><pre><code>ios.DeploymentTarget
</code></pre></td><td>pbxprojファイルでNotificationServiceExtensionターゲットを設定するために使用されます</td></tr><tr><td><pre><code>ios.swiftVersion
</code></pre></td><td>pbxprojファイルでNotificationServiceExtensionターゲットを設定するために使用されます</td></tr><tr><td><pre><code>android.applicationId
</code></pre></td><td>Androidアプリケーションで使用されるアプリケーションID</td></tr><tr><td><pre><code>android.googleServicesFile
</code></pre></td><td>app.plugin.jsから見たgoogle-services.jsonファイルの場所</td></tr><tr><td><pre><code>android.applyGoogleServicesPlugin
</code></pre></td><td>gradleでgoogle servicesプラグインを適用する必要があります。</td></tr></tbody></table>

実行 `expo prebuild --clean` （またはEAS Build/カスタムdevクライアントを使用）して、Pushly設定が適用されたネイティブプロジェクトを生成します。

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

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

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

## ステップ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(`Permissions granted: ${granted}`);
        });
    }, []);
    
    // アプリの残りの部分
    ...
};
```

{% endtab %}
{% endtabs %}

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

前のステップで追加したコードにより、アプリを開くとプッシュ通知の許可ダイアログが表示されます。これは [SDKメソッド](broken://pages/b3c743a171f58464252fb087ba8b051c764bed9a) を使用して、ダイアログを表示するタイミングを制御することでカスタマイズできます。

ダイアログを承認した後、プラットフォームにログインして `Notifications > Create Notification` に移動し、適切な **ネイティブ: iOS** または **ネイティブ: 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:

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

The question should be specific, self-contained, and written in natural language.
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.