Rork × OneSignal：プッシュ通知サービスを外部連携して配信を最大化する

プッシュ通知はモバイルアプリのリテンション率を高める最も効果的な手段のひとつです。Rork で生成した React Native / Expo アプリに OneSignal を組み込むことで、高度なセグメント配信・リッチ通知・A/Bテスト・詳細な分析ダッシュボードを手軽に活用できるようになります。

ここで扱うのはOneSignal の概念を整理しつつ、Expo Notifications との違い、そして Rork アプリへの実装手順をステップバイステップで解説します。

OneSignal とは？Expo Notifications と何が違うのか

OneSignal は、iOS・Android・Web 向けプッシュ通知を一元管理できる外部 SaaS プラットフォームです。無料プランでも月間最大 10,000 件の通知を送信でき、個人開発者が副業アプリに使い始めるには十分なスペックを備えています。

Expo Notifications（expo-notifications）との主な違いをまとめると、以下のとおりです。

管理画面: OneSignal は専用ダッシュボードを持ち、通知の作成・スケジュール・配信履歴を GUI で確認できます。Expo Notifications はコードベースで全て管理する必要がある
セグメント配信: OneSignal はユーザー属性・タグ・位置情報・行動履歴に基づくセグメントを GUI で設定できます。Expo Notifications は自前でフィルタリングロジックを実装する必要がある
リッチ通知: 画像付きの大型通知やアクションボタンを OneSignal のダッシュボードから簡単に設定できる
分析: 配信数・到達数・クリック率・コンバージョンを OneSignal のダッシュボードで可視化できる
バックエンドの簡略化: アプリサーバー不要で OneSignal REST API またはダッシュボードから送信できる

すでに Expo Notifications を使っているが「もっと詳細な配信管理をしたい」「マーケティング担当者がダッシュボードから通知を送れるようにしたい」という方に特に OneSignal は適しています。

事前準備：必要なものを揃える

OneSignal を Rork アプリに組み込む前に、以下を用意しておきましょう。

Rork または Rork Max アカウント（プロジェクト作成済み）
OneSignal の無料アカウント
iOS 通知に必要な APNs キー（Apple Developer アカウントから取得）
Android 通知に必要な FCM サーバーキー（Google Firebase Console から取得）
Node.js 18 以上（ローカル開発環境）

APNs キーは Apple Developer Console の「Certificates, Identifiers & Profiles」→「Keys」から作成できます。AuthKey_XXXXXXXXXX.p8 という形式のファイルをダウンロードしてください。

Step 1：OneSignal アプリの作成とプラットフォーム設定

OneSignal ダッシュボードで新規アプリを作成する

OneSignal にログインし、「New App/Website」をクリック
アプリ名を入力し、「Mobile Push」を選択
iOS と Android を両方選択（クロスプラットフォーム対応）

iOS の設定（APNs）

「iOS Configuration」の画面で次の情報を入力します。

Authentication Type: Token（推奨）
.p8 File: APNs Key ファイル（AuthKey_XXXXXXXXXX.p8）をアップロード
Key ID: Apple Developer Console のキー ID（10文字）
Team ID: Apple Developer アカウントの Team ID

Android の設定（FCM v1）

OneSignal は FCM HTTP v1 API に対応しています。

Firebase Console でプロジェクトを開く
「プロジェクトの設定」→「クラウドメッセージング」→「Firebase Cloud Messaging API (V1)」を有効化
「サービスアカウント」タブ→「新しい秘密鍵を生成」→ JSON ファイルをダウンロード
OneSignal の「Android Configuration」に JSON ファイルをアップロード

設定完了後、App ID（UUID 形式）と REST API Key が発行されます。これらは後で使用します。

Step 2：Rork アプリへの OneSignal SDK 組み込み

Rork でプロジェクトを開き、次のプロンプトを入力します。

OneSignalをプロジェクトに追加したいです。
以下を実装してください：
1. onesignal-expo-plugin と react-native-onesignal をインストール
2. app.json の plugins に設定を追加
3. アプリ起動時にOneSignalを初期化するコード
4. 通知の許可をリクエストするボタン
5. デバイスのプッシュトークンを取得してコンソール出力

Rork は上記のコードを自動生成しますが、手動での設定も確認しておきましょう。

app.json への追加設定

Rork プロジェクトの app.json に以下を追加します。

{
  "expo": {
    "plugins": [
      [
        "onesignal-expo-plugin",
        {
          "mode": "production"
        }
      ]
    ]
  }
}

OneSignal の初期化コード

アプリのエントリーポイント（通常 App.tsx または _layout.tsx）に以下を追加します。

import OneSignal from 'react-native-onesignal';
 
