飯塚 寛樹
はじめに
microCMSでは、コンテンツの作成・更新・公開などをきっかけに、外部サービスへ通知を送るWebhook機能を提供しています。
Webhookを活用すると、コンテンツ公開後のビルド・デプロイ処理を自動化したり、Slackなどの別のサービスと連携したワークフローを構築したりできます。
この記事では、オウンドメディアやニュースサイト、キャンペーンサイトなどで「新着記事を公開したら読者へ通知したい」といったケースを想定し、Webプッシュ通知配信サービス「PUSH ONE」とmicroCMSを連携し、microCMSで記事を公開したタイミングでプッシュ通知を配信する流れを紹介します。
PUSH ONEとは
PUSH ONEは、Webサイトからプッシュ通知を配信できるサービスです。
Macユーザーの方であれば、Slackなどでメッセージが来た際に、デスクトップの右上に通知されるメッセージ、もしくはデスクトップ右上の日付をクリックした際に、通知センター上に表示されているメッセージというとイメージしやすいかもしれません。
プッシュ通知を利用すると、ユーザーのメールアドレスを知らない、専用のアプリを提供していない、ユーザーが対象のサイトを開いていない状況でも、ユーザーからブラウザ上で通知許可を得るだけで、更新情報やお知らせなどの通知を届けることができます。また、この通知をクリックした際に任意のページに遷移させることもできます。
たとえば、以下のような用途で活用できます。
- 新着記事やニュースの通知
- キャンペーン情報の告知
- 重要なお知らせの配信
- メディアサイトへの再訪促進
PUSH ONEでは配信セグメントを使った通知の出し分けも可能です。性別・年齢・地域などのユーザー属性に応じて通知先を分けることで、より関心の高いユーザーに適切な情報を届けやすくなります。
今回実現すること
今回の連携では、以下のような流れを実現します。
- microCMSで記事コンテンツを作成する
- 記事を公開する
- microCMSのWebhookが発火する
- PUSH ONE側でプッシュメッセージが作成される
- 読者にプッシュ通知が届く
microCMSをコンテンツ管理とプッシュ通知の起点とし、PUSH ONEを通知配信の仕組みとして使うことで、コンテンツ公開からユーザーへの通知までをスムーズにつなげられます。
事前準備
連携作業を行う前に、以下を準備します
- microCMSのアカウント
- PUSH ONEアカウント
- PUSH ONEを導入するWebサイト
- 通知を受け取る端末
通知を受け取る端末
PUSH ONEはスマートフォン、PC端末にプッシュ通知を配信できます。
今回はPC端末でプッシュ通知を受け取ります。
通知を受け取るPC端末でブラウザの通知を許可しておく必要があります。
Macの場合「システム設定 > 通知で検索 > 使用中のブラウザ」で通知許可状態を確認できます。
microCMS側の設定
まず、microCMS側でWebhookを発火させるための設定を行います。
PUSH ONEを導入するWebサイトを準備する
まずはPUSH ONEを導入するWebサイトを用意します。今回は、microCMSテンプレートの「シンプルなブログ」を利用します。
テンプレートを使うと、ブログ形式のAPIとフロントエンドを素早く用意できます。記事の公開操作を試しやすいため、Webhook連携の検証にも向いています。
この記事ではテンプレートを使ってWebサイトを立ち上げる部分は割愛します。また、ここからの手順は以下が対応済みであることを前提に進みます。
- テンプレート機能を使ってサイトを立ち上げ済みであること
- PUSH ONEのプロジェクトを立ち上げるまで完了していること
PUSH ONEをWebサイトに導入する
PUSH ONEをWebサイトに導入し、プッシュ通知を送信するために、立ち上げたWebサイトへの実装作業を行います。
実装に向けた作業は大きく以下の3つです
serviceworker.jsの配置- ブラウザプッシュタグの設置
- Webサイトへアクセスして通知許可ダイアログを確認する
詳細についてはPUSH ONEのマニュアルもご確認ください。
serviceworker.jsの配置
PUSH ONEの管理画面にログインし、ブラウザプッシュタグ設定画面でserviceworker.jsをダウンロードします。
ダウンロードしたserviceworker.jsは、ローカルにCloneしたmicroCMSテンプレート「シンプルなブログ」（Next.jsプロジェクト）内の、app/public/配下に配置します（app/public/serviceworker.js）。
ブラウザプッシュタグの設置
ブラウザプッシュタグは、PUSH ONEの管理画面にログインし、ブラウザプッシュタグ設定画面のスクリプトタグの値をコピーして使用します。
コピーしたスクリプトタグはapp/layout.tsxの<Footer />の下に配置します。今回はコピーしたものをそのまま使わずに、Next.jsのScriptコンポーネントに置き換えました。RootLayoutは最終的に以下になります。
export default async function RootLayout({ children }: Props) {
const tags = await getTagList({
limit: LIMIT,
});
return (
<html lang="ja">
<body>
<Header />
<Nav tags={tags.contents} />
<main className={styles.main}>{children}</main>
<Footer />
<Script
src="~"
strategy="afterInteractive"
charSet="utf-8"
data-bptoken="abcdefghijklmnopqrstuvwxyz"
data-iosdialog="on"
/>
);
}
serviceworker.jsとスクリプトタグ設置後、再デプロイします。
※serviceworker.jsやスクリプトタグの設置位置や方法は、利用しているフレームワーク等によって異なる場合があります。PUSH ONEのマニュアルを確認しながら進めてください。
通知許可ダイアログが表示されることを確認する
再デプロイ後、serviceworker.jsとブラウザプッシュタグを設置したページへアクセスし、通知許可を求めるダイアログが表示されれば実装完了です。
[許可するボタン]をクリックします。
Webhookを作成する
microCMSの管理画面からWebhookを作成します。
まずはWebhook設定画面を開きます。
- 左サイドバーの「ブログ」APIを選択する
- 右上の[API設定ボタン]をクリックする
- 左メニューの「Webhook」をクリックする
Webhook設定画面が開いたら[+追加ボタン]をクリックして、新規Webhookを作成します。
基本設定は下記の通り入力します。
- 識別名: pushone
- Webhook URL: PUSH ONEのAPIリファレンスを参照
- シークレット: 空欄で構いません
カスタムリクエストヘッダーは[＋ 追加ボタン]で以下の2つのヘッダーを追加します。
カスタムリクエストヘッダーのキー名は必ずX-から始める必要があります。
- Key：X-Account-Token ／ Value：PUSH ONEのアカウントトークン(PUSH ONEの管理画面より確認)
- Key：X-Service-Token ／ Value：PUSH ONEのサービストークン(ブラウザプッシュタグ設定画面のAccess Token)
通知タイミングは以下の4項目にチェックを入れます。その他の項目（公開終了・下書き・削除など）はチェック不要です。
- コンテンツの公開（管理画面による操作）
- コンテンツの公開（APIによる操作）
- コンテンツの公開（レビューによる操作）
- コンテンツの公開（予約設定による操作）
※通知タイミングは後から変更可能です。
設定右上のトグルスイッチが青色（オン）になっていることを確認してから[変更するボタン]をクリックして保存します。
ブログAPIにプッシュ通知用のカスタムフィールドを追加する
次に、microCMSのブログAPIをPUSH ONE連携のために編集します。
microCMSのWebhookは「コンテンツが公開された」というイベントを通知できますが、PUSH ONEで配信するための通知内容（タイトル・本文・画像・遷移先URL）や配信条件（セグメント、送る／送らない）は、記事ごとに別途用意して渡す必要があります。
そこで、microCMSのカスタムフィールドを使って、PUSH ONEに必要な情報をコンテンツと一緒に管理できるようにします。
カスタムフィールドは柔軟に項目を設計でき、フィールドの種類も豊富なため、たとえば通知送信のON/OFFをスイッチで切り替える、通知用の画像を指定するといったことが管理画面上で簡単にできます。
カスタムフィールドの作成
まず、左メニューのコンテンツAPIから「ブログ」を選択し、画面右上の「カスタムフィールド」をクリックし、右上の[＋ 追加ボタン]をクリックします。
「カスタムフィールドの基本情報を入力」画面が表示されるので、以下の通り入力し、「次へ」ボタンをクリックします。
- カスタムフィールド名： PUSHONE
- カスタムフィールドID： push
フィールドを追加
- フィールド①： push_enabled（真偽値）
・TRUE：プッシュ通知を行う ・FALSE：プッシュ通知をスキップする
- フィールド②： push_title（テキストフィールド）
プッシュ通知のタイトル
- フィールド③： push_body（テキストエリア）
プッシュ通知の本文
- フィールド④： push_image（画像）
・プッシュ通知の大きい画像に使用されます ・アイコンはデフォルト画像が使用されます
- フィールド⑤： click_url（テキストフィールド）
・プッシュ通知をクリックした際の遷移先URL
- フィールド⑥： segment_name（セレクトフィールド）←詳細設定が必要（下記参照）
・配信対象セグメント ・空の場合は全配信
segment_nameの「詳細設定」をクリックし、「選択肢」欄に以下を[＋追加ボタン]で登録します。
- 選択肢1：男性
- 選択肢2：女性
- 選択肢3：関東エリア
- 選択肢4：20代
レイアウト設定
「レイアウト」タブでフィールドの表示レイアウトを設定します。「2カラム」を選択し、[変更するボタン]で保存します。
- 左カラム：push_enabled / push_title / push_body / segment_name
- 右カラム：click_url / push_image
カスタムフィールド一覧画面に戻り、以下のような表示になっていることを確認し、作成完了します。
ブログAPIのAPIスキーマにカスタムフィールドを設定する
作成したカスタムフィールドをブログAPIのAPIスキーマに設定します。
ブログAPIで「API設定 > APIスキーマ」を開き、画面下部にある[+フィールドを追加ボタン]をクリックし、以下の通り設定します。
- フィールドID: push
- 表示名: PUSHONE
- 種類: カスタム - PUSHONE
設定後、[変更するボタン]をクリックし保存します。
次にブログAPI一覧を開き、既存のブログコンテンツ、または[+追加ボタン]をクリックします。
以下のようにPUSHONE連携用の、2カラム表示のカスタムフィールドが表示されていたら設定完了です。
PUSH ONE側の設定
microCMSとPUSH ONEを連携させるにあたり、PUSH ONE側であらかじめ以下の配信条件を設定する必要があります。
詳しい設定方法はPUSH ONEのマニュアル - プッシュメッセージの配信先をご確認ください。
基本的な条件
以下の4件を設定します。
- 端末（スマートフォン）
- 端末（PC）
- カスタムキー（有料会員）
- カスタムキー（無料会員）
属性データの条件
以下の5件を設定します。
- 男性
- 女性
- 20代
- 関東エリア
- 関西エリア
動作確認
全ての設定が完了したら、いよいよ動作確認です。実際にmicroCMSで記事を公開してプッシュ通知が届くか確認します。
1. microCMSでテスト用の記事を作成し公開する
ブログコンテンツ一覧画面の右上にある[+追加ボタン]をクリックし、記事を作成します。必要な項目を入力後、PUSHONE(カスタム)フィールドを入力します。
有効無効はオンにし、タイトル、ボディ、URLを入力します。今回セグメントは設定しません。
設定が終わったら右上の[公開ボタン]をクリックします。
※有効無効をオンにすると[公開ボタン]をクリックしたと同時にプッシュ通知が送信されます。送信してほしくないタイミングでは必ずこちらをオフにしてから公開するようにしてください。
2. PUSH ONEの配信一覧画面で通知メッセージが作成される
PUSH ONEの管理画面を開き、右メニューの「配信一覧」をクリックします。
Webhookが飛ぶと、配信メッセージ一覧に、プッシュ名が「webhook」の配信メッセージが作成され、1で設定したタイトルとメッセージが表示されていることを確認できます。
配信状況が「配信済み」になったら配信が完了しています。
3. プッシュ通知を受け取る
Macの場合、右上の通知センターに画像のようなプッシュ通知が表示されます。
このメッセージのイメージは、端末、OS、ブラウザにより異なります。Macの場合、カスタムフィールドで設定した画像は表示されません。
上の画像の通知の右側のアイコンはプロジェクトの設定編集画面で設定されている、デフォルトのアイコンです。
4. 通知をクリックし、想定した記事ページへ遷移する
通知をクリックするとブラウザが開き、設定したURLに遷移することを確認します。
通知配信に関する注意点・よくある問題
通知が届かない場合
もし、PUSH ONEの配信一覧にメッセージがあり、配信済みとなっているにも関わらず通知が届かない場合は、以下を確認してください。
- PUSH ONEのタグ、
serviceworker.jsが正しく設置されているか - microCMSのWebhookの通知タイミングが正しく設定されているか
- Webhookの通知先URLやPUSH ONEのトークンが正しいか
- PCの通知設定でブラウザ通知がオンになっているか
- 通知ダイアログで許可後30分経っているか(プッシュ通知が届くようになるまで30分ほどかかる可能性があります)
microCMSでコンテンツ公開後すぐにサイトに記事が反映されない場合
静的サイトをビルドし公開している場合は、記事公開後すぐにページが公開されるとは限らず、ビルドが完了する前にプッシュ通知が届く可能性があります。
この場合、ユーザーが通知をクリックしても対象の記事ページがまだないといった状況になる可能性があります。
このような構成では、ビルド完了後に通知を送れるように調整が必要です。
活用イメージ
microCMSとPUSH ONEを連携すると、コンテンツ公開を起点にしたさまざまな通知施策に活用できます。
新着記事通知
メディアサイトやオウンドメディアで新しい記事を公開したタイミングで、読者へ通知を送ります。
メールマガジンやSNS投稿と組み合わせることで、記事公開後の初速を高める施策として活用できます。
キャンペーン告知
期間限定のキャンペーンページを公開したタイミングで、対象ユーザーへ通知を送ります。
PUSH ONEのセグメント機能を使えば、キャンペーンに関心が高そうなユーザーに絞って通知することもできます。
重要なお知らせ
サービスのメンテナンス情報や重要な更新情報など、ユーザーに確実に届けたい情報の通知にも活用できます。
microCMSでお知らせコンテンツを管理し、公開時にPUSH ONEへ連携することで、情報更新と通知配信を一連の流れにできます。
まとめ
この記事では、microCMSのWebhookを使ってPUSH ONEと連携し、記事公開をきっかけにWebプッシュ通知を送る方法を紹介しました。
PUSH ONEと組み合わせることで、記事公開から読者への通知までを自動化でき、メディアサイトやオウンドメディアでタイムリーな通知や、再訪促進にも活用できます。
実運用では、通知を送るタイミングや配信セグメントの設計が重要です。特に、静的サイト生成などで公開後にビルドが走る構成では、記事ページが公開された後に通知が届くように調整しておくと安心です。
microCMSとPUSH ONEのWebプッシュ通知を組み合わせて、コンテンツをより多くの読者に届けましょう。
