> ## 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.

# Web権限プロンプト

> OneSignalのWebプッシュ権限プロンプトを使用してプッシュ通知のオプトインを増やす方法を学びます。ソフトプロンプト、ネイティブブラウザプロンプト、スライドダウンプロンプト、カテゴリ設定、メールと電話番号の収集、およびサブスクリプションベルのカスタマイズについて説明します。

***

<Frame>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/yQBdt7Kf1Lg?si=XSBE3dIb1eBqjOZA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen />
</Frame>

***

## 概要

「プロンプト」とは、プッシュ通知を送信する許可をユーザーに求めるプロセスを指します。プロンプトは、ブラウザまたはモバイルアプリによって表示されるポップアップメッセージであり、サブスクライブしてプッシュ通知を受信するには、ユーザーが「許可」をクリックする必要があります。

WebプッシュはDesktop、Android、iOSで動作しますが、[iOSのWebプッシュには追加の設定手順が必要](./web-push-for-ios)であることに注意してください。モバイルアプリをお持ちの場合は、[アプリ内メッセージでプッシュ権限をプロンプトする方法](./prompt-for-push-permissions)をご覧ください。

ブラウザは独自のネイティブなシステムレベルの権限プロンプトを提供しており、ユーザーがWebサイトにサブスクライブするには、これを表示して「許可」をクリックする必要があります。ブラウザは現在、ネイティブ権限プロンプトを表示する際に[Webサイトがより選択的であることを強く推奨](https://onesignal.com/blog/changes-to-chrome-and-firefox-permission-prompting)しています。これが、ネイティブプロンプトの前にOneSignalプロンプトまたは独自のカスタム「ソフトプロンプト」を使用することが推奨される理由です。

### OneSignalプロンプト（ソフトプロンプト）

OneSignalソフトプロンプトは、ブラウザのネイティブ権限ダイアログの前に表示される、ユーザーフレンドリーでカスタマイズ可能なプロンプトです。これらのプロンプトは、ユーザーを通知にサブスクライブさせるものではありません。代わりに、次のような役割を果たします：

1. 通知（プッシュ、メール、またはSMS）へのサブスクライブの価値を説明します。
2. ブラウザが権限リクエストを自動的にブロックするのを防ぎます。
3. ユーザーが関心を示した後にのみ、ネイティブブラウザプロンプトを起動します。

ソフトプロンプトは[ブラウザによって推奨されて](https://onesignal.com/blog/changes-to-chrome-and-firefox-permission-prompting)おり、ドメインの評判を保護しながらオプトイン率を最大化するのに役立ちます。

***

## プロンプトアイコン

Webプッシュ通知に表示されるアイコンをカスタマイズするには、OneSignalダッシュボードに移動します：**Settings > Push & In-App > Web Settings**。

**Site Setup**セクションで、**Default Icon URL**を設定します。このアイコンは、特に指定しない限り、すべての通知に表示されます。

* 受け入れられる形式：`.png`または`.jpg`
* 推奨サイズ：`256x256`ピクセル（Safariの要件を満たすため）
* 設定されていない場合、OneSignalは汎用のベルアイコンを使用します

この設定はいつでも変更できます。

<Frame caption="画像は、Webプッシュ設定のSite Setupセクションを示しています。ここで、Webサイト名、サイトURL、およびデフォルトアイコンを設定します。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/prompt-icon-site-setup.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=17d8ced53a0a9606ee0e5ffcd1c55d4a" width="2028" height="750" data-path="images/docs/prompt-icon-site-setup.png" />
</Frame>

***

## 権限プロンプトの設定

ユーザーのサブスクリプションを促進するために、サイトに表示したいプロンプトを設定します。OneSignalダッシュボードで、**Settings > Push & In-App > Web Settings > Permission Prompt Setup**に移動します。

そこから、**Add Prompt**をクリックして、OneSignalの利用可能なプロンプトタイプから選択します。リストに既に表示されている既存のプロンプトを編集することもできます。

<Frame caption="新しいプロンプトを追加するか、編集したいプロンプトを選択します。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/permission-prompt-setup.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=7f4d0dec6942dce06f795f0397df5633" width="2028" height="576" data-path="images/docs/permission-prompt-setup.png" />
</Frame>

各プロンプトタイプには、異なるユースケースと表示動作があります。個別に使用することも、組み合わせて使用して、WebサイトのUXに合った方法でユーザーをサブスクリプションプロセスに導くこともできます。

利用可能なプロンプトは次のとおりです：

* [Slidedown](#slidedown-%26-category)：プッシュ通知とオプションのカテゴリ選択に使用される、視覚的に目立つプロンプト。
* [Email/Phoneプロンプト](#email-%26-phone-number-prompt)：ユーザーのメールアドレス、電話番号、またはその両方を収集するために使用されます。
* [Subscription bellプロンプト](#subscription-bell-prompt)：プッシュサブスクリプション用の永続的なフローティングウィジェット。通常、サイトの下隅に配置されます。
* [Custom linkプロンプト](#custom-link-prompt)：サイトに埋め込まれたカスタマイズ可能なボタンまたはリンクで、ネイティブブラウザプロンプトをトリガーします。
* [Native permission prompt](#native-permission-prompt)：ユーザーがプッシュ通知を受信するために承認する必要がある、必須のブラウザレベルのプロンプト。

***

### Slidedown & category

SlideおよびCategoryプロンプトは、デスクトップでは画面の上部中央に、モバイルでは下部中央に目立つように表示されます。これらは、必須の[native permission prompt](#native-permission-prompt)の前に表示される、高い視認性を持つソフトプロンプトです。これら自体がユーザーをサブスクライブさせるわけではありませんが、サブスクリプションフローを開始するのに役立ちます。

<Frame caption="カテゴリタグ付きのSlideプロンプトを示す例。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/slidedown-categories-demo.gif?s=aba2989a03cc97b01b35eff561c1f120" width="552" height="338" data-path="images/docs/slidedown-categories-demo.gif" />
</Frame>

Slideプロンプトを追加するには：

1. **Settings > Push & In-App > Web Settings > Permission Prompt Setup**に移動します
2. **Add Prompt > Push Prompt > Push Slide Prompt**を選択します

<Info>
  Custom Codeセットアップの場合、OneSignalの`init`コード内の`promptOptions`オブジェクトで、`slidedown`プロパティを使用します。詳細については、[Web SDK Reference](./web-sdk-reference)をご覧ください。
</Info>

<Frame caption="プッシュスライドプロンプトのオプション。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/slide-prompt-options.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=3b525cb30aa7908a7b8062e99e5734f4" width="1918" height="1602" data-path="images/docs/slide-prompt-options.png" />
</Frame>

<Note>プロンプトのトリガーの詳細については、[Auto prompt & display settings](#auto-prompt-%26-display-settings)をご覧ください。</Note>

#### Slideプロンプトテキスト

スライドプロンプトに表示されるテキストをカスタマイズできます：

* アクションメッセージ：最大90文字
* ボタンラベル：各最大15文字
* フォント、サイズ、または色のカスタマイズは現在サポートされていません

ダッシュボードでテキストカスタマイズオプションを有効にします。テキストが入力されていない場合は、デフォルトのテキストが使用されます。

<Frame caption="スライドプロンプトのテキストオプション。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/slide-prompt-text-options.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=52231800573d2d9f1720f924d59a3474" width="568" height="392" data-path="images/docs/slide-prompt-text-options.png" />
</Frame>

完了したら、**Done**をクリックし、次のページで再度**Save**をクリックして、これを有効にします。

<Info>
  Custom Codeセットアップの場合、OneSignalの`init`コード内の`promptOptions`オブジェクトで、`text`プロパティを使用します。詳細については、[Web SDK Reference](./web-sdk-reference)をご覧ください。
</Info>

#### カテゴリ

Slidedownプロンプトにカテゴリを追加することで強化できます。カテゴリは、特定のメッセージトピック（例：ニュース、セール、更新）への関心をユーザーが示すことができるチェックボックスです。

* 最大10個のカテゴリが許可されます
* 各カテゴリは、1（選択済み）または0（未選択）のData Tagとして保存されます
* ユーザーの好みによるセグメンテーションとメッセージのターゲティングに役立ちます

後でカテゴリプロンプトを再度表示して、ユーザーが設定を更新できるようにすることができます。以前に選択した値は、上書きされない限り保持されます。

* **Label**：ユーザーがプロンプトで見るもの。最初の文字を大文字にすることをお勧めします。
* **Tag Key**：OneSignalのタグになるもの。小文字とアンダースコア（`_`）をスペースの代わりに使用することをお勧めします。
* **Update Instructions、PositiveおよびNegativeボタン**：ユーザーがすでにプッシュにサブスクライブした後にカテゴリプロンプトを再度表示することを選択した場合、アクションメッセージの代わりに更新手順が表示されます。これにより、ユーザーにカテゴリを更新できることを通知できます。

<Frame caption="カテゴリの例。Labelはユーザーが見るもので、tag keyは値が「1」のタグキーとして設定されるものです。">
  <img src="https://mintcdn.com/onesignal/DUD9LiwQFHL3zLE4/images/web-push/slidedown-category-config.png?fit=max&auto=format&n=DUD9LiwQFHL3zLE4&q=85&s=0bd4de9323c496e67ce19138b18cb602" width="328" height="429" data-path="images/web-push/slidedown-category-config.png" />
</Frame>

完了したら、**Done**をクリックし、次のページで再度**Save**をクリックして、これを有効にします。

<Info>
  Custom Codeセットアップの場合、OneSignalの`init`コード内の`promptOptions`オブジェクトで、`categories`プロパティを使用します。詳細については、[Web SDK Reference](./web-sdk-reference)をご覧ください。
</Info>

<Note>プロンプトのトリガーの詳細については、[Auto prompt & display settings](#auto-prompt-%26-display-settings)をご覧ください。</Note>

***

### Email & phone number prompt

Email & Phoneプロンプトは、Slidedown内で直接オプションのユーザー連絡先情報を収集します。各フィールドには、正しい形式を保証する組み込みの検証があります。

送信されると：

* ユーザーのために新しいEmailおよび/またはSMSサブスクリプションが作成されます
* これらのチャネルを介してメッセージングを開始できます

このプロンプトを追加するには：

* **Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Email/Phone Prompt**に移動します。

<Frame caption="Email & Phone Number Prompt Setup">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/email-phone-prompt-setup.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=fea01e0388356640c0d456b8ff0acd53" width="1356" height="428" data-path="images/docs/email-phone-prompt-setup.png" />
</Frame>

表示される入力フィールド、テキストラベル、および自動プロンプト遅延をカスタマイズします。

<Frame caption="Email & Phone Number Prompt Setup">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/email-phone-prompt-options.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=aac3648d194490c50d9b39ac2eecac79" width="1504" height="1574" data-path="images/docs/email-phone-prompt-options.png" />
</Frame>

完了したら、**Done**を押し、次のページで再度**Save**を押して、これを有効にします。

<Info>
  Custom Codeセットアップの場合、OneSignalの`init`コード内の`promptOptions`オブジェクトに、`type`を`email`、`sms`、または`smsAndEmail`のいずれかに追加します。詳細については、[Web SDK Reference](./web-sdk-reference)をご覧ください。
</Info>

<Note>プロンプトのトリガーの詳細については、[Auto prompt & display settings](#auto-prompt-%26-display-settings)をご覧ください。</Note>

***

### Subscription bell prompt

Subscription Bell Promptは、Webサイトの下隅に表示される小さな永続的なウィジェットです。サブスクライブしていないユーザーがクリックすると、[Native Browser Prompt](./permission-requests)がトリガーされます。

最小限のフットプリントのため、ベルは常に表示したままにすることができ、継続的なオプトイン機会のための受動的でありながら効果的なオプションとなります。却下を必要とせず、ユーザーにサブスクライブするタイミングをコントロールする権限を提供します。

<Frame caption="Subscription Bell Prompt">
  <img src="https://mintcdn.com/onesignal/uaUYB-ILUGPSRvKB/images/docs/subscription-bell-widget.png?fit=max&auto=format&n=uaUYB-ILUGPSRvKB&q=85&s=6b78132f8eddd9584dc4e6fe687b99d1" width="1340" height="730" data-path="images/docs/subscription-bell-widget.png" />
</Frame>

OneSignal Bell Promptの色、サイズ、下部位置、テキストなどをカスタマイズできます！**🛑 現在、アイコン画像を変更したり、ベルを上隅に配置したりすることはできません。**

<AccordionGroup>
  <Accordion title="Typical Site & WordPress Setup: Subscription Bell Prompt">
    **Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Subscription Bell Prompt**に移動します

    ベルの以下をカスタマイズできます：

    * 色
    * サイズ
    * 下部位置（左または右）
    * テキストとラベル

    設定後、**Done**をクリックしてから、**Save**をクリックして変更を適用します。

    <Frame caption="ダッシュボードのSubscription Bell Setup">
      <img src="https://mintcdn.com/onesignal/uaUYB-ILUGPSRvKB/images/docs/subscription-bell-setup.png?fit=max&auto=format&n=uaUYB-ILUGPSRvKB&q=85&s=0439c90f8592644b6d9e4f2a8fd1853b" width="1504" height="1352" data-path="images/docs/subscription-bell-setup.png" />
    </Frame>
  </Accordion>

  <Accordion title="Custom Code Setup: Subscription Bell Prompt">
    Web SDK初期化オプションで`notifyButton`パラメータを使用します。Bell Promptのカスタマイズのために、さまざまな例を切り替えることができます。

    **非表示：** ユーザーがサブスクライブした後にサブスクリプションベルを非表示にするか、特定のページでのみ表示するには、初期化中の`displayPredicate`関数で値`false` *または* 値`false`に解決される`Promise`を返すようにしてください。この関数は、サブスクリプションベルが表示される前に評価されます。サブスクリプションベルを表示するには、他の値を返すことができます。

    <CodeGroup>
      ```javascript Text & Basic Options theme={null}
      // その他のinit optionsをここに記述
      notifyButton: {
          enable: true, /* Subscription Bellを使用するために必要 */
          size: 'medium', /* 'small'、'medium'、または'large'のいずれか */
          theme: 'default', /* 'default'（赤-白）または'inverse'（白-赤）のいずれか */
          position: 'bottom-right', /* 'bottom-left'または'bottom-right'のいずれか */
          offset: {
              bottom: '0px',
              left: '0px', /* bottom-leftの場合のみ適用 */
              right: '0px' /* bottom-rightの場合のみ適用 */
          },
          showCredit: false, /* OneSignalロゴを非表示 */
          text: {
              'tip.state.unsubscribed': 'Subscribe to notifications',
              'tip.state.subscribed': "You're subscribed to notifications",
              'tip.state.blocked': "You've blocked notifications",
              'message.prenotify': 'Click to subscribe to notifications',
              'message.action.subscribed': "Thanks for subscribing!",
              'message.action.resubscribed': "You're subscribed to notifications",
              'message.action.unsubscribed': "You won't receive notifications again",
              'dialog.main.title': 'Manage Site Notifications',
              'dialog.main.button.subscribe': 'SUBSCRIBE',
              'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
              'dialog.blocked.title': 'Unblock Notifications',
              'dialog.blocked.message': "Follow these instructions to allow notifications:"
          }
      }
      ```

      ```javascript Colors theme={null}
      // その他のinit optionsをここに記述
      notifyButton: {
        enable: true, // Subscription Bellを使用するために必要
        // その他のSubscription Bell設定をここに記述
        colors: { // メインボタンとダイアログポップアップボタンの色をカスタマイズ
          'circle.background': 'rgb(84,110,123)',
          'circle.foreground': 'white',
          'badge.background': 'rgb(84,110,123)',
          'badge.foreground': 'white',
          'badge.bordercolor': 'white',
          'pulse.color': 'white',
          'dialog.button.background.hovering': 'rgb(77, 101, 113)',
          'dialog.button.background.active': 'rgb(70, 92, 103)',
          'dialog.button.background': 'rgb(84,110,123)',
          'dialog.button.foreground': 'white'
        },
      }
      ```

      ```javascript Hiding theme={null}
      // その他のinit optionsをここに記述
      notifyButton: {
          /* その他のSubscription Bell設定をここに記述... */
          enable: true,
          displayPredicate: function() {
            /* ユーザーがサブスクライブしているため、Subscription Bellを非表示にするために「false」を返します */
            return !OneSignal.Notifications.permission
          },
      }
      ```

      ```javascript HTTPS Full Example Code theme={null}
      <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
      <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(function() {
          OneSignal.init({
            appId: "YOUR_APP_ID",
            notifyButton: {
              enable: true, /* Subscription Bellを使用するために必要 */
            /* SUBSCRIPTION BELLのカスタマイズはここから開始 */
              size: 'medium', /* 'small'、'medium'、または'large'のいずれか */
              theme: 'default', /* 'default'（赤-白）または'inverse'（白-赤）のいずれか */
              position: 'bottom-right', /* 'bottom-left'または'bottom-right'のいずれか */
              offset: {
                  bottom: '0px',
                  left: '0px', /* bottom-leftの場合のみ適用 */
                  right: '0px' /* bottom-rightの場合のみ適用 */
              },
              showCredit: false, /* OneSignalロゴを非表示 */
              text: {
                  'tip.state.unsubscribed': 'Subscribe to notifications',
                  'tip.state.subscribed': "You're subscribed to notifications",
                  'tip.state.blocked': "You've blocked notifications",
                  'message.prenotify': 'Click to subscribe to notifications',
                  'message.action.subscribed': "Thanks for subscribing!",
                  'message.action.resubscribed': "You're subscribed to notifications",
                  'message.action.unsubscribed': "You won't receive notifications again",
                  'dialog.main.title': 'Manage Site Notifications',
                  'dialog.main.button.subscribe': 'SUBSCRIBE',
                  'dialog.main.button.unsubscribe': 'UNSUBSCRIBE',
                  'dialog.blocked.title': 'Unblock Notifications',
                  'dialog.blocked.message': "Follow these instructions to allow notifications:"
              },
              colors: { // メインボタンとダイアログポップアップボタンの色をカスタマイズ
                 'circle.background': 'rgb(84,110,123)',
                 'circle.foreground': 'white',
                 'badge.background': 'rgb(84,110,123)',
                 'badge.foreground': 'white',
                 'badge.bordercolor': 'white',
                 'pulse.color': 'white',
                 'dialog.button.background.hovering': 'rgb(77, 101, 113)',
                 'dialog.button.background.active': 'rgb(70, 92, 103)',
                 'dialog.button.background': 'rgb(84,110,123)',
                 'dialog.button.foreground': 'white'
               },
              /* ユーザーがサブスクライブしたときにSUBSCRIPTION BELLを非表示 */
              displayPredicate: function() {
                  return OneSignal.isPushNotificationsEnabled()
                      .then(function(isPushEnabled) {
                          return !isPushEnabled;
                      });
              }
            }
          });
        });
      </script>
      ```
    </CodeGroup>
  </Accordion>
</AccordionGroup>

***

### Custom link prompt

Custom Link Promptは、Webサイトのどこにでも埋め込むことができる、ユーザーがトリガーするボタンまたはリンクです。クリックすると、プッシュ通知の[Native Browser Prompt](./permission-requests)が表示されます。

<Frame caption="Custom Link Prompt">
  <img src="https://mintcdn.com/onesignal/a0r2lOarnYx0JYIH/images/docs/custom-link-prompt.png?fit=max&auto=format&n=a0r2lOarnYx0JYIH&q=85&s=85fdb1296bafe621b69c8c45cce1db99" width="1744" height="746" data-path="images/docs/custom-link-prompt.png" />
</Frame>

一般的なユースケース：

* ブログ投稿の下：「この記事が気に入りましたか？投稿後すぐに更新を受け取りましょう！」
* サイトのフッター内
* 固定ヘッダーまたはフローティングツールバー内

<AccordionGroup>
  <Accordion title="Typical Site & WordPress Setup: Custom Link Prompt">
    **Settings > Push & In-App > Web Settings > Permission Prompt Setup > Add Prompt > Custom Link**に移動します。

    ウィジェットをレンダリングしたいページに提供されたHTMLを追加します。

    オプションを設定してから、**Done**と**Save**をクリックして有効にします。

    <Frame caption="ダッシュボードのCustom Link Setup">
      <img src="https://mintcdn.com/onesignal/a0r2lOarnYx0JYIH/images/docs/custom-link-setup.png?fit=max&auto=format&n=a0r2lOarnYx0JYIH&q=85&s=a47f3461c89f9e730f2574047edfe290" width="1534" height="1352" data-path="images/docs/custom-link-setup.png" />
    </Frame>
  </Accordion>

  <Accordion title="Custom Code Setup: Custom Link">
    OneSignalの`init`コード内の`promptOptions`オブジェクトに、`customlink`オブジェクトとその利用可能なプロパティを追加します。

    <CodeGroup>
      ```javascript theme={null}
      // その他のinit optionsをここに記述
      promptOptions: {
        customlink: {
          enabled: true, /* Custom Linkを使用するために必要 */
          style: "button", /* 'button'または'link'の値を持つ */
          size: "medium", /* 'small'、'medium'、または'large'のいずれか */
          color: {
            button: '#E12D30', /* style = "button"の場合のボタン背景の色 */
            text: '#FFFFFF', /* プロンプトのテキストの色 */
          },
          text: {
            subscribe: "Subscribe to push notifications", /* サブスクライブしていないときのプロンプトのテキスト */
            unsubscribe: "Unsubscribe from push notifications", /* サブスクライブしているときのプロンプトのテキスト */
            explanation: "Get updates from all sorts of things that matter to you", /* プロンプトボタンの前に表示されるオプションのテキスト */
          },
          unsubscribeEnabled: true, /* サブスクリプション後にプロンプトを表示するかどうかを制御 */
        }
      }
      ```
    </CodeGroup>

    サイトにプロンプトをレンダリングするには、ウィジェットを表示したい場所に次のHTMLを挿入します：

    ```html html theme={null}
    <div class='onesignal-customlink-container'></div>
    ```
  </Accordion>

  <Accordion title="Typical & Custom Code Setup: Additional Styling">
    いつでもウィジェットの外観を変更するために、すべての要素には特別なクラス`onesignal-reset`があり、要素から以前のスタイリングを削除して、当社の内部スタイルとの競合がなく、ダッシュボードで定義したとおりに見えるようにします。

    OneSignalのスタイルを再定義する必要がある場合は、Custom Linkウィジェットで使用されるクラスの簡単なリファレンスを次に示します

    | クラス名                             | 適用対象                                                    |
    | -------------------------------- | ------------------------------------------------------- |
    | onesignal-customlink-container   | メインコンテナ                                                 |
    | onesignal-customlink-subscribe   | アクションボタン                                                |
    | onesignal-customlink-explanation | カスタム説明テキストを含む段落                                         |
    | state-subscribed                 | メインコンテナ内のすべてのコンポーネント                                    |
    | state-unsubscribed               | メインコンテナ内のすべてのコンポーネント                                    |
    | button                           | ボタンモードの場合のアクションボタン                                      |
    | link                             | リンクモードの場合のアクションボタン                                      |
    | small                            | メインコンテナ内のすべてのコンポーネント                                    |
    | medium                           | メインコンテナ内のすべてのコンポーネント                                    |
    | large                            | メインコンテナ内のすべてのコンポーネント                                    |
    | hide                             | unsubscribeEnabledがfalseに設定されている場合のメインコンテナ内のすべてのコンポーネント |

    これらのいずれかをオーバーライドするには、より高い特異性を持つCSSルールを作成する必要があります。クラス名を親要素IDと組み合わせれば十分です。ただし、競合に注意してください。当社の内部スタイルは変更される可能性があります。
  </Accordion>
</AccordionGroup>

***

## Native permission prompt

ネイティブ権限プロンプトは、ユーザーがWebサイトからプッシュ通知にサブスクライブするために承認する必要がある、ブラウザによって制御されるダイアログです。このプロンプトは：

* サブスクリプションに必須
* OneSignalソフトプロンプト（SlidedownやCustom Linkなど）の後に自動的にトリガーされます
* 外観、テキスト、または動作はカスタマイズできません

<Frame caption="Native Permission Prompt">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/native-prompt-chrome.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=db741c607bbd5d18f5b31bdf4f0ac38b" width="1422" height="592" data-path="images/docs/native-prompt-chrome.png" />
</Frame>

### ブラウザのネイティブプロンプト動作

さまざまなブラウザは、スパムの権限リクエストを減らすために独自の動作と制限を課します：

#### Chrome

[Chrome 80+](https://blog.chromium.org/2020/01/introducing-quieter-permission-ui-for.html?m=1)は、完全なプロンプトの代わりに静かなUIを表示する場合があります：

* プロンプトを頻繁に拒否するユーザーに自動的に適用されます
* 拒否率が高いサイトにも適用されます

ユーザーがネイティブプロンプトの「X」をクリックした場合、Chromeはバックオフロジックを実装します：

* プロンプトを表示する機会は3回あります
* 3回目の却下後、プロンプトは7日間抑制されます（[ソース](https://chromestatus.com/feature/6443143280984064)）。

#### Firefox

* [Firefox 72+](https://blog.mozilla.org/futurereleases/2019/11/04/restricting-notification-permission-prompts-in-firefox/)は、プロンプトをトリガーするためにユーザージェスチャーを必要とします
* 自動プロンプトはブロックされ、ユーザーはサイト要素と積極的に対話する必要があります

#### Safari

* [Safari 12.1+](https://developer.apple.com/documentation/safari_release_notes/safari_12_1_release_notes)のプロンプトはユーザージェスチャーを必要とします
* 直接的な対話によってトリガーされない限り、自動プロンプトは静かにブロックされます

#### Edge

[Edge](https://blogs.windows.com/msedgedev/2023/07/06/fighting-notification-spam-microsoft-edge/)は信頼ベースのモデルを使用します：

* サイトが信頼されていない場合、プロンプトは抑制され、ブラウザバーのベルアイコンに置き換えられます：

<Frame caption="Edgeで馴染みのないサイトまたは信頼されていないサイトに表示されるベルアイコン。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/edge-untrusted-bell-icon.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=89f63297323c3dd1bb72007b2259110d" width="1014" height="556" data-path="images/docs/edge-untrusted-bell-icon.png" />
</Frame>

* サイトが信頼されている場合、ネイティブプロンプトは通常どおり表示されます：

<Frame caption="Edgeで信頼されているサイトの場合、ネイティブプロンプトが直接表示されます。">
  <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/edge-trusted-native-prompt.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=08a0cef396c99ca006e44c4a1b6b0460" width="862" height="402" data-path="images/docs/edge-trusted-native-prompt.png" />
</Frame>

***

## 自動プロンプトと表示設定

エンゲージメントを最大化し、ユーザーを中断させないために、サイトでしばらく過ごした後にプロンプトを表示することをお勧めします。OneSignalでは、2つの遅延条件を使用してユーザーの動作に基づいてプロンプトを自動的に表示できます：

* **Page Views**：ユーザーがサイトの任意のページを読み込んだ回数
* **Seconds on Page**：ユーザーがページで過ごす必要がある時間

これらの遅延は**AND**条件を使用して適用されます。つまり、プロンプトが表示される前に両方が満たされる必要があります。

**例：** 遅延を3ページビューと30秒に設定した場合、プロンプトは3回目のページ読み込み時に、30秒経過後に表示されます。ユーザーがプロンプトと対話しない場合、クリックまたは却下されるまで、各ページ読み込み（30秒後）で引き続き表示されます。

<AccordionGroup>
  <Accordion title="Typical Site & WordPress Setup: Auto Prompt">
    * **Settings > Push & In-App > Web Settings > Permission Prompt Setup**に移動します
    * プロンプトを選択するか、新しいプロンプトを作成します
    * Auto Promptを有効にします
    * 遅延の設定（ページビューと時間遅延）を設定します

    <Frame caption="例：このプロンプトは、30秒後の3回目のページビューで表示されるように設定されています。">
      <img src="https://mintcdn.com/onesignal/sJbUl77xEbJHQiBq/images/docs/auto-prompt-delay-settings.png?fit=max&auto=format&n=sJbUl77xEbJHQiBq&q=85&s=992e5b449485e3cf96fd5fef5588f8fb" width="564" height="218" data-path="images/docs/auto-prompt-delay-settings.png" />
    </Frame>

    * Done、次にSaveをクリックします

    <Info>
      プロンプトをプログラムでトリガーする場合は、Auto Promptを無効にして、[Web SDK Prompt promptメソッド](./web-sdk-reference)を使用します。
    </Info>
  </Accordion>

  <Accordion title="Custom Code Setup: Auto Prompt">
    OneSignalの`init`コード内の`promptOptions`オブジェクトで、`autoPrompt`および`delay`オプションを使用します。目的のslidedownまたはnativeプロンプトを直接トリガーするメソッドもあります。詳細については、[Web SDK Reference](./web-sdk-reference)をご覧ください。
  </Accordion>

  <Accordion title="Manual Triggering (Instead of Auto Prompt)">
    プロンプトがいつ表示されるかをより細かく制御したい場合（たとえば、特定のページまたは特定のアクションの後にのみ）：

    1. Auto Promptを無効にします
    2. SDKのSlidedownまたはNative Promptメソッドを使用して、コードを介してプロンプトを表示します
  </Accordion>
</AccordionGroup>

### Slidedownプロンプトのバックオフロジック

Slidedown（Push、Category、またはEmail/Phone）プロンプトが表示されて却下されると（Allow、Cancel、またはダイアログを閉じることによって）、定義されたスケジュールでバックオフして再表示されます：

|       インタラクションの結果       | 次のプロンプトのタイミング |
| :---------------------: | :-----------: |
|          最初の却下          |     3日間待機     |
|          2回目の却下         |     7日間待機     |
| 3回目以降の却下（サブスクライブされていない） |     30日間待機    |

たとえば、ユーザーがSlidedownで「Allow」をクリックしたが、ブラウザのネイティブプロンプトで「X」をクリックした場合（サブスクライブせずに）、Slidedownは上記のバックオフサイクルに従います。

<Warning>
  このロジックは、Push、Category、およびEmail/Phone Slidedownプロンプトに適用されます。[Web SDK Slidedown promptメソッド](./web-sdk-reference#slidedown-prompts)を使用してバックオフロジックをバイパスできます。

  ネイティブプロンプトのバックオフロジックについては、[Browser native prompt behavior](#browser-native-prompt-behavior)をご覧ください。ネイティブプロンプトのバックオフロジックはブラウザによって制御されているため、バイパスすることはできません。
</Warning>

ユーザーがCookieまたはブラウザデータをクリアすると、バックオフサイクルがリセットされ、プロンプトが初めてのように再度表示される場合があります。

***

## FAQ

<AccordionGroup>
  <Accordion title="FacebookやInstagram、TikTokなどのソーシャルメディアアプリでプロンプトを表示する方法は？">
    ソーシャルメディアアプリ（Instagram、Facebook、その他）を介してWebサイトを表示しようとする場合、Webビューを使用している場合はWebプロンプトが表示されない場合があります。WebビューはWebプッシュ通知をサポートしていません。アプリは、Webプッシュ通知をサポートするブラウザでWebサイトを開く必要があります。
  </Accordion>

  <Accordion title="プロンプトを翻訳/ローカライズする方法は？">
    現在、[Custom Code Setup](./web-push-custom-code-setup)を選択する必要があります。次に、ユーザーのブラウザ言語を検出してプロンプトの言語をプログラムで変更し、異なるテキストでOneSignal SDKを初期化します。

    ネイティブPermission Promptは、ブラウザの設定言語に自動的に翻訳されます。
  </Accordion>

  <Accordion title="プロンプトをABテストできますか？">
    [Custom Code Setup](./web-push-custom-code-setup)を使用して、さまざまなプロンプトオプションでOneSignalを初期化できます。OneSignalを初期化するA/B/C/Dなどのテストをトリガーする独自の方法を設定する必要があります。

    ボーナスとして、[Subscription Change](./web-sdk-reference#addeventlistener-push-subscription)メソッドを使用して、ユーザーがサブスクライブしたことを検出し、どのテストがサブスクリプションを獲得したかに基づいて[Tags](./add-user-data-tags)を追加できます。
  </Accordion>

  <Accordion title="サブスクライブしたページに基づいてサブスクリプションをセグメント化できますか？">
    はい！ガイド[Auto-Segment By Subscription Page](./auto-segment-users-by-page-visit)をご覧ください。
  </Accordion>

  <Accordion title="ベルアイコンを変更できますか？">
    ベルの画像は変更できませんが、色やテキストを変更したり、ページの左下または右下に配置したりできます。
  </Accordion>

  <Accordion title="ページに基づいてカテゴリを変更できますか？">
    はい！これには、[Custom Code Setup](./web-push-custom-code-setup)を使用し、上記のセットアップ構成に基づいてコードを介してカテゴリを追加する必要があります。
  </Accordion>

  <Accordion title="Slideプロンプトイベントを追跡する方法は？">
    OneSignal Web SDKには、画面に表示されたとき、閉じられたとき、および「Allow」または「Cancel」アクションを検出するための[Slide Prompt Event Methods](./web-sdk-reference#addeventlistener-slidedown)があります。
  </Accordion>

  <Accordion title="Webプッシュプロンプトを却下した後、プロンプトはいつ再度表示されますか？">
    OneSignalプロンプトについては、[Slidedownプロンプトのバックオフロジック](#slidedown-prompt-back-off-logic)をご覧ください。

    ネイティブ権限プロンプトについては、[Browser native prompt behavior](#browser-native-prompt-behavior)をご覧ください。
  </Accordion>

  <Accordion title="特定のページでのみプロンプトを表示する方法は？">
    [**Auto Prompt**オプションを無効にする](#auto-prompt-%26-display-settings)必要があります。次に、プロンプトを表示したい特定のページに[Slidedown prompt](./web-sdk-reference#slidedown-prompts)コードを追加します。

    Bellプロンプトを使用している場合、現時点ではページごとに無効にすることはできません。
  </Accordion>

  <Accordion title="Native Browser Promptを表示したいのに、FirefoxでSlide Promptが表示されるのはなぜですか？">
    [Firefox 72+](https://blog.mozilla.org/futurereleases/2019/11/04/restricting-notification-permission-prompts-in-firefox/)では、ネイティブブラウザプロンプトを表示するためにユーザーがボタンをクリックする必要がある変更があります。ネイティブブラウザプロンプトを自動的に表示しようとすると、次のようなブラウザ内のアイコンが表示されます：

    <Frame caption="Firefoxアイコン">
      <img src="https://mintcdn.com/onesignal/QOf62tdZP66tkOD2/images/docs/firefox-permission-icon.png?fit=max&auto=format&n=QOf62tdZP66tkOD2&q=85&s=b02371c12275f3bb8ae2c8e9bea1cd9e" width="831" height="84" data-path="images/docs/firefox-permission-icon.png" />
    </Frame>

    ユーザーは、FirefoxでネイティブPermission Promptを表示するために、このアイコンをクリックする必要があります。これが、いずれの場合も2ステップのオプトインが必要であるため、FirefoxでSlide Promptをデフォルトにする理由です。

    Slide Promptをデフォルトとして表示したくない場合は、Prompt Editorで Auto Promptスイッチをオフにし（**Save**ボタンを押すことを忘れないでください）、次に[Web SDK `requestPermission()`メソッド](./web-sdk-reference#requestpermission)を使用します。
  </Accordion>

  <Accordion title="ネイティブPermission Promptを表示したいのに、モバイルでSlide Promptが表示されるのはなぜですか？">
    2017年12月5日、Googleは、Chrome for AndroidでネイティブPermission Promptの外観を変更しました。これは、サイトの画面全体を占めるユーザー非友好的なポップアップです。ユーザーがサイトで悪い体験をするのを防ぐために、Androidでダブルプロンプトを意図的に追加しました。

    Slide Promptを表示したくない場合は、Prompt Editorで Auto Promptスイッチをオフにし（**Save**ボタンを押すことを忘れないでください）、次に[Web SDK `requestPermission()`メソッド](./web-sdk-reference#requestpermission)を使用します。
  </Accordion>

  <Accordion title="スライドプロンプトが表示され続けるのはなぜですか？">
    シークレットモード、プライベートブラウザモード、またはゲストブラウザモードになっていないことを確認してください。
  </Accordion>

  <Accordion title="プロンプトが表示されないのはなぜですか？">
    次の条件のいずれかが真である場合、ブラウザのネイティブPermission Promptが表示されない場合があります：

    * [ブラウザがプロンプトの表示を妨げた。](https://onesignal.com/blog/changes-to-chrome-and-firefox-permission-prompting/)
    * ユーザーはすでに通知を許可しているか、すでにサブスクライブしています
    * ユーザーが通知をブロックしました。ユーザーが「Block」（Chrome）、「Don't Allow」（Safari）、または「Never Allow」（Firefox）をクリックした場合、再度プロンプトを表示することはできず、ブラウザ設定で複数ステップのプロセスを介してサブスクライブする必要があります。これが[OneSignalプロンプト](#onesignal-prompts)の使用が推奨される理由です。
    * Auto Promptがオフになっており、[`requestPermission();`](./web-sdk-reference#requestpermission)の呼び出しがありません
    * ネイティブPermission Promptは、シークレットモード、プライベートブラウザモード、またはゲストブラウザモードでは表示されません。また、Safari 12.1+またはFirefox 72+ではすぐには表示されません（[詳細](https://onesignal.com/blog/changes-to-chrome-and-firefox-permission-prompting/)）。
    * [Webプッシュをサポートするブラウザとデバイスを使用している](./web-push-setup-faq#browser-support-by-operating-system)ことを確認してください。

    プロンプト設定を確認して、**Auto Prompt**がオンになっているか、[Web SDK](./web-sdk-reference)を使用してユーザーにプロンプトを表示していることを確認してください。

    iOSの場合、サブスクリプションのためにユーザーにプロンプトを表示するための追加の要件があります。詳細については、[Mobile Web Push for iOS/iPadOS](./web-push-for-ios)ガイドをご覧ください。

    最後に、[これらの手順に従ってCookieとブラウザキャッシュをリセット](./browser-behavior-and-unsubscribes)して、初めてのユーザーのようにサイトにアクセスしてください。
  </Accordion>
</AccordionGroup>

***

## 関連ページ

<Columns cols={2}>
  <Card title="Web SDKリファレンス" icon="code" href="./web-sdk-reference">
    プロンプトメソッド、イベント、初期化オプションの完全なAPIリファレンス。
  </Card>

  <Card title="iOS向けWebプッシュ" icon="apple" href="./web-push-for-ios">
    iOSおよびiPadOSのWebプッシュサポートに必要な追加設定手順。
  </Card>

  <Card title="Webプッシュのトラブルシューティング" icon="wrench" href="./troubleshooting-web-push">
    一般的なWebプッシュ通知の問題を診断して解決します。
  </Card>

  <Card title="プリファレンスセンター" icon="sliders" href="./preference-center">
    ユーザーが通知設定とチャンネルのオプトインを管理できるようにします。
  </Card>
</Columns>
