Webデザインやガジェット、格安SIMの情報ブログ

WEBサイトにプッシュ通知が付けられるWEBサービス「bpush」を試してみる

最近またブログのデザインを少しずつ弄っています。ブログトップやカテゴリページ、投稿者ページにカバー写真を設置してみました。まだカスタマイズ途中なので画像が無かったり不具合が残っていたりするのですが、少しは見栄えが良くなったかな?

それとは別に、新たにブログのプッシュ通知機能を試験的に導入してみました。今回は、このプッシュ通知機能の実装方法をご紹介したいと思います。

※本ページは広告・アフィリエイトプログラムにより収益を得ています。

スポンサーリンク

プッシュ通知とは

screenshot_20151223-105812.png

プッシュ通知はRSSよりも手軽に登録できて素早くブログにアクセスできる機能です。スマートフォンを利用していれば必ず目にする通知機能ですが、PCではまだあまり馴染みのないものかもしれません。

Google Chromeのバージョン42がリリースされてから新たにプッシュ通知に対応し、設定をすればSNSのお知らせや新着メールを通知してくれるようになりました。この機能はPC版とAndroid版のみ対応でiOS版では非対応です。

これを実装するには、SSL(HTTPS)に対応したウェブサーバーを用意し、Service Workerスクリプトやプッシュ通知の送信を行う「Push API」と「Notifications API」などを利用しなければいけないため、想像以上にハードルが高いです。説明を読んでもよく分からなかった…。

登録ユーザーにプッシュ通知を送れるWEBサービス「bpush」

bpush   Push Notification Service for Web

もっとお手軽に実装する方法が無いか調べてみると「bpush」というプッシュ通知を送れるWEBサービスがあることを知り、登録して試してみることに。

サイト情報を登録する

bpush - Push Notification Service for Web

登録にはメールアドレスとパスワードの設定が必要です。利用規約・免責事項に同意にチェックを入れて登録すると仮登録メールが届きます。

登録

設定

後は設定画面からサイト情報とRSS連携を設定するだけで準備完了。私はこのように設定しました。サイトやブログサービスに合わせて適宜変更して下さい。

通知を登録する

通知を受け取るには、通知ボタンを設置してユーザーに通知を許可してもらう必要があります。通知ボタンの設置には「簡単設置」と「直接設置」の2種類があり、簡単設置ならコードをコピペするだけでOK。

簡単設置


<div id="bpush_button" style="display: inline-block;" 
     data-site="350" data-back="【ページURL】"
     data-height="20" data-width="60"></div>
<script>
(function(d,s,ns){
  var ns = d.createElement(s);
    ns.async=1;ns.src="//bpush.net/connect/button.js";
    var s0=d.getElementsByTagName(s)[0];
  s0.parentNode.insertBefore(ns, s0);
})(document,'script');
</script>

↑このボタンを押して通知を許可するとCreator Clipのプッシュ通知が送られてきます。(PC版、Android版のGoogle Chromeのみ対応)

直接設置

直接設置

直接設置で実装するには、SSLに対応したサイトが必要です。SSLに対応していない場合や、ルートフォルダにファイルをアップロードできないサイトではこの方法は使えません。直接設置の場合でも1から自前で実装するよりも簡単に出来るようになっています。

通知を送ってみる

設定が出来たら試しに自分宛てに通知を送ってみましょう。

通知を作成

bpushの管理画面からサイドバーのプッシュ通知へ移動し、「プッシュ通知作成」ボタンを押します。

カレンダー

bpush   Push Notification Service for Website

タイトルやリンクURL、送信時間、内容などを入力して通知を登録します。

配信予約

後は送信ボタンを押すだけ!ポチッとな

通知

押した直後、右下にこのような通知が表示されたら成功です。ここをクリックするとリンクURLへ遷移します。

  • Screenshot_20151223-094408
    ロック画面の表示
  • Screenshot_20151223-094418
    通知領域の表示

今回は手動で送信しましたが、RSS連携を設定することでブログを更新したら自動で通知を飛ばすことも可能です。月間5万通まで(個別相談も可)無料で送れるので、よほど大規模なサイトで無い限りは問題無さそう。あまりにも多くの通知を送ってしまうと登録したユーザーが鬱陶しいと感じてしまうので送り過ぎには要注意。

screenshot_20151223-094432.png

登録解除は通知からサイト設定へ行き、消去してリセットを押すと購読が解除されます。わざわざサイトへ移動しなくても端末内の設定で完結できるのはいいですね。

RSSを購読するよりも手軽で、自分から見に行かなくても更新を素早く確認できる素晴らしい機能だと思います。今後Google Chrome以外のブラウザにも対応してくれると嬉しいですね。

このブログの購読をしてプッシュ通知を体験してみましょう。

コメントを残す

writer : 鹿
このブログを管理している鹿。Webデザインとガジェットが好き。