プッシュ通知というのは、こんな感じの「ヒュポッ」って急に出てくるヤツです。
私はずっとこれをやりたくて、ブログに記事を投稿したら読者の方のスマホ・PCにプッシュ通知を配信したかったのです。
この度とうとうプッシュ通知が出来るようになりましたので、その方法をご紹介します。
Push7への登録
はてなブログで新着記事のプッシュ通知を配信するには、Push7というサービスを使います。
Push7にはいくつかのプランがありますが、通常の規模のサイトであれば無料プランでも十分使えますのでご安心を！
仮登録と本登録
メールアドレスを入力して仮登録ボタンをクリック。
入力したメールアドレス宛に本登録用ページのURLが記載されたメールが届くので確認しましょう。
受信したメールに記載されているURLを開くと、本登録ページが開きます。
ユーザーの種類は個人を選択しましょう。
本登録を完了すると、下記の画面に移ります。
新規アプリケーションの作成
- アプリケーション名：自分のブログの名前
- URL：自分のブログのURL（httpとhttpsに注意）
- アイコン：通知に表示したいアイコン
- アプリケーションURL：読者が通知登録する時のページです。ブログのURLと似たような名称にすると良いです。
Push7の初期設定
ここからは、先ほど登録した内容を実際に自分のブログに適用するための手順です。
まずは上記画像のアイコンをクリックしましょう。
bodyタグの貼り付け
これがPush7のダッシュボード画面です。
中央の「初期導入を行いましょう」にある「こちらからコードをコピーして...」の「こちら」をクリックします。
あなた専用のコードが表示されます。
表示されているコード全文をコピーして、貼り付けられる状態にします。
はてなブログの「デザイン設定」を開きましょう。
先程コピーしたコードを、「フッタ」に貼り付けます。
あとは「変更を保存する」を押せば、初期設定は完了です。
RSSフィードの登録
Push7のダッシュボード画面に戻って、左側メニューの「自動送信」を開きます。
RSS連携の画面が表示されますので、RSSリンクの欄を設定します。
- ブログのURL + /rss
※このブログだと～～himadara.info/rss
購読ボタンの設置
次は、実際に読者の方にプッシュ通知の受信を登録してもらうためのボタンを設置します。
はてなブログでいうところの「読者になる」ボタンみたいなヤツですね。
再びダッシュボードの画面に戻って下さい。
ボタンの種類を選択
Push7では、3種類の購読登録のモジュールが用意されています。
ただし、はてなブログでは一番右側のNativeは使うことができません。
- ボタン：ブログ内の任意の場所に設置できる
- BOX：サイトを訪問した時に自動的に表示される
レイアウトの選択（ボタン）
今回は「ボタン」を設置してみます。
ボタンレイアウトとメッセージが選べますので、好きなものを選んで表示されているコードをコピーします。
これを自分のブログの好きな場所に貼り付ければ、購読ボタンの設置が完了です。
※「HTML編集」で貼り付けてください。
Push7のその他
最後に、Push7で他に使えそうな機能のご紹介と注意点です。
- 自動設定 > Welcome で通知登録時に自動配信する内容を設定できる
- 一般通知 > 新規プッシュ通知 で自由にプッシュ通知を配信できる
- 一部の非対応ブラウザは通知の受信に専用アプリのインストールが必要
- 新着記事の通知は最大30分のタイムラグがある。
他にもプッシュ型の通知サービスはありますが、はてなの読者登録は非はてなユーザーの方に対応できませんし、Feedlyは利用人口が少なかったりで、いまいち使い勝手の良いサービスがありませんでした。
Push7なら幅広い環境に対してプッシュ通知を配信できるので、どれか1つを選ぶならこれがベストだと思います。