Monaca Docs
  • Monaca とは
  • 最初のアプリを作る
  • アプリをテストする
  • Monaca リリース情報
    • iOS プライバシーマニフェスト対応
    • 「ニフクラ mobile backend」終了に関するお知らせ
    • プラグイン uses-permission タグの重複修正機能
    • Cordova 12 の変更点
    • iOSストア版Monaca デバッガー配信停止と代替機能のご案内
    • iOS App Store への送信エラー (ITMS-90165)
    • cordova-custom-configのビルドエラー
    • Cordova 11 の変更点
    • Cordova 10 の変更点
    • Cordova 9.0 の変更点
    • 利用規約の変更
    • 新しい Monaca CLI と Localkit
    • CordovaからCapacitorへの移行
  • Monacaガイド
    • Monaca での開発の概要
    • Monaca クラウド IDE
      • 概要
      • Monaca クラウド IDE の機能
      • ターミナル機能
      • エディターのショートカット一覧
      • プロジェクトの構成
        • ファイル・フォルダー構成
        • JS/CSS コンポーネント
        • Cordova プラグイン
        • ユーザー Cordova プラグイン
      • バージョン管理
        • 概要
        • GitHub との連携
        • Git SSH との連携
      • Monaca CI
        • 概要
        • アプリ配信 / 配布サービス (デプロイサービス)
        • Appetize.ioへの配信
        • DeployGateへの配信
        • Firebase への配信
      • ビルド
        • iOS アプリのビルド
          • iOS アプリのビルド
          • Monaca と Xcode 間でのビルド設定の再利用
        • Android アプリのビルド
        • Windows アプリのビルド
        • Electron アプリのビルド
          • Windows アプリのビルド
        • PWA アプリのビルド
        • ビルド環境の設定
        • ビルド履歴一覧
        • 一般的なビルドとアップロードエラー
      • 配布方法
        • App Store での配布
          • App Store Connect ガイド
          • iOS アプリ アップロード機能
        • Google Play での配布
        • 公式ストア経由以外での配布
      • パッケージダウンロード機能
      • チュートリアル
    • Monaca Localkit
      • 概要
      • ペアリングとデバッグ
      • リモートビルドと配布申請
      • トラブルシューティング
        • インストール ( Windows の場合 )
        • インストール ( Mac OS X の場合 )
        • アンインストール時 ( Windows の場合 )
        • 不完全なファイル・フォルダー構成
        • プレビューウィンドウが更新されない
        • Error while installing
        • nodeのインストールが必要です
      • チュートリアル
    • Monaca CLI
      • 概要
      • Monaca CLI コマンド
      • ペアリングとデバッグ
      • リモートビルドと配布申請
      • トラブルシューティング ガイド
      • チュートリアル
    • Monaca デバッガー
      • 機能の概要
      • インストール方法
        • Android 向けの Monaca デバッガー
        • iOS 向け Monaca デバッガー
        • Android エミュレーター向け Monaca デバッガー
      • 使用例
      • iOS カスタムビルド版デバッガー
      • iOS シミュレータービルド
      • トラブルシューティング ガイド
      • チュートリアル
    • チームダッシュボード
    • クイックビューア
    • 他のプラットフォームからの移行
      • 移行時の確認ポイント
      • クラウドIDE プレビュー機能の設定
      • Angular からの移行
      • Ionic からの移行
      • React からの移行
      • Vue からの移行
      • Telerik からの移行
  • 🛠️アプリビルド
    • iOS ビルド
      • 秘密鍵とCSRの作成
      • 証明書の作成
      • プロビジョニング・プロファイルの更新
  • チュートリアル
    • Monaca クラウド IDE チュートリアル
      • パート 1 : プロジェクトの作成
      • パート 2 : Monaca クラウド IDE と Monaca デバッガーとの連携
      • パート 3 : Monaca アプリのビルド
      • パート 4 : Monaca アプリの配布申請
    • Monaca Localkit チュートリアル
      • パート 1 : プロジェクトの作成
      • パート 2 : Monaca Localkit と Monaca デバッガーとの連携
      • パート 3 : Monaca アプリのビルド
      • パート 4 : Monaca アプリの配布申請
    • Monaca CLI チュートリアル
      • パート 1 : プロジェクトの作成
      • パート 2 : Monaca CLI と Monaca デバッガーとの連携
      • パート 3 : Monaca アプリのビルド
      • パート 4 : Monaca アプリの配布申請
    • Electron アプリ開発
      • NPMパッケージの利用方法
      • Web APIの利用方法
    • バーコードスキャナープラグイン
    • Cordova Sqlite Storage プラグイン
    • Cordova Google Analytics プラグイン
    • Cordova Firebase プラグイン
    • Cordova In-app Purchase プラグイン
    • Cordova AppVersion プラグイン
    • Cordova Ionic Keyboard プラグイン
    • Cordova Social Sharing プラグイン
    • Phonegap Push プラグイン
  • APIの解説
    • Monaca API
      • Monaca クラウド & リモートビルド API
      • ユーティリティ
    • 基本プラグイン
      • Cordova 12.0
        • Battery プラグイン
        • Camera プラグイン
        • Device プラグイン
        • Device Motion プラグイン
        • Device Orientation プラグイン
        • Dialog プラグイン
        • File プラグイン
        • Geolocation プラグイン
        • InAppBrowser プラグイン
        • Media プラグイン
        • Media Capture プラグイン
        • Network Information プラグイン
        • Vibration プラグイン
        • StatusBar プラグイン
      • Cordova 11.0
        • Battery プラグイン
        • Camera プラグイン
        • Device プラグイン
        • Device Motion プラグイン
        • Device Orientation プラグイン
        • Dialog プラグイン
        • File プラグイン
        • Geolocation プラグイン
        • InAppBrowser プラグイン
        • Media プラグイン
        • Media Capture プラグイン
        • Network Information プラグイン
        • Splashscreen プラグイン
        • Vibration プラグイン
        • StatusBar プラグイン
      • Cordova 10.0
        • Battery プラグイン
        • Camera プラグイン
        • Device プラグイン
        • Device Motion プラグイン
        • Device Orientation プラグイン
        • Dialog プラグイン
        • File プラグイン
        • Geolocation プラグイン
        • InAppBrowser プラグイン
        • Media プラグイン
        • Media Capture プラグイン
        • Network Information プラグイン
        • Splashscreen プラグイン
        • Vibration プラグイン
        • StatusBar プラグイン
        • Whitelist プラグイン ( Android 専用 )
      • Cordova 9.0
        • バッテリー情報の取得 プラグイン
        • カメラ操作 プラグイン
        • 住所録の取得 プラグイン
        • 端末情報の取得 プラグイン
        • 端末のモーション検知 プラグイン
        • 端末のオリエンテーション検知 プラグイン
        • ダイアログの制御 プラグイン
        • ファイル操作 プラグイン
        • ファイル転送 プラグイン
        • 位置情報の取得 プラグイン
        • 表記の国際化対応 プラグイン
        • InAppBrowser プラグイン
        • メディア操作 プラグイン
        • メディアキャプチャー プラグイン
        • ネットワーク情報の取得 プラグイン
        • スプラッシュスクリーンの制御 プラグイン
        • バイブレーションの制御 プラグイン
        • ステータスバーの制御 プラグイン
        • ホワイトリストへの登録 プラグイン ( Android 専用 )
    • サードパーティー製プラグイン
      • AdvancedHTTPプラグイン
      • PhoneGap BarcodeScanner
      • Custom Config
      • Datepicker
      • Share ( Android 向け )
      • WebIntent ( Android 向け )
    • Monaca 提供プラグイン
      • アプリロジック暗号化 (Encrypt プラグイン)
      • In-App アップデーター (In-App Updater)
      • セキュア ストレージ
      • NFC リーダー
      • バーコードスキャナー
      • Androidビルドメモリサイズ設定
    • 外部サービス連携
      • Repro
      • AppsFlyer
    • 設定ファイル
      • Android
        • Android の設定
        • config.xml
        • AndroidManifest.xml
      • iOS
        • iOS の設定
        • config.xml
        • MonacaApp-info.plist
  • サンプル & Tips
    • Firestoreを利用する
    • サンプルアプリ
      • Twitter アプリ
      • Facebook アプリ
      • 広告 アプリ (AdMob)
      • Hello World アプリ
      • メモ帳アプリ
      • ブロック崩しゲーム
      • Flickrアプリ
      • TODO管理 アプリ
      • 電車図鑑アプリ
      • 時計アプリ
      • 誕生年の計算アプリ
      • おみくじ占いアプリ
      • RSS リーダーアプリ
    • 開発 Tips
      • 音楽の再生方法
      • スプラッシュ画像の制御方法
      • データベースの利用方法
  • Webpack5への更新
  • 機能
    • SNS 認証
    • プッシュ通知
    • データベース
  • 外部サービス連携ガイド
    • Firebase
      • アプリの登録と設定ファイルの取得
  • 移行ガイド
    • ニフクラ mobile backend
      • プッシュ通知
        • Firebaseサービスの設定
        • ソースコードの移行
      • データストア
        • ソースコードの移行
        • データの移行
        • データ移行スクリプト実行手順
      • 会員管理・認証
        • 会員管理 データの移行
        • Firebase Authentication パスワード再設定サンプル
        • Firebase Authenticationを使用したユーザー名認証の方法
      • スクリプト
        • Firebase Functions開発環境の作成
        • サンプル共通項目
        • サンプル1(GETサンプル)
        • サンプル2(POSTサンプル)
        • サンプル3(DELETEサンプル)
        • エミュレータでのテスト
      • ファイルストア
        • ファイルアップロード
        • ファイル検索
        • ファイル一覧表示
        • ファイル削除
  • FAQ
    • 概要
    • IDE
    • ビルド
    • リリース
    • 契約プラン
    • アプリケーション
    • 使用方法
    • Freeプラン
    • デバッガー
  • 対応環境
  • トラブルシューティング
    • プレビューログがリロードを繰り返す (Vue packages version mismatch error)
  • Monaca製品サイト
  • 運営会社
  • English
