CocoonのAMPページにプッシュ通知購読ボタンを設置する方法

AMPのコンポーネント amp-web-pushを使用して、OneSignalのWebプッシュ通知購読ボタンをCocoonを使用したWordPress サイトのAMPページに搭載する方法を紹介します。

OneSignalのAMPページのプッシュ通知購読ボタンとは
OneSignal Web プッシュ通知設定方法

OneSignalのAMPページのプッシュ通知購読ボタンとは

以下は、AMPページにおけるOneSignalのAMP Webプッシュ通知購読機能のデモです。記事をスクロールダウンしていくと、記事下にプッシュ購読ボタンが表示されます。

現状、AMPのWebプッシュ通知購読機能は、Androidのみ対応可能です。iOSは将来サポートされる予定です。（Apple側の判断と計画によります。）

OneSignal Web プッシュ通知設定方法

WordPress OneSignal プラグインの設定ページ、または、OneSignalのWebプッシュアプリから、アプリ IDを入手します。アカウントとWebプッシュアプリの作成がまだの場合は、本作業の前にアカウントを作成して、サイトにプッシュ機能の搭載設定を行う必要があります。

OneSignalは、WordPressのプラグインを提供しています。プラグインを使用すると、簡単にプッシュ機能を搭載することができます。アカウントの作成や通常ページでのプッシュ機能の設定方法とAPP IDの取得方法は、以下の記事を御覧下さい。

WordPress サイトにプッシュ通知機能を搭載する方法 - ブロギングライフ

サイトがユーザーと繋がりを深めるための機能は様々なアプローチ、サービスがあります。ユーザーとの交流を促進する手段の1つがプッシュ通知です。プッシュ通知はモバイルアプリで広く普及していますが、ウェッブでのプッシュ通知を備えているサイトもあります。FacebookやTwitterのパソコンでのプッシュ通知を利用している人は...

AMP Web Push スクリプトの設置

AMPページでプッシュ通知購読機能を動作させるためには、AMPページの<head>タグ内に”amp-web-push”のスクリプトファイルを設置する必要があります。

CocoonのAMPページ <head>タグ内へのコードの設置は、子テーマを編集して行います。

テンプレートファイルの編集を行う場合は、保守性に優れている子テーマで作業を行うことが推奨されます。Cocoonの子テーマをダウンロードしていない場合は、先に子テーマの設定を行って下さい。

WordPress メニュー「外観」から「テーマの編集」をクリックすると、テンプレートの編集ページが表示されます。ページ右側に表示される「テーマファイル」の下にテンプレートファイルとディレクトリーが縦に並んで表示されています。その中の”temp-user”ディレクトリーをクリックし、表示されるテンプレートファイルの中から、”amp-head-insert.php”を選択します。

“amp-head-insert.php”は、AMPページの<head>タグ内にコードを挿入するためのテンプレートファイルです。

以下のスクリプトコードをコピーして、「ログインユーザーも含めてカウントする場合は以下に挿入」の下に貼り付けます。

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

コードの挿入を確認して、ページ下の「更新」ボタンを押してファイルを更新保存します。

プッシュ通知拡張機能プロパティファイルをルートにアップロード

以下の二つのAMPプッシュ通知設定用のファイルをダウンロードして、サイトのルートにアップロードします。

<body>タグ直下に設定コードを追加

以下のコードのYOURDOMAIN.COMを設定するサイトのドメインに変更し、YOUR-APP-IDにOneSignalのWebプッシュアプリのIDに置き換えて、コードをコピーします。

<amp-web-push
id="amp-web-push"
layout="nodisplay"
helper-iframe-url="https://YOURDOMAIN.COM/amp-helper-frame.html?appId=YOUR-APP-ID"
permission-dialog-url="https://YOURDOMAIN.COM/amp-permission-dialog.html?appId=YOUR-APP-ID"
service-worker-url="https://YOURDOMAIN.COM/OneSignalSDKWorker.js?appId=YOUR-APP-ID"
></amp-web-push>

WordPress管理画面に戻り、テーマの編集ページの右側に表示されるテーマファイルの一覧の中から、”amp-body-top-insert.php”をクリックします。ファイルのソースコードが編集欄に表示されます。

「ログインユーザーも含めてカウントする場合は以下に挿入」の下に、コピーしたWebプッシュ通知機能設定コードを貼り付けます。作業内容を確認して、ページ下の「更新」ボタンを押してファイルを保存します。

記事下にプッシュ通知購読ボタンを設置

プッシュ通知購読ボタンと購読解除メッセージの表示を行うウィジェットを、AMPページに設置します。

ウィジェットの設置位置は、以下の様なユーザーエクスペリエンス、ユーザーフローの理由から記事下（メインコンテンツの後）が推奨されています。

