Help us understand the problem. What is going on with this article?

WordPress + WebPush で投稿を通知する(OneSignalを利用)

More than 1 year has passed since last update.

仕様

  • WordPress で作ったサイトで WebPush を実装したい
  • できる限り多くのプラットフォーム・ブラウザで対応したい
  • 楽したい(切実)

スクリーンショット 2017-11-06 19.09.09.png
要するにこれです。

OneSignal でやろう

  • OneSignal
  • Android、iOSのネイティブアプリの通知とWebPushをクロスプラットフォームでやってくれるサービス。
  • 有名どころのデベロッパー(AdobeとかLINE)も使ってる
  • 今の所無料

WordPress と連動させる

  • OneSignal公式のプラグインがあるのでそれを利用する。OneSignal – Free Web Push Notifications
  • 対象
    • デスクトップ:Chrome, Firefo, Safari (Mac OS Xのみ)
    • スマートフォン:Chrome (Android)
  • プラグインのインストールと有効化の他に OneSignal で APIキー, AppID, Sarafi Web IDを取得する必要がある(プラグインを有効化すると管理画面から手順を確認できる)

使うための手順

とはいえ、管理画面に書いてある手順をざっくり翻訳します。
OneSignal と WordPress を行き来するので注意。

Chrome & Firefox Push

1 [OneSignal] Create a OneSignal account or log in to your existing account.
OneSignal にログイン(なければアカウント作成)

2 [OneSignal] Click Add a new app.
アプリケーションを作成します。
スクリーンショット 2017-11-06 13.21.09.png
Choose any name for your app. Here we use Wordpress Demo. Click Create.
任意の名前をつけ「Create」をクリック ※Here we use Wordpress DemoはWordPress管理画面のスクリーンショットの説明なので気にしない
スクリーンショット 2017-11-06 13.21.16.png

3 [OneSignal] Click × to exit the dialog popup.
Click App Settings on the left sidebar.
管理画面のスクリーンショットと実際の手順が若干異なります。
2の続きで下記の画面になるので「Website Push」を選んで「NEXT」をクリック
スクリーンショット 2017-11-06 13.39.25.png
Click Configure next to Google Chrome & Mozilla Firefox.
Instructions to set up Safari web push are available at the end of this guide.
続いて「Google Chrome & Mozilla Firefox」を選択して「NEXT」をクリック。
Safariの通知設定は後から。
スクリーンショット 2017-11-06 13.39.44.png

4 [OneSignal] Add your Site URL.
5 [OneSignal] Add your Default Notification Icon URL.
6 [OneSignal] Check the box if your site is not fully HTTPS.

スクリーンショット 2017-11-06 13.40.00.png

  • Site URL:設置するサイトのURL。末尾にスラッシュ(/)は不要。サブディレクトリの場合でもドメインまで。
  • Default Notification Icon URL:通知用のアイコン。192x192以上(管理画面ところなるので注意)。httpsに置いてる画像。
  • My site is not fully HTTPS:サイトが完全なHTTPSではない場合チェックをいれる

Steps 7 ‐ 8 only apply if you've checked My site is not fully HTTPS.
サイトがHTTPSでない場合は7-8設定が必要ですが、イマドキそういうサイトも少ないと思うのでここではスルーします。

管理画面の説明はここまでですが、もうちょっと続きます。

9 [OneSignal] Select your target SDK
スクリーンショット 2017-11-07 16.05.20.png

WordPressを選びます。

10 [OneSignal] Wordpress SDK Installation
スクリーンショット 2017-11-07 16.08.16.png

APIキーなどが発行されるので、この画面のままWordPress側の設定に移ります。
(テストが終わらないと「DONE」をクリックできない)

OneSignal Keys

1 [OneSignal] Go to App Settings > Keys & IDs:
2 [OneSignal] Click Keys & IDs on the right tabbed pane.
先ほど取得した REST APIキーとApp ID は OneSignal の管理画面からでも確認できます。
これをコピー。
[WordPress] ダッシュボード>OneSignal Push の Configuration タブに入力して保存。
スクリーンショット 2017-11-07 16.13.15.png

以上で終わり。

Subscribing Users.

[WordPress] サイトの表側にアクセスすると右下(デフォルト)でNotify Buttonが表示されます。
アイコンをクリックすると通知を登録するかどうかが出るので「SUBSCRIBE」をクリック
スクリーンショット 2017-11-07 16.18.31.png

[OneSignal] に戻って 10 [OneSignal] Wordpress SDK Installation の画面で「Check Subscribed Users」をクリックすると、連動のテストを行います。
問題なければ完了です。

Safari Push

1 [OneSignal] Log in to your OneSignal account, and navigate to the App Settings page of the app you configured in this guide.
OneSignalにログインしてAppを選択後、App Settings から Apple Safari のCONFIGUREをクリック。
スクリーンショット 2017-11-06 14.05.46.png

2 [OneSignal] In this step, we'll focus on filling out the Site Name and Site URL fields.
サイト名など設定します。
スクリーンショット 2017-11-07 16.49.20.png

  • Site Name : 通知に出るサイトの名前
  • Site URL : 注意点は Chrome & Firefox Push と同じ
  • I'd like to upload my own .p12 certificate : 自前の .p12 証明書を使う場合は選択
  • I'd like to upload my own notification icons : 通知のアイコンを自前のものを使う場合は選択

3 [OneSignal] In this step, we'll focus on uploading your Safari notification icons.
「I'd like to upload my own notification icons」にチェックを入れた場合の設定。
256 × 256 の正方形の
アイコンが必要です。(管理画面の説明と異なる)
スクリーンショット 2017-11-07 16.55.41.png

4 [OneSignal] Click Save to commit your Safari push settings and then exit the dialog.
保存して終了

5 [OneSignal] Refresh the page, and then copy the Safari Web ID you see to the Configuration tab.
(リフレッシュや再読み込みしなくてもOK) App Settings の Apple Safari に Web ID が発行されるのでコピー。
[WordPress] ダッシュボード>OneSignal Push の Configuration タブに入力して保存。

自分のサイトに設定したのでよければ登録して通知などみてください。
https://gatespace.jp/

基本的に

  • 通知の登録時
  • 記事公開時:投稿ごとにチェックボックスがあるので任意で選択可能(デフォルトは通知される)
  • 記事更新時:投稿ごとにチェックボックスがあるので任意で選択可能(デフォルトは通知されない)

のタイミングで通知されます。

現場からは以上です。

gatespace
仙台で働く(株)デジタルキューブ(め組)の Director。 _s Contributor / JAWS-UG 東北 / 網元起動隊
https://gatespace.jp/
digitalcubeinc
デジタルキューブは AWS Partner Network (APN) アドバンスドテクノロジーパートナーです。
https://ja.amimoto-ami.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした