# ソースコードの移行

Monacaプロジェクトの更新は、iOSとAndroidの両方で共通の手順を踏みます。

1. **FirebaseXプラグインの導入**: \
   MonacaアプリでFirebaseを利用するため、FirebaseXプラグインをインストールします。
2. **コードの更新**: \
   ニフクラ mobile backendを使用した既存のプッシュ通知コードをFirebase対応のコードに変換します。

## FirebaseXプラグインの導入

1. Monaca IDEのヘッダーメニューの設定から `corodvaプラグインの管理` を選択して、プラグイン画面を開きます
2. 次に、ニフクラ mobile backendのプラグインがインストールされている場合は、アンインストールします
3. 「cordova-plugin-firebasex\@16.1.0」をインストールします

<figure><img src="/files/dxjXlWnoVTVVwiKu3wim" alt="" width="563"><figcaption></figcaption></figure>

## コードの更新

ニフクラ mobile backendのプッシュ通知機能のコードをFirebaseXプラグインを利用したコードに更新していきます。

### ニフクラ mobile backendを利用したコード

次のコードは、ニフクラ mobile backendを利用したプッシュ通知の基本的なコードです。このコードをもとにFirebaseXプラグインのコードに更新します。

まず、下のコードについて解説します。このコードでは、次の処理を行います。

1. **デバイストークンの取得と登録**:\
   `window.NCMB.monaca.setDeviceToken` を使用して、デバイスに固有のトークンを取得し、アプリケーションのインストール情報としてNCMBサーバーへ登録します。
2. **通知の許可を求める**: \
   ユーザーにプッシュ通知の許可を求めるポップアップを表示し、`window.NCMB.monaca.grantPermission`を使用してユーザーの応答を取得します。
3. **開封通知の設定**: \
   `window.NCMB.monaca.setReceiptStatus(true)`を使って、プッシュ通知が開封されたときにサーバーに通知する設定を行います。
4. **プッシュ通知の受信時の処理**: \
   プッシュ通知を受信した際の処理を定義し、通知内容（JSONデータ）をアラートで表示します。

```javascript
<script>
        document.addEventListener("deviceready", function() {
            // デバイストークンを取得してinstallation登録が行われます
            window.NCMB.monaca.setDeviceToken(
                "application_key",
                "client_key"
            );

            // 通知許可を求めるポップアップを表示
            window.NCMB.monaca.grantPermission(function(hasPermission) {
                alert("Notifications permission was " + (hasPermission ? "granted" : "denied"));
            });

            // 開封通知登録の設定
            window.NCMB.monaca.setReceiptStatus(true); // trueを設定すると、開封通知を行います

            // プッシュ通知受信時の処理
            window.NCMB.monaca.setHandler(
                function(jsonData) {// 送信時に指定したJSONが引数として渡されます
                    alert("callback :::" + JSON.stringify(jsonData));
                }
            );
        }, false);
</script>
```

### FirebaseXプラグインを利用したコード

上のニフクラ mobile backendのコードは、Firebasexプラグインを利用した場合、次のようになります。処理の流れは以下の通りです：

1. **プッシュ通知許可の確認**: \
   `window.FirebasePlugin.hasPermission`を使って、ユーザーがプッシュ通知を受け取るための許可を与えているかどうかを確認します。
2. **通知許可の要求**: \
   もしユーザーがまだ許可を与えていなければ、`window.FirebasePlugin.grantPermission`を使って許可を求めるポップアップを表示します。
3. **プッシュ通知受信時の処理**: \
   `window.FirebasePlugin.onMessageReceived`を使って、プッシュ通知を受け取った時の動作を定義します。通知のタイプや、通知がタップされたかどうかに応じて、異なるアラートを表示します。

