ロリポップサーバ上のWordPressサイトにPush7というサービスを利用してPush通知を実装するのであれば素人でも可能

## 背景

ブログ記事をアップしたらそれをユーザに通知したかったわけです。
ユーザへの能動的な通知をPush通知と呼んだりします。
この実装はムズイわけですが[Push7](https://push7.jp/)というサービスを利用することで簡単に実装できることを発見したのです。

ではWordPressで[Push7](https://push7.jp/)を利用してPush通知を実装した流れを記載していきます。

## 1. Push7の新規登録

まず下記にアクセスします。
https://push7.jp/

[![Image from Gyazo](https://i.gyazo.com/fd17b3eed39092b54baa0b963b76ae76.png)](https://gyazo.com/fd17b3eed39092b54baa0b963b76ae76)

で`新規登録`を行います。
メール認証とかありますが、まあ普通にできると思います。
で登録が完了すると下記のような画面に遷移します。

[![Image from Gyazo](https://i.gyazo.com/77118a8df98c155be6aeac3bf8ea0aa4.png)](https://gyazo.com/77118a8df98c155be6aeac3bf8ea0aa4)

## 2. Push7での新規アプリケーション作成と初期

`新規アプリケーション作成`をクリック。
すると下記の画面が出てきます。

[![Image from Gyazo](https://i.gyazo.com/7b6948e36c9a89091e8253eb016b3d06.png)](https://gyazo.com/7b6948e36c9a89091e8253eb016b3d06)

各項目は以下のイメージです。

|header1|header2|
|:--:|:--:|
|アプリケーション名|普通にアプリ名を名づける|
|URL|サイトURLを入力|
|アイコン|Push通知の際にポップアップされる時のアイコン|
|カテゴリ|必要性は不明だが、まあ一応それっぽいのを選択|
|アプリケーションURL|Push通知を購読するとユーザが決断したときに遷移するページURL。なんでもいいがユーザに見えるのでふざけすぎない程度に|

私の場合は下記のように登録しました。

[![Image from Gyazo](https://i.gyazo.com/dad347dd2fa01ea69769d67447845137.png)](https://gyazo.com/dad347dd2fa01ea69769d67447845137)

送信をクリックすると下記画面に戻ります。
こんな感じでアプリが登録されている状態となります。

[![Image from Gyazo](https://i.gyazo.com/462d53a10ed996bd2ac0b001c05ea539.png)](https://gyazo.com/462d53a10ed996bd2ac0b001c05ea539)

## 3. ユーザに通知を受け取るかどうかを選択させる同線の設定

アプリを選択します。
すると下記画面に遷移します。

[![Image from Gyazo](https://i.gyazo.com/cd9913a2af0a91cc201128c94da9a193.png)](https://gyazo.com/cd9913a2af0a91cc201128c94da9a193)

ここで3パターン選べます。

- ボタンを導入（サイトのどこかに`Push通知を受け取るボタン`を設置しましょうというやつ）
- BOXを導入（ポップアップで「通知受けますか？」と出てくるやつ）
- Nativeを導入（ポップアップで「通知受けますか？」と出てくるやつ）

`BOX`と`Native`の違いはシステムてきなことは分かりませんが、
ユーザ目線で言うと、`BOX`は通知受けます受理の際に先ほど登録したアプリケーションURLに遷移して
そこで正式登録となります。
`Native`はワンクリックで登録完了します。
またポップアップデザインも若干ことなります。
つまりクリック数の観点では`Native`が優れています。

3とも併用可能です。
3つ併用してもPush通知は1通しか来ないので、安心してください。

## 3-1. まずBOX導入

`BOXを導入`をクリックすると下記画面に遷移します。
このページでユーザが`Push通知を受け取るかどうか選択する`ためのポップアップのデザインを決めます。
私の場合は以下の画面のように設定しました。

[![Image from Gyazo](https://i.gyazo.com/4b047d43a09d12d43e9d4a9180567983.png)](https://gyazo.com/4b047d43a09d12d43e9d4a9180567983)

次に下のほうの`wordpress連携`をクリックします。

[![Image from Gyazo](https://i.gyazo.com/0684843bb1f671bd60bb0458ef043327.png)](https://gyazo.com/0684843bb1f671bd60bb0458ef043327)

下記画面に遷移します。
`App Number`と`API Key`をメモっておきます。

[![Image from Gyazo](https://i.gyazo.com/7aa53f81619a661c3909e95a411aca9e.png)](https://gyazo.com/7aa53f81619a661c3909e95a411aca9e)

次にWordPress管理画面からプラグイン`Push7`をインストール、有効化します。
下記のように検索窓で`Push7`と入力すれば出てきます。

[![Image from Gyazo](https://i.gyazo.com/a734bb3a4841651eb4be86119bec9c0f.png)](https://gyazo.com/a734bb3a4841651eb4be86119bec9c0f)

次に下記画面のようにWordPressの管理画面のメニューからPush7設定画面を開きます。
で先ほどの`App Number`と`API Key`を入力し、`Push7SDKを有効にする`を`する`にします。
その後忘れずに`変更を保存`しましょう。

[![Image from Gyazo](https://i.gyazo.com/c289efb0afdcf556b5e8fa1e801ebb02.png)](https://gyazo.com/c289efb0afdcf556b5e8fa1e801ebb02)

実際に[コンビニうまジャンキー極秘リスト](https://kakiuchi.style/)に遷移してみると、下記の感じでポップアップが出てきます。

(`PCの場合`)

[![Image from Gyazo](https://i.gyazo.com/54b66c30d70be9f77b620e4e968bcd35.png)](https://gyazo.com/54b66c30d70be9f77b620e4e968bcd35)

(`スマホの場合`)

[![Image from Gyazo](https://i.gyazo.com/b1cad68933228c557bb253e4958d2ebf.png)](https://gyazo.com/b1cad68933228c557bb253e4958d2ebf)

で`受け取る`をクリックすると下記画面に遷移します。
※このページURLが先ほどのアプリケーションURL`https://kakiuchi.app.push7.jp/`となります。

[![Image from Gyazo](https://i.gyazo.com/0d13dff6fc5100387af233fc66760b40.png)](https://gyazo.com/0d13dff6fc5100387af233fc66760b40)

これでユーザはポップアップを通知される状態になります。

## 3-2. ボタンを導入

ボタンは簡単に言ってしまえば、アプリケーションURL`https://kakiuchi.app.push7.jp/`に遷移するためのボタンにすぎません。
つまり、リンクを`https://kakiuchi.app.push7.jp/`としてボタンも設置できるということです。

導入設定からボタン設定に進むと下記画面が表示されます。
ここにデフォルトのデザインを活用したHTMLコードが準備されています。

[![Image from Gyazo](https://i.gyazo.com/d53f7a5e5ae3a646155fc6595510b8ee.png)](https://gyazo.com/d53f7a5e5ae3a646155fc6595510b8ee)

これを利用してもいいですが、若干小さいので私はCSSで別のデザインを採用しました。（下図）
※ボタンデザイン参考URL→https://saruwakakun.com/html-css/reference/buttons

[![Image from Gyazo](https://i.gyazo.com/72217f6b5630e5b465b63a8b75ba70bc.png)](https://gyazo.com/72217f6b5630e5b465b63a8b75ba70bc)

## 3-3. Nativeを導入

**前提として対象URLがHTTPS化されている必要があります**

導入設定からNatevi設定に進むと下記画面に遷移します。

[![Image from Gyazo](https://i.gyazo.com/d6f1cb156da76c139a1d90a9fc53076c.png)](https://gyazo.com/d6f1cb156da76c139a1d90a9fc53076c)

基本的に個の通りやれば全く問題ないです。
実際に[コンビニうまジャンキー極秘リスト](https://kakiuchi.style/)に遷移してみると、下記の感じでポップアップが出てきます。

(`PCの場合`)

[![Image from Gyazo](https://i.gyazo.com/0cf90ff314d6ca07bc787162b9e72564.png)](https://gyazo.com/0cf90ff314d6ca07bc787162b9e72564)

(`スマホの場合`)

[![Image from Gyazo](https://i.gyazo.com/f17e5c2dda496b4a9d88db82b10f1cb8.png)](https://gyazo.com/f17e5c2dda496b4a9d88db82b10f1cb8)

Natevi設定において、躓く可能性の高いポイントだけ記載しておきます。

### ドキュメントルートへの配置

ロリポップを活用している場合、下記のサイトからアップロードできます。
https://lolipopftp.lolipop.jp/dir/list/

ドキュメントルートとは具体的には`.htacess`や`index.php`がある同じ階層のフォルダを指しています。

### SDKのタグの置き換え

置き換えなので、WordPressのPush7設定画面で`Push7SDKを有効にする`を`しない`に変更します。

[![Image from Gyazo](https://i.gyazo.com/e4514cfd773cbdc110b17ec15c3d0d55.png)](https://gyazo.com/e4514cfd773cbdc110b17ec15c3d0d55)

次に新SDKをコピペするわけですが、初心者の方は`Head, Footer and Post Injections`というプラグインを利用すると楽です。
下記のやつをインストールします。

[![Image from Gyazo](https://i.gyazo.com/e230f2d6f6d9f8b04a54c897dfb7e913.png)](https://gyazo.com/e230f2d6f6d9f8b04a54c897dfb7e913)

WordPress管理画面のメニュー`Herder and Footer`をクリックし、
下図のような`BEFORE THE </BODY> CLOSING TAG (FOOTER)`にSDKコードを貼り付けます。
※デスクトップ、スマホ両方ポップアップしたい場合は、スマホのチェックボックスをチェックして両方にコピペしましょう。

[![Image from Gyazo](https://i.gyazo.com/62c92709f1cf53e2ad90ec8a4add71a2.png)](https://gyazo.com/62c92709f1cf53e2ad90ec8a4add71a2)

### ロリポップで`Herder and Footer`でSDKのタグの置き換えようとすると権限エラーがでる

SDKのタグの置き換え時に下記のようなエラーが出る場合は、
こちら→https://lolipop.jp/support/faq/cgi/000681/
を参考にするとOKです。

[![Image from Gyazo](https://i.gyazo.com/f55526c5e7581c67b0826c5e39016aa2.png)](https://gyazo.com/f55526c5e7581c67b0826c5e39016aa2)

## 4. WordPressの記事更新毎にPush通知されるようにする

WordPress管理画面のPush7設定にて設定することができます。
下図のように設定すると、チェックしているタグの記事投稿が行われたときにPush通知されるということです。

[![Image from Gyazo](https://i.gyazo.com/6ed3854c4dddbeac7efd01d038052af4.png)](https://gyazo.com/6ed3854c4dddbeac7efd01d038052af4)

また、実際のWordPressでの新規投稿時、下図のように右下のほうでpush通知をするか否かの選択も可能です。

[![Image from Gyazo](https://i.gyazo.com/646eb645eca457b17e6e256a960da84c.png)](https://gyazo.com/646eb645eca457b17e6e256a960da84c)

## 最後に. 実際に通知されたときユーザ側としてはどのように見えるのか。

下記のように見えます。
本格的ですね！

(`PCの場合`)

[![Image from Gyazo](https://i.gyazo.com/0973964e4f52a0c9d0584abc3c1fc5d8.png)](https://gyazo.com/0973964e4f52a0c9d0584abc3c1fc5d8)

(`スマホの場合`)

[![Image from Gyazo](https://i.gyazo.com/c0c23fb9fb0c6812f011a95a60601cd8.png)](https://gyazo.com/c0c23fb9fb0c6812f011a95a60601cd8)

## 参考サイト
参考になりました！ありがとうございます！

https://tarrlog.com/push7-native-simplicity/
https://lolipop.jp/support/faq/cgi/000681/
https://saruwakakun.com/html-css/reference/buttons