> ## 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 SDK - カスタムコードセットアップ
> カスタムコード統合を使用してOneSignal Webプッシュ通知をセットアップするための完全なガイド。Chrome、Firefox、Safari、その他のWebブラウザー向けにJavaScript SDK、サービスワーカー、Safari証明書を構成します。
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
;
};
このカスタムコードセットアップは、高度な構成またはプログラムによる制御が必要な場合にのみ使用してください。ほとんどのユーザーには次をお勧めします：
* [通常のWebプッシュセットアップ](./web-push-setup)
* [WordPressセットアップ](./wordpress)
* [Shopifyセットアップ](./shopify)
JavaScriptフレームワークを使用している場合は、以下の専用ガイドに従ってください：
* [Angularセットアップ](./angular-setup)
* [React JSセットアップ](./react-js-setup)
* [Vue JSセットアップ](./vue-js-setup)
## 要件
* HTTPSウェブサイト：WebプッシュはHTTPまたはシークレット/プライベートモードでは機能しません。
* サーバーアクセス：サービスワーカーファイルをサイトにアップロードする必要があります。
* 単一オリジン：Webプッシュは[同一オリジンポリシー](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)に従います。複数のオリジン（ドメイン/サブドメイン）がある場合は、複数のOneSignalアプリが必要です（オリジンごとに1つ）。このブラウザー制限に対応するには：
* サブスクリプション用に単一のオリジンにトラフィックをリダイレクトする。
* オリジンごとに複数のOneSignalアプリを作成する。
***
## OneSignalアプリとプラットフォームを構成する
OneSignalダッシュボードで：
* **Settings > Push & In-App > Web** に移動します。
* **Custom Code** 統合タイプを選択します。
### サイトセットアップ
サイトの詳細を追加します：
* **Site Name**：サイトの名前とデフォルトの通知タイトル。
* **Site URL**：サイトの正確な[オリジン](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)、例：`https://yourdomain.com`。サイトがそのように構成されていない場合は `www.` の使用を避けてください。複数のオリジンがある場合は[要件](#requirements)を参照してください。
* **Auto Resubscribe**：ユーザーがブラウザーデータをクリアした後にサイトに戻ったときに自動的に再サブスクライブするには、これを有効にします（新しい権限プロンプトは不要）。
* **Default Icon URL**：通知とプロンプトに表示される正方形の `256x256px` PNG または JPG 画像をアップロードします。設定されていない場合は、デフォルトとしてベルアイコンが使用されます。
#### ローカルテスト
localhostでテストするには、本番アプリとは別のOneSignalアプリを使用し、`init` オプションに `allowLocalhostAsSecureOrigin: true` を追加します。
自己署名証明書を使用してHTTPS上でlocalhostをテストしている場合は、`--allow-insecure-localhost` を使用してChromeに無効な証明書を無視するよう指示する必要がある場合があります。FirefoxとSafariは、セキュリティ証明書の例外を追加するための組み込みメカニズムを提供しています。
```html theme={null}
```
### Safari Webプッシュ証明書（オプション）
OneSignalは無料でSafari証明書を自動的に提供します。使用する必要がある既存のSafari Webプッシュ証明書がある場合にのみ、これを有効にしてください。
有効にした場合は、`Safari Web .p12 Push Certificate` をアップロードし、パスワードを入力します。
**Save** をクリックして続行します。
### サービスワーカーファイルのアップロード
Webプッシュ設定の次のページで、`OneSignalSDKWorker.js` サービスワーカーファイルが提供されます。
Web SDKはデフォルトでサイトのルートにあるこのファイルを検索します。例：`https://yourdomain.com/OneSignalSDKWorker.js`。コードでファイルの場所、名前、スコープを変更できます。
高度なサービスワーカー構成、カスタム統合、および他のプロバイダーからの移行。
### サイトにコードを追加
このコードをWebサイトの `` セクションに追加します。以下を置き換えてください：
* `YOUR_ONESIGNAL_APP_ID` を OneSignalダッシュボードの実際のApp IDに
* `YOUR_SAFARI_WEB_ID` を OneSignalダッシュボードの実際のSafari Web IDに
```html HTML theme={null}
```
### iOS Webプッシュサポート
AppleはiOS 16.4+を実行しているiPhoneおよびiPadでWebプッシュ通知のサポートを開始しました。対応ブラウザーで訪問するだけで動作するAndroidデバイスとは異なり、Appleは `manifest.json` ファイルやユーザーがサイトをホーム画面に追加するアクションなど、いくつかの追加要件を追加しました。
必要な `manifest.json` ファイルを追加し、ユーザーをサイトをホーム画面に追加するよう案内します。
***
## OneSignal SDK統合のテスト
このガイドでは、プッシュ通知とサブスクリプション登録をテストして、OneSignal SDK統合が正しく機能していることを確認する方法を説明します。
### Webプッシュサブスクリプションを確認
* テスト中は、Chrome、Firefox、Edge、またはSafariを使用してください。
* \*\*シークレットモードやプライベートブラウジングモードは使用しないでください。\*\*これらのモードでは、ユーザーはプッシュ通知にサブスクライブできません。
* [許可プロンプト](/docs/ja/permission-requests)の設定に基づいてプロンプトが表示されるはずです。
* プッシュ通知にサブスクライブするには、ネイティブプロンプトで**Allow**をクリックします。
* **Audience > Subscriptions**に移動します。
* ステータスが**Subscribed**の新しいエントリが表示されるはずです。
[Webプッシュサブスクリプション](/docs/ja/subscriptions)の作成に成功しました。
Webプッシュサブスクリプションは、ユーザーがサイトでプッシュ通知に初めてサブスクライブしたときに作成されます。
### テストサブスクリプションをセットアップ
テストサブスクリプションは、メッセージを送信する前にプッシュ通知をテストするのに役立ちます。
ダッシュボードで、サブスクリプションの横にある\*\*Options（3つのドット）\*\*ボタンをクリックし、**Add to Test Users**を選択します。
**test usersタブ**で後でデバイスを簡単に識別できるように、サブスクリプションに名前を付けます。
**Audience > Segments > New Segment**に移動します。
セグメントに`Test Users`という名前を付けます（この名前は後で使用されるため重要です）。
テストユーザーのセグメントの作成に成功しました。
この個別のデバイスとテストユーザーのグループにメッセージを送信するテストが可能になりました。
### API経由でテストプッシュを送信
OneSignalダッシュボードで、\*\*Settings > [Keys & IDs](/docs/ja/keys-and-ids)\*\*に移動します。
以下のコードの`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"
}'
```
ターミナルでコードを実行します。
すべてのセットアップ手順が正常に完了した場合、テストサブスクリプションは通知を受信するはずです。
画像をサポートしているのはChromeのみです。画像は折りたたまれた通知ビューでは小さく表示されます。通知を展開すると、完全な画像が表示されます。
ダッシュボードで**Delivery > Sent Messages**に移動し、メッセージをクリックして統計を表示します。**confirmed**統計が表示されるはずです。これはデバイスがプッシュを受信したことを意味します。
Safariはconfirmed receiptをサポートしていません。
プッシュ通知の配信、クリック、コンバージョン統計を表示します。
API経由でセグメントに通知を送信することに成功しました。
通知が届かない場合は、以下の情報を添えて`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を設定します。
OneSignalは、サブスクリプション（Subscription ID）とユーザー（OneSignal ID）に対して一意の読み取り専用IDを生成します。
ユーザーが異なるデバイスでアプリをダウンロードしたり、ウェブサイトにサブスクライブしたり、アプリ外でメールアドレスや電話番号を提供したりすると、新しいサブスクリプションが作成されます。
すべてのサブスクリプションにわたってユーザーを識別するために、SDKを介してExternal IDを設定することを強くお勧めします。作成方法に関係なく。
### データタグを追加
[タグ](/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`に設定されます。
レベルが5から10の間のユーザーのセグメントを作成し、それを使用してターゲット化されたパーソナライズされたメッセージを送信できます：
### メールおよび/または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)を使用して、統合されたユーザーを表示できます。
マルチチャネルコミュニケーションのベストプラクティス
* メールまたはSMSサブスクリプションを追加する前に、明示的な同意を得てください。
* 各コミュニケーションチャネルの利点をユーザーに説明してください。
* ユーザーが好むチャネルを選択できるように、チャネルの設定を提供してください。
***
### プライバシーとユーザー同意
OneSignalがユーザーデータを収集するタイミングを制御するには、SDKの同意ゲーティングメソッドを使用します：
* [`setConsentRequired(true)`](/docs/ja/web-sdk-reference#setconsentrequired)：同意が与えられるまでデータ収集を防ぎます。
* [`setConsentGiven(true)`](/docs/ja/web-sdk-reference#setconsentgiven)：同意が付与されるとデータ収集を有効にします。
プライバシーとセキュリティの詳細については：
OneSignal SDKがユーザーから収集するデータを確認します。
プライバシー規制に準拠してユーザーデータを管理および保護します。
***
## プッシュ、ユーザー、アプリ内イベントをリッスン
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)：プッシュサブスクリプションのステータスが変更されたときを追跡します。
***
## 高度なセットアップと機能
統合を強化するための追加機能を探索します：
別のプッシュプロバイダーからOneSignalに移行します。
OneSignalをサードパーティツールとプラットフォームに接続します。
プッシュ通知にインタラクティブなボタンを追加します。
ユーザーの好みの言語でローカライズされたメッセージを送信します。
サーバーサイドのIdentity VerificationでSDK統合を保護します。
メッセージに関連するカスタムコンバージョンイベントを追跡します。
### Web SDKのセットアップとリファレンス
統合のすべての主要なウェブプッシュ機能を有効にします。
利用可能なメソッドと設定オプションの完全な詳細。
おめでとうございます！Web SDKセットアップガイドが正常に完了しました。
***
***
## FAQ
### Webプッシュ通知にHTTPSは必要ですか？
はい。すべての最新ブラウザーはプッシュ通知サポートにHTTPSを必要とします。サイトがHTTPを使用している場合は、Webプッシュを設定する前にHTTPSに移行する必要があります。
### このセットアップをシングルページアプリケーション（SPA）で使用できますか？
はい。Custom Codeセットアップは、React、Angular、VueなどのフレームワークでビルドされたSPAに推奨されるアプローチです。[Angular](./angular-setup)、[React](./react-js-setup)、[Vue](./vue-js-setup) のフレームワーク固有のガイドは[このページの上部](#)をご参照ください。
### ユーザーがブラウザーデータをクリアするとどうなりますか？
ユーザーのプッシュサブスクリプションが削除されます。**Auto Resubscribe** が有効になっている場合、次回サイトを訪問したときに自動的に再サブスクライブされます。
***
## 関連ページ
ユーザーにサブスクライブを促すタイミングと方法を設定します。
OneSignal Web SDKの完全なAPIリファレンス。