# スマホやPCにプッシュ通知をしてくれる「Push7」をブログに追加する方法

URL: https://webrandum.net/push7/
公開日: 2017-09-11
更新日: 2020-04-12
カテゴリー: コーディング
タグ: Push7, WordPress
出典: Webrandum（著者: サイトウ マサカズ）

最近色んなブログで見かけるようになった「Push7」というプッシュ通信サービス。このブログにも導入してみたので、導入までの手順をまとめてみました。

## Push7って？

Push7はユーザーの端末に直接プッシュ通知を送信できるサービスです。具体的にどんな風に利用できるのかと言いますと、ブログが更新されたらPush7で購読しているユーザーのPCやスマホに通知がいきます。

RSS等はあくまで「購読」なので、更新されたかどうか知るためにはRSSのページを開かないといけなかったり、通知させるにしても「ブログが更新されたらメールが届来ますよ」という形が一般的だったと思います。

 しかしPush7は「プッシュ通知」なので通知をタップすればそのまま記事が開かれて読む事ができます。

ちなみに購読ボタンは以下のようなものです。これをクリックすると別窓が表示されてプッシュ通知を受け取る事ができるようになります。

 

## 対応プラットフォームや価格

対応プラットフォームは現在「Android」「Google Chrome」「Firefox」の3つです。

 iPhoneには対応していないので、iPhoneでPush7を利用したい場合は専用のアプリをインストールする必要があります。

[appbox appstore 1088673537]

気になる価格についてですが、利用者(通知を受け取る側)は無料で利用する事が可能で、通知を送信する側は月5000件までの送信なら無料です。それ以上は月額980円のBasicプラン(月30,000件の通知を送信可能)と月額2980円のPremiumプラン(月100,000件の通知を送信可能)の2種類があります。

## Push7の購読ボタンをブログに設置する

さてここからはPush7の購読ボタンをブログに設置するまでの手順を解説していきます。

### Push7に登録する

