TCDテーマをPWA化するプラグイン「TCD Progressive Web Apps」の使い方

Webサイトをスマホアプリのような操作感にし、プッシュ通知なども実現できる「PWA（Progressive Web Apps）」という仕組み。

WordPressサイトに実装できれば、サイトをアプリライクな動きで使っていただける上に、サイトの更新情報も効率よくお届けできます。

そこで今回は、WordPressサイトをPWA化できるプラグイン「TCD Progressive Web Apps」について、その導入方法と使い方をご紹介いたします。

TCD Progressive Web Appsとは

TCDテーマ専用に開発された、WordPressサイトをPWA化する無料プラグインです。サイトをPWA化することで、スマホアプリのような操作感を実現したり、サイトの更新情報をプッシュ通知でお知らせできるメリットがあります。

有料のTCDテーマをご利用中の方は、みなさん無料でダウンロード可能です。マイページよりプラグインをチェックしてみてください。

マイページ

機能概要・できること

• ブラウザで閲覧しているサイトをワンタッチでホーム画面に追加できる（Android端末限定）。
• サイト更新（記事公開）時にプッシュ通知を発信できる。
• 投稿タイプごとに通知設定のON/OFFを変更できる。
• 投稿タイプごとに通知する文言を変更できる。

導入方法

有料のTCDテーマをご利用中（ご購入済み）の方は、マイページから当プラグインを無料ダウンロードしていただけます。

該当する会員様のマイページトップにバナーが表示されており、「お知らせ一覧」や「ダウンロードと帳票」内に「TCD Progressive Web Apps」が追加されていますので、そこからダウンロード可能です。

※もしバナーが表示されていない場合は、ログアウトしてから再ログインしてみてください。

zipファイルがダウンロードされますので、ダッシュボードの「プラグインを追加」よりzipファイルをアップロードしてください。プラグインを手動でアップロードする手順です。

やり方がわからない方は、下記記事も参考にご覧いただけます。

無事インストールできたら、有効化して導入完了です。

TCD Progressive Web Appsの使い方

プラグインを有効化したら、ダッシュボードの左側に「PWA設定」という項目が追加されます。各オプションごとにご紹介いたします。

基本設定

まずは基本設定を行います。必須の設定です。

サイトのSSL化（HTTPS化）とサイトアイコンの設定が必須なので、最初に済ませておきましょう。

SSL化はサイトのセキュリティ対策です。PWAの利用の有無に限らず、設定しておくのがおすすめです。

サイトアイコンは、ホーム画面に追加された際などに使用されます。

それぞれ設定が済んだら、次に進んでください。

A2HS（Android端末限定）

A2HS（Add to Home Screen）とは、ブラウザで閲覧しているサイトをタップして、ホーム画面に追加する機能です。こちらでその設定を行います。

利用する場合は、上記イメージのような専用のフッターバーを表示できるので、各所のテキストや文字色、背景色等を設定します。

iPhone（iOS）は、A2HSに対応していないので、代わりに任意のリンク先URLを登録しておけます。iPhoneでは、ブラウザからホーム画面に追加するのに一手間かかるので、そのやり方を解説したページにリンクしておくのもありです。

下記URL（当記事の「iOSでサイトをホーム画面に追加する方法」）を入力欄にコピペして、そのままご利用いただいても問題ないです。

1. ブラウザのツールバーにある「共有アイコン」をタップ
2. 展開されるメニューから「ホーム画面に追加」をタップ
3. 名称を入力して、「完了」をタップ

の3ステップでホーム画面に追加できます。

Webプッシュ通知

ブラウザを経由して、PCやスマホに通知を送れる機能です。

基本設定

プッシュ通知機能を使うには、外部サービス「OneSignal」との連携が必要になります。

「OneSignal App ID」と「OneSignal API Key」の入力が必要ですので、下記記事を参考にOneSignalの初期設定を行なってください。

OneSignalの初期設定が済んだら、APIキーをコピペして設定完了です。

プッシュ通知の自動送信設定

基本設定（APIキーの入力）が終わったら、プッシュ通知をどのタイミングで行うかを設定します。

お使いのTCDテーマの投稿タイプごとに、通知を有効化できます。

「ブログを更新した時に通知したい。」
「新サービスが登場した時に通知したい。」

というように、サイトの運用方針に合わせて設定可能です。

通知時の文言もそれぞれ変更できます。

上記は、

1. 送信タイトル：「最新情報をお知らせ！」
2. 送信メッセージ：「新しい記事が公開されました。」

と登録した例です。

iOSの場合は、❶、❷の間に「from “OneSignal側で登録したサイト名”」が表示される仕様です。

OneSignalの設定を参考にご確認ください。ご自身のサイト名を登録しておけば、特に問題ないでしょう。

WordPressサイトをPWA化しておこう

TCDテーマをPWA化するプラグイン「TCD Progressive Web Apps」の使い方をご紹介しました。

WordPressサイトをPWA化しておけば、お客さん（訪問者）側でサイトをホーム画面に追加しやすくなったり、サイトの更新情報をリアルタイムでお届けすることが可能です。

ブログやメディア系のサイトはもちろん、新商品公開時に通知するように設定すれば、ECサイトとも相性がいいです。TCDテーマユーザーの方は、ぜひご活用ください。マイページから無料ダウンロード可能です。

マイページ