【Pushnate】ワードプレスで「プッシュ通知」を実装する手順 2016年7月版

Pushnateを使ってワードプレスで「プッシュ通知」を実装しました。

備忘録として手順をまとめておきます。

ワードプレスのソースをカスタマイズするので、中級者向けの記事になります。

「プッシュ通知とは?」については、こちらの記事をご参照ください。

WEBサイトでもスマホアプリのような「プッシュ通知」ができるよ!

 

スポンサーリンク

事前準備

いろんなサイトを見て手順を確認しながら、作業していましたが、うまくいかず、どうも少し手順が変わったようです。

 

以前であれば、googleが開発者向けに提供していたサービス「Cloud Messaging」に登録してましたが、googleが新しく立ち上げた「Firebase」というプラットフォームへ登録する必要になりました。

 

すでに「Cloud Messaging」に登録している方は、「Firebase」からインポートができますので、移行ができます。

では、まず「Firebase」に登録作業をします。

 

スポンサーリンク

「Firebase」でプロジェクトを作成する

タイトルだけ見ると「なんのこっちゃ?」となりますが、必要な手順ととらえてください。

Firebaseへ行きます。

https://firebase.google.com/

「GET STARTED FOR FREE」をクリック

ここから日本語になりました。

「新規プロジェクトを作成」をクリック。


プロジェクト名:わかりやすい名前

国:日本

を入力して、「プロジェクトを作成」をクリック

以下画面は、もしかしたら、過去のデータをインポートした方のみかも。

「FIREBASEを追加」ボタンをクリック

次にプロジェクトの設定

自動的に、

公開名

プロジェクトID

が設定されます。

 

「クラウドメッセージング」をクリック


ここで表示される

サーバーキー

送信者ID

をメモしてください。

あとで使います。

Firebaseでの作業は、これで終了です。

 

pushnateでプッシュ通知を登録する

アカウント登録

pushnateへ行きます。

https://pushnate.com/

「今すぐ無料ではじめる」をクリック

FBアカウントがある方は、FBで登録するのが楽です。

新規サイトを追加する


サイト名:日本語で入力

サイトトップページURL:URLを入力

blogフォルダがサブフォルダの方は、blogのトップURLを記載します。

Google API KEY:firebaseでメモした「サーバーキー」を入力

「登録/更新」ボタンクリック後、サイト設定を確認

SDK用IDが発行されます。後で使うので、メモしておきます。

 

プッシュ通知を登録する

サイトが登録できたので、次に「新規プッシュ通知」を登録します。

ブログで新しい記事が更新されたときに、プッシュ配信するので、「RSS配信」を選びます。

RSSフィードURLは、ワードプレスであれば、
https://xxx.com/?feed=rss2

または

http://xxx.com/feed/

となります。

ブラウザのURLに直接入力して、HTMLタグが表示されればそのURLでOKです。

プッシュ配信の設置方法

ここから難易度が高くなります。

独自ドメイン型を選択し、

「pushnateSDK」をダウンロードし解凍します。

ダウンロードして、以下のファイルをコピーして、適当なフォルダへ置いてください。

manifest.json

pushnateSDK.js

manifest.jsonの中身を編集します。


{
  "name": "SiteNameExample",
  "short_name": "SiteNameExample",
  "start_url": "/",
  "display": "standalone",
  "gcm_sender_id": "GOOGLE_PROJECT_ID",
  "gcm_user_visible_only": true
}

name:英文字で適当な名前を入力します

short_name:同上

gcmsenderid:“”の間にfirebaseでメモした「送信者ID」の数字の羅列を入力します。

できたら、

manifest.json

pushnateSDK.js

をドメイン直下にアップロードしてください。

 

■メモ書き

今回、カスタマイズしたクライアントのブログは、サブディレクトリにブログのトップURLがある形式

https://xxx.com/blog/

でしたが、上記ファイルをblog直下に置いた場合、うまくいきませんでした。また時間があるときに再検証予定です。

 

 

ワードプレスのカスタマイズ ソースの編集

ここから、ワードプレスのソースを編集します。

※ワードプレステーマをカスタマイズする場合は、必ず子テーマを作成しておきましょう。

今回カスタマイズをしたのは、テーマ「stingerplus」ですが、他のテーマでもやり方はほぼ同じです。

ヘッダーの編集

header.phpの<head>タグ内に以下を挿入します。


<script src="https://s.pushnate.com/pushnateWorker.js"></script>
<link rel="manifest" href="/manifest.json">

function.phpでheadに挿入できる場合は、上記の代わりに、以下のようなソースを追記します。


if (!function_exists('my_pushnate_head')) {
     /**
      * pushnate登録
      */
     function my_pushnate_head() {
          echo '<script src="https://s.pushnate.com/pushnateWorker.js"></script>'."\n";
          echo '<link rel="manifest" href="/manifest.json">'."\n";
     }
}
add_action('wp_head', 'my_pushnate_head');

‘wp_head’の部分は、head.phpの中身を参照して、自身の組み込み関数名に変更してください。

フッターの編集

footer.phpの</body>直前に以下を挿入してください。


<!-- pushnate -->
<script type="text/javascript">
var Pushnate= Pushnate || [];
Pushnate.push(["init", { path: "/", site_id: "xxxxxxxxxxxxxxxxxxxxx" }]);
</script>

site_idの部分は、先ほどメモしておいたSDK用IDを入力します。

サーバーへUP

編集した、ソースをサーバーへUPしましょう。

function.phpを触っている場合は、ページが表示されなくなるリスクがありますので、メンテナンスモードなどのプラグインでユーザーが少ない時間に対応しましょう。

 

僕はテスト用の子テーマを作成して、

ワードプレス管理者のみがテスト用子テーマを実験できるプラグイン

Theme Test Drive

を入れて試しています。

これであれば、画面をメンテナンスモードにすることもなく、テーマのカスタマイズの実験ができるので、オススメです。

 

ソース目視確認

ブログを見て右クリックソースなどで、編集したソースが組み込まれているか目視で確認しましょう。

ヘッダーとフッター両方を確認します。

問題なければ、組み込み完了です。

 

通知POPUP確認テスト

グーグルクロームもしくは、Firefoxで、サイトを読み込んでください。

正しく実装できていれば、上記のようなPOPUPが表示されます。

Androidスマホでも同様に表示されます。

 

残念ながら、iOS、safariでは、対応していません。

自分でも通知を確認するため、「受信する」を選んでおきましょう。

 

ユーザーの立場で、ブログ通知テスト

まだ検証していないため、書けないですねm(_ _)m

うまくいっていれば、ブログを更新したタイミングで自分にも通知がきます。

あとで記事追記します。

 

まとめ

Firebaseなど新しい仕組みは、まだググっても記事がなかったため、少々手間取りました。

次の課題は、アクセス解析でプッシュ通知経由でのアクセスを確認できるのかを検証する予定です。