貧乏暇だらけ

筋トレとサプリのブログ

はてなブログで記事投稿時にプッシュ通知を配信する方法

f:id:aresta9:20191124190408p:plain
f:id:aresta9:20191124190247p:plain

プッシュ通知というのは、こんな感じの「ヒュポッ」って急に出てくるヤツです。

私はずっとこれをやりたくて、ブログに記事を投稿したら読者の方のスマホ・PCにプッシュ通知を配信したかったのです。

この度とうとうプッシュ通知が出来るようになりましたので、その方法をご紹介します。

アイコン
LINEが来た時に出るヤツ!

Push7への登録

f:id:aresta9:20191124192748p:plain
はてなブログで新着記事のプッシュ通知を配信するには、Push7というサービスを使います。

Push7にはいくつかのプランがありますが、通常の規模のサイトであれば無料プランでも十分使えますのでご安心を!

仮登録と本登録

f:id:aresta9:20191124150521p:plain

メールアドレスを入力して仮登録ボタンをクリック。

入力したメールアドレス宛に本登録用ページのURLが記載されたメールが届くので確認しましょう。

f:id:aresta9:20191124150435p:plain

受信したメールに記載されているURLを開くと、本登録ページが開きます。

ユーザーの種類は個人を選択しましょう。

本登録を完了すると、下記の画面に移ります。

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

f:id:aresta9:20191124150659p:plain

  • アプリケーション名:自分のブログの名前
  • URL:自分のブログのURL(httpとhttpsに注意)
  • アイコン:通知に表示したいアイコン
  • アプリケーションURL:読者が通知登録する時のページです。ブログのURLと似たような名称にすると良いです。

Push7の初期設定

f:id:aresta9:20191124150744p:plain

ここからは、先ほど登録した内容を実際に自分のブログに適用するための手順です。

まずは上記画像のアイコンをクリックしましょう。

bodyタグの貼り付け

f:id:aresta9:20191124151509p:plain

これがPush7のダッシュボード画面です。

中央の「初期導入を行いましょう」にある「こちらからコードをコピーして...」の「こちら」をクリックします。

f:id:aresta9:20191124151612p:plain

あなた専用のコードが表示されます。

表示されているコード全文をコピーして、貼り付けられる状態にします。

f:id:aresta9:20191124185056p:plain
はてなブログの「デザイン設定」を開きましょう。

先程コピーしたコードを、「フッタ」に貼り付けます。

あとは「変更を保存する」を押せば、初期設定は完了です。

RSSフィードの登録

f:id:aresta9:20191124191958p:plain

Push7のダッシュボード画面に戻って、左側メニューの「自動送信」を開きます。

RSS連携の画面が表示されますので、RSSリンクの欄を設定します。

  • ブログのURL + /rss

※このブログだと~~himadara.info/rss

購読ボタンの設置

次は、実際に読者の方にプッシュ通知の受信を登録してもらうためのボタンを設置します。

はてなブログでいうところの「読者になる」ボタンみたいなヤツですね。

再びダッシュボードの画面に戻って下さい。

ボタンの種類を選択

f:id:aresta9:20191124185429p:plainPush7では、3種類の購読登録のモジュールが用意されています。

ただし、はてなブログでは一番右側のNativeは使うことができません。

  • ボタン:ブログ内の任意の場所に設置できる
  • BOX:サイトを訪問した時に自動的に表示される

レイアウトの選択(ボタン)

f:id:aresta9:20191124192354p:plain

今回は「ボタン」を設置してみます。

ボタンレイアウトとメッセージが選べますので、好きなものを選んで表示されているコードをコピーします。

f:id:aresta9:20191124192547p:plain

これを自分のブログの好きな場所に貼り付ければ、購読ボタンの設置が完了です。

※「HTML編集」で貼り付けてください。

Push7のその他

最後に、Push7で他に使えそうな機能のご紹介と注意点です。

  • 自動設定 > Welcome で通知登録時に自動配信する内容を設定できる
  • 一般通知 > 新規プッシュ通知 で自由にプッシュ通知を配信できる
  • 一部の非対応ブラウザは通知の受信に専用アプリのインストールが必要
  • 新着記事の通知は最大30分のタイムラグがある。

他にもプッシュ型の通知サービスはありますが、はてなの読者登録は非はてなユーザーの方に対応できませんし、Feedlyは利用人口が少なかったりで、いまいち使い勝手の良いサービスがありませんでした。

Push7なら幅広い環境に対してプッシュ通知を配信できるので、どれか1つを選ぶならこれがベストだと思います。