カスタムコードセットアップ

このカスタムコードセットアップは、高度な構成またはプログラムによる制御が必要な場合にのみ使用してください。ほとんどのユーザーには次をお勧めします：

前提条件

OneSignalアカウント
HTTPSを使用したWebサイト（Webプッシュ通知に必要）
WebサイトのHTMLを変更し、サーバーにファイルをアップロードするためのアクセス
JavaScriptの基本的な理解（役立ちますが必須ではありません）

OneSignalアプリの作成

これがOneSignalで最初のアプリでない場合は、New App/Websiteをクリックします。それ以外の場合は、直接セットアップに進みます。

初期アプリ作成画面を示すOneSignalダッシュボード

アプリに説明的な名前を付け（Webサイト名と一致させることを推奨）、プラットフォームリストからWebを選択します。Next: Configure Your Platformをクリックします。 注意： 後でアプリの設定で追加のプラットフォーム（iOS、Androidなど）を追加できます。

Webオプションがハイライト表示されたプラットフォーム選択画面

1. 統合の選択

Custom Codeを選択します。これにより、JavaScript SDKを使用したプロンプト、タイミング、その他の設定の完全なプログラムによる制御が可能になります。 カスタムコードを選択する場合：

通知プロンプトをカスタマイズする必要がある
ユーザーにプロンプトを表示するタイミングを制御したい
高度なセグメンテーションまたはターゲティングが必要
シングルページアプリケーション（SPA）を構築している

カスタムコードが選択されたWeb構成オプション

2. サイトセットアップ

基本的なサイト情報を構成します。これらの設定は、通知がユーザーにどのように表示されるかに影響します。

必須フィールドがハイライト表示されたサイトセットアップフォーム

フィールド	説明	要件
SITE NAME	プッシュ通知に表示される表示名	簡潔で認識しやすいものにする
SITE URL	完全なWebサイトURL	`https://`を含め、正確に一致する必要があります（使用する場合は`www`を含める）
AUTO RESUBSCRIBE	再訪問するユーザーを自動的に再サブスクライブする	推奨：サブスクライバー数の維持に役立ちます
DEFAULT ICON URL	プロンプトと通知のアイコン	正方形`256x256`ピクセル、`.png/.jpg/.gif`形式、HTTPS URL必須

一般的な落とし穴：

サイトURLは正確に一致する必要があります（wwwの有無）
アイコンはHTTPS経由で提供する必要があります
ローカルテストについては、ローカルテストセットアップを参照してください

3. 高度なプッシュ設定

Safari Webプッシュ証明書（オプション）

OneSignalは無料でSafari証明書を自動的に提供します。使用する必要がある既存のSafari Webプッシュ証明書がある場合にのみ、これを有効にしてください。

既存の証明書のSafari証明書アップロードオプション

有効にした場合は、Safari Web .p12 Push Certificateをアップロードし、パスワードを入力します。 Saveをクリックして続行します。

4. サービスワーカーファイルのアップロード

OneSignalサービスワーカーは、プッシュ通知を機能させるために必要です。2つのオプションがあります：

オプション1：手動でファイルを作成（推奨）

作成 OneSignalSDKWorker.jsという名前の新しいファイル

追加次の1行のコード：

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

アップロード Webサイトのルートディレクトリにファイルをアップロードします

オプション2：ダウンロードしてアップロード

ダウンロード OneSignal SDKファイル
解凍ダウンロードを解凍
アップロード OneSignalSDKWorker.jsをサーバーにアップロード

ファイルホスティング要件

デフォルトの場所： サービスワーカーはhttps://yoursite.com/OneSignalSDKWorker.jsでアクセス可能である必要があります カスタムの場所： ファイルをサブフォルダーに配置する必要がある場合は、詳細な手順についてはOneSignalサービスワーカーガイドを参照してください。

カスタムの場所が必要ですか？ サブフォルダーへの配置または別のプッシュプロバイダーからの移行については、OneSignalサービスワーカーガイドに従ってください。

サービスワーカーファイルのダウンロードインターフェース

レガシーセットアップアラート： サイトが2021年11月22日より前にセットアップされ、現在2つのサービスワーカーファイル（OneSignalSDKWorker.jsとOneSignalSDKUpdaterWorker.js）を使用している場合は、サービスワーカーの問題を防ぐために両方のファイルをホストし続けてください。新しいセットアップには、単一のOneSignalSDKWorker.jsファイルのみが必要です。

5. Webサイトにコードを追加

基本的な実装

このコードをWebサイトの<head>セクションに追加します。YOUR_ONESIGNAL_APP_IDをOneSignalダッシュボードの実際のアプリIDに置き換えてください。

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(function(OneSignal) {
    OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID", // Only needed if using custom Safari certificate
      notifyButton: {
        enable: true, // Shows the OneSignal bell icon
      },
    });
  });
</script>

フレームワーク固有のセットアップ

JavaScriptフレームワークを使用している場合は、これらの専用ガイドに従ってください：

コードインストール後の次のステップ

SDKを初期化： 上記のコードが基本的な初期化を処理します
プロンプトを構成： ユーザーにプロンプトを表示するタイミングと方法を設定します - 権限リクエストを参照
カスタムロジックを追加： 高度な機能についてはWeb SDKリファレンスを使用します

一般的な統合ポイント：

ユーザーの行動に基づくカスタムプロンプトタイミング
セグメンテーションとユーザーのタグ付け
イベントトラッキングと分析
異なる通知戦略のA/Bテスト

セットアップをテスト

インストールの確認

Webサイトにアクセス - OneSignalベルアイコンが表示されるはずです（有効にした場合）
ベルをクリック してブラウザーのネイティブ権限プロンプトをトリガーします
サブスクライブ 通知にサブスクライブします
ブラウザーコンソールをチェック JavaScriptエラーがないか確認します

テスト通知を送信

テストサブスクリプションを見つける： テストサブスクリプションの検索と設定に従ってください
テストプッシュを送信： ガイドを使用して自分にプッシュ通知を送信します
配信を確認 さまざまなブラウザーとデバイスで確認します

一般的な問題のトラブルシューティング

サービスワーカーの問題：

OneSignalSDKWorker.jsが正しいURLでアクセス可能であることを確認します
ファイルに正しいimportステートメントが含まれていることを確認します
HTTPSが正しく機能していることを確認します

ベルアイコンが表示されない：

JavaScriptコードが<head>セクションにあることを確認します
ブラウザーコンソールでエラーをチェックします
アプリIDが正しいことを確認します

通知が受信されない：

シークレット/プライベートブラウザーウィンドウでテストします
ブラウザー設定で通知が有効になっていることを確認します
サイトがHTTPS経由で提供されていることを確認します

ヘルプが必要ですか？ 問題が発生した場合は、Webプッシュトラブルシューティングガイドを確認するか、support@onesignal.comにお問い合わせください。

次のステップ

セットアップが成功した後、これらの高度な機能を検討してください：

ターゲットメッセージング用のオーディエンスセグメンテーション
通知戦略のA/Bテスト
パフォーマンスを追跡するための分析とインサイト

開発者ドキュメント

モバイルSDK

ウェブSDK

ライブアクティビティ

デスクトップ & ウォッチセットアップ

Legacy SDK reference

カスタムコードセットアップ

前提条件