国産のバックエンドサービスとして人気の「Milkcocoa」ですが、いつの間にか「リアルタイムWeb通知」を実現できるようになっていたのでご紹介しておきます!
これが出来るようになると、自分のWebサイトやサービスなどを利用しているユーザーに向けて、スマホの「プッシュ通知」のような感覚で、リアルタイムに任意のメッセージを送信し、ユーザーのブラウザ上に表示させるようなことが出来るので便利です。
今回は、チュートリアル形式でサンプルを作っていく過程をご紹介しようと思います!
まずは初期設定をしよう!
まず最初に「Milkcocoa」にログインし、管理画面から新しいアプリを作成します。(無料プランで問題ありません…)
そして、作ったアプリの「ダッシュボード」から、固有の「アプリID」をメモしておきます。
このIDは、後ほどプログラミングする際に必要となるので覚えておきましょう。
次に、Milkcocoaの機能を利用するために、「設定」から「mlkcca.com」のドメインを追加します。
さらに、誰でもデータを送信できてしまうと困るので、デフォルトの「セキュリティルール」を変更しておきます!
公式サイトにも記載されていますが、今回のWeb通知を利用するためのデータストア名「mcp-realtimenews」に対して、以下の様なルールに書き換えておけばOK!
mcp-realtimenews { permit : on(push); rule : true; }
これで事前準備は完了です!
必要なファイルを準備しよう!
それでは、簡単なサンプルデモを作ってみたいと思います。
まずは、以下のような「index.html」ファイルを作ってみましょう!
<!-- index.html --> <!doctype html> <html> <head> <meta charset="utf-8"> <title>Web通知サンプルデモ</title> </head> <body> <div milknews data-appid="ここに「アプリID」を記載する"></div> <script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script> <script src="https://cdn.mlkcca.com/news.min.js"></script> </body> </html>
「div」要素に専用の「milknews」属性を付与して、冒頭でメモしておいた「アプリID」を記載しておくのを忘れないようにしましょう。あとは、Milkcocoaの機能を利用するための「milkcocoa.js」と「news.min.js」をそれぞれ読み込んでおきます。
そして、この状態まで完成したら、最後にたった1行JavaScriptのコードを追加するだけで「リアルタイムWeb通知」を実現することが出来るのです!
そのコードがコチラ!
<script> MilkNewsInit(); </script>
はい、たったこれだけです。
このままファイルを保存して、ブラウザで「index.html」を開いておきましょう。(今は何も表示されないですが…)
これで実装部分の準備はOKなので、何か「メッセージ」を送信して通知が来るか確認してみたいと思います!
メッセージを配信しよう!
何らかの通知を配信するには、冒頭で作ったMilkcocoaアプリの「ダッシュボード」から、「Webサイト用プラグイン」→「Web通知管理画面」を開きます。
そして、「Message」ボックスに好きなメッセージを入力して「配信」ボタンをクリックしてみましょう。(今回はサンプルとして「こんにちは!」と入力しました…)
そのまま、事前に開いておいた「index.html」を見てみると、見事に通知が送られているのが分かりますね!
ちなみに、通知内にボタンを仕込むことも可能で、クリックすることで別のURLに遷移させるような使い方ができます。
もちろん、スマホからでも「通知」を受信することは可能です!
こんなに簡単な実装で、リアルタイムな「Web通知」が実現できるのは驚きです。
自分のWebサイトやサービスに訪れたユーザーに対して、任意のメッセージが送れるようになると、いろいろ面白い使い方が考えられそうです。
おまけ
公式サイトにも書かれているのですが、今回のサンプルコードの場合、訪れたユーザーに対して無条件にWeb通知を受信するような状態になっています。
Milkcocoaの無料プランだと、同時接続数が「20ユーザー」までのようなので、すぐに上限に達してしまう可能性が高いです。
そのため、例えばユーザーが何らかのボタンをクリックしたら受信状態にしたり、画面をスクロールして最下段に来たら受信状態にする…など、ちょっとしたイベント処理を実装しておいた方が良いでしょう。
// 例)ボタンをクリックしたら受信状態にする例 btn.addEventListerner('click', function(){ MilkNewsInit(); });
どのタイミングで、ユーザーが「受信状態」になるとベストなのか…、このあたりはいろいろ試行錯誤が必要かもしれませんね。