macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

WordPressサイトをPWA化する方法+戻るボタンの実装【おすすめ】

WordPress

WordPressブロガー

WordPressブロガー
「サイトをPWA化させるとPVや収益が上がるって聞いたけど、それを導入するのって難しいですか?PWA自体が何かイマイチ理解していないので分かりやすく教えてもらえると助かります」

先に一部だけ回答しておきます、サイトをPWA化させることでPVや収益は上がります、理由は利便性が上がるからです。

本記事では、サイト(WordPress)をPWA化させる方法について解説しつつ、一部のブラウザで起こる問題点について解決策を提案しております(←ここ重要)

この記事解説していること

この記事におすすめな人

「WordPressを使ってサイトを運営している、もしくは作っている」「サイトのPVや収益を上げたい」、この2つに当てはまる方は読んで損なしです。

スポンサードサーチ


そもそもPWAって何?【導入サイト紹介】

そもそもPWAって何?【導入サイト紹介】

PWAとは「Progressive Web Apps」の略でして、簡単に言うとWEB(アプリ)とネイティブアプリ(スマホアプリ)の良い部分をいいとこどりする仕組みのことです。

  • ネイティブアプリ
  • メリット1:読み込みが早い
  • メリット2:オフラインでも使える
  • デメリット:使用するためにはインストールしないといけない
  • WEBサイト(WEBアプリ)
  • メリット:インストールが不要(アクセスするだけで使える)
  • デメリット1:ネット回線によって読み込み時間が左右される
  • デメリット2:オフラインで使えない(機内モード等)

上記はほんの一部ですが、それぞれ良い所と悪いところがあることが分かります、そこで、「それぞれのメリットだけを合わせ持ったものは最強じゃない?」ってのがPWAの考え方なわけです。

導入例の紹介

百聞は一見に如かずってことで実際にPWA化されたサイトをホーム画面に追加して体験してみましょう。

このサイト(MacoBlog)でお試しいただくことが可能です。

Androidユーザーの方は問題ありませんが、iOSの場合PWA化が中途半端な状態なので一部使えない機能がございます、これはApple側(Safari)の対応待ちであり私たちのせいではありません(逃げ、でも事実)

・Androidユーザーの方
このサイトにアクセスするとプッシュ通知(※)が出てくると思います、そこからホーム画面に追加するだけです、追加されると他アプリと同様の扱いになるので、端末の情報からアプリ情報を確認できます。
 
※2回以上のアクセス、前回のアクセスより5分以上が経過していることがプッシュ通知される条件のようです。
・iOS(iPhone)ユーザーの方
Safariからこのサイトにアクセス、下のツールバーを押して「ホーム画面に追加」からアプリとして追加可能です。
注:iOS11.3~

ホーム画面に追加したらそこからこのサイトにアクセスしてみましょう、全画面表示+読み込み速度が上がっていると思います、あたかもスマホアプリかのような使い心地をWEBで提供する、これがPWAです(ドヤ)

PWAの導入サイト例:MacoBlog

上記はホーム画面に追加後、iPhoneXからアプリ経由でアクセスした時の画面(アドレスバーが消えているのが分かる)

PWA化の動きが加速しない理由

国内で一番使われているスマホは圧倒的にiPhoneなわけで、そのiPhoneでPWAが不完全(Appleの対応がてきとう)となると別にしなくても現状大きく問題はないってのがだいたいの見解です。

ただ、Appleが[iOS11.3~]から不完全ながらもPWAに対応させたことから分かるように、その重要性を理解しているからこそPWAを採用したわけで、今後新たに更新される可能性は高いです、なので完全対応の日は近いと私は考えています。

iOS版PWAで早く対応してほしい機能(使えない機能)

  • バックグラウンド同期
  • プッシュ通知
  • Splash screen(ローディング画面)
  • バックボタン機能

PWAが流行らない理由も頷ける、、、ただ、バックボタン機能(前の画面に戻る)がないのは致命的なので、これについては最後の方で私から解決策を提案させて頂いております。

WordPressサイトをPWA化させるには【導入方法】

WordPressサイトをPWA化させるには【導入方法】

PWA化させる前に1つだけ注意

PWA化の前提条件としてサイトのSSL化は必須です、下記のようにサイトアドレスが[https]から始まっていることを確認しましょう(じゃないとPWA化はできません)

PWA化の前提条件としてサイトのSSL化は必須

問題なければ進みます、WordPressサイトをPWA化させる方法は2つ、下記のとおりです。

  • プラグインで設定する方法
  • 手動で設定する方法

