【導入編】WordPressでWebプッシュ通知を送ろう！OneSignalプラグインの使い方

2020/4/24 2020/5/13

この記事は最終更新から4年以上が経過しています。情報が古くなっている可能性があります。

こんにちは、しばです。

最近Webプッシュ通知をWordPressサイトに導入する方法を調べていたんですが、そこでOneSignalというサービスを知りました。
どうやら無料で使えるWPプラグインもあるとのこと。
しかしよそ様のブログをみてみると、WPプラグインで簡単に導入できる一方で、カスタマイズしたい時はプラグインじゃない方法で実装しているような印象を受けました。

ということで、OneSignalのWordPressプラグインを使ってどこまで出来るのかという検証目的で、ローカルに導入してみました！
今回はまずプッシュ通知が動作するまでの導入方法について、キャプチャと一緒にご紹介します。

第2弾オプション編、第3弾カスタマイズ編もよければご覧ください。

【オプション編】WordPressでWebプッシュ通知を送ろう！OneSignalプラグインの使い方

こんにちは、しばです。 WPプラグイン「OneSignal – Web Push Notifications」の使い方、第1弾は導入編、第3弾は…

【カスタマイズ編】WordPressでWebプッシュ通知を送ろう！OneSignalプラグインの使い方

こんにちは、しばです。 WPプラグイン「OneSignal – Web Push Notifications」の使い方、これまで導入編・オプショ…

Contents

1 OneSignalとは
- 1.1 対応ブラウザ
- 1.2 主な機能
2 導入方法
3 実際の表示
4 まとめ

OneSignalとは

OneSignalはAndroid、iOS、Web等各プラットフォームへプッシュ通知を提供するサービスで、「OneSignal – Web Push Notifications」というWordPressプラグインも提供しています。

WordPressプラグインの機能は下の通り。

対応ブラウザ

Chrome（デスクトップ＆Android）
Safari（Mac OS X）
Microsoft Edge（デスクトップ＆Android）
Opera（デスクトップ＆Android）
Firefox（デスクトップ＆Android）をサポート

HTTPサイトとHTTPSサイトの両方サポートしています。
無料プラグインではiOS端末へのプッシュ通知はできません。

※ 基本的にiOS端末へのプッシュ通知自体証明書が必要なため、有料。Push7であれば特定の条件付きで可能らしい

ちなみにローカルでも動作します。私もLocal by flywheelで構築したローカルのWordPressサイトに導入しました。

主な機能

自動通知
…新しい投稿を公開するたびにフォロワーに通知を送信。または、数日間訪問しなかった場合に自動的に送信されるリマインダーを設定。
リアルタイム分析
…通知がリアルタイムで配信されていることを確認し、訪問されるのを監視。
スケジュールされた通知
…ユーザーのタイムゾーンに基づいて、またはユーザーが最後にWebサイトにアクセスした同じ時刻に基づいて、配信されるように通知をスケジュール。

などなど。

詳細な分析はOneSignalのダッシュボードから確認出来るようになってます。

導入方法

私が今回実装したのはローカルのWordPressサイト（HTTP）ですが、ローカルでもウェブサーバー上でも同じ手順で導入できます。

「OneSignal – Web Push Notifications」をインストールする

WordPress管理画面の”プラグインを追加”から、「OneSignal」を検索しましょう。

OneSignal – Web Push Notificationsをインストールし、その後有効化。

そうするとWordPress管理画面左メニューにOneSignal Pushが追加されるのでクリックしましょう。
このメニューページは、下の画像の通りSetupとConfigurationという2ページで構成されてます。

Setup
…プッシュ通知するために必要なアプリIDとREST APIキー、（Safariで使うときはさらにSafari Web ID）を取得するための手順が掲載
Configuration
…上で取得したキーを登録するエリア。またプッシュ通知のオプション設定

となっています。

ここに登録するアプリIDとREST APIキー、Safari Web IDを取得するために、この画面はそのままにしておいて、Setupの手順にしたがってOneSignalページからアカウントを登録・設定しにいきましょう。

OneSignalアカウントを作成、キーを取得する

アカウントの作成

OneSignal（https://onesignal.com/）のページを開き、[Start for Free]というボタンをクリックします。

メールアドレス
パスワード
法人個人

上3点を入力し送信すると、すぐに入力したメールアドレスにメールが送られてくるので、メールに記載のボタンをクリックして認証しましょう。

アプリの設定

メールから飛ぶとアプリの設定画面に遷移します。

名前は管理しやすいような名称でOKです（ここではtest）。名前を入力し、Web Pushを選択してNextボタンをクリック。

Web Pushの詳細設定画面が表示されます。
Choose Integrationは「WordPress Plugin or Website Builder」、その次にWordPressを選択しましょう。

WordPressサイトの設定画面では、通知に使用する情報を入力していきます。

WordPressサイト名
WordPressサイトURL（http://exmaple.com、https://exmaple.comなど）
HTTP/HTTPS設定
通知アイコンのURL
ラベル（通知の時に表示されるもの。サイト名やドメイン名がわかりやすそう）

キャプチャはHTTPサイトの場合

SAVEボタンをクリックすると、コード取得画面が表示されます。

Safariブラウザにプッシュ通知しない場合はこの2つのコードをメモに控えておきましょう。

Safariブラウザの設定

Safariにプッシュ通知を送るには別途設定が必要になります。
先ほどの画面でFinishボタンをクリックした後、SettingsからWeb Push PlatformのApple Safariをクリックします。

モーダルウィンドウが開くので、そこで先ほど入力したのと同じように

WordPressサイト名
WordPressサイトURL（http://exmaple.com、https://exmaple.comなど）

を入力し、進みます。

次にSDK選択画面が出てくるので、WordPressを選択。

そうすると、各種コードと共に認証手順が表示されます。

内容は以下の通り。（意訳）

下の3つのコードを WordPressプラグインに登録しましょう。手順2が済むまでこの画面から移動しないでください。
- Your Rest API Key ※
- Your App ID ※
- Your Safari Web ID
※ 上2つは先ほどの手順で取得したコードと同じもの
登録が済んだらWebサイトにアクセスし、テスト購読者登録を行います。1人以上購読者がいる状態で画面の[Check Subscribed Users]ボタンをクリックしてください。

ということなので、この画面はそのままにしてこの3つのコードをメモに控えておきましょう。