BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. WordPress・その他CMS
  5. WPで記事を公開したら自動でWEBプッシュを送信する
by 漢ムラタ 漢ムラタ

WPで記事を公開したら自動でWEBプッシュを送信する

WPで記事を公開したら自動でWEBプッシュを送信する

前回の記事で「OneSignal」というサービスを活用して、購読ユーザーに対してWEBプッシュを送信する方法を書きましたが、毎回ブログを書くたびにOneSignalのサイトにアクセスして管理画面からWEBプッシュを送信するのは面倒くさいので、今回はブログを新規投稿した際に自動でWEBプッシュを送信するようにします。

サイトにWebプッシュを導入してユーザーにリアルタイムで告知しよう

OneSignal APIを利用する

OneSignalにもAPIが用意されていて、外部から様々な操作を行なう事が可能です。
今回もそのAPIを利用して自動で通知を送信するようにします。

新規記事公開時にアクションフックを設定

まずWEBプッシュを送信するにあたって、新規記事を公開した時に処理を行ないたいのでアクションフックを設定します。

add_actionで第一引数を「transition_post_status」とすることで、記事の状態が変化した際に「webpush_after_post」を実行するようにしています。

webpush_after_postの引数には変化前と変化後の記事のステータス状態が格納されているので、新しい状態が「publish(公開)」となっていて、尚且つブログ記事以外はWEBプッシュは不要なので投稿タイプが「post」であることを判断します。

そして尚且つ、変化前の状態が「draft(下書)」「pending(レビュー待ち)」「auto-draft(リビジョン)」「future(予約投稿)」「new(新規)」のいずれかの場合のみ記事情報を引数に「sendMessage」を実行させます。

OneSignalからWEBプッシュを送る

sendMessageは以下のような処理になります。

まずAPIを使うにあたって「APP ID」と「REST API KEY」が必要になりますので、定義しておきます。

APP IDとREST APIKEYはOneSignal管理画面の「SETTINGS」から「Keys & IDs」にて確認できます。

次にタイトルやURL、サムネイル画像などを定義しておきます。引数に記事情報が渡されているのでそこから引っ張ってくる形になります。

次に実際に送信するメッセージの本文を格納します。英語版と日本語版のメッセージを用意する必要がありますが、特に切り分ける必要がない場合は両方日本語で設定して大丈夫です。
今回は簡素に『「【記事タイトル】」を投稿しました』にしました。

同じくメッセージタイトルを格納します。省略した場合はリンク先のサイト名が自動で入るらしいのですが、一応ちゃんと指定しておきましょう。

最後に最終的な形に内容を整形していきます。
まずAPP IDが必要になるので「app_id」に冒頭で定義した「$app_id」を指定します。

次に送信先を決めます。通知登録したユーザーをOneSignalの管理画面で一括管理でき、ユーザーごとにグループ分けなどができるので、特定のグループに対してのみWEBプッシュを送るということもできるようです。
今回は全員に送りたいので「include_segment」に配列で「All」を指定します。

次はメッセージをクリック(タップ)した際のリンク先を指定します。
前述で定義した「$post_url」だけでもいいですが、Analyticsで計測できるように末尾に「?utm_source=notification&utm_medium=web_push」というパラメーターを付与しておきます。計測する必要がなければ不要です。計測の見方に関しては今回は説明を省きます。

「content」はメッセ―ジ本文になるので前述の「$content」を指定して、「headings」はタイトルなので同じく「$headings」を指定します。

「chrome_web_image」はサムネイル画像のURLを指定します。ただし、この設定はchrome及びandroid端末でのみ有効で、それ以外のブラウザでは2018年11月現在ではサムネイルは出力されません。早く全ブラウザで統一されればいいんですけどね…

最後に(恐らく)Android端末でのみ有効な指定を行ないます。
「android_background_layout」の指定で、通知メッセージ背景の様々な指定ができるそうです。
例えば今回指定している「headings_color」ではタイトルテキストの文字色を指定することができます。いきなり背景関係ないような気もしますが。
色指定に関しては「RGB」ではなく透明度の指定も含んだ「ARGB」にて指定します。冒頭2文字部分が透明度に関する指定になるそうです。
「ARGB」で検索したら透明度ごとの記述がすぐ出てくると思います。

メッセージの送信にあたって、JSON形式にする必要があるそうなので、「$fields」を「json_encode」関数に通してJSON形式にしておきます。

あとは残りの処理でごにょごにょしてWEBプッシュ完了です。詳しいことはちょっと自分も理解できていないですが・・・
OneSignal APIページの「Example Code」の項を参照しました。

最後に

OneSignal APIはかなり奥が深く、かなり細かく設定をいじれそうなので調べていくと色々楽しそうですね。
ただいかんせん全て英語で翻訳しながらになるので時間がかかってしょうがないのが辛いところ…
あとまだブラウザやスマホのOSによって仕様がまちまちなのも惜しいところですね。

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る