ブログをPWA化してみた。PWAとは、WordPressをPWA対応する方法。

ブログをPWA化してみた。PWAとは、WordPressをPWA対応する方法。

最近話題の、Webサイトをスマホアプリのように見せることのできるPWA(Progressive Web Apps)。
折角なので、自分のWordPressサイトでもプラグインを使って導入してみました。
今回はその簡単な導入方法と、PWAとは何かについて解説していきます。

PWAとは?

PWAロゴ

PWAとは、Progressive Web Appsの略で、
ザックリいうと、Webサイトをスマホアプリのように使用できる状態にすることです
従来のWebにない機能として、
「スマホのホーム画面にアイコンが表示される」
「Push機能が実装できる」
などがあります。
有名なところだと、スターバックスなどがPWAを導入し、
アプリのような感覚で商品の注文・予約が出来ることが話題になりました。

ちなみに、同じようなWebのSEO用語でAMPというものがありますが、
これはGoogleが出している、Webページを高速で表示するための指標のようなもので全く違うものになります。
(どちらもGoogleが推奨しているという共通点はあります)

ちなみに、この手の機能は大体がそうですが、IOSとAndroidで使える機能が違っています
IOSではPush機能などがまだカバーされていない等微妙な違いがあるので、実装の際はご注意ください。

WordPressでPWAを始める方法

早速、自分のブログでもPWAを試してみました。
とはいっても、自分でコーディングする必要もないし、HTMLもCSSもいじってません。

WordPressには強力な味方、プラグインがあるのでそれを使いました。

SuperPWA

ブログをPWA化しよう
今回使ったのはSuperPWAというプラグイン。
設定方法は、WordPressの管理画面の「プラグイン」→「新規追加」をクリック
プラグイン検索画面が出てくるので、「キーワード」の欄に「PWA」といれます。
そうすると、「Super Progressive Web Apps」というプラグインが出てくるので、有効化しましょう。

なんと、これだけで完了です。
とはいえ、初期状態のままだと味気ないので、設定を変更していきましょう。

SuperPWAの設定変更

プラグインを有効化すると、管理画面左下に「SuperPWA」というアイコンと文字が出てくるので、
そこをクリックして「Setting」リンクをクリックすると設定を変更できます。

ホーム画面にアイコンが追加されている
「Application Name」が、アプリの起動時に見れる名前、
「Application Short Name」が、ホーム画面のアイコンの下に表示される短縮名です。
覚えやすい素敵な略称を付けてあげましょう。

「Description」はアプリの詳細で見れる項目です。
あまり良く見られる箇所ではないのですが、どんなブログか書いておきましょう。

「Application Icon」は重要で、ホーム画面に表示されるアイコンのことです。
アイコンは結構重要で、特徴的なアイコンの方が日常的にタップしやすいのでここは拘った方が良いかもしれません。

スプラッシュ画面
Splash画面。ヘッダーがテーマカラーに変化していることがわかる

「Splash Screen Icon」は、Splash画面、
つまりアプリ起動時の画像を設定できます。
ここは要は起動待機時の画面なので、読み込みの速さに自信があれば特に拘らなくても良いかもしれません。

「Background Color」は、Splash画面での背景色を設定できます。
Splash画像にマッチするような色合いを選んであげましょう。
「Theme Color」はブログのテーマカラーです。
ここで指定した色がシステムヘッダーなどにも反映されるので、自身のブログで良く使う色合いを使うのが良いと思います。

起動画面
起動すると記事一覧ページへ

「Start Page」はアプリ起動時に表示されるページを指定できます。
このブログであれば記事一覧ページ、といった感じですね。
「Offline Page」はオフライン時に表示するページです。
ここも記事一覧ページか、オフライン時用の固定ページを作っておいてそこを設定するのが良いと思います。

Orientationはスクリーンの向きの設定です。
基本的に縦に持って読むサイトがほとんどだとは思いますが、
例えばWeb状に横スクロールゲームを置いてPWA化した場合などに使うのが良いと思います。

基本的にデフォルトのままでも問題ないのですが、アイコンなどすぐに手を入れられてかつ影響のありそうな部分だけ変更し
最後に「Save Setting」を押して完了です。

Add-Ons

さらに応用として、Add-Onsが用意されているようです。
現在は「UTM Tracking」と、「Apple Touch Icons」の二つが用意されています。
「UTM Tracking」は、
ユーザートラッキングについて、
「Apple Touch Icons」は、
IOS用のアイコン設定を出来るようになるみたいです。

現在はこの二つですが、そのうち機能拡張がされれば、
Push機能などもノンプログラミングで出来るようになるかもしれません。

まとめ

以上、WordPressブログでプラグインを使ってPWA(Progressive Web Apps)を始める方法についてまとめました。
PWAは、大きな企業でばかり導入されているイメージがありますが、
記事を提供するブログのような、毎日目を通すものにこそ便利な機能だと思います。
是非SEO対策のためにも導入を検討してみてはいかがでしょうか。