![Push7トップページ](https://webrandum.net/wp/wp-content/uploads/2017/09/push7_top.png)

まず、ブログに設置する前にPush7への登録を行いましょう。[Push7の公式サイト](https://push7.jp/)の右上にある「新規登録ボタン」をクリックして登録画面へ移動します。

![Push7新規登録画面](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_register.png)

メールアドレスを入力して「仮登録」ボタンを押すと、入力したメールアドレス宛に本登録の案内メールが届くので、そこに記載されているリンクをクリックします。

![Push7本登録画面](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_register2.png)

本登録画面では、メールアドレスとパスワードを入力して、「ユーザーの種類」は個人を選択、利用規約に同意したら「新規会員登録」ボタンをクリックします。

 ちなみに、「利用規約に同意」と書かれてあるテキスト部分をクリックすると別タブで利用規約が表示されてしまってチェックが出来ないので、チェックする時はチェックボックスの方をクリックしなければいけません。

### 新規アプリケーションの作成

![Push7管理画面](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_mainPage.png)

登録が完了したらPush7のダッシュボード画面に移動するので、「新規アプリケーション作成」をクリックします。

![Push7新規アプリケーション登録](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_application.png)

ここで通知したい自分のブログに関する情報を入力していきます。

| アプリケーション名 | 通知の際のタイトル等に使用される。 |
| --- | --- |

| URL | 追加したいサイトのURLを入力する（最初RSSを入力するのかと思って間違えてしまったのですが、普通のURLです）。 |
| --- | --- |

| アイコン | プッシュやダイヤログで表示されるアイコンです。 |
| --- | --- |

| アプリケーションURL | 僕の場合はブログのURLをそのまま使っています。他の人とかぶっている場合は勿論使えませんし、アンダーバーとダッシュ以外の記号は使えないみたいなので注意しましょう。 |
| --- | --- |

入力できたら右下の「送信」ボタンをクリックしましょう。これで、下の画像のように新しく自分のブログが追加されているはずです。

![Push7アプリケーションの追加完了](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_application_list.png)

### アプリケーションの設定

先程登録したアプリケーションをクリックすると、そのアプリケーションの細かい設定を行う画面が表示されます。

![Push7アプリケーションの詳細設定](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_setting.png)

#### 初期導入

さていよいよPush7を自分のブログに設置します。手順としては…

1. サイトにSDK(Software Development Kit)をbodyタグの直前にコピペ（WordPressのプラグインを利用する場合はしなくてOKです）
2. ボタンかBOXかNativeかを選んで導入

この2ステップになります。まずはSDKの設定からしてしまいましょう。

##### SDKの設置

初期導入にはSDKというコードを自分のサイトに設置しなければなりません。これはソフトウェア開発キットの略で要はPush7を動かすために必要なもろもろをまとめたものになります。

 WordPressのプラグインを利用する場合はこの設定は必要ありませんので注意してください。

![Push7初期設定](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_Initial_setting.png)

作成したアプリケーションのダッシュボードに「初期導入を行いましょう」という項目があるので１番の「こちら」と書かれたリンクをクリックします。するとコードが記載されてあるウインドウが表示されるので、コードをコピーして、サイトの`</body>`タグの直前に設置しましょう。

これでPush7の機能がサイト内で使用できるようになったので、ボタンやBOXやNative等を追加してみましょう。

##### ボタンの導入

おそらく一番無難なPush7のボタンです。ソーシャルボタンのような見た目をしているので他のSNSのボタンと合わせやすいですね。プロフィールの下に設置したりしているのをよく見かけます。

![Push7_ボタン導入](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_button.png)

これは好きなボタンを選択して、コードをコピーして設置したい場所にペーストすれば表示完了です。

```
<div class="p7button" data-button-text="購読する"></div>
```

##### BOXの導入

BOXという風にPush7では呼んでいるみたいですが、要は購読を促すダイアログです。画面の上部に現れるので正直邪魔だとは思います。

 Push7を導入して少しの間は導入したという事を知ってもらうために、設置しておくのはいいと思いますが、あまり長い間設置しっ放しにしておくのはオススメできません。

![Push7_BOX導入](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_BOX.png)

主に画像やテキストの編集と、「PC」と「モバイル」のどちらに表示するのか選ぶ事もできます。コード等の追加は必要無いらしいので後で非表示にしたい場合は設定の「PC」と「モバイル」のチェックを両方外すことで非表示にできます。

##### Nativeの設定

Push7のNative設定をする事で、購読ページをわざわざ表示させなくても自分のサイト上で購読ボタンをクリックすればすぐ購読できるようになったり、ボタンの細かいカスタマイズができたり、Push7の機能をフルに扱う事ができるようになります。

しかし、この設定を行うためにはサイトのURLが「http://」ではなくて「https://」になっている必要があります。

![Push7_Native設定](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_Native_2.png)

設定方法は、jsファイルとjsonファイルをダウンロードして自分のサーバーにアップロード。その後SDKのタグを表示されているものに書き換える必要があります。

#### プッシュ通知を行う

さて購読ボタンの設置は完了したのですが、肝心のプッシュ通知の仕方ですがアプリケーションのダッシュボードから「一般通知」というメニューをクリックして一般通知ページへ移動します。

「新規プッシュ通知」をクリックしてタイトルやURL、文章を記述して時間やその他詳細を設定して送信すれば、プッシュ通知が送信されます。

![Push7プッシュ通知の設定](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_push.png)

設定した跡はテストで1度通知を送信してみるといいですね。

#### RSSを登録する

プッシュ通知の送信もできるようになりましたが、毎回記事を更新する度にダッシュボードを開いて新規で通知を作成するのは結構面倒です。そこでRSSを登録して記事が更新されたらプッシュ通知を行うという設定をしてみましょう。

アプリケーションのダッシュボードから「自動送信」というメニューをクリックするとRSS連携のページが表示されます。RSSリンクを貼り付けて「設定を保存」を押せば連携完了です。

![Push7_RSSの登録](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_RSS.png)

RSS更新の場合は常に記事が更新されるか監視しているわけではないので、更新されても最大30分ほど通知が来なかったりもしますが、手動で通知を行った場合もおそらく30分程度時間はかかると思いますし、何より楽なのでRSS連携をしておくことをおすすめします。

### WordPressプラグインを使用する

WordPressの場合はPush7のプラグインがあるのでそっちを使って設置することも可能です。ファイルをダウンロードしてアップするか、もしくは「プラグイン」の「新規追加」からPush7を追加してインストールしましょう。

 [Push7](https://ja.wordpress.org/plugins/push7/)

インストールができたら有効化して、設定画面へ移動しましょう。下の画像のような設定画面が表示されます。

![Push7_WordPressプラグイン](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_WordPress_Plugin.png)

App NumberとAPI KeyはPush7のアプリケーションページに「API」というページがあり、そこに2つとも載っているのでそれをコピペします。あとは「Push7SDKを有効にする」という項目にチェックをしたら先程のボタンやBOXは利用可能になります。

![Push7_APIページ](https://webrandum.net/wp/wp-content/uploads/2017/09/Push7_API.png)

あとは、どのカテゴリや投稿タイプで記事が投稿されたらプッシュ通知するのか設定を行うこともできます。