> For the complete documentation index, see [llms.txt](https://ja.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ja.docs.monaca.io/tutorials/firebase.md).

# Cordova Firebase プラグイン

Cordova Firebase プラグインは、プッシュ通知、分析、イベントトラッキング、クラッシュレポートなどを Google Firebase から アプリへ提供します。

* プラグイン リポジトリ: <https://github.com/dpa99c/cordova-plugin-firebasex>
* プラグイン ID/Package Name: `cordova-plugin-firebasex`
* テストバージョン: 16.5.0

{% hint style="info" %}
Cordova Firebase プラグイン 16.5.0 は　プライバシーマニフェストに対応しています。
{% endhint %}

{% hint style="info" %}
カスタムビルドデバッガーでは、プッシュ通知を確認することはできません。\
プッシュ通知を確認する場合は、デバッグビルドかリリースビルドにてご確認ください。
{% endhint %}

## デモ

<img src="https://docs.monaca.io/images/common/import_img.png" alt="" data-size="line">[プロジェクトをインポート](https://monaca.mobi/ja/directimport?pid=64b92d32e78885c623d49611)

<img src="/files/-Mgy6zQuZRrQkaNwbeeq" alt="" width="188">

## iOSの準備

iOS 向けのプッシュ通知には、APNs 認証キーまたは APNs 証明書が必要になります。

ここでは、iOS デバッグビルド用の Development APNs 証明書の作成方法を説明します。

(なお、リリースビルドでは、Production APNs 証明書が必要になります。)

既に [Apple Developer Program](https://developer.apple.com/programs/) をお持ちの場合は、以下の手順に従って Development APNs 証明書を作成してください。証明書作成は、次の流れで行います。

1. AppIDの作成
2. APNs証明書の作成
3. APNs証明書の形式変換

### AppIDの作成

1\. [Apple Developer page](https://developer.apple.com/) から、[`Account`](https://developer.apple.com/account) に移動します。

2\. `証明書` を選択します。

<figure><img src="/files/VgpiuJaINUmxREgc274u" alt="" width="375"><figcaption></figcaption></figure>

3\.  APNs 証明書を作成する場合は、プッシュ通知を有効にした App ID が必要になります。`Identifiers` 項目の `+` ボタンをクリックします。

<figure><img src="/files/2A4n1rFdAFlxk5ElEYlR" alt="" width="375"><figcaption></figcaption></figure>

4\. 次に`App IDs`を選択します。

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

5\. IDの種別は、`App`を選択します。

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

6\. 次に App ID 情報を入力します。

* `Description`: アプリ名を入力します ( 例：push test )
* `Bundle ID`:  `Explicit`を選択します。プッシュ通知では、ワイルドカードの App ID を使用できないため、このオプションを選択します。 アプリの固有の識別子（ io.monaca.test など ）を入力します。

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

7\. `Capabilities` 項目の `Push Notifications` オプションをチェックし、Continue をクリックします。

<figure><img src="/files/ugTd8Qx0NEKN8ByB68wV" alt="" width="375"><figcaption></figcaption></figure>

8\.  `Register` をクリックします。

ここまでで、App ID の作成は完了です。続いてこのApp IDに紐づくAPNsを作成します。

### APNs証明書の作成

1\. iOS App IDs ページで、ここまでの手順で作成した App ID を選択し、Push Notificationsの`Edit`をクリックします。

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

2\. Apple Push Notification service SSL Certificats 項目にある `Development SSL Certificate` の `Create Cerficate` をクリックします。

<div data-full-width="false"><figure><img src="/files/RN0FCk9vAWvcStcCiEUf" alt="" width="563"><figcaption></figcaption></figure></div>

3\. `Choose File` をクリックし、CSR ファイルを選択します。

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

4\. CSR ファイルの取得 (Monaca上での操作)

CSRファイルは、Monaca クラウド IDE の **`設定 → iOS ビルド設定`** から取得することができます。

`秘密鍵と CSR の生成` をクリックし、CSRファイルを作成後 `エクスポート` ボタンをクリックしてダウンロードします。

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

5\. 作成したCSRファイルをApple Developer センターにアップロード後、`Continue` をクリックします。 APNs証明書の準備ができ、ダウンロード可能になったらAPNs証明書をダウンロードします。

### APNs証明書の形式変換

Apple Developer センターで作成したAPNs証明書は、そのままの形式ではプッシュ通知サービスで利用できません。そのため、Monacaを通して、証明書の形式&#x3092;**`p12ファイル形式`**&#x306B;変換します。

ここからの手順は、Monacaサービス上での操作となります。

1\. ダウンロードした証明書を `iOS ビルド設定` の `証明書のアップロード` ボタンをクリックしてアップロードします。

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

2\. `Monacaに登録された証明書` に表示された証明書の `エクスポート` アイコンをクリックして `p12` ファイルをエクスポートします。p12ファイル次の項目の Firebase の設定に必要になります。

<figure><img src="/files/GfpruLeugtulWQqYM9yc" alt="" width="375"><figcaption></figcaption></figure>

## Firebase ( プッシュ通知 ) の設定

1\. [Firebase Console](https://firebase.google.com/) にアクセスします。

2\. `プロジェクトを追加` をクリックし、新しいプロジェクトを作成します。

プロジェクトを作成後、各プラットフォーム用プッシュ通知の設定を行うことができます。

### iOS の場合

下記の手順でFirebase上でのアプリ登録と設定ファイル (GoogleService-Info.plist) を取得します。

{% content-ref url="/pages/BZjcvmFpwvJzEpCtSFue" %}
[アプリの登録と設定ファイルの取得](/external-service-integration-guide/firebase/app-registration.md)
{% endcontent-ref %}

### APNs証明書の登録

作成したプロジェクトに APNs 証明書を追加します。

`プロジェクトの設定` に移動し、**`Cloud Messaging`**&#x3092;選択します。

<figure><img src="/files/KmIYLnQRYZvbTJsnxz3b" alt="" width="375"><figcaption></figcaption></figure>

**Appleアプリの設定** 項目で、APNs 認証キーまたは APNs 証明書をアップロードします。

<figure><img src="/files/9ONyfuFw0JiUcvS7PSB9" alt="" width="375"><figcaption></figcaption></figure>

### Android の場合

下記の手順でFirebase上でのアプリ登録と設定ファイル(`google-services.json`)を取得します。

{% content-ref url="/pages/BZjcvmFpwvJzEpCtSFue" %}
[アプリの登録と設定ファイルの取得](/external-service-integration-guide/firebase/app-registration.md)
{% endcontent-ref %}

## Monaca クラウド IDE にプラグインを追加する

1\. IDE メニューから、**`設定 → Cordova プラグインの管理`**&#x3078;移動します。

2\. `Cordova プラグインのインポート`ボタンをクリックします。 次に、\[ZIP ファイル] または \[パッケージ名 / URL] を使用してプラグインをインポートします。\
パッケージ名を利用する場合は、 `cordova-plugin-firebasex@16.5.0`と指定してください。

{% hint style="info" %}
iOS 12.2 以降のデバイスをサポートするには、config.xml に以下のように設定してください。<br>

<pre class="language-xml"><code class="lang-xml"><strong>&#x3C;platform name="ios">
</strong>    &#x3C;preference name="deployment-target" value="12.2"/>
</code></pre>

{% endhint %}

## 使い方

Cordova プラグインをプロジェクトにインポートすることで、デバイストークンの取得や、プッシュ通知を開いたときのイベントを設定することができます。"deviceready" イベント後にプラグイン API を使用します。

```javascript
document.addEventListener("deviceready", function(){
    // デバイストークンを取得します
    window.FirebasePlugin.getToken(function(token) {
        console.log(token);
    }, function(error) {
        console.error(error);
    });

    // トークンが更新されたときに実行されます
    window.FirebasePlugin.onTokenRefresh(function(token) {
        // save this server-side and use it to push notifications to this device
        console.log("Refresh to get new token: " + token);
    }, function(error) {
        alert(error);
    });

    // ユーザーが通知を開いたときに実行されます
    window.FirebasePlugin.onMessageReceived(function(message) {
        console.log("Message type: " + message.messageType);
        if(message.messageType === "notification"){
            alert("Notification message received");
            if(message.tap){
                alert("Tapped in " + message.tap);
            }
        }
    }, function(error) {
        console.error(error);
    }); 
}, false);
```

## API リファレンス

ここでは、[デモ](https://monaca.mobi/directimport?pid=5ac5776ee788854f3a8b456a) で使用されている主な API について説明します。 完全なAPIリファレンスについては、 [こちら](https://github.com/dpa99c/cordova-plugin-firebasex#api) を参照してください。

### getToken()

デバイストークンを取得します。 トークンが確立できない場合は、null になります。

```javascript
window.FirebasePlugin.getToken();
```

**例**

```javascript
window.FirebasePlugin.getToken(function(token) {
    console.log(token);
}, function(error) {
    console.error(error);
});
```

### onTokenRefresh()

トークンがリフレッシュされたときに通知を受け取ります。 トークン確立後、すぐにデバイスの有効なトークンを取得することができます。

```javascript
window.FirebasePlugin.onTokenRefresh();
```

**例**

```javascript
window.FirebasePlugin.onTokenRefresh(function(token) {
    console.log(token);
}, function(error) {
    console.error(error);
});
```

### onMessageReceived()

プッシュ通知を開いたときに、通知データを取得します。

```javascript
window.FirebasePlugin.onMessageReceived();
```

**例**

```javascript
window.FirebasePlugin.onMessageReceived(function(message) {
    console.log("Message type: " + message.messageType);
    if(message.messageType === "notification"){
        alert("Notification message received");
        if(message.tap){
            alert("Tapped in " + message.tap);
        }
    }
}, function(error) {
    console.error(error);
});
```

### hasPermission()

プッシュ通知を受信するためのアクセス許可を確認します。プッシュ通知を受け取るための許可を確認し、その結果をコールバック関数に真偽値として返します。

```javascript
window.FirebasePlugin.hasPermission();
```

**例**

```javascript
window.FirebasePlugin.hasPermission(function(hasPermission){
    if (hasPermission)
        alert("Permission to receive notification is granted.");
    else
        alert("Permission to receive notification is NOT granted.");
});
```

### grantPermission()&#x20;

iOS でプッシュ通知を受信する権限を与えます (まだ権限が与えられていない場合は、プロンプトを表示します)。

プッシュ通知の受信に必要な許可が付与されます。ユーザーに許可を求めるプロンプトが表示されます。この設定はiOSおよびAndroid 13以降のバージョンで必要です。

```javascript
window.FirebasePlugin.grantPermission();
```

また、Androidで 「POST\_NOTIFICATIONS」 権限を使用するには、`AndroidManifest.xml`ファイルにこの権限を追加する必要があります。これを行うには、`config.xml`ファイルに次の内容を挿入します。

```xml
<config-file target="AndroidManifest.xml" parent="/*">
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
</config-file>
```

**例**

```javascript
window.FirebasePlugin.grantPermission(function(){
    alert("Permission is granted for iOS");    
}, function(error){
    alert(error);
});
```

### setBadgeNumber()

バッジに数字を設定します。

```javascript
window.FirebasePlugin.setBadgeNumber(badgeNumber);
```

**例**

バッジに表示する数値を設定して実行した後、アプリを終了します。 次に、アプリアイコンにバッジ数が表示されます。 番号を削除する場合は、`0` を設定します。

```javascript
window.FirebasePlugin.setBadgeNumber(5);
```

### getBadgeNumber()

バッジの数値を取得します。

```javascript
window.FirebasePlugin.getBadgeNumber();
```

**例**

```javascript
window.FirebasePlugin.getBadgeNumber(function(n) {
        alert("Badge Number is " + n);
});
```

### unregister()

Firebase Cloud Messagingから現在のFCMデバイストークンを削除して登録解除します。これにより、現在のトークンに関連するプッシュ通知の受信を停止できます。

例えば、アプリからユーザーをログアウトする時にこれを呼び出します。デフォルトでは、古いトークンが削除されるとすぐに新しいトークンが生成されます。新しいトークンの生成を防ぐためには、unregister()を呼び出す前にsetAutoInitEnabled()を使って自動初期化を無効にしておくことが必要です。

```javascript
window.FirebasePlugin.unregister();
```

**例**

```javascript
window.FirebasePlugin.unregister(function(){
    alert("Stop receiving push notifications."); 
}, function(error){
    alert(error);
});
```

### setScreenName()

アナリティクスで現在のスクリーン名を設定します。

```javascript
window.FirebasePlugin.setScreenName(screenName);
```

**例**

```javascript
var page="FirebaseHome";
window.FirebasePlugin.setScreenName(page);
alert(page + " screen is tracked.");
```

### setUserId()

アナリティクスで使用するユーザーID を設定します。

```javascript
window.FirebasePlugin.setUserId(id);
```

**例**

```javascript
var myUserId="35009a79-1a05-49d7-b876-2b884d0f825b";
window.FirebasePlugin.setUserId("user_id");
alert("UserID is set to: " + myUserId);
```