GitBook提供
このページ内
  • デモ
  • iOSの準備
  • AppIDの作成
  • APNs証明書の作成
  • APNs証明書の形式変換
  • Firebase ( プッシュ通知 ) の設定
  • iOS の場合
  • APNs証明書の登録
  • Android の場合
  • Monaca クラウド IDE にプラグインを追加する
  • 使い方
  • API リファレンス
  • getToken()
  • onTokenRefresh()
  • onMessageReceived()
  • hasPermission()
  • grantPermission()
  • setBadgeNumber()
  • getBadgeNumber()
  • unregister()
  • setScreenName()
  • setUserId()

役に立ちましたか?

  1. チュートリアル

Cordova Firebase プラグイン

前へCordova Google Analytics プラグイン次へCordova In-app Purchase プラグイン

最終更新 9 か月前

役に立ちましたか?

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

  • プラグイン リポジトリ:

  • プラグイン ID/Package Name: cordova-plugin-firebasex

  • テストバージョン: 16.5.0

Cordova Firebase プラグイン 16.5.0 は プライバシーマニフェストに対応しています。

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

デモ

iOSの準備

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

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

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

  1. AppIDの作成

  2. APNs証明書の作成

  3. APNs証明書の形式変換

AppIDの作成

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

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

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

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

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

  • Description: アプリ名を入力します ( 例:push test )

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

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

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

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

