> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue JS Web SDKセットアップ

> onesignal-vueまたは@onesignal/onesignal-vue3プラグインを使用してVue.jsアプリケーションにOneSignal Webプッシュ通知を統合します。シームレスなプッシュ配信のためのインストール、構成、サービスワーカーのカスタマイズ方法を学びます。

export const SdkReleasesIframe = ({sdkFilter = undefined, viewMode = undefined, height, ...frameProps}) => {
  const baseUrl = 'https://onesignal.github.io/sdk-releases';
  const buildUrl = (theme, sdkFilter, viewMode) => {
    const url = new URL(baseUrl);
    const params = new URLSearchParams();
    if (theme) {
      params.set('theme', theme);
    }
    if (sdkFilter) {
      params.set('sdk', sdkFilter);
    }
    if (viewMode) {
      params.set('viewMode', viewMode);
    }
    if (params.toString()) {
      url.search = params.toString();
    }
    return url.toString();
  };
  const detectTheme = () => {
    if (document.documentElement.classList.contains('dark')) {
      return 'dark';
    }
    return 'light';
  };
  const [theme, setTheme] = useState('light');
  const [iframeSrc, setIframeSrc] = useState(() => {
    const initialTheme = detectTheme();
    return buildUrl(initialTheme, sdkFilter, viewMode);
  });
  useEffect(() => {
    const currentTheme = detectTheme();
    setTheme(currentTheme);
    setIframeSrc(buildUrl(currentTheme, sdkFilter, viewMode));
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleThemeChange = () => {
      const newTheme = detectTheme();
      setTheme(newTheme);
      setIframeSrc(buildUrl(newTheme, sdkFilter, viewMode));
    };
    if (mediaQuery.addEventListener) {
      mediaQuery.addEventListener('change', handleThemeChange);
    } else {
      mediaQuery.addListener(handleThemeChange);
    }
    window.addEventListener('storage', handleThemeChange);
    const observer = new MutationObserver(handleThemeChange);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class', 'data-theme']
    });
    return () => {
      if (mediaQuery.removeEventListener) {
        mediaQuery.removeEventListener('change', handleThemeChange);
      } else {
        mediaQuery.removeListener(handleThemeChange);
      }
      window.removeEventListener('storage', handleThemeChange);
      observer.disconnect();
    };
  }, [sdkFilter, viewMode]);
  const getIframeHeight = () => {
    if (viewMode === 'table') {
      return '450';
    }
    if (viewMode === 'mini') {
      return '170';
    }
    return '800';
  };
  const iframeHeight = height || getIframeHeight();
  return <Frame {...frameProps}>
      <iframe src={iframeSrc} width="100%" height={iframeHeight} frameBorder="0" style={{
    border: "none"
  }} title="SDK Releases" key={iframeSrc} />
    </Frame>;
};

<SdkReleasesIframe sdkFilter="vue" viewMode="mini" />

## 概要

このガイドでは、Vue.jsアプリケーションにOneSignalプッシュ通知を統合する方法について説明します。公式のOneSignal Vueプラグインを使用したVue 2とVue 3の両方を対象とし、サービスワーカーの構成やTypeScriptサポートなどの主要なセットアップの考慮事項を含みます。

***

## 要件

* 構成されたOneSignalアプリとプラットフォーム。開始するには[Webプッシュセットアップ](./web-push-setup)を参照してください。

### Vue互換性

Vue環境と互換性のあるプラグインバージョンをインストールしてください。

