プログレッシブウェブアプリが、ユーザーとウェブサイトとの関わり方を一変させています。技術的にいえば、モバイルアプリと従来のウェブサイトのいいとこ取りです。WordPressにPWAの技術を取り入れることで、サイトのレベルを引き上げ、より魅力的でアクセスしやすく、読み込みの速いサービスが実現します。
つまり、企業、ブロガー、デジタルクリエイターなどであれば、オーディエンスとのつながりを深め、これまで以上に多くのコンテンツを提供できるようになります。
この記事では、WordPressウェブサイトにPWAの技術を実装する方法をご紹介します。柔軟性の高いウェブアプリケーションを構築し、さらにそれを最適化する方法を見てみましょう。
それでは、本題に進みます。
PWAとは
プログレッシブウェブアプリは、従来のレスポンシブウェブサイトの機能と、機能豊富なモバイルアプリケーションの機能を組み合わせたテクノロジーの一種です。
Mozillaによると、PWAは最新のウェブ機能を使い、ウェブブラウザでアクセスできるアプリのようなウェブインターフェースを提供するものとされています。
PWAを支える3つの重要な技術コンポーネントは以下の通りです。
- サービスワーカー：PWAは、ウェブサイトから独立して実行されるスクリプトを使用し、ウェブページでのみ実行可能な同様のアクションを実行します。例えば、サービスワーカーはプッシュ通知、バックグラウンド同期、オフラインでの利用を可能にします。後者が可能なのは、サービスワーカーがプロキシネットワークとして機能するためです。PWAはコンテンツをキャッシュし、接続がないときにも配信できるため、不確実なネットワーク状況でも優れた信頼性を実現します。
- ウェブアプリのマニフェスト：マニフェストは、アプリケーションを記述するJSONファイルであり、スマートフォン上でホーム追加アイコンとして表示できます。このファイルは、開始URL、表示設定、説明、アイコンなど、ユーザーシステムとのインタラクションを担います。
- HTTPS：この最後のコンポーネントは最も重要なものの一つです。ユーザーエクスペリエンスには直接貢献しませんが、HTTPSはセキュリティを高め、データの暗号化と情報の匿名化によって訪問者のプライバシーを保護します。
この3つの技術を組み合わせることで、PWAがホームページに完全に統合され、高速でインストールを伴わないウェブエクスペリエンスが手に入ります。
Cafe Javasのウェブサイトとアプリでは、これらすべてのピースが見事に組み合わされているのがわかります。
TechAheadによって開発されたこのPWAは、ウェブサイトとモバイルアプリをシームレスにつなぐことに成功しています。これにより、利用者は従来のウェブサイトのUXにイライラすることなく、ウェブブラウザから簡単に注文を行うことができます。
WordPressサイトPWA化の魅力
WordPressサイトをPWAに変えることで、デジタルプレゼンスとユーザーエクスペリエンスを大幅に向上させることができます。そのメリット詳しくご紹介します。
1. ユーザーエンゲージメントの向上
PWAの利点の1つが、プッシュ通知を送信できることです。これにより、最新のニュースやお知らせを送ったり、サイト訪問者との距離を縮めることができます。この機能は、定期的な訪問やより多くのインタラクションを促します。
2. サイトスピードの向上
PWAは非常に高速です。ほとんどのアセットがキャッシュされ、サービスワーカーによって素早く読み込まれます。サイト訪問者が高速ネットワークプロバイダーを利用していなくても、WordPressを利用したPWAは瞬時に読み込まれます。このスピードアップにより、ユーザーエクスペリエンスが向上するだけでなく、検索エンジンのランキングにもプラスに働きます。
3. オフライン機能
おそらくPWAの最も魅力的な特徴が、オフラインまたは低速ネットワーク上でも機能することです。これは、主要リソースをキャッシュするサービスワーカーにより実現し、利用者はインターネット接続がなくても以前に訪問したページにアクセスすることができます。
4. 従来の制限が適用されない
従来のウェブサイトとモバイルアプリケーションには、それぞれ限界がありました。例えば、ウェブサイトはネットワークの質に大きく依存し、プッシュ通知やオフラインアクセスといったネイティブアプリの機能はありません。一方、モバイルアプリケーションは、ユーザーが定期的にアップデートをダウンロードしてインストールする必要があります。
PWAにはこのような欠点はありません。
WordPressサイトをPWAに変換することは、単なるサイトの改善を意味しません。どのようなデバイスでも、どのようなネットワークでも動作し、見栄えのいい、高速かつ魅力的なプラットフォームを通じて、利用者とサイトとの関わり方を変えることになります。
WordPressでのPWA開発の前提条件
WordPressでPWAを構築するには、以下のことを理解しておく必要があります。
- UXデザイン：UXデザインの原則を出発点として、PWAをユーザーフレンドリーで、人々が使いたくなるようなものにすることが重要です。
- HTMLとCSS：ページをアレンジし、視覚的に魅力的でレスポンシブなものにする必要があります。そのためには、ウェブデザインの構成要素であるHTMLとCSSの知識が必要です。
- PHP：WordPressはPHPで構築されているため、テーマやプラグインを調整し、PWAにその他の動的コンテンツ機能を追加するには、このサーバーサイドスクリプト言語を使いこなせる必要があります。
- JavaScript：JavaScriptは、PWAとのインタラクティビティ、オフライン機能のためのサービスワーカーとの連携、プッシュ通知などの複雑な機能の追加に必要です。
- WordPress：API、テーマ、プラグインのカスタマイズ、コンテンツ管理、自由に使えるWordPress固有のPHP関数など、WordPressのあらゆる側面がどのように機能するかを理解していると、開発プロセスがずっと楽になります。
WordPressのおすすめPWAプラグイン
WordPressにはPWAプラグインがあります。検索すると、アプリのような機能性、高速読み込み、その他の優れた機能でウェブサイトを強化できるさまざまなツールがいくつも見つかります。
PWAを素早く構築したい方のために、ワークフローをスピードアップできるWordPress PWAプラグインをいくつかご紹介します。
1. Super Progressive Web Apps
SuperPWAによって開発されたSuper Progressive Web Appsプラグインを使って、ウェブサイトを簡単にPWAに変えることができます。ウェブ技術とモバイルアプリ技術の長所を融合させたこのプラグインは、オフラインでの利用、ほぼ瞬時の読み込み、ホーム画面上のショートカットからのアクセスなどを可能にします。
長所
- アプリのような機能を追加し、オフラインでもコンテンツを提供できるようにすることで、サイト訪問者数、エンゲージメント、その他のKPIを増加させることができる。
- 読み込み時間の短縮やデバイスへの負荷の軽減による優れたパフォーマンスは、ウェブサイトのSEO価値を高めることもできる。
- ユーザーフレンドリーな設定により、セットアップと構成が簡単。
短所
- 特定のテーマやプラグインと互換性がない場合があり、適切に動作させるためにさらに調整する必要がある。
- 高度なオプションを活用するには、ウェブテクノロジーをより深く理解する必要がある。
価格設定
SuperPWAはフリーミアムモデルを採用しています。つまり、コア機能一式は無料で利用でき、アップグレードによって追加の機能が利用可能になります。SuperPWAのアップグレードは99ドルから提供されています。
2. PWA for WP & AMP
PWA for WP & AMPプラグインは、アプリのようなインターフェース、AMP PWAの完全な互換性、マルチサイトのサポート、UTMトラッキング、オフラインでの作業の可能性でユーザー体験を豊かにします。また、サービスワーカー開発、アプリバナー、ウェブアプリマニフェスト、カスタムスプラッシュ画面もサポートしています。
長所
- あなたのウェブサイトをホーム画面にインストールできるようにすることで、エンゲージメントを向上。
- AMPをサポート。
- オフラインでのインタラクションのためのキャッシュとアナリティクスがサポートされている。
短所
- AMP統合によってセットアップがやや複雑になっている。
3. PWA
PWAプラグインは、サービスワーカー、ウェブアプリマニフェスト、HTTPSサポートなど、PWAに不可欠な要素に重点を置いています。PWAは読み込み時間を短縮し、モバイルでアプリのような体験を提供することを目的としています。
長所
- このプラグインの目標は最終的にWordPressコアの一部になることで、質の高いコーディングと互換性が期待できる。
- PWA機能を採用するシンプルな手法として、ウェブサイトの信頼性、スピード、エンゲージメントを高める。
短所
- 高度な機能はこのプラグインではカバーされておらず、実現するには追加のプラグインや独自の開発が必要になる。
4. Instantify
Instantifyは、Progressive Web Apps (PWA)、GoogleのAccelerated Mobile Pages (AMP)、Facebook Instant Articles (FBIA)という3つの主要な機能を1つのプラットフォームに統合することで差別化を図っています。この組み合わせにより、ウェブサイトをアプリのような雰囲気に変え、モバイルウェブの読み込み時間を短縮し、ウェブサイトのコンテンツをSNSに開放できます。
長所
- PWA、AMP、FBIAを組み合わせることで、さまざまなプラグインを扱う心配がなくなる。
- AMPページは検索で優先されるため、検索エンジンでのサイトパフォーマンスが向上し、視認性が向上する可能性あり。
- プッシュ通知などでユーザーを引き込み、最適化された広告とFacebook Instant Articlesでコンテンツをより効率的に収益化することが可能。
短所
- 無料のトライアルやプランがないため、お金を払う前にプラグインを試したい人にとっては懸念事項。
- 広範な機能が用意されているものの、適切に設定しないと、このプラグインは、テーマと干渉する可能性あり。
価格設定
Instantifyは買い切り料金29ドルです。これには6ヶ月間のサポートが含まれており、さらに21ドルで延長することができます。この製品には無料トライアルや返金保証はついていないので、購入前に目的や互換性をよく検討することをおすすめします。
WordPressプラグインでPWA化する方法─具体的な手順
WordPressサイトをPWA化することで、ウェブサイトのモバイル体験を改善し、より速く、信頼性が高く、魅力的なものにすることができます。すでにご説明したように、PWAは最新のウェブ関連機能を使用して、アプリのような体験をブラウザから直接ユーザーに提供するものです。
続いては、先のプラグインの1つを使ってWordPressサイトをPWA化する方法をご紹介します。
ステップ1. PWAの計画
技術的な要素を議論する前に、PWAの機能と目標を計画する必要があります。サイトのどの部分がオフラインアクセスの恩恵を受けられるか、ユーザーがネットワーク接続なしで実行できるアクションは何か、PWAをホーム画面でどのように見せたいかを検討しましょう。計画を立てることで、PWAを使って効率的にユーザーエクスペリエンスを改善することができます。
ステップ2. 適切なプラグインの選択
先に触れたように、WordPressサイトをPWA化するプラグインはいくつもあります。
実際のサイトの状況や目的に基づいてそれぞれを評価しましょう。シンプルでわかりやすいソリューションをお探しなら、Super Progressive Web Appsがいいかもしれません。複数のツールの統合が必要な場合は、Instantifyが優れた選択肢です。
今回の例では、Super Progressive Web Appsを使用します。
ステップ3. 選択したプラグインのインストール
プラグインを選んだら、WordPressサイトにインストールします。WordPress管理画面に移動し、「プラグイン」＞「新規追加」と進み、プラグインの名前で検索し、「今すぐインストール」をクリックすることでインストールできます。インストール後には、「有効化」をクリックします。
ステップ4. 設定を行う
有効化後、WordPress管理画面の「設定」メニューでプラグインの設定画面を開くことができます。
以下のようなPWAの様々な側面を設定できます。
-
- App name：ホーム画面に表示されるPWAの名前
- Description：アプリの簡単な説明
- Start page：PWAが最初に読み込むページ
- Theme color：ツールバーの色
- Background color：スプラッシュ画面の背景色
- Icon：PWAのアイコンとなる画像
設定が完了したら、「Save Settings」をクリックします。
ステップ5. PWAをテストする
設定が完了したら、さまざまなデバイスでPWAをテストすることが重要です。Chrome DevToolsや同様のツールを使って様々なデバイスをシミュレートするか、サイトをホーム画面に追加してモバイルデバイスで直接テストしてください。
例えば、iOSデバイスを使用している場合、ウェブサイトにアクセスする前にモバイルブラウザのキャッシュをクリアする必要があります。
iPhoneのSafariで画面下の「共有（四角から矢印が飛び出したマーク）」ボタンをタップし、「ホーム画面に追加」を選択します。ブラウザを閉じ、ホームス画面に追加されたアプリのアイコンを開きます。ウェブサイトを数ページ閲覧した後、インターネットから切断し、再度同じページにアクセスしてみてください。
ページが読み込まれれば、PWAは機能しています。
WordPressでPWAをゼロから構築する方法
より多くのコントロールとカスタマイズを求める方には、WordPressサイトを手作業でPWAに変換する方法が望ましいかもしれません。
この方法はより技術的で、これを実践するにはウェブ開発の原則をよく理解している必要があります。
ステップ1. HTTPSの確保
HTTPSでのサイト保護は重要です。PWAにとって欠かすことのできない要素です。HTTPSがウェブサイトと訪問者間のデータを暗号化し、データ漏洩などから保護します。
お使いのホスティングサービスやサーバーにSSL証明書が付属していない場合は、Let’s Encryptなどから無料のSSL証明書を取得することができます。
インストール方法はホスティングプロバイダーにより異なります。多くの場合、ワンクリックで簡単にSSL証明書をインストールできます。具体的な手順については、ホスティングサービスやサーバーのサポート文書をご確認ください。
SSL証明書をインストールしたら、HTTPからHTTPSにリダイレクトして、すべてのウェブサイトのトラフィックでHTTPSが使用されるようにします。これは、Really Simple SSLなどのWordPressプラグインを使用するか、手動での編集に慣れている場合は、サイトの.htaccessファイルを編集することで実行できます。
2. ウェブアプリマニフェストの作成
ウェブアプリマニフェストは、PWAがユーザーにどのように表示され、どのように起動するかを制御するJSONファイルです。アプリの名前、アイコン、開始URLなどの設定がこれに含まれます。
まず、manifest.jsonという名前のJSONファイルを作成します。このファイルには、アプリの名前（name）、短い名前（short_name）、開始URL（start_url）、表示タイプ（display）、背景色（background_color）、テーマ色（theme_color）、アイコン（icons）などの情報が記載されます。
MDN Web Docsによると、コードはおおよそ以下のようになります。
{
"name": "アプリの名前",
"short_name": "アプリの短い説明",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}WordPress サイトのテンプレートのheadセクションにmanifest.jsonファイルへのリンクを追加します。
その後、GoogleのLighthouseなどのツールを使用して、ウェブアプリのマニフェスト実装をテストおよび検証します。
3. サービスワーカーの実装
サービスワーカーは、ウェブアプリと外部との間のプロキシとして機能します。オフライン機能、プッシュ通知、リソースキャッシュに不可欠な存在です。
サービスワーカーを作成するには、JavaScriptファイルを新規作成します。service-worker.jsと名付け、WordPressテーマのルートディレクトリに置きます。このファイルには、リソースのキャッシュ、ネットワークリクエストのインターセプト、オフライン機能の管理などのロジックが含まれます。
ウェブアプリのJavaScriptからサービスワーカーの登録を行います。通常、これはウェブページで実行するメインのJavaScriptファイルで実装します。
Borstchからサービスワーカーを登録する方法の一例を以下にご紹介します。
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// 登録完了
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// 登録失敗
console.log('ServiceWorker registration failed: ', err);
});
});
}service-worker.jsファイル内に、静的アセットのキャッシュ、フェッチリクエストのインターセプト、オフライン時のキャッシュからのコンテンツ提供のロジックを実装します。
以下は、複数のアセットをキャッシュする基本的な例です。
const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});サービスワーカーの動作を確認するために、テストは必須です。Chrome DevTools の「アプリケーション」パネルを使用して、登録済みのサービスワーカーやキャッシュしたアセットなどを検査することができます。
WordPress PWAの最適化
速度、信頼性、機能性を確保するために、最後にWordPress PWAの最適化をすることが欠かせません。キャッシュ戦略、リソースの優先順位付け、接続速度に対応する柔軟な読み込みを中心に、いくつかの高度な最適化テクニックを見てみましょう。
キャッシュ戦略
Smashing Magazineによると、キャッシュはPWA最適化の重要な要素です。リソースのコピーを保存することで、アプリの読み込みを高速化できます。キャッシュファースト戦略を実装することで、アプリがネットワークへの接続を試みる前にキャッシュからリソースを取得するようになります。このアプローチは、頻繁に変更されない静的アセットに特に効果的です。
サービスワーカーを使用して、インストール段階で重要なアセットをキャッシュします。これにはアプリのシェル（HTML、CSS、JavaScript）や静的リソースが含まれます。
動的コンテンツについては、stale-while-revalidate のような戦略を検討することができます。これによりキャッシュしたコンテンツを最初に提供し、その後サーバーからの新しいコンテンツを使ってキャッシュの中身を更新可能です。
リソースの優先順位付け
リソースそれぞれに違いがあります。最初のレンダリングに重要なものもあれば、遅延読み込みでレンダリングできるものもあります。アプリの読み込みパフォーマンスを分析し、どのリソースが必須で、最初に取得されるべきかを特定することが肝要です。preloadディレクティブとprefetchディレクティブを使って、これらの優先順位をブラウザに知らせることができます。
- preload：既存のページで必要になるリソースに使用します。 読み込み処理の早い段階でそのリソースを取り込むようにブラウザに指示します。
- prefetch：その後のナビゲーションで必要になる可能性のあるリソースに使用します。ブラウザがアイドル状態のときに、そのリソースをフェッチするように指示します。
アダプティブローディング
アダプティブローディングは、ユーザーのデバイス性能とネットワーク状況に基づいてアプリのコンテンツと機能を調整します。この技術により、低速または不安定なネットワーク上でも、PWAが優れたエクスペリエンスを確保できるようになります。
機能検出を実装することで、ユーザーのデバイスに基づいて異なるアセットを配信できます。例えば、高速接続のユーザーには高解像度の画像を、低速接続のユーザーには小さく圧縮した画像を提供するといった具合です。
ネットワーク情報APIを使用してユーザーの接続速度を検出し、それに応じてアプリの動作を調整することができます。例えば、低速回線では必要なコンテンツのみを読み込み、重要でないリソースは回線が改善するまで表示しないようにすることもできます。
Googleの基準を維持する
WordPressサイトをPWAに変換することは、モバイルユーザーエクスペリエンスを引き上げる優れた手法です。しかし、これを効果的に行うにはGoogleの定めるPWAの標準を遵守する必要があります。
GoogleのPWA標準は、セキュリティ、ユーザーエクスペリエンス、アクセシビリティを重視しています。
- サイトはHTTPSを使用し、モバイル端末でレスポンシブでなければならない
- アプリのURLへのオフラインアクセスを許可し、ホームスクリーンに追加する機能のメタデータを用意すること
- 読み込みが速く、複数のブラウザ間で機能し、ネットワークに依存することなくスムーズなページ遷移を実現すること
- すべてのページが一意のURLを維持すること
まとめ
プログレッシブウェブアプリケーションは、ウェブ上のユーザーエンゲージメントとアクセシビリティを強化する上で、大きな飛躍を意味する選択肢です。従来のウェブサイトの機能とモバイルアプリケーションの高度な機能を統合することで、PWAはアプリストアからのアプリのダウンロードを必要とせず、シームレスでアプリのような体験を実現します。
今回は、WordPressサイトのPWAがもたらす変革の可能性と利点に迫り、WordPressプラグインを使用したり手作業でコーディングしたりしてPWAを実装する方法をご紹介しました。ご参考になれば幸いです。
まだの方は、WordPressサイトをPWA化する日が近づいているかもしれません。
コメントを残す