前者ならプラグインを使う事で簡単にPWA化させることができます、後者は完全自作なのでちょっとだけ手間がかかります、自作の場合はWordPress以外のサイトでも使えるメリットがあります。

自身のスキルと相談して好きな方を選んでください、個人的には自作がオススメです、理由は勉強になるから(引き出しが増える)

とりあえず、プラグインで設定する方法から見ていきましょう。

プラグインで設定する方法【WordPressのみ】

WordPressサイトの場合、「Super Progressive Web Apps」というプラグインを使うことで簡単にPWA化させる事ができます、新規追加からインストールして有効化しておきましょう。

各項目を設定する

有効化したら設定をするだけです、全て英語表記なので翻訳機能を使うか下に対応表を用意しましたので、それを見ながら設定しましょう。

管理画面 > SuperPWA > Setting

各オプション対応表

オプション名 説明
Application Name ホーム画面への追加バナーに表示される名前を入力
Application Short Name ホームに追加した時のアプリ下に表示される名前を入力
Description アプリ(サイト)の説明文を入力
Application Icon アプリのアイコン画像を選択(192×192)
Splash Screen Icon アプリ起動時(ローディング)に表示されるアイコン画像を選択(512×512)
Background Color アプリ起動時(ローディング)の画面背景色を選択します
Theme Color 画面のステータスバーの色等を設定します
Start Page そのままでOK(アプリ起動後に表示されるページを設定します)
Offline Page そのままでOK(未キャッシュページにリンクした場合のリダイレクト先)
Orientation デバイスを縦横にしたときの画面挙動を設定します

最後に、一番下の項目3つに緑色のチェックが入っていれば特に問題なし、「Save Setting」をクリックすればPWA化完了です、超簡単でしたね。

PWA化されているかチェックする方法

chromeブラウザであればデベロッパーツールを開いてConsoleタブに[SuperPWA service worker ready]と出力されていればPWA化に成功しています。

おまけ:アドオンの追加

PWA化に必須ではありませんがアドオンが用意されています、必要に応じて有効化しておくと便利です。

管理画面 > SuperPWA > Add-Ons

おまけ:アドオンの追加

  • UTM Tracking:アプリ起動時に専用のトラッキングコードを付与するかどうか
  • Apple Touch Icons:設定したアプリアイコン画像をiOSアプリ側の画像として利用するか

手動で設定する方法【全サイト対応】

WordPressサイトをプラグインに頼らずPWA化する方法についても解説しておきます、と思ったんですがこれについては良記事がありましたので下記記事を参考にしてください。

読めば分かると思いますが、WordPress絡みの処理はパス出力くらいなので、そこを変えるだけで他の普通のサイトでも導入可能です。

スポンサードサーチ


おまけ:iOS(Safari)だと戻るボタンが消える問題

私のサイトをホーム画面に追加して使ってみると、iPhoneユーザーの方はお気付きの通り「戻るボタン」がないんですよね、戻るためにサイトロゴをタップして最初に戻るとかやってられないでしょ。笑

でもそれを実装しようとすると手間もかかるし、プログラミング知識がない方は多分無理ですよね、1行コピペするだけで簡単に実装したい、、、となるとこれしかない。

「必殺、history.back!」

下記のコードをファイルのどこかに設置しましょう、私はheader.phpのナビ部分に置いています、スマホでメニューをタップすると一番下ちゃっかりいますよね(即席感ヤバイ。笑)

<a href="javascript: history.back()">前のページに戻る</a>

スマホ・タブレットだけに表示させたい場合

PWAってスマホユーザーに向けたものなのでPCでサイトを開いた時に「戻るボタン」があると意味不明なので、下記のようにすればPCでは表示させないようにすることができます。

<?php if ( wp_is_mobile() ) : ?>
<a href="javascript: history.back()" itemprop="name">前のページに戻る</a>
<?php endif; ?>

コピペするだけなので簡単ですね。

「戻るボタン」に関しては時間がある時に改良しようかなと思います、Safariのツールバーみたいに下で追尾するタイプの方が使いやすいですよね、我ながらメニューに戻るボタンは使い勝手悪すぎ(;^ω^)

そのついでにスムーススクロールも実装しておきますので、その時はまた読みに来てください、ってことで最後に一言だけ置いて終わりにしたいと思います。

「まだPWA化させてないの?」

人気記事アフィリエイトで稼げるおすすめのレンタルサーバーは3つだけ

人気記事WordPressのおすすめプラグイン9選+1。WEB系エンジニアが語る