# 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);
```


---

# 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/tutorials/firebase.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.