# 目次
1. はじめに
2. 必要な準備
3. Expo Notificationsのセットアップ
   1. Expoアカウントの作成
   2. プロジェクトの初期設定
4. プッシュ通知の実装
   1. 通知トークンの取得
   2. 通知の許可をリクエストする
   3. プッシュ通知の送信
5. Google Cloud Messaging （GCM） または Firebase Cloud Messaging （FCM） との統合
6. プッシュ通知のカスタマイズ
7. デバッグとトラブルシューティング
8. まとめ

## 1. はじめに
React Nativeを使用したモバイルアプリ開発において、プッシュ通知はユーザーエンゲージメントを高める重要な機能です。本記事では、Expoを利用して、React Nativeアプリにプッシュ通知機能を簡単に実装する方法を紹介します。

## 2. 必要な準備
- **Expo CLI**: Expo CLIがインストールされていることを確認します。インストールされていない場合、以下のコマンドでインストールします。
  ```bash
  npm install -g expo-cli
  ```
- **Firebaseアカウント**: ここではFirebaseを使用してプッシュ通知を送信します。アカウントを持っていない場合、[Firebase公式サイト](https://firebase.google.com/)にて作成してください。

## 3. Expo Notificationsのセットアップ

### 3.1 Expoアカウントの作成
最初に、Expoアカウントを作成し、ログインします。Expo CLIを利用することで便利なホスティングサービスを利用できます。
![img](/mosaic-code.jpg)

### 3.2 プロジェクトの初期設定
新しいプロジェクトを作成してアプリを初期化します。
![img](/mosaic-code.jpg)

## 4. プッシュ通知の実装

### 4.1 通知トークンの取得
アプリが起動した際にデバイスの通知トークンを取得します。このトークンは通知を送信する際に必要です。

![img](/mosaic-code.jpg)

### 4.2 通知の許可をリクエストする
ユーザーに対して通知の許可を求めるポップアップを表示します。

![img](/mosaic-code.jpg)

### 4.3 プッシュ通知の送信
Expoのサーバを通じて、取得したトークンを使ってプッシュ通知を送信します。

![img](/mosaic-code.jpg)

## 5. Google Cloud Messaging （GCM） または Firebase Cloud Messaging （FCM） との統合
Firebaseコンソールでプロジェクトを作成し、GCMの設定を行います。GoogleServices-Info.plist（iOS）とgoogle-services.json（Android）をそれぞれプロジェクトに追加します。

## 6. プッシュ通知のカスタマイズ
カスタマイズを行うために、通知のデータ部分を設定します。そのデータに基づいてアクションやプロンプトを生成します。

![img](/mosaic-code.jpg)

## 7. デバッグとトラブルシューティング
通知が機能しない場合、以下を確認します。
- トークンが正しく取得されているか
- トークンに対して通知が送信されているか
- 通信が正しく行われているか

## 8. まとめ
Expoを利用したReact Nativeアプリでのプッシュ通知は、セットアップもシンプルであり、デバイスのネイティブ部分に手を入れる必要が少ないのが利点です。本記事の手順により、効率的にプッシュ通知を実装できます。次は、カスタム通知音や通知センター統合などのより高度な機能にも挑戦してみましょう。 [cv:issue_marketplace_engineer]

# 目次
1. はじめに
2. 必要な準備
3. Expo Notificationsのセットアップ
   1. Expoアカウントの作成
   2. プロジェクトの初期設定
4. プッシュ通知の実装
   1. 通知トークンの取得
   2. 通知の許可をリクエストする
   3. プッシュ通知の送信
5. Google Cloud Messaging （GCM） または Firebase Cloud Messaging （FCM） との統合
6. プッシュ通知のカスタマイズ
7. デバッグとトラブルシューティング
8. まとめ

## 1. はじめに
React Nativeを使用したモバイルアプリ開発において、プッシュ通知はユーザーエンゲージメントを高める重要な機能です。本記事では、Expoを利用して、React Nativeアプリにプッシュ通知機能を簡単に実装する方法を紹介します。

## 2. 必要な準備
- **Expo CLI**: Expo CLIがインストールされていることを確認します。インストールされていない場合、以下のコマンドでインストールします。
  ```bash
  npm install -g expo-cli
  ```
- **Firebaseアカウント**: ここではFirebaseを使用してプッシュ通知を送信します。アカウントを持っていない場合、[Firebase公式サイト](https://firebase.google.com/)にて作成してください。

## 3. Expo Notificationsのセットアップ

### 3.1 Expoアカウントの作成
最初に、Expoアカウントを作成し、ログインします。Expo CLIを利用することで便利なホスティングサービスを利用できます。
```bash
expo register
expo login
```

### 3.2 プロジェクトの初期設定
新しいプロジェクトを作成してアプリを初期化します。
```bash
expo init MyNotificationApp
cd MyNotificationApp
```

## 4. プッシュ通知の実装

### 4.1 通知トークンの取得
アプリが起動した際にデバイスの通知トークンを取得します。このトークンは通知を送信する際に必要です。

```javascript
import * as Notifications from 'expo-notifications';
import * as Permissions from 'expo-permissions';

async function registerForPushNotificationsAsync() {
  const { status } = await Permissions.getAsync(Permissions.NOTIFICATIONS);
  if (status !== 'granted') {
    const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
    if (status !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
  }
  const token = (await Notifications.getExpoPushTokenAsync()).data;
  console.log(token);
  return token;
}
```

### 4.2 通知の許可をリクエストする
ユーザーに対して通知の許可を求めるポップアップを表示します。

```javascript
useEffect(() => {
  registerForPushNotificationsAsync().then(token => setToken(token));
}, []);
```

### 4.3 プッシュ通知の送信
Expoのサーバを通じて、取得したトークンを使ってプッシュ通知を送信します。

```javascript
import { Notifications } from 'expo';

async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'New Message',
    body: 'You've got mail!',
    data: { someData: 'goes here' },
  };

  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}
```

## 5. Google Cloud Messaging （GCM） または Firebase Cloud Messaging （FCM） との統合
Firebaseコンソールでプロジェクトを作成し、GCMの設定を行います。GoogleServices-Info.plist（iOS）とgoogle-services.json（Android）をそれぞれプロジェクトに追加します。

## 6. プッシュ通知のカスタマイズ
カスタマイズを行うために、通知のデータ部分を設定します。そのデータに基づいてアクションやプロンプトを生成します。

```javascript
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});
```

## 7. デバッグとトラブルシューティング
通知が機能しない場合、以下を確認します。
- トークンが正しく取得されているか
- トークンに対して通知が送信されているか
- 通信が正しく行われているか

## 8. まとめ
Expoを利用したReact Nativeアプリでのプッシュ通知は、セットアップもシンプルであり、デバイスのネイティブ部分に手を入れる必要が少ないのが利点です。本記事の手順により、効率的にプッシュ通知を実装できます。次は、カスタム通知音や通知センター統合などのより高度な機能にも挑戦してみましょう。 [![image](https://firebasestorage.googleapis.com/v0/b/issue-pro-42602.appspot.com/o/topics%2F17fa658b-53c7-4ca0-a28b-e588ed1bd371?alt=media&token=2c00afff-85ff-4428-8d15-696ab676dcb0)](https://i-ssue.com/lp/check_salary)

目次

続きを読むには単価診断を受けてください（30秒）