```javascript
<script>
document.addEventListener("deviceready", async function () {
    // プッシュ通知許可の確認
    const hasPermission = await new Promise((resolve, reject) => {
        window.FirebasePlugin.hasPermission(resolve);
    });

    // 通知許可を求めるポップアップを表示
    if (!hasPermission) {
        await new Promise((resolve, reject) => {
            window.FirebasePlugin.grantPermission(resolve, reject);
        });
        alert("Permission is granted");
    } else {
        alert("Permission to receive notification is granted.");
    }

    // プッシュ通知受信時の処理
    window.FirebasePlugin.onMessageReceived(message => {
        alert("Message type: " + message.messageType);
        if (message.messageType === "notification") {
            alert("Notification message received");
            if (message.tap) {
                alert("Tapped in " + message.tap);
            }
        }
    }, error => {
        alert(error);
    });
}, false);
</script>
```

## NCMBとFirebaseXプラグインのメソッド対応表

以下の表は、ニフクラ mobile backendのプッシュ通知プラグインの各メソッドとFirebaseXプラグインのメソッドの対応表です。

ニフクラ mobile backendからFirebaseXへの移行では、いくつかの重要な違いに注意が必要です。特に、`window.NCMB.monaca.setDeviceToken`のようなメソッドはFirebaseXでは存在せず、Firebaseではデバイストークンが自動的に管理されます。

また、FirebaseXではAndroidとiOSのトークンを別々に扱い、`getToken`**と**`getAPNSToken`メソッドを使用してそれぞれのトークンを取得します。

FirebaseXでのプッシュ通知の受信は、`FirebasePlugin.onMessageReceived`で設定し、プッシュ通知の許可は`FirebasePlugin.grantPermission`を使います。なお、FireabseXのAPIについて、より詳しい内容は、[こちら](/tutorials/firebase.md)をご確認ください。

<table data-full-width="false"><thead><tr><th>メソッド (NCMB)</th><th>説明</th><th>メソッド (FirebaseX)</th></tr></thead><tbody><tr><td>NCMB.monaca.setDeviceToken</td><td>データストア(Installationクラス)にdeviceTokenを登録します。</td><td>-<br>FirebaseXでは、setDeviceTokenという機能はありません。 デバイストークンはFirebaseコンソール側で自動的に管理されます。また、NCMBと異なり、Firebaseコンソールには、登録されたデバイストークンを確認するための画面は提供されていません。</td></tr><tr><td>NCMB.monaca.setHandler</td><td>アプリがプッシュ通知を受け取った際のコールバックを設定します。</td><td>FirebasePlugin.onMessageReceived</td></tr><tr><td>NCMB.monaca.getInstallationId</td><td>デバイスのinstallation objectIdを取得します。</td><td>-</td></tr><tr><td>NCMB.monaca.setReceiptStatus</td><td>プッシュ通知の開封状況をサーバーに登録する許可します。</td><td>-</td></tr><tr><td>NCMB.monaca.getReceiptStatus</td><td>プッシュ通知の開封状況を取得します。</td><td>-</td></tr><tr><td>NCMB.monaca.getDeviceToken</td><td>デバイスのInstallation deviceTokenを取得します。</td><td><p>NCMBでは、AndroidとiOSのトークン（デバイストークン）を同じように扱っていましたが、FirebaseXでは、次のようにAndroidとiOSのトークンを区別して扱います。<br></p><p><strong><code>getToken()</code></strong>: Android用のトークン(FCMトークン)を取得します。 <br><strong><code>getAPNSToken()</code></strong>: iOS用のトークン(APNsトークン)を取得します。</p></td></tr><tr><td>NCMB.monaca.grantPermission</td><td>プッシュ通知の許可を付与します。</td><td>FirebasePlugin.grantPermission</td></tr></tbody></table>

## 用語の説明

### デバイストークン

デバイストークンは、Android用のFCMトークンとiOS用のAPNsトークンを総称したものです。これらは、それぞれのデバイスでプッシュ通知を受け取るための一意の識別子です。

* **FCMトークン**: Firebase Cloud Messagingが生成し、Androidデバイスでプッシュ通知を受信するために使用。
* **APNsトークン**: Apple Push Notification serviceが生成し、iOSデバイスでプッシュ通知を受信するために使用。

これらのトークンは、サーバー側から特定のデバイスに対して通知を送る際に必要で、各デバイスがプラットフォームに対応した方法でトークンを取得し、アプリケーションサーバーに提供することで、個別のデバイスへ通知を配信できます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/migration-guide/nifcloud/push/code-migration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.