「Push7」Webプッシュ通知で更新情報をお届け！登録・設定や使い方

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

情報の拡散として有効なのがFacebookやTwitterといったSNSですが、タイムラインに情報を流してもすぐに他の情報で埋もれてしまい、なかなか拡散効果が得られないと感じたことはありませんか？

そんな時にプッシュ通知で更新情報を各ユーザーにお届けすることができれば、情報が埋もれてしまう心配もなく、効率良く情報を拡散させることができます。

プッシュ通知といえば「LINE」アプリが真っ先に思いつきますが、それをWeb上で可能にしたのが「Push7」です。

プッシュ通知を行うにはまずブログの読者となってもらう必要がありますが、ファンが増えれば確実に更新情報を通知することができるので、閲覧される可能性も高くなります。

そんな「Push7」の登録から設定方法、使い方などについてまとめてご紹介していきます。

「Push7」の特徴について

まずは「Push7」がどういったサービスなのかについて簡単にご紹介します。

先程もお伝えしましたがアプリではなく、Web上でプッシュ通知ができる革新的なデジタルマーケティングを行うことのできるサービスです。

WindowsやMac、AndroidやiOSへの配信が可能であり、マルチプラットフォームに対応しています。

また、メールの場合は開封率が３%程度という低い数値に対して、「Push7」のWebプッシュ通知は平均20%という高パフォーマンスで非常に高い水準で配信されています。

ワードプレスブログの場合は、公式で提供されているプラグインを導入すれば、RSSからの自動配信も可能になります。

「Push7」の基本的なサービスは全て無料で利用できるので、導入しておいても損はないと思います。

Webプッシュ通知のお試し体験

Webプッシュ通知機能を使って実際に配信する前に、「Push7公式サイト」からお試し体験をすることができます。

ブログの購読者にどのように通知されるかが把握できるので、一度は試しておくことをオススメします。

お試し方法は「Push7」の公式サイトにアクセスしたら、ページの中段付近に「Webプッシュ通知を試してみましょう」の表示があるので、左側にお試し用の通知内容を入力して『通知を送る』をクリックします。

次に「push7.jp」から通知の許可が求められるので『許可』をクリックします。

そうすると、画面右上もしくは右下にテストプッシュ通知が表示されます。

Webプッシュ通知を体験したところで、早速「Push7」に登録していきましょう。

「Push7」に登録する方法

先程の「Push7公式サイト」に移動したら、画面右上の『新規登録』をクリックして下さい。

登録用のメールアドレスを入力して『仮登録』をクリックします。

入力したアドレス宛に「Push7」から本登録メールが届きますので、メール内に記載されたURLリンクをクリックして登録を進めましょう。

続いて先程入力したメールアドレスと新しいパスワードを入力して、ユーザーの種類を選択したら、利用規約を確認してチェックを入れ『新規会員登録』をクリックします。

これで「Push7」に登録することができました。

アプリケーションの作成

続いてブログ情報を「Push7」に登録する為に、『新規アプリケーション作成』をクリックしましょう。

登録情報を入力する画面が表示されるので、各項目を順番に入力していきます。

「ファビコン」とはパソコンのタブ上に表示されているもので、スマホでホームに追加した時にも使われる画像です。

もし何も設定されていない場合は、ブログ内容に近いものを設定するようにしましょう。

次に「カテゴリ」と「アプリケーションURL」を入力したら、最後に『送信』ボタンをクリックします。

「アプリケーションURL」は相手にWebプッシュ通知が送られた際に、「任意のURL.app.push7.jp」で表示されます。

設定次第では自分のドメインからプッシュ通知を送信することも可能です。

これで「Push7」にブログのアプリケーションが追加されます。

「Push7」の設定や使い方

作成したアプリケーションを選択すると様々な設定を行うことができますが、今回は購読ボタンの設置に関する設定について見ていきましょう。

「Push7」を使う為にはまずブログへの初期導入(SDKの設置)を行う必要があり、指定されたコードをbodyタグの末尾に貼り付けることで、ボタンをブログに表示させることができるようになります。

ワードプレスブログの場合は、「Push7」プラグインを利用するだけでSDKが自動でインストールされる為、簡単にボタンを設置することが可能です。

