httpsでネイティブ通知 WEBプッシュ使い方まとめ2017年

BAOOKUN site dialog of ssl web push notification

こんなことがしたい人のための記事です
BAOOKUN ssl web push notification, dialog of allow denyブラウザにあらかじめ組み込まれているネイティブの許可画面。記事の更新通知を受け取るか拒否するか、シンプルなダイアログでユーザーに選んでもらうことができます。display capture web push notification記事が更新されると、ブラウザの右下に通知がポップアップします。Chromeの場合は、ラージイメージ(アイキャッチ画像)も含めることができます。One Signal opt out 購読の管理ボタンをサイトに埋め込んで、ユーザーに簡単に通知のオン、オフを選んでもらえるようにします

はじめに

ブログの更新を読者に直接知らせる手段として、かつてはメールマガジンがよく使われていました。ただ、はっきり言って毎日洪水のように押し寄せる広告メールなんて誰が読むの?とその到達性に疑問符がついているのも事実です。

買い物サイトでも会員登録の煩わしさから慣れ親しんだAmazonや楽天を使う人が少なくないのと同じように、ただのブログに「会員登録」を期待するのはいささかハードルが高いです。たとえ、それがメールアドレスを入力してボタンを押すだけであったとしても・・・。

一方、トレンドとなっている「WEBプッシュ通知」は、同じ「会員登録(オプトイン)」であっても、ブラウザに表示される「通知を許可しますか?」のダイアログに「許可」をクリックするだけ。読者にとっては、ユーザー名もパスワードも必要なく、ワンクリックするだけでブラウザ上にニョロっと通知が現れるようになります。

その気軽さゆえに、心理的なハードルは「メールマガジンの購読」の比にはなりません。簡単にファンを増やすことができる魅力的な仕組みなので、普通のブログでもよく見かけるようになりました。このブラウザ標準のダイアログを使った通知は、HTTPS(SSL)を使った暗号化通信に対応したサイトにしか許されていない「特権」でもあります。以前はhttpsというだけでハードルが高かったのですが、今は無料のSSL証明書も充実したので、小規模なサイトであっても対応を済ませた人も少なくないことでしょう。

サイトをhttps(SSL)に対応させると、ChromeやFirefox、Safariなどのブラウザに標準で組み込まれているネイティブの「通知」を使えるようになります。次のステップとして、読者に新着記事をリアルタイムで配信できる仕組みを導入するとアクセス増加につながりますね

筆 者

「WEBプシュ」を一から自力で導入しようとすると知識も必要ですし、なかなか骨が折れる作業が待っています。しかし、最近では簡単にしかも無料でプッシュ通知できるサービスが充実してきましたので、比較した上で具体的な手順を解説します。
※従来のhttpのサイトでもWEBプッシュサービス会社が提供するサブドメインを使って擬似的に同じようなプッシュ通知を使うことはできます。ただその場合でもブラウザに備わっているネイティブの許可画面は出すことができません。

ウェブプッシュサービスまとめ

One Signal

screen capture from One Signal toppage

One Signalのウェブサイト

特 徴 “100%無料かつ信頼できる通知機能”をモットーに価格破壊を進めている。公式ページによれば、SkyscannerやAdobe、そしてLineなど名だたる企業も導入していることからも安定性には定評があると言えそう。カスタマイズの自由度が高く、WEBプッシュに限ればほかの多くのサイトで必要なGCM(Google Cloud Massage)の設定が不要など導入もシンプル。ユーザーをグループにわけて、通知をカスタマイズできる。
この記事の後段で使い方を詳しく解説します
無料で多機能!話題の”One Signal”の使い方

Push Crew

screen capture from pushcrew

Push Crewのウェブサイト

特 徴 草分け的存在。最近では日本語の代理店も登場し日本での導入企業も増えている(ただし日本代理店を通すと有料。本家の英語サイトに直接登録すれば無料)。分析も豊富だが無料だと500ユーザーまで。HTTPSでないサイトにはおすすめ。HTTPSのサイトではむしろjsファイルをルートフォルダにアップロードする手順が必須なので、やや面倒くさい。

Send Pulse

screen capture from Send Pulse

Send Pulseのウェブサイト

特 徴 EメールやSMSを使ったメールマガジン配信も含めた総合配信サービスの一部としてウェブプッシュ機能も提供。ChromeとFirefoxに対応。ウェブプッシュについては無料。

Push Woosh

screen capture from POSHWOOSH

POSHWOOSHのウェブサイト

