【WordPress】一部のページのみPWA化する【入門】

WordPress全体をPWA化するのではなく、一部のページのみPWA化する方法を記載します。

わかりやすさ重視で初心者や入門用に最低限の情報で記載していきます。

この方法を習得することで、WordPressサイトを一つ持っていれば新しくサイトを用意することなく、いくつものWebアプリを作れるようになりますので、よければ試してみてください。

スポンサーリンク

はじめに

恐らくこのサイトを閲覧しにきてくれた貴方は、既にPWAについて調べているのだと推測します。

そのため、今更PWAの概要やメリットやデメリットについて説明しません。

 

強いていうのであれば、以下のサイトがPWAの説明として物凄くわかりやすいなぁと思いましたので共有致します。

PWAの概要やメリット、デメリットが気になる方は以下リンクよりどうぞ。

PINTO! by PLAN-B

Webサイトとネイティブアプリの良い部分を掛け合わせられるツールとして、最近注目が集まっている、PWA(プログレッシブウ…

PWA化するために最低限必要なもの

PWA化するために必要最低限なものは以下の通りです。

 

①URLがhttpsになってること

②manifest.jsonの設定

③service-workerの設定

 

①は(他のサーバーはわかりませんが)エックスサーバーで運用されているのであれば無料で行うことが出来ます。

エックスサーバーで無料でhttpsにする場合は以下サイトが参考になるかと思います。

レンタルサーバー「エックスサーバー」のご利用マニュアル|無料・無制限に利用可能な独自SSL「無料独自SSL」の設定手順に…

スポンサーリンク

ページ作成

本記事は「WordPress全体をPWA化するのではなく、一部のページのみPWA化」なので、まずはPWA化するページを用意する必要があります。

尚、本作業を行うためにはWordPress上にディレクトリやファイルを置くためのFTPソフトを用意しておく必要があります。

※FTPソフト「FileZilla」(無料で日本語)の導入方法は過去にこちらで掲載していますので、もしよろしければご参照ください

 

では、以下ページを作成する手順です。

 

①FTPソフト(今回はFileZillaを使って操作していきます)で「ドメイン名/public_html」の配下にディレクトリを作成します。

尚、ドメイン名というのは自分のサイトのURLの「https://」に続く部分です。

私のサイトの場合は「kehalife.com」です。

 

今回は「pwa」というディレクトリを用意します。

 

更に、将来的にいくつかPWA化したWebアプリを作ろうと考えているので、pwaディレクトリ配下に更に「test」というディレクトリを用意します。

今回はこの「https://kehalife.com/pwa/test」にPWA化したWebアプリを作成してみます。

 

②index.htmlファイルを用意します。

今回はテストなので、以下のような「test」と表示させるだけのページを用意しました。

<body>
    <div>
        test
    </div>
</body>

 

③FTPソフトを使って①で作成したディレクトリにindex.htmlファイルを保存します。

 

④index.htmlが閲覧可能か確認します。

今回の場合はURLに「https://kehalife.com/pwa/test/index.html」と入力しアクセスしてみます。

「test」の文字が表示されたら成功です。

スポンサーリンク

manifest.jsonの作成

次に、manifest.jsonというファイルを作成していきます。

作り方は至って簡単です。

 

①適当な場所で右クリック>新規作成>テキスト ドキュメントをクリックします。

 

②作成された「新しいテキスト ドキュメント.txt」を「manifest.json」に名前変更します。拡張子の表示はもちろんしておいてください。

 

③manifest.jsonに以下をコピペします(詳細は後述)

{
    "name": "AppName", //アプリの名前です。「ホーム画面に追加ボタン」のアプリ名欄に出てきます。
    "short_name": "AppShortName", //ホーム画面に追加したアプリの名前です。
    "icons": [
        {
        "src": "./image/icon_48px.png", //48px用のアイコンのパス
        "type": "image/png", //画像のタイプ
        "sizes": "48x48" //変更不要
        },
        {
        "src": "./image/icon_96px.png", //96px用のアイコンのパス
        "type": "image/png", //画像のタイプ
        "sizes": "96x96" //変更不要
        },
        {
        "src": "./image/icon_144px.png", //144px用のアイコンのパス
        "type": "image/png", //画像のタイプ
        "sizes": "144x144" //変更不要
        },
        {
        "src": "./image/icon_192px.png", //192px用のアイコンのパス
        "type": "image/png", //画像のタイプ
        "sizes": "192x192" //変更不要
        },
        {
        "src": "./image/icon_512px.png", //512px用のアイコンのパス
        "type": "image/png", //画像のタイプ
        "sizes": "512x512" //変更不要
        }
    ],
    "start_url": "./index.html", //アプリ起動時の表示URL
    "display": "standalone", //standalone(通常のアプリと同じようなUI)またはbrowser(ブラウザと同じような表示)のどちらかがよさそう
    "orientation": "portrait", //landscape(横向き)またはportrait(縦向き)のどちらかがよさそう
    "background_color": "#99FF00", //背景色(#99FF00は緑色っぽいカラー)
    "theme_color": "#FFCCCC", //アプリケーションのテーマカラーを定義。タブやメニューバーの色の指定(#FFCCCCはピンクっぽいカラー)
    "dir": "ltr", //テキストの読む方向。左から右は「ltr」で右から左は「rtl」。日本語や英語は左から右に読むので「ltr」で問題ない
    "lang": "ja-jp" //アプリで使用する言語。日本語は「ja-jp」
}

 

④それぞれの項目を、自分のWebアプリ用に変更していきます。

【”name”: “AppName”】

アプリの名前です。ホーム画面に追加とかするときに表示されます。

 

【”short_name”: “AppShortName”】

アイコンにしたときに表示される名前です。

 

【”icons”】

アプリのアイコンを設定しています。

それぞれ以下の通り設定しています(例:48px用のアイコン)

“src”: “./image/icon_48px.png”,  ←相対パスで画像がどこにあるかを指定。絶対パスでも可。画像自体は48pxの画像で保存しておく
“type”: “image/png”, ←画像の種類を指定。pngであれば左記のような感じ。jpgとか使うのであればimage/jpgになると思う
“sizes”: “48×48″ ←特に考える必要なし。変更不要。

 

ちなみに、ここでは携帯のサイズに応じて自動的に的確なサイズのアイコンを設定してくれるらしいです。

また、最低限の設定であれば96px、144px、192px(だったかな)の3種類だけ用意すればいいっぽいですが、まぁそんな手間でもないんで今回の例ぐらいは用意しておいてもいいと思います。

 

【”start_url”: “./index.html”,】

ホーム画面に登録されたアイコンがタップされたときに、どのページを表示するか指定します。

 

【”display”: “standalone”】

とりあえずstandaloneかbrowserの2択だと思います。

細かい違いは色々ありますが、主な違いはURL欄が表示されるかです。

standaloneだとURL欄が表示されなくなるため、よりアプリっぽい感じに作れます。

せっかくPWA化するのであればstandaloneの方が私は好きです。

 

【”orientation”: “portrait”】

とりあえずlandscape(横向き)かportrait(縦向き)の2択でいいと思います。

自分の作るWebアプリによって選択してください。

 

【”background_color”: “#99FF00″】

背景色を設定します。

背景色……というのがどこの背景色を言っているのかいまいちわかりませんが、とりあえず確認できたのはアプリ起動時の背景色でした。

(#99FF00は緑色っぽいカラーですが、それを設定してアプリを起動すると以下みたいな感じになります)

 

【”theme_color”: “#FFCCCC”】

アプリケーションのテーマカラーを定義します。

テーマカラーというのはタブやメニューバーの色らしいです。

(#FFCCCCはピンクっぽいカラーですが、それを設定してアプリを起動すると以下みたいな感じになります)

 

【”dir”: “ltr”】

テキストの読む方向を指定します。

左から右は「ltr」で右から左は「rtl」です。

日本語も英語も左から右に読むので、基本ltrで問題ないです。

 

【”lang”: “ja-jp”】

アプリで使用する言語を指定します。

日本語は「ja-jp」です。

スポンサーリンク

service-workerの作成

service-workerというのを作っていきます。

細かい説明は端折り、ざっくりと重要そうな部分だけ説明していきます。

 

①service-worker-check.jsファイルを作り、以下コピペします。

//ロード後に起動
window.addEventListener('load', function() {
    //service-workerが使用できるブラウザかどうかチェックする
    if ('serviceWorker' in navigator) {
        //service-worker呼び出し
        navigator.serviceWorker.register('./service-worker.js').then(function() {
            console.log('service-worker呼び出し成功');
        }).catch(function(err) {
            console.log('service-worker呼び出し失敗:', err);
        });
    };
});

 

ざっくりと何をやっているか説明すると、htmlが読み込まれた後にservice-workerが使える状態かどうかを確認し、もし使える状態であれば同ディレクトリ内にいるservice-worker.jsを呼び出し、ということをしています。

 

②service-worker.jsファイルを作り、以下コピペします。

こちらのサイトを参考にさせて頂きました、ありがとうございます

const CACHE_NAME = 'test-v1';
const urlsToCache = [
    './',
    './image/icon.png'
];

self.addEventListener('install', (event) => {
    console.log('service-worker install開始');
    event.waitUntil(
        caches.open(CACHE_NAME)
        .then((cache) => {
            // 指定されたリソースをキャッシュに追加する
            return cache.addAll(urlsToCache);
        })
    );
});

self.addEventListener('activate', (event) => {
    console.log('service-worker activate開始');
    var cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then((cacheNames) => {
            return Promise.all(
                cacheNames.map((cacheName) => {
                    // ホワイトリストにないキャッシュ(古いキャッシュ)は削除する
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

self.addEventListener('fetch', (event) => {
    console.log('service-worker fetch開始');
    event.respondWith(
        caches.match(event.request).then((response) => {
            if (response) {
                return response;
            }
            // 重要:リクエストを clone する。リクエストは Stream なので
            // 一度しか処理できない。ここではキャッシュ用、fetch 用と2回
            // 必要なので、リクエストは clone しないといけない
            let fetchRequest = event.request.clone();
            return fetch(fetchRequest).then((response) => {
                if (!response || response.status !== 200 || response.type !== 'basic') {
                    return response;
                }
                // 重要:レスポンスを clone する。レスポンスは Stream で
                // ブラウザ用とキャッシュ用の2回必要。なので clone して
                // 2つの Stream があるようにする
                let responseToCache = response.clone();
                caches.open(CACHE_NAME).then((cache) => {
                    cache.put(event.request, responseToCache);
                });
                return response;
            });
        })
    );
});

 

③service-worker.jsの内容を自分のWebアプリに合うように変更します。

主に変えるのは以下の2か所でいいと思います。

 

【CACHE_NAME】

キャッシュの名前を設定します。

PWAはこのキャッシュの中に色々なデータを記憶させます。

他PWAアプリと被らないような名前であればよい気がします。

 

【urlsToCache】

予め読み込んでおくファイルを指定します。

わからなければWebアプリを作る上で用意したファイル全部を指定すればいいと思います。

ざっくりと私の解釈で言うと、

 

Webアプリは基本的に、必要な情報を要求した後にサーバーへ情報を取りに行き、その結果を表示しています。

このurlsToCacheに指定したファイルは予め用意されている状態になるため、サーバーへ情報を取りに行く必要がなくなりロードが早くなったりオフラインでも起動するようになります。

 

例えるなら……

普通であれば「トイレットペーパー」が欲しくなったり「ティッシュ」が欲しくなったらamazonに要求し配達員が持ってきて入手となりますが、

urlsToCacheに「トイレットペーパー」や「ティッシュ」を設定しておくことで手元に「トイレットペーパー」と「ティッシュ」がある状態になり、必要になったときに取り出せる

 

的な感じだと思います。

 

【他イベント類】

説明しだすと難しくなってきて嫌になるので、あえてこの部分は端折ります。

めっちゃざっくりいうと、以下の通りかと思います。

 

(install)

一番最初に起動し、service-workerを使う準備をする

 

(activate)

installが完了したときに起動する(service-workerが使えるようになった!ということ)

 

(fetch)

何か情報を取り出すときに起動する

スポンサーリンク

各種ファイルの格納と動作確認

最後に、これまで作ったファイルを格納していきます。

……と、その前にmanifest.jsonとservice-worker類のファイルを読み込ませるようにindex.htmlを以下のように更新します。

ついでに色々なものを記載していますが、気にしないでください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <link rel="manifest" href="manifest.json">
        <script type="text/javascript" src="./service-worker-check.js"></script>
    </head>
    <body>
        <div>
            test
        </div>
    </body>
</html>

 

index.htmlを更新したら、それぞれのファイルを用意したディレクトリに格納していきます。

今回の私の例であれば「kehalife.com(ドメイン名)/public_htm/pwa/test」に以下ファイルを保存しています。

・service-worker.js

・service-worker-check.js

・index.html

・manifest.json

・(imageディレクトリ)

 

注意としては、今回の例では相対パスで各ファイルの在処を指定していたので、この配置にしないとうまく動いてくれません。

また、参考までに、imageのディレクトリの中には以下のような感じでアイコン画像を格納しています。

 

そして最後に動作検証をしてみましょう。

index.htmlを置いたパス……今回の場合は「https://kehalife.com/pwa/test」にアクセスすると、index.htmlの内容「test」が表示されるはずです。

更に、testと表示されている画面でF12キーで開発者ツールを呼び出し>Consoleをクリックすると、以下図のようなメッセージが表示されているはず。

以下のようなメッセージが表示されていれば、正常に動いています(もし動かなかった場合はキャッシュのクリアとかしてみると意外と動いてくれたりします)

 

更に、念のため、開発者ツールのApplicationタブをクリックしてください。

CacheのCache Stotageにservice-worker.jsで指定したCACHE NAMEのものが作成されていれば完璧です。

 

これで無事、PWA化が完了です。お疲れ様でした!

 

あとはmanifest.jsonのstart_urlを起点にして通常通りWebアプリを作っていけば、まるでスマホアプリかのようなWebアプリケーションを作っていくことが可能ですよ♪

是非お試しください。

 

オマケ

例の通り作った時点で、Android端末のブラウザでPWA化したページを表示すると画面下部に以下のようなメッセージが出てアイコン化が促されます。

iPhoneの場合はそのようなメッセージは出ないので……一工夫する必要があります。

その工夫については……またの機会に。

他のWordPressに関する記事

WordPressまとめ

WordPressに関する記事をテーマごとにまとめています。 「使い方」と「テーマの自作」については、上から順番に見ていくことでわかりやすいように作成しています。 スポンサーリンク [adcode] [outline[…]

スポンサーリンク