「Push7」プラグインの導入

ここではワードプレスを例にして作業を進めていきたいと思います。

※「Push7」の画面は閉じないようそのまま開いておいて下さい。

ワードプレスに移動したら、管理画面メニューから「プラグイン」⇒『新規追加』をクリックします。

右上の検索ボックスに「Push7」と入力して、プラグインが表示されたら『今すぐインストール』をクリック後、完了したら『有効化』をクリックします。

ワードプレスにプラグインが追加され、管理画面メニューの「設定」⇒『Push7設定』をクリックします。

「Push7」プラグインの設定

プラグインの設定で必要なのは以下の３箇所になります。

「App Number」「API Key」に入力するコードは、「Push7」のアプリケーション内の「自動送信」⇒「WordPress」と進んだところに記載されています。

２つのコードをプラグインの方にそのままコピー&ペーストして、「Push7SDKを有効にする」の「する」にチェックを入れたら、『変更を保存』をクリックします。

また、投稿記事の作成時の画面で「Push7」に通知するかどうか、記事ごとに設定することもできます。

「Push7」ボタンの設置

後はブログにプッシュ通知用のボタンを設置するだけです。

「Push7」内の左メニューから「導入設定」⇒「ボタン設定」と進んで、表示形式とメッセージを決めたら表示されているコードをコピーしてブログに貼り付けましょう。

これでブログのサイドバーなどに、「Push7」ボタンを簡単に表示させることができます。

ワードプレスならウィジェット内に「テキスト」を追加して、コードを貼り付けるだけなので特に迷うこともないかと思います。

CSSでデザインをカスタマイズ

「Push7」ボタンのデザインを自分流にカスタマイズしたい方は、ワードプレスの子テーマにある「style.css」ファイルにコードを追加することで変更可能です。

変更方法としては２種類あり、既存のボタンをCSSで編集する方法と、新たにテキストリンクを作成してCSSで編集する方法があります。

ただ、既存のボタンではすでにCSSが読み込まれている為、上手く反映させることができない場合がありますので、新規で作成した方がカスタマイズしやすいのでオススメです。

テキストリンク作成とCSSで編集

まずは既存の「Push7」ボタンのコードは使わないので、新たにアプリケーションURLをリンク先としたテキストリンクを作成します。

<div class="push7">
<a href="https://アプリケーションURL.app.push7.jp/" rel="nofollow" target="_blank" sl-processed="1">プッシュ通知で購読</a>
</div>

上記コードの「アプリケーションURL」の部分に、「Push7」で設定されたURLを入力して下さい。

このままブログのサイドバーなどに表示させると、テキストだけの状態となっているので、「style.css」でデザインをカスタマイズしていきます。

/*-- Push7ボタン --*/
.push7 {
    text-align: center;/*ボタンを中央揃え*/
}

.push7 a {
    display:inline-block;/*横並びブロック形式*/
    background: linear-gradient(135deg, #eeac00, #fac559);/*背景のグラデーション*/
    color: #fff;/*文字色*/
    padding: 6px 10px;/*リンク内の高さ・横幅*/
    font-weight: bold;/*リンク内文字を太字に*/
    font-size: 15px;/*リンク内文字サイズ*/
    text-decoration: none;/*リンク下線なし*/
    border-radius: 5px;/*リンク角の丸み*/
    box-shadow: 0px 5px 4px -2px #a0a0a0;/*影をつける*/
}

.push7 a:hover {/*マウスホバー時*/
    background: #fac559;/*背景色*/
}

.push7 a:before {/*アイコン*/
    font-family: FontAwesome;/*アイコン取得先*/
    content: "\f0e7";/*アイコンコード*/
    margin-right: 4px;/*アイコンと文字の間隔*/
    font-size: 17px;/*アイコンサイズ*/
}

上記のCSSコードをファイル内にそのまま貼り付けると、以下のようなデザインで表示されるようになります。

プッシュ通知で
更新情報を見る

使用しているアイコンは「FontAwesome」のサイトで利用できるものです。

また、各コードに説明文を入れていますので、後はお好きなボタンデザインに変更してお使い下さい。