特 徴 21のマルチプラットフォームの総合サービスの中にウェブプッシュ機能もある。Twitter連携やタイムゾーン(夜間の地域には送信しないなど)を考慮した通知。無料プランでは1,000デバイスまで対応。

Push Assist

screen capture from pushassist

pushassistのウェブサイト

特 徴 無料プランでは3,000人まで、通知の送信は無制限。Chrome、Firefox、Safariに対応。特定の日付や時間帯に通知を予約できるスケジュール機能あり。Wordpress用のプラグインも用意されている。

Fox Push

screen capture from Fox Push

FoxPushのウェブサイト

特 徴 500万人が利用。ユーザーがオプトインする度に管理人に通知できる。Chrome、Firefox、Safariに対応(Edgeにも対応予定)。無料プランでは、5万ユーザーを上限に月に150万回の通知できる。通知ダイアログは、ネイティブ型、ボックス型、オーバーレイ型から選ぶことができる。

Push7(国産)

screen capture from Push7

Push7のウェブサイト

特 徴 個人利用ではパフォーマンス解析など一部の機能は利用できないものの、基本的に無料のサービス。日本のサービスなのでドキュメントから設定画面まですべて日本語。Wordpress用のプラグインも準備され、設定も簡単なので導入しているブログもよく見かける。公式サイトによると国内で4,500サイトに導入されているという。独自アプリを経由してiOSにも通知を届けるユニーク機能も売り。購読者数を表示させるブログパーツあり。



無料で多機能!話題の”One Signal”の使い方

screen capture from One Signal toppageプッシュサービスをいくつか実際に使ってみて最終的に私が落ち着いたのが、One Signalです。設定が洗練されているだけでなく、完全な無料サービスにもかかわらずとにかく多機能です。ほかのサービスでは、通知の対象となるユーザーの数がある水準を超えると有料のプランに移行しなければならなかったり、そもそも機能の一部(ラージイメージなど)は初めから有料だったりします。

One Signalは、こうした機能も含めてすべて無料で使えるので、今のところ個人向けとしては最強?と言えるかもしれません。ただし、難しい作業はありませんが設定画面はすべて英語です。どうしても日本語が良いという方は、後述するPush7などを利用するといいでしょう。

自分のサイトをサービスに登録する

capture from One Signal wordpress configure "Add a new app"

One Signalの最初の画面

メールアドレスでユーザー登録をすませると、まずはこの画面が現れます。One Signalは、WEBプッシュだけでなくアプリ用のネイティブプッシュなど様々なプッシュを管理できる統合プラットフォームですので、それらを「アプリ」という単位で管理します。

Add a new appをクリックして、分かりやすく名前を付けます。今回はWEBプッシュをさせたいのでサイト名を名前につけておくと後から管理が楽です。私はサイト名の「BAOOKUN」をアプリの名前にしました。

プラットフォームを選ぶ

capture from One Signal wordpress configure "Website Push" selected
先ほど作ったアプリ「BAOOKUN」をどのようなプラットフォームで使いたいかを選択します。ここでは、WebSite Pushを選んで、右下の赤いNextボタンを押します。
capture from One Signal wordpress configure "Chrome" setting
One Signalは現状、WEBプッシュに対応しているブラウザであるChromeとFirefoxとSafariのすべてに対応しています。まずは、ChromeとFirefoxの設定(共通)をするので、画面のアイコンで「Google Chrome & Mozilla Firefox」をクリックしてNextボタンを押します。
capture from One Signal wordpress configure "Site URL" and "Icon URL" setting

MEMO
Site URL: ここに自分のサイトのアドレスを入力します。https://から初めてください。(One Signalはhttpsに対応していないサイトでも擬似的に通知を出せるのですが、今回は割愛します)
Default Notification Icon URL: ここに通知で使われる標準のアイコンの画像をURLで指定します。いわゆるサイトのロゴマークですね。One Signalではサイズの指定はありませんが、192×192が一般的ですのでこれにあわせておくと何かと便利です。

URLの入力が終われば、右下の赤いSaveボタンを押して次に進みます。

WordPressでの設定

capture from One Signal wordpress configure "Wordpress" SDK
私のサイトはWordpressで記事を作っています。新しい記事を公開するたびに自動でプッシュ通知が読者に届くようにしたいので、SDKにはWordpressを選択します。
capture from One Signal wordpress configure
するとWordpressで利用するための手順が表示されました。別のタブや新しいウィンドウで WordPress Plugin’s のリンクをたどってプラグインをインストールします。(もしくはWordpressのプラグイン検索画面から “OneSignal”で検索しても良いです)

