> 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: パッケージをインストールする

`@pushly/push-sdk-expo` ネイティブ構成を適用します; `@pushly/push-sdk-react-native` インポート元となる実行時 SDK を提供します。両方をインストールしてください。

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

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

{% endtab %}

{% tab title="NPM" %}

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

{% endtab %}
{% endtabs %}

## ステップ 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" %}

```javascript
export default {
  expo: {
    ...,
    plugins: [
      [
        '@pushly/push-sdk-expo',
        {
          ios: {
            nseTargetName: 'NotificationServiceExtension',
            nseBundleIdSuffix: '.NotificationServiceExtension',
            appGroupId: 'group.com.example.myapp.push',
            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.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.swiftVersion
</code></pre></td><td>pbxproj ファイル内で NotificationServiceExtension ターゲットを設定するために使用されます。<br><code>デフォルト: 5.0</code></td></tr><tr><td><pre><code>android.applicationId
</code></pre></td><td>Android アプリケーションで使用されるアプリケーション ID。デフォルトは <code>android.package</code> Expo 設定から。</td></tr><tr><td><pre><code>android.googleServicesFile
</code></pre></td><td>プロジェクトのルートからの相対パスでの google-services.json ファイルの場所</td></tr><tr><td><pre><code>android.applyGoogleServicesPlugin
</code></pre></td><td>Gradle で Google Services プラグインを適用すべきです。<br><code>デフォルト: true</code></td></tr></tbody></table>

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

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

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

次の `<project_root>/ios` ディレクトリで次を実行: `bundle exec pod install`

### ステップ 3.2: Notification Service Extension

1つの **Notification Service Extension** は、完全なリッチメディアと分析トラッキング機能を有効にするために必要です。このプラグインは prebuild 中に自動でインストールします。

{% hint style="warning" %}
使用する `expo run:ios` または EAS ビルドを使用して、NSE が自動的にインストールされるようにしてください。プロジェクトにチェックイン済みの `ios/` ディレクトリがある場合、 `expo prebuild` は再生成されず、EAS は prebuild を完全にスキップします。その場合は、 `npx expo prebuild --platform ios --clean` を実行して、拡張機能をインストールしてください。
{% endhint %}

ビルドに拡張機能がインストールされたことを確認するには、IPA を確認します:

```bash
unzip -l YourApp.ipa | grep appex
```

次が表示されるはずです `PlugIns/NotificationServiceExtension.appex`。表示されない場合、拡張機能はインストールされていません — dev ビルドまたは EAS ビルドを使用していること、および prebuild が実行されたことを確認してください。

## ステップ 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 ストア サービス` がインストールされていることを確認してください）、または iOS 向けにビルドする場合は iOS デバイス上で実行し、正しくビルドされることを確認してください。

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

ダイアログを承認した後、プラットフォームにログインして `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, and the optional `goal` query parameter:

```
GET https://documentation.pushly.com/pushly-ja/integration/implementation-steps/react-native-expopuraguin/sdk-expopuraguin.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.