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

こんなことがしたい人のための記事です

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

はじめに

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

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

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

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

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

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

One Signal

One Signalのウェブサイト

Push Crew

Push Crewのウェブサイト

Send Pulse

Send Pulseのウェブサイト

Push Woosh

POSHWOOSHのウェブサイト

Push Assist

pushassistのウェブサイト

Fox Push

FoxPushのウェブサイト

Push7（国産）

Push7のウェブサイト

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

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

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

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

One Signalの最初の画面

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

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

プラットフォームを選ぶ

先ほど作ったアプリ「BAOOKUN」をどのようなプラットフォームで使いたいかを選択します。ここでは、WebSite Pushを選んで、右下の赤いNextボタンを押します。

One Signalは現状、WEBプッシュに対応しているブラウザであるChromeとFirefoxとSafariのすべてに対応しています。まずは、ChromeとFirefoxの設定（共通）をするので、画面のアイコンで「Google Chrome & Mozilla Firefox」をクリックしてNextボタンを押します。

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

WordPressでの設定

私のサイトはWordpressで記事を作っています。新しい記事を公開するたびに自動でプッシュ通知が読者に届くようにしたいので、SDKにはWordpressを選択します。

するとWordpressで利用するための手順が表示されました。別のタブや新しいウィンドウで WordPress Plugin’s のリンクをたどってプラグインをインストールします。（もしくはWordpressのプラグイン検索画面から “OneSignal”で検索しても良いです）

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

ここからは、Wordpressの設定画面で作業を進めます。指定されたプラグインをインストールした後に「有効化」し、設定画面を開きます。画面の上部にSetupとConfigurationの２つのタブがありますので、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プッシュができませんのであきらめるほかありません。

One Signalの設定画面

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

下にある２つのオプションはとりあえず無視（チェックしない）しておいて構いません。あとで細かくカスタマイズすることもできますので、ひとまずSaveをクリックして設定を終えます。

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

WordPressの管理画面

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

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

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

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

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

筆者による設定例（クリックで拡大）

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

筆者による設定例

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

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

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

One Signalおすすめの機能の一つに、サイトに埋め込めるインタラクティブな購読管理ボタンがあります。

このボタンを出す位置や、どんな表現を使うのかは自由に設定できます。標準では英語なのでここで分かりやすい日本語に置き換えます。

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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