| Vue | OneSignal Plugin                                              |
| --- | ------------------------------------------------------------- |
| 2   | [onesignal-vue](https://github.com/OneSignal/onesignal-vue)   |
| 3   | [onesignal-vue3](https://github.com/OneSignal/onesignal-vue3) |

***

## インストール

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

<CodeGroup>
  ```bash yarn theme={null}
  yarn add onesignal-vue
  # or yarn add @onesignal/onesignal-vue3
  ```

  ```bash npm theme={null}
  npm install --save onesignal-vue
  # or npm install --save @onesignal/onesignal-vue3
  ```
</CodeGroup>

***

## 初期化

OneSignalサービスをインポートし、ルートコンポーネントで初期化します。`init`関数は、OneSignalが読み込まれたときに解決されるプロミスを返します。

`YOUR_APP_ID`を[キーとID](./keys-and-ids)で見つかるOneSignalアプリIDに置き換えてください。

<CodeGroup>
  ```javascript Vue2 theme={null}
  import Vue from 'vue'
  import OneSignalVue from 'onesignal-vue'

  Vue.use(OneSignalVue);

  new Vue({
    render: h => h(App),
    beforeMount() {
      this.$OneSignal.init({ appId: 'YOUR_APP_ID' });
    }
  }).$mount('#app')
  //Example 1
  await this.$OneSignal.init({ appId: 'YOUR_APP_ID' });
  // do other stuff

  //Example 2
  this.$OneSignal.init({ appId: 'YOUR_APP_ID' }).then(() => {
    // do other stuff
  });
  ```

  ```javascript Vue3 theme={null}
  /*
  Vue 3では、`use`関数の引数としてOneSignal初期化オプションを直接渡すことができます。コード補完などのエディターの利点を好む場合は、個別に初期化することもできます。
  */
  import { createApp } from 'vue'
  import OneSignalVuePlugin from '@onesignal/onesignal-vue3'

  createApp(App).use(OneSignalVuePlugin, {
    appId: 'YOUR_APP_ID',
  }).mount('#app');

  // OR

  import { createApp } from 'vue'
  import OneSignalVuePlugin from '@onesignal/onesignal-vue3'

  createApp(App).use(OneSignalVuePlugin).mount('#app');

  // component
  this.$OneSignal.init({
    appId: "YOUR_APP_ID"
  });
  ```
</CodeGroup>

OneSignalプラグインは、アプリケーション内でアクセス可能な`$OneSignal`グローバルプロパティを自動的に公開します。

### Composition API

[`setup`](https://vuejs.org/api/composition-api-setup.html#basic-usage)内から呼び出すことができる`useOneSignal()`フックを介して、Vueの[Composition API](https://vuejs.org/guide/extras/composition-api-faq.html)を活用することもできます。

### init オプションのカスタマイズ

追加の[`init`パラメーター](./web-sdk-reference#init)を使用して初期化をカスタマイズできます。

### サービスワーカーの設定

まだ行っていない場合は、[OneSignalサービスワーカーファイルをダウンロード](https://github.com/OneSignal/OneSignal-Website-SDK/files/11480764/OneSignalSDK-v16-ServiceWorker.zip)してサイトに追加する必要があります。

`OneSignalSDKWorker.js`ファイルは公開アクセス可能である必要があります。`public`ディレクトリ、トップレベルルート、またはサブディレクトリに配置できます。ただし、ファイルをサブディレクトリに配置する場合や、サイトに別のサービスワーカーがある場合は、パスを指定してください。詳細については、[OneSignalサービスワーカー](./onesignal-service-worker)を参照してください。

| オプション                | 説明                                                                                           |
| -------------------- | -------------------------------------------------------------------------------------------- |
| `serviceWorkerParam` | OneSignalワーカーによって制御されるスコープ。**推奨：** カスタムサブパスを使用します（例：`"/onesignal/"`）。                        |
| `serviceWorkerPath`  | ホストされているOneSignalサービスワーカーファイルへのパス（例：`"onesignal/OneSignalSDKWorker.js"`）。公開アクセス可能である必要があります。 |

**例：**

```javascript theme={null}
this.$OneSignal.init({
  appId: 'YOUR-ONESIGNAL-APP-ID',
  serviceWorkerParam: {
    scope: '/onesignal/'
  },
  serviceWorkerPath: 'onesignal/OneSignalSDKWorker.js'
});
```

#### ワーカーのホスティング

* パブリックルート（デフォルト）：`/OneSignalSDKWorker.js`
* カスタムフォルダー（推奨）：例：前のステップで設定した`/onesignal/OneSignalSDKWorker.js`

#### サービスワーカーのホスティングを確認

ブラウザでパスにアクセスして、アクセス可能であることを確認します。

ルートを使用した場合：

```
https://your-site.com/OneSignalSDKWorker.js
```

例のパスを使用した場合：

```
https://your-site.com/onesignal/OneSignalSDKWorker.js
```

有効なJavaScriptが返されるはずです。

### 重要な注意事項

* 開発環境での重複初期化を回避
  * 開発環境でテストする場合、OneSignal SDKが2回初期化され、コンソールエラーが発生する可能性があります。
  * これは、`<React.StrictMode>`が開発環境でエフェクトを2回実行するために発生します。解決するには、開発中にルートコンポーネントから`<React.StrictMode>`を削除してください。

<Warning>
  厳密モードは開発環境にのみ影響します。本番ビルドには影響しません。
</Warning>

***

## OneSignal SDK統合のテスト

このガイドでは、プッシュ通知とサブスクリプション登録をテストして、OneSignal SDK統合が正しく機能していることを確認する方法を説明します。

### Webプッシュサブスクリプションを確認

<Steps>
  <Step title="テストデバイスでサイトを起動します。">
    * テスト中は、Chrome、Firefox、Edge、またはSafariを使用してください。
    * \*\*シークレットモードやプライベートブラウジングモードは使用しないでください。\*\*これらのモードでは、ユーザーはプッシュ通知にサブスクライブできません。
    * [許可プロンプト](/docs/ja/permission-requests)の設定に基づいてプロンプトが表示されるはずです。
    * プッシュ通知にサブスクライブするには、ネイティブプロンプトで**Allow**をクリックします。

    <Frame caption="Webプッシュのネイティブ許可プロンプト">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/push/web-push-native-permission-prompt.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=91c15dd6677de6a0ba37da20449ccca1" alt="通知を許可またはブロックするかを尋ねるブラウザのネイティブ許可プロンプト" width="1724" height="974" data-path="images/push/web-push-native-permission-prompt.png" />
    </Frame>
  </Step>

  <Step title="OneSignalダッシュボードを確認">
    * **Audience > Subscriptions**に移動します。
    * ステータスが**Subscribed**の新しいエントリが表示されるはずです。

    <Frame caption="「Subscribed」ステータスのサブスクリプションを表示するダッシュボード">
      <img src="https://mintcdn.com/onesignal/KPVdijCt4_xCbkO8/images/dashboard/web-push-subscription-status.png?fit=max&auto=format&n=KPVdijCt4_xCbkO8&q=85&s=786e9c5e4131f01fef20d11bebd1a3d0" alt="OneSignalダッシュボードのサブスクリプションページ。Subscribedステータスのウェブプッシュサブスクリプションを表示" width="1188" height="742" data-path="images/dashboard/web-push-subscription-status.png" />
    </Frame>

    <Check>[Webプッシュサブスクリプション](/docs/ja/subscriptions)の作成に成功しました。
    Webプッシュサブスクリプションは、ユーザーがサイトでプッシュ通知に初めてサブスクライブしたときに作成されます。</Check>
  </Step>
</Steps>

### テストサブスクリプションをセットアップ

テストサブスクリプションは、メッセージを送信する前にプッシュ通知をテストするのに役立ちます。

<Steps>
  <Step title="Test Usersに追加します。">
    ダッシュボードで、サブスクリプションの横にある\*\*Options（3つのドット）\*\*ボタンをクリックし、**Add to Test Users**を選択します。

    <Frame caption="デバイスをtest usersに追加">
      <img src="https://mintcdn.com/onesignal/NCUI56Tiw7V-s0dT/images/dashboard/add-to-test-subscriptions.png?fit=max&auto=format&n=NCUI56Tiw7V-s0dT&q=85&s=2455d4cd74ea4ad686f76730cd95bbaa" alt="サブスクリプションのオプションメニュー。テストサブスクリプションに追加オプションを表示" width="1188" height="742" data-path="images/dashboard/add-to-test-subscriptions.png" />
    </Frame>
  </Step>

  <Step title="サブスクリプションに名前を付けます。">
    **test usersタブ**で後でデバイスを簡単に識別できるように、サブスクリプションに名前を付けます。
  </Step>

  <Step title="テストユーザーセグメントを作成します。">
    **Audience > Segments > New Segment**に移動します。
  </Step>

  <Step title="セグメントに名前を付けます。">
    セグメントに`Test Users`という名前を付けます（この名前は後で使用されるため重要です）。
  </Step>

  <Step title="Test Usersフィルターを追加し、Create Segmentをクリックします。">
    <Frame caption="Test Usersフィルターを使用して「Test Users」セグメントを作成">
      <img src="https://mintcdn.com/onesignal/NCUI56Tiw7V-s0dT/images/dashboard/create-test-users-segment.png?fit=max&auto=format&n=NCUI56Tiw7V-s0dT&q=85&s=91b8a021be6e83662854e68ec3e1da04" alt="セグメントエディター。Test Usersフィルターが選択され、セグメント名がTest Usersになっている" width="1188" height="742" data-path="images/dashboard/create-test-users-segment.png" />
    </Frame>

    <Check>テストユーザーのセグメントの作成に成功しました。
    この個別のデバイスとテストユーザーのグループにメッセージを送信するテストが可能になりました。</Check>
  </Step>
</Steps>

### API経由でテストプッシュを送信

<Steps>
  <Step title="App API KeyとApp IDを取得します。">
    OneSignalダッシュボードで、\*\*Settings > [Keys & IDs](/docs/ja/keys-and-ids)\*\*に移動します。
  </Step>

  <Step title="提供されたコードを更新します。">
    以下のコードの`YOUR_APP_API_KEY`と`YOUR_APP_ID`を実際のキーに置き換えます。このコードは、先ほど作成した`Test Users`セグメントを使用します。

    ```curl theme={null}
    curl -X \
    POST --url 'https://api.onesignal.com/notifications' \
     --header 'content-type: application/json; charset=utf-8' \
     --header 'authorization: Key YOUR_APP_API_KEY' \
     --data \
     '{
      "app_id": "YOUR_APP_ID",
      "target_channel": "push",
      "name": "Testing basic setup",
      "headings": {
      	"en": "👋"
      },
      "contents": {
        "en": "Hello world!"
      },
      "included_segments": [
        "Test Users"
      ],
      "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
    }'
    ```
  </Step>

  <Step title="コードを実行します。">
    ターミナルでコードを実行します。
  </Step>

  <Step title="画像とconfirmed receiptを確認します。">
    すべてのセットアップ手順が正常に完了した場合、テストサブスクリプションは通知を受信するはずです。

    <Warning>画像をサポートしているのはChromeのみです。画像は折りたたまれた通知ビューでは小さく表示されます。通知を展開すると、完全な画像が表示されます。</Warning>

    <Frame caption="Chrome macOSで画像付きの展開されたプッシュ通知">
      <img src="https://mintcdn.com/onesignal/FXJz6yFfOqztaEND/images/push/web-push-image.png?fit=max&auto=format&n=FXJz6yFfOqztaEND&q=85&s=8dd90279daff9e24d3fd281e73aa1e74" alt="Chrome macOSでカスタム画像を表示した展開されたプッシュ通知" width="740" height="896" data-path="images/push/web-push-image.png" />
    </Frame>
  </Step>

  <Step title="confirmed receiptを確認します。">
    ダッシュボードで**Delivery > Sent Messages**に移動し、メッセージをクリックして統計を表示します。**confirmed**統計が表示されるはずです。これはデバイスがプッシュを受信したことを意味します。

    <Note>Safariはconfirmed receiptをサポートしていません。</Note>

    <Card title="プッシュ通知メッセージレポート" icon="chart-bar" href="/docs/ja/push-notification-message-reports">
      プッシュ通知の配信、クリック、コンバージョン統計を表示します。
    </Card>
  </Step>
</Steps>

<Check>API経由でセグメントに通知を送信することに成功しました。</Check>

通知が届かない場合は、以下の情報を添えて`support@onesignal.com`にご連絡ください：

* APIリクエストとレスポンスを`.txt`ファイルにコピー＆ペースト
* サブスクリプションID
* OneSignalコードを含むウェブサイトURL

***

## ユーザー識別

前のセクションではウェブプッシュ[サブスクリプション](/docs/ja/subscriptions)の作成方法を説明しました。このセクションでは、OneSignal SDKを使用してすべてのサブスクリプション（プッシュ、メール、SMSを含む）にわたる[ユーザー](/docs/ja/users)の識別に拡張します。プラットフォーム間でユーザーを統合しエンゲージするために、External ID、タグ、マルチチャネルサブスクリプション、プライバシー、イベントトラッキングについて説明します。

### External IDを割り当て

External IDを使用して、バックエンドのユーザー識別子を使用して、デバイス、メールアドレス、電話番号間でユーザーを一貫して識別します。これにより、チャネルとサードパーティシステム間でメッセージングが統一されたままになります（特に[統合](/docs/ja/integrations)に重要）。

SDKの[`login`メソッド](/docs/ja/web-sdk-reference#login-external-id)を使用して、アプリによってユーザーが識別されるたびにExternal IDを設定します。

<Note>
  OneSignalは、サブスクリプション（Subscription ID）とユーザー（OneSignal ID）に対して一意の読み取り専用IDを生成します。

  ユーザーが異なるデバイスでアプリをダウンロードしたり、ウェブサイトにサブスクライブしたり、アプリ外でメールアドレスや電話番号を提供したりすると、新しいサブスクリプションが作成されます。

  すべてのサブスクリプションにわたってユーザーを識別するために、SDKを介してExternal IDを設定することを強くお勧めします。作成方法に関係なく。
</Note>

### データタグを追加

[タグ](/docs/ja/add-user-data-tags)は、ユーザープロパティ（`username`、`role`、設定など）とイベント（`purchase_date`、`game_level`、ユーザーインタラクションなど）を保存するために使用できる文字列データのキーと値のペアです。タグは、高度な[メッセージパーソナライゼーション](/docs/ja/message-personalization)と[セグメンテーション](/docs/ja/segmentation)を強化し、より高度なユースケースを可能にします。

アプリでイベントが発生したときに、SDKの[`addTag`および`addTags`メソッド](/docs/ja/web-sdk-reference#addtag-%2C-addtags)を使用してタグを設定します。

この例では、ユーザーはレベル6に到達し、`current_level`というタグで識別され、値は`6`に設定されます。

<Frame caption="&#x22;current_level&#x22;というタグが&#x22;6&#x22;に設定されたOneSignalのユーザープロファイル">
  <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/d4674261847231079fecc176ba88065409c90943e3854b9df200457325a0aed4-Screenshot_2025-03-18_at_14.47.25.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=91083bf83a4c03ea40d485b23f072259" alt="OneSignal user profile showing a data tag named current_level with value 6" width="1380" height="941" data-path="images/docs/d4674261847231079fecc176ba88065409c90943e3854b9df200457325a0aed4-Screenshot_2025-03-18_at_14.47.25.png" />
</Frame>

レベルが5から10の間のユーザーのセグメントを作成し、それを使用してターゲット化されたパーソナライズされたメッセージを送信できます：

<Frame caption="current_level値が4より大きく10より小さいユーザーをターゲットとするセグメントを示すセグメントエディター">
  <img src="https://mintcdn.com/onesignal/3zq1PvSaqvUE2bIx/images/docs/300d36b632a6f6d7017780457bbe2610b71767fd0db093c7611e59714dcbda5b-Screenshot_2025-03-18_at_14.49.56.png?fit=max&auto=format&n=3zq1PvSaqvUE2bIx&q=85&s=b84ab0d2c6eedbd6d4e7a2bf15afe103" alt="Segment editor filtering users where current_level is greater than 4 and less than 10" width="1380" height="941" data-path="images/docs/300d36b632a6f6d7017780457bbe2610b71767fd0db093c7611e59714dcbda5b-Screenshot_2025-03-18_at_14.49.56.png" />
</Frame>

<br />

<Frame caption="パーソナライズされたメッセージでLevel 5-10セグメントをターゲットとするプッシュ通知を示すスクリーンショット">
  <img src="https://mintcdn.com/onesignal/tc0EvmtSSX56SX0c/images/docs/97e09b42d25c6d3f4c7cb0a6fff4dfb8893cbb4b283f7ff1f77977c33113319c-Screenshot_2025-03-18_at_14.55.47.png?fit=max&auto=format&n=tc0EvmtSSX56SX0c&q=85&s=c7839b12057d65a12a4eaddce6e2c11f" alt="Push notification composer targeting the Level 5-10 segment with a personalized message" width="2764" height="2286" data-path="images/docs/97e09b42d25c6d3f4c7cb0a6fff4dfb8893cbb4b283f7ff1f77977c33113319c-Screenshot_2025-03-18_at_14.55.47.png" />
</Frame>

### メールおよび/またはSMSサブスクリプションを追加

OneSignal SDKはユーザーがオプトインすると自動的にウェブプッシュサブスクリプションを作成します。対応するサブスクリプションを作成することで、メールとSMSチャネルを通じてユーザーにリーチすることもできます。

* [`addEmail`メソッド](/docs/ja/web-sdk-reference#addemail-%2C-removeemail)を使用してメールサブスクリプションを作成します。
* [`addSms`メソッド](/docs/ja/web-sdk-reference#addsms-%2C-removesms)を使用してSMSサブスクリプションを作成します。

メールアドレスや電話番号がOneSignalアプリに既に存在する場合、SDKはそれを既存のユーザーに追加し、重複は作成しません。

ダッシュボードの**Audience > Users**または[View user API](/reference/view-user)を使用して、統合されたユーザーを表示できます。

<Frame caption="External IDによって統合されたプッシュ、メール、SMSサブスクリプションを持つユーザープロファイル">
  <img src="https://mintcdn.com/onesignal/56ctKxZSV4m5VEkn/images/docs/b1cf9999d41da6e4ce333e1126612529b85eac47447bb0b434418d082f595acd-Screenshot_2025-03-18_at_14.43.46.png?fit=max&auto=format&n=56ctKxZSV4m5VEkn&q=85&s=7c3885b66e44e097fa0ed7c47f27c911" alt="OneSignal user profile showing push, email, and SMS subscriptions linked by External ID" width="1506" height="848" data-path="images/docs/b1cf9999d41da6e4ce333e1126612529b85eac47447bb0b434418d082f595acd-Screenshot_2025-03-18_at_14.43.46.png" />
</Frame>

<Note>
  マルチチャネルコミュニケーションのベストプラクティス

  * メールまたはSMSサブスクリプションを追加する前に、明示的な同意を得てください。
  * 各コミュニケーションチャネルの利点をユーザーに説明してください。
  * ユーザーが好むチャネルを選択できるように、チャネルの設定を提供してください。
</Note>

***

### プライバシーとユーザー同意

OneSignalがユーザーデータを収集するタイミングを制御するには、SDKの同意ゲーティングメソッドを使用します：

* [`setConsentRequired(true)`](/docs/ja/web-sdk-reference#setconsentrequired)：同意が与えられるまでデータ収集を防ぎます。
* [`setConsentGiven(true)`](/docs/ja/web-sdk-reference#setconsentgiven)：同意が付与されるとデータ収集を有効にします。

プライバシーとセキュリティの詳細については：

<Columns cols={2}>
  <Card title="SDKが収集するデータ" icon="database" href="/docs/ja/data-collected-by-the-onesignal-sdk">
    OneSignal SDKがユーザーから収集するデータを確認します。
  </Card>

  <Card title="個人データの取り扱い" icon="shield-halved" href="/docs/ja/handling-personal-data">
    プライバシー規制に準拠してユーザーデータを管理および保護します。
  </Card>
</Columns>

***

## プッシュ、ユーザー、アプリ内イベントをリッスン

SDKリスナーを使用して、ユーザーのアクションと状態の変化に反応します。

SDKは、フックできるいくつかのイベントリスナーを提供します。詳細については、[SDKリファレンスガイド](/docs/ja/web-sdk-reference)を参照してください。

### プッシュ通知イベント

* [クリックイベントリスナー](/docs/ja/web-sdk-reference#click)：通知がタップされたときを検出します。
* [フォアグラウンドライフサイクルリスナー](/docs/ja/web-sdk-reference#foregroundwilldisplay)：フォアグラウンドでの通知の動作を制御します。

### ユーザー状態の変更

* [ユーザー状態変更イベントリスナー](/docs/ja/web-sdk-reference#addeventlistener-user-state)：External IDが設定されたときを検出します。
* [許可オブザーバー](/docs/ja/web-sdk-reference#permissionchange)：ネイティブのプッシュ許可プロンプトとのユーザーの特定のインタラクションを追跡します。
* [プッシュサブスクリプション変更オブザーバー](/docs/ja/web-sdk-reference#addeventlistener-push-subscription-changes)：プッシュサブスクリプションのステータスが変更されたときを追跡します。

***

## 高度なセットアップと機能

統合を強化するための追加機能を探索します：

<Columns cols={3}>
  <Card title="OneSignalへの移行" icon="rotate" href="/docs/ja/migrating-to-onesignal">
    別のプッシュプロバイダーからOneSignalに移行します。
  </Card>

  <Card title="統合" icon="plug" href="/docs/ja/integrations">
    OneSignalをサードパーティツールとプラットフォームに接続します。
  </Card>

  <Card title="アクションボタン" icon="bell" href="/docs/ja/action-buttons">
    プッシュ通知にインタラクティブなボタンを追加します。
  </Card>

  <Card title="多言語メッセージング" icon="globe" href="/docs/ja/multi-language-messaging">
    ユーザーの好みの言語でローカライズされたメッセージを送信します。
  </Card>

  <Card title="Identity Verification" icon="shield-check" href="/docs/ja/identity-verification">
    サーバーサイドのIdentity VerificationでSDK統合を保護します。
  </Card>

  <Card title="カスタムアウトカム" icon="chart-line" href="/docs/ja/custom-outcomes">
    メッセージに関連するカスタムコンバージョンイベントを追跡します。
  </Card>
</Columns>

### Web SDKのセットアップとリファレンス

<Columns cols={2}>
  <Card title="Webプッシュセットアップ" icon="gear" href="/docs/ja/web-push-setup">
    統合のすべての主要なウェブプッシュ機能を有効にします。
  </Card>

  <Card title="Web SDKリファレンス" icon="code" href="/docs/ja/web-sdk-reference">
    利用可能なメソッドと設定オプションの完全な詳細。
  </Card>
</Columns>

<Check>おめでとうございます！Web SDKセットアップガイドが正常に完了しました。</Check>

***

<Info>
  サポートが必要ですか？

  サポートチームとチャットするか、`support@onesignal.com`にメールしてください

  以下を含めてください：

  * 発生している問題の詳細と再現手順（利用可能な場合）
  * OneSignal App ID
  * 該当する場合は、External IDまたはSubscription ID
  * 該当する場合は、OneSignalダッシュボードでテストしたメッセージのURL
  * 関連する[ログまたはエラーメッセージ](/docs/ja/capturing-a-debug-log)

  お気軽にお問い合わせください！
</Info>