MEMO
Your Rest API Key: と Your App ID:に書かれている文字列は、この後のプラグインの設定で必要な情報です。
capture from One Signal wordpress configure "App ID" and "REST API Key" setting

WordPressの管理画面。プラグイン「One Signal Push」の設定を開く

ここからは、Wordpressの設定画面で作業を進めます。指定されたプラグインをインストールした後に「有効化」し、設定画面を開きます。画面の上部にSetupとConfigurationの2つのタブがありますので、Configurationを開きます。

My Site uses an HTTPS connection(SSL)にチェック。
分かりやすくキャプチャ画面で赤くマークしましたが、AppIDとREST API Keyの欄にそれぞれ先ほどOne Signalの設定で表示されていた文字列をコピー&ペーストします。

これで初期設定は終わりです。簡単でしょ?すでに、あなたのサイトにアクセスすると通知の許可を求めるダイアログが現れ、許可するとOneSignal側にユーザーとして登録されます。

ただし、このままではダイアログは英語なので、日本語にするなどデザインの細かい設定は後述します。



Safariでも通知させるには

ChromeとFirefoxに続いて、AppleのSafariにも通知が行くようにします。気をつけたいのが、PC版のSafariのみが対象で、iOS(iPhone)で動いているSafariにはプッシュ通知はできないことです。これは、iOSの仕様上、今のところWEBプッシュができませんのであきらめるほかありません。

Appleにはたくさんの開発者からiOSのSafariでもプッシュ通知ができるように要望があがっていますので、そのうちAppleが対応するかもしれませんね。
なお、iOSでは標準のSafariだけでなくChromeにも通知は行きません。(※Android版のChromeには問題なく通知が行きます)

筆 者

capture from One Signal wordpress configure "Apple Safari" setting

One Signalの設定画面

OneSiganlのApp Settings>WebSite Push Platforms>Apple Safariを確認します。右側のStatus(状態)がInactive(無効)になっていると思いますので、緑のボタン「CONFIGURE(設定)」をクリックします。
capture from One Signal wordpress configration

MEMO
Site Name:ここにあなたのサイト名を入力します。通知画面で使われます。
Site URL:サイトのアドレスを入力します。https://から始めてください。
下にある2つのオプションはとりあえず無視(チェックしない)しておいて構いません。あとで細かくカスタマイズすることもできますので、ひとまずSaveをクリックして設定を終えます。

capture from One Signal wordpress configure "Apple Safari" setting
これでOne SignalのApple Safariの欄に、WEB IDが表示されるようになりました。このIDをWordPressのプラグインに入力します。

capture of One Signal Plugin setting, Safari WEB ID

WordPressの管理画面

赤い四角でくくったSafari WEB IDの入力欄に、One Signal側で発行された文字列をコピー&ペーストします。これでSafariに関する追加設定は終わりです。

テザー(前置き)を使って分かりやすくする

capture of BAOOKUN, One Signal otp in dialog

標準のダイアログの前に、案内文(テザー)を表示させた

ブラウザに標準で組み込まれている「通知許可」は非常にシンプルで「通知を許可しますか」とだけ表示されます。プッシュ通知がさまざまなサイトで普及してきたので、最近はそんな心配は不要かもしれませんが、ユーザーが「何のことか分からない」「そもそも通知って何??」と戸惑うおそれもあります。

そこで、許可を求める標準ダイアログを出す前に、テザーとして「更新の通知を受け取りませんか?今からダイアログが出ますので、許可してね~」とちょっとした前置きをするのがテザー機能です。

screen capture from One Signal plugin in "Popup setting"

筆者による設定例(クリックで拡大)

具体的には、プラグインの設定 > Popup Settings > Customize the popup textにチェック。その下には英語での表示例がラインアップされていますので、適宜分かりやすい日本語に置き換えます。私は上記の画面のように日本語を入れて設定しました。

screen capture from One Signal plugin in "Prompt settings" detail

筆者による設定例

次に、Prompt Settingの欄を探し、上の画像のように「Show the slidedown permission message before prompting users to subscribe」にチェックを入れます。すると、初めに前置き画面が出て、ユーザーが「続行」を押すとブラウザに組み込みのポップアップが表示される2段構えになります。

人によって考え方は違いますが、分かりやすさをとるかシンプルさをとるか検討してください。2重にダイアログがでることを煩わしいと思う人もいるかもしれません。

サイトに購読管理ボタンを設置する