　ウィジェットは、AMPの仕様上、スペースが予め必要となります。購読済みのユーザーに対しても、ウィジェットのスペースを埋めて表示することはできません。ウィジェットをページ上部などに設置すると、購読中、非購読を問わずすべてのユーザーに対してウィジェットが表示され、余分なスクロールを強いることになります。
　サイトやコンテンツの価値をユーザーが理解した上で、プッシュ通知の購読を尋ねるのが妥当な流れです。記事の終わりに購読、非購読のボタンを設置するのは、ユーザーにとって自然な位置です。
デフォルトのAMP Webプッシュ通知ウィジェットは、デフォルトではプッシュ通知購読ボタン、購読済みのユーザーには購読を止めるメッセージが表示されます。ボタンが記事の上や途中にあると誤タップする可能性があります。

プッシュ通知購読ボタンのスタイル設定コードをAMPのCSSに追加

以下のコードをコピーし、AMPページの<head>タグ内（通常CSSの場所）に設置します。

<style amp-custom>
amp-web-push-widget button.subscribe {
display: inline-flex;
align-items: center;
border-radius: 2px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 10px 15px;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: #4A90E2;
color: white;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

amp-web-push-widget button.subscribe .subscribe-icon {
margin-right: 10px;
}

amp-web-push-widget button.subscribe:active {
transform: scale(0.99);
}

amp-web-push-widget button.unsubscribe {
display: inline-flex;
align-items: center;
justify-content: center;
height: 45px;
border: 0;
margin: 0;
cursor: pointer;
outline: none;
font-size: 15px;
font-weight: 400;
background: transparent;
color: #B1B1B1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
</style>

WordPress管理画面に戻り、テーマの編集ページの右側に表示されるテーマファイルの一覧の中から、”amp.css”をクリックします。ファイルのソースコードが編集欄に表示されます。

「AMP用のスタイルを書く」の下に上でコピーしたコードを貼り付けます。作業内容を確認して、ページ下の「更新」ボタンを押してファイルを保存します。

プッシュ通知購読ボタン表示コードを記事下に設置

以下のコードをコピーします。

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="245" height="45">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
class="subscribe-icon"
width="24"
height="24"
layout="fixed"
src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ic3Vic2NyaWJlLWljb24iIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMS44NCAxOS44ODdIMS4yMnMtLjk0Ny0uMDk0LS45NDctLjk5NWMwLS45LjgwNi0uOTQ4LjgwNi0uOTQ4czMuMTctMS41MTcgMy4xNy0yLjYwOGMwLTEuMDktLjUyLTEuODUtLjUyLTYuMzA1czIuODUtNy44NyA2LjI2LTcuODdjMCAwIC40NzMtMS4xMzQgMS44NS0xLjEzNCAxLjMyNSAwIDEuOCAxLjEzNyAxLjggMS4xMzcgMy40MTMgMCA2LjI2IDMuNDE4IDYuMjYgNy44NyAwIDQuNDYtLjQ3NyA1LjIyLS40NzcgNi4zMSAwIDEuMDkgMy4xNzYgMi42MDcgMy4xNzYgMi42MDdzLjgxLjA0Ni44MS45NDdjMCAuODUzLS45OTYuOTk1LS45OTYuOTk1SDExLjg0ek04IDIwLjk3N2g3LjExcy0uNDkgMi45ODctMy41MyAyLjk4N1M4IDIwLjk3OCA4IDIwLjk3OHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=">
</amp-img>
プッシュ通知を購読する
</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="230" height="45">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">プッシュ通知を非購読する
</button>
</amp-web-push-widget>

上のコード内の「プッシュ通知を購読する」、「プッシュ通知を非購読する」のメッセージはお好みに合わせて変更して下さい。

WordPress 管理ページの「外観」から「ウィジェット」をクリックします。カスタム HTML または、[C] テキスト（モバイル用）のウィジェットを、投稿本文下を選んで「追加」ボタンを押します。

カスタムHTML （またはテキスト）ウィジェットの入力欄に上でコピーしたコードを貼り付けます。

ウィジェットの下部の「表示設定」を押します。

ウィエットの表示の欄を「チェック・入力したページで表示」を選択します。続いて、「ページ」のタブをクリックし、AMPページにチェックを入れます。

設定を確認の上、「保存」ボタンを押します。

上の設定を行うことで、ウィジェットの表示条件をAMPページのみに設定することができます。

モバイルとパソコン、両方のAMPページでウィジェットを表示させたい場合は、カスタム HTMLウィジェットを使用します。（実際には、パソコンページでAMPページを見るユーザーは非常に少ないです。）基本的には、Cocoonが提供する「[C] テキスト（モバイル用）」のウィジェットを使うので実質的に十分です。