APNs証明書の作成

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

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

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

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

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

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

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

APNs証明書の形式変換

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

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

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

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

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

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

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

iOS の場合

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

APNs証明書の登録

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

プロジェクトの設定 に移動し、Cloud Messagingを選択します。

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

Android の場合

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

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

1. IDE メニューから、設定 → Cordova プラグインの管理へ移動します。

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

iOS 12.2 以降のデバイスをサポートするには、config.xml に以下のように設定してください。

<platform name="ios">
    <preference name="deployment-target" value="12.2"/>

使い方

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

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 リファレンス

getToken()

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

window.FirebasePlugin.getToken();

例

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

onTokenRefresh()

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

window.FirebasePlugin.onTokenRefresh();

例

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

onMessageReceived()

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

window.FirebasePlugin.onMessageReceived();

例

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()

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

window.FirebasePlugin.hasPermission();

例

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

grantPermission()

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

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

window.FirebasePlugin.grantPermission();

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

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

例

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

setBadgeNumber()

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

window.FirebasePlugin.setBadgeNumber(badgeNumber);

例

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

window.FirebasePlugin.setBadgeNumber(5);

getBadgeNumber()

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

window.FirebasePlugin.getBadgeNumber();

例

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

unregister()

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

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

window.FirebasePlugin.unregister();

例

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

setScreenName()

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

window.FirebasePlugin.setScreenName(screenName);

例

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

setUserId()

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

window.FirebasePlugin.setUserId(id);

例

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

既に をお持ちの場合は、以下の手順に従って Development APNs 証明書を作成してください。証明書作成は、次の流れで行います。

1. から、 に移動します。

1. にアクセスします。

ここでは、 で使用されている主な API について説明します。 完全なAPIリファレンスについては、 を参照してください。

Apple Developer Program
Apple Developer page
Account
Firebase Console
アプリの登録と設定ファイルの取得
アプリの登録と設定ファイルの取得
デモ
こちら
https://github.com/dpa99c/cordova-plugin-firebasex
プロジェクトをインポート