// OneSignal の初期化（アプリ起動時に1回だけ呼ぶ）
export function initOneSignal() {
  // YOUR_ONESIGNAL_APP_ID を実際の App ID に置き換えてください
  OneSignal.initialize('YOUR_ONESIGNAL_APP_ID');
 
  // 通知許可をリクエスト（iOS では許可ダイアログが表示される）
  OneSignal.Notifications.requestPermission(true);
 
  // 通知がクリックされたときのハンドラー
  OneSignal.Notifications.addEventListener('click', (event) => {
    console.log('通知がクリックされました:', event.notification);
    // ここで画面遷移などを実装できます
  });
}
 
// 期待する動作:
// 1. アプリ起動時に初期化が完了する
// 2. iOS では通知許可ダイアログが表示される
// 3. 通知クリック時にコンソールに情報が出力される

タグ（ユーザー属性）の設定

ユーザーにタグを付けることで、特定のユーザーグループにだけ通知を送れます。

import OneSignal from 'react-native-onesignal';
 
// ユーザーのタグを設定（セグメント配信に使用）
export function setUserTags(userId: string, plan: 'free' | 'premium') {
  OneSignal.User.addTag('user_id', userId);
  OneSignal.User.addTag('plan', plan);
  OneSignal.User.addTag('language', 'ja');
}
 
// 期待する動作:
// - OneSignal ダッシュボードの「Audience」→「Segments」で
//   plan = premium のユーザーに絞ったセグメントを作成できる

Step 3：ビルドと動作確認

OneSignal を組み込んだアプリは、Expo Go では動作しません。Expo Development Build または 本番ビルド が必要です。

# Expo EAS Build でデバッグビルドを作成
npx eas build --platform all --profile development
 
# ビルド完了後、デバイスにインストールしてアプリを起動
# OneSignal ダッシュボードの「Audience」→「All Users」にデバイスが表示されれば成功

ダッシュボードからテスト通知を送る

OneSignal ダッシュボード →「Messages」→「Push」→「New Push」
「Send to Test Device」を選択し、player_id を入力（コンソールから取得）
タイトル・メッセージを入力して送信

Step 4：OneSignal ダッシュボードで本格的な通知を設計する

OneSignal の最大の強みはダッシュボードの充実度にあります。

セグメント配信の設定

「Audience」→「Segments」で条件を組み合わせます。

プレミアム会員向け: plan = premium タグを持つユーザー
日本語ユーザー向け: language = ja タグを持つユーザー
7日間未アクセス: 「Last Session」が7日以上前のユーザー（ウィンバック通知に最適）

リッチ通知（画像付き通知）の設定

「Messages」→「New Push」で「Add Media」を選択し、画像 URL を入力するだけです。iOS と Android で最適なサイズは次のとおりです。

iOS: 1200 × 630 px（2:1 の比率）
Android: 1200 × 630 px（2:1 の比率）、または正方形 400 × 400 px

スケジュール送信と Time Intelligent Delivery

OneSignal には Intelligent Delivery 機能があり、ユーザーが最もアプリを開きやすい時間帯に自動で通知を届けます。

「Delivery」セクションで「Intelligent Delivery」を有効にするだけで設定完了です。

より詳細なセグメント配信やA/Bテストの設計については、Rork アプリのプッシュ通知マスタープラン — セグメント配信・A/Bテスト・自動化パイプラインの実装ガイドで体系的に解説しています。

よくあるエラーと対処法

エラー 1：iOS 実機で通知が届かない

原因: APNs 設定のミス、または Provisioning Profile の問題。

対処法: OneSignal ダッシュボードの「Device Errors」を確認し、InvalidToken や BadDeviceToken エラーが出ていれば APNs Key の再設定が必要です。Expo EAS Build で provisioning の設定を確認してください。

エラー 2：Android で通知アイコンが真っ白になる

原因: Android の通知アイコンには透過 PNG（白・グレーのシルエット）が必要です。カラー画像はシステムに無視されます。

対処法: app.json の notification フィールドで icon に透過 PNG のパスを指定します。

{
  "expo": {
    "notification": {
      "icon": "./assets/notification-icon.png",
      "color": "#4F46E5"
    }
  }
}

エラー 3：Expo Go でクラッシュする

原因: OneSignal SDK はネイティブモジュールを使用するため、Expo Go では動作しません。

対処法: 開発中は Expo Development Build を使ってください。npx eas build --profile development でビルドが作成できます。

ここまでの要点

OneSignal を Rork アプリに組み込むことで、以下のメリットが得られます。

ノーコードのダッシュボードからセグメント配信・スケジュール通知・リッチ通知を設定できる
詳細な配信統計とクリック率を可視化して通知を改善できる
Intelligent Delivery でユーザーの最適な時間帯に自動配信できる
無料プランで月間 10,000 件まで対応し、個人開発でも安心して始められる

Expo Notifications の基本実装で満足していた方も、OneSignal を導入することで通知戦略が一段階進化します。ユーザーの行動データを活用したウィンバック通知・パーソナライズ通知を実装すれば、リテンション率の向上が期待できます。