One Signalおすすめの機能の一つに、サイトに埋め込めるインタラクティブな購読管理ボタンがあります。
One Signal opt out
このボタンを出す位置や、どんな表現を使うのかは自由に設定できます。標準では英語なのでここで分かりやすい日本語に置き換えます。

私のサイトでは、右下にはページトップに戻るためのボタンがすでにありましたので、これに重ならないようにオフセットをいれて位置を調整しました。

screen capture from One Signal plugin in "Prompt settings"

購読管理ボタンの筆者による設定例(クリックで拡大)

私は上記のように設定しましたのでよければ参考にしてください。ちなみに、パソコンでこの記事を見ている方は、画面の右下をご覧になると実際に動いている購読管理ボタンが見られますよ 😆

このほか、One Signalでは、ほかのプッシュサービスでは有料であることが多い、「ウェルカム通知機能」(=通知を許可してくれた人に向けたお礼のメッセージを出す)や、ラージイメージ(=通知に文字だけでなくアイキャッチ画像も表示させる)も使うことができます。

細かくカスタマイズするのも楽しいですね。これらについては機会をみて記事化したいと思います。

国産Push7はすべて日本語で始められる

logo image of "Push7" quoted from push7.jpOne Signalほどの機能はありませんが、とにかく「簡単」にかつ「日本語の設定画面」でプッシュ通知を導入したいという方は、国産のPush7がおすすめです。
Wordpress用のプラグインも用意されていて、当たり前ですが日本語での導入チュートリアルもあります。

quote from https://push7.jp/blog/how-to-webpush-from-wordpress/

Push7の購読ボタン(公式サイトから画像を引用)

また、Push7ならではの機能として、購読者の数が分かるボタンがブログパーツとして用意されているので簡単に設置することができます。

Push7の良いところ
専用アプリを経由してiOSにも通知できる
(これはほかのWEBプッシュサービスにない特徴です。もっともユーザーにPush7のアプリを事前にインストールしてもらう必要があるので、そこまでする人がどれほどいるかという懸念は残ります)
弱点
  • Push7は、HTTPとHTTPS(SSL)の両方のサイトで使うことができます。しかし、通知はPush7のサーバーから送られますのでブラウザネイティブの最初の許可画面は出せません。
  • Safariに未対応
  • ほかのSNSのフォロワーアイコンと同じように、ブログパーツを設置すると表示に時間がかかります。Google Pagespeed Insightなどで、Push7のJavaスクリプトが名指しで改善を要求されることもあり、私は利用をやめました。

まとめ

煩わしい「会員登録」をしてもらうことなく、簡単に更新通知ができるウェブプッシュは、当サイトのような弱小ブログこそ積極的に取り入れたい機能です。更新頻度が高いサイトは、ユーザー側から定期的に巡回してくれますが、弱小サイトは最初の訪問を最後にそれっきり二度と来てもらえないことも少なくありません。

Webプッシュを導入しておくと、通知の許可さえもらえれば、不定期更新のブログでも「ああ、こんなサイトあったね」と思い出してもらえるチャンスが生まれます。

簡単に導入できる割にはとても魅力的な仕組みなので、本格的な普及が始まったのは比較的最近のことですが、サービスの提供会社はどんどん増えて活況を呈しています。むしろ増えすぎて、どのサービスを選べば良いのか悩ましい状況でさえあります。ただ、どの会社のサービスを利用してもできることに大差はないので、個人では「料金」と「設定の簡単さ」を中心に判断することになりますね。

一方、すでにほとんどの主要ブラウザは、この記事で紹介したWeb Push Notification(=ウェブプッシュ)技術に対応しているものの、Microsoft EdgeやiOSなど対応していないプラットフォームもまだ残っています。特に、日本でユーザーが多いiPhoneにWeb Pushが実現できるようにしてもらいたいものです。

2 Comments

言葉の使い方

「悩ましい」は、辞書などには「悩む」という意味もありますが、通例上は
官能的な意味が正しい意味です。
アナウンサーなども間違ってるらしく、誤用している人が多いらしいんですが、
間違えないで下さい。

性的な意味を持たなければいいんですが、それで不快になる人が多いので、迷惑なんです。
それもネットで広めないで下さい。
若い世代や子供や無知な大人にどんどん拡大して行きます。
言葉の使い方には責任持って下さい。

「悩みます。」とか、「悩むところだ。」などの使い方で問題ないのでは?

返信する

コメントを残す

メールアドレスが公開されることはありません。