Firebase Cloud Massaging（FCM）をサンプルアプリから実用利用する
Firebase Cloud Messaging（FCM）はサンプルアプリを作成できれば、すぐに実践で活用できます。
アプリをHostingにdeployして、一般ユーザー向けにカスタマイズしましょう。ユーザーにページを開いて「通知許可」してもらえばOKです。
FCMのダッシュボードからキャンペーンを作成する事で自由に配信が可能です。
Firebase Cloud Messagingサンプルアプリを実用化する
前の記事でFirebase Cloud Messagingのアプリ（Web Pushサンプルアプリ）を作り、テストメッセージを送信するところまで紹介しました。
ここまで無事進める事ができれば、そのまま実用するのはそんなに難しくはありません。
本記事では、このサンプルアプリを使って一般ユーザーに配信する方法についてご紹介します。
まだサンプルアプリを実装していない人は、以下の記事を参考にアプリを作成してみて下さい。
以下からはサンプルアプリが正常に稼働している事を前提に進めます。
以下「Firebase Cloud Messaging」を「FCM」と称します。
大まかな流れ
FCMサンプルアプリをFirebaseにdeployします。これでアプリがWEBページとして公開されます。
アプリはトークン情報などが露出しているのでそれを隠しつつ、一般ユーザー向けにデザインし直します。
あとはFCMのダッシュボードから、メッセージを送信するキャンペーンを作成するだけです。
サンプルアプリをFirebaseにdeployする
まずは、FCMサンプルアプリをFirebaseサーバーにアップするところからです。
※本当はアプリページのカスタマイズが先ですが、deployは何度でもできますので、まずは一旦アップしましょう。
サンプル実装時は、ローカルホストでのみFCMの通知を確認していましたね。
実際には外部の多くのユーザーに、このアプリを通してFCMを送る必要があります。
ですので、アプリをFirebaseのサーバー上のWEBアプリとして機能させる必要があるのです。
コマンドラインからdeploy
前回おこなったプロジェクトの初期化の際、アプリの選択サービスとして「Hosting」を選んでいました。
ですのでサーバーにdeployする準備は整っている事になりますね。
コマンドライン（コマンドプロンプト）から以下の様に実行しましょう。
コマンドラインからFirebase操作
まずは所定位置にディレクトリ移動します。
cd サンプルアプリフォルダ（public）が入ったディレクトリへのパス
次に以下のコマンドでdeployします。
firebase deploy
これでアプリデータがFirebaseサーバーにアップされます。
Firebase Consoleの確認
ではブラウザで、Firebase Consoleを確認してみましょう。
deployを実行した事で、Hostingサーバーにアプリが公開されます。
Hostingダッシュボードに、アプリ専用のアドレスが表示されているのを確認していきましょう。
プロジェクトのダッシュボード
TOPページ上からアプリを作ったプロジェクト名（前回の記事ではlpeg-web-push）を開きます。
これをクリックすると「デプロイしました」とページが表示されていますね。
ここを押すと、Hostingのダッシュボードが開きます。
デプロイの表示が無い場合は、右袖メニュー欄から「Hositng」のリンクを探してクリックすればダッシュボードが開きます。
出力URL
2種類のURLが発行されていますが、firebaseapp.comの方をクリックしてみて下さい。
公開されたアプリページ
ローカルで作ったアプリページが表示されているはずです。
ページを修正して、再度deployする
今回は一旦deployしましたが、アプリのトークン表示部分は非表示にするなど、一般向けの書き換えが必要ですよね。
例えば「お得な情報を通知しますので、ご希望の方はリンクをクリックして下さい」などの文言が必要です。
何度でもdeployできます（deploy単位で保存されます）ので、index.htmlはきちんとカスタマイズしましょう。
WEBサイトからリンクさせる
あなたのWEBサイトにこのアプリページへのリンクを張り、ユーザーの方にこのページを訪れてもらいましょう。
自然とこのページに来てもらえるように導線を整備するのです。
通知に許可をしてもらえば、そのユーザーをFCM通知の対象にできるという訳です。
FCMキャンペーンの作成
では実際にFCMメッセージを送信してみましょう。テストではなく本番送信です。
左のメニュー欄から「Messaging」をクリックします（見当たらない場合、エンゲージの欄に入っています）。
上部にある「最初のキャンペーンを作成」ボタンをクリックしましょう。
「Firebase Notification メッセージ」側にチェックをつけて「作成」をクリックします。
通知
前の記事でテスト実施したテストメッセージの画面が表示されます。
「タイトル」と「本文」（通知名は任意）を入れ、右のテストメッセージではなく下の「次へ」を押しましょう。
上部に出る「コンバージョン測定と多くのターゲット設定オプションには Google アナリティクスが必要ですが、現在このプロジェクトでは有効になっていません」は、Googleアクセス解析を利用していない場合に表示されます。
ターゲット
次にターゲットするユーザーを選びます。
今回は作成したアプリページを開いて通知を許可した人全員に送る予定です。
ですので、アプリの隣欄の▼マークから作成アプリ名（lpeg-web-push）を選択しましょう。
そのまま「次へ」を押します。
スケジュール
いつ送信を掛けるのかスケジュール設定をします。
今回はテストなので「現在」を選択しましょう。そうしないとすぐに確認ができません。
先のスケジュールを設定すれば、予約配信や一定期間ごとの定期配信も可能です。
ちなみに時刻を日本時間に合わせる場合、（GMT＋09:00）日本時間というのがあります。選択欄は縦に長いのですが、GMT+09:00の欄を探すと早いです。
次へを押しましょう。
その他のオプション
4つ目のその他のオプション（省略可）はそのまま飛ばします。
右下の「確認」ボタンを押しましょう。
・コンテンツ
・ターゲット
・スケジュール
上記3つの確認画面が表示されるので、内容確認をして「公開」ボタンを押しましょう。
これでキャンペーン設定作業は完了ですね。
通知のコンバージョンプロセス分析のユーザープロパティを予約できませんでした。と出ますが、これはGoogleアクセス解析利用をOFFにしているためなので、今回は無視します。
FCMダッシュボードの説明
キャンペーン作成が完了すると、ダッシュボードのキャンペーン画面に切り替わります。
作成したキャンペーン情報が一覧表示されます。
キャンペーン情報データ
左端には、タイトルと本文が表示されています。
次の開始時刻が、配信される時刻（目安）になります。
次のステータスの欄が「有効」の場合は、配信準備中という意味になりますね。
配信が完了すると、ここが「完了」という表示になります。
レポート情報
キャンペーン情報自体をクリック（どこでも）すると、各キャンペーンごとのレポートが表示されます。
・送信数
・通知を開いた数
・コンバージョン数
などが確認できます。
キャンペーンの複製や削除
キャンペーン内容は右端の点マークメニューから、複製したり削除したりが可能です。
複数のキャンペーンを作成する事ができますので、定期配信やスポット配信など様々な使い分ける事ができます。
送信される通知について
FCMは少し遅れる
まずFCM通知は、実際の時刻より5～10分程度必ず遅れます。ここは焦らずに待ちましょう。
スケジュールで「現在」と選択していても、必ず遅延します。
キャンペーンのステータス上は「完了」となっていても、実際配信されるまでにはタイムラグがあります。
ブラウザ単位で通知される
Firebaseを入れた端末は、ローカルホストとしても稼働しています。
ですので、Google ChromeやEdgeでそれぞれアプリページを開いて通知許可していた場合
・localhostから1通
・Google Chromeから1通
・Microsoft Edgeから1通
その端末に、合計3通のFCM通知が来るようになる訳ですね。
ブラウザごとの違い
Google Chrome
Google Chromeの場合、Google Chromeブラウザを立ち上げていないと通知がきません。
ブラウザを立ち上げると、プッシュ通知が届きます。
Microsoft Edge
それに対しMicrosoft Edgeの場合は、ブラウザを閉じた完全OFFの時でも通知が来ます。
常に通知を知る事ができて便利ですね。
Firefox
FirefoxもGoogle Chrome同様に、閉じていると通知が来ません。
ブラウザを開いたときに、右下に小さく通知が表示されます。
Google ChromeやFirefoxが完全OFFの時に通知が届くようにする方法については、後日調べてみますね。
アプリページのカスタマイズ
このページを本番として使う場合、FCM通知を許可してもらうページとしての装飾が必要です。
サンプルアプリではトークン表示などが出ていましたが、実際にユーザーに見せる必要はありませんよね。
一般ユーザー向けのページとして、WEBサイトに似せたデザインにする場合もあるでしょう。
トークン情報やスクリプトは必須
ただしスクリプトやトークン情報などはシステム上必須です。
スクリプトやトークン部分を消してしまうと、正常にFCM配信ができなくなります。
index.htmlファイル以外のファイルも一式必要です。
一番簡単なカスタマイズ
詳しくわからない人は、見えない様に非表示の扱いにするのが簡単です。
例えば外枠のタグに一つクラス名を追加し、CSSでdisplay: none;に設定するのが一番でしょう。
そうすると、no_displayクラスのついた枠がまるごと非表示になります。
※非表示ならば、スクリプトやトークンは正常に働きます。
スクリプトやトークン部分以外は通常のHTMLページですから、自由にカスタマイズ可能です。
例えば「お得な情報を通知いたします。通知を許可して下さい。」等の文言は入れておいた方が良いですね。
従来のWEBページから一旦このfirebaseサーバーに来てもらう訳ですから、元サイトへ戻れるリンクも付けておくと良いでしょう。
