WORDPRESS

PWAとは?ワードプレスでブログをアプリ化してみた

ブログを書くことから脱線している なつ です

今回はワードプレスでプラグインを使用してブログやサイトをアプリの様にする方法を紹介したいと思います。

アプリ化と言われるものはPWAという仕組みを使用することでほぼアプリのようなデザインにすることが出来ます

PWAとは?

PWA(Progressive Web Apps)とはWebサイトをアプリのように使えるようにする仕組みのこと

キャッシュを取得することにより通常のWebサイト閲覧よりデータ通信料を抑え、快適にWebサイトを閲覧することができ、Webサイトをほぼアプリ化できる。

AppStoreやGooglePlayに登載されたりはしませんが、PWA化したサイトから閲覧するとURLの入力画面がないので見やすくなったりプッシュ通知(※iosはプッシュ通知非対応)で更新をお知らせ出来たりとほぼアプリのようにアプローチすることが可能となります。

当ブログではPWA化=アプリ化という認識で「アプリ化」という表現に統一して話を進めます。

アプリ化する前の事前準備

2種類の大きさの画像を用意する

スマホのホームアイコンやアプリを開いたときに表示されるため以下のサイズの画像を2つとも用意して下さい。

  • 192px×192pxの画像
  • 512px×512pxの画像
    どちらも画質が落ちないようpng形式がおすすめ

SSL証明書を取得してhttps化しておく

これはアプリ化するしないに限らずセキュリティ強化のため、サイト運営されている方ならしておきたいことですね。

「レンタルサーバー名 ssl 設定」とかでググれば設定方法が出てきます。

たとえばXサーバーを使用している方なら、「Xサーバー ssl 設定」みたいな感じです。

アプリ化するプラグインをインストール

今回「Super Progressive Web Apps」というプラグインを使ってアプリ化する方法をご紹介していきます。
さっそくWordPress管理画面のメニューからプラグインの新規追加していきましょう。

WordPress管理メニュー>プラグイン>新規追加

プラグインを追加画面を開けたら右側のプラグインの検索に「Super Progressive Web Apps」を入力

一覧に表示されたらインストールして有効化して下さい

するとWordPress管理メニューに「SuperPWA」というのが追加されていると思います。

これでインストールは完了です。

「Super Progressive Web Apps」の設定方法

インストールできたら設定をしていきましょう。

WordPress管理メニューの「SuperPWA」から「settings」をクリックし、設定画面をひらきます。

1.Application Name

アプリ化してホーム画面に追加された時のアイコンと一緒に表示される名前です。

通常はサイト名にしておきます。

2.Application Short Name

Application Nameが長くて入らない時に代わりに表示されます。12文字以下で設定してください。

3.Description

PWAの説明になります。サイトに設定してあるディスクリプションがデフォルトで設定されるため、基本入力しなくていいです。

4.Application Icon

事前に準備しておいた縦192px横192pxの画像をChoose Iconから設定します

5.Splash Screen Icon

事前に準備しておいた縦512px横512pxの画像をChoose Iconから設定します

6.Background Color

アプリ化したサイトが立ち上がる時の背景色を設定できます。

Googleはサイトと同様の背景色を推奨しています。

7.Theme Color

スマホの上部にある電波のアイコンなどがあるステータスバー部分の色になります。
サイトのテーマカラーを選ぶといいです。

8.Start Page

起動した時に、最初にアクセスするURLを設定できます。

デフォルトで -Homepageー となっているためそのままにしておきましょう。

9.Offline Page

PWAはキャッシュが残っていればオフラインでも閲覧できますが、キャッシュがない時にアクセスするページをこちらで設定することができます。

ーDefaultーとなっていればTOPページに案内してくれるので特に設定する必要はありません。

10.Orientation

画面の向きを設定できます。

縦にも横にもなるFollow Device Orientationがいいと思ったのですが、少し傾けると回転してしまい逆に読みづらいので、個人的にはPortraitが無難かと思います。

Follow Device Orientation 端末の向きに応じて縦・横に回転
Portrait 縦画面で固定
Landscape 横画面で固定

11.Display

通常はStandaloneを選択します。

Standalone アプリのような見た目
Fullscreen 全画面表示
Minimal UI 横画面で固定
Browser 通常のブラウザ表示

12.save settings

最後にSave settingsを押して設定を保存して設定完了です。

忘れないように必ずSave settingsを押しましょう

実際に自分のブログを開いてホーム画面に追加してみよう

動作確認も含め実際にホーム画面に追加してアプリ化したブログを開いてみましょう。

左がTwitterアプリ 右がアプリ化した当ブログ

あれ?アイコン若干切れてる(´;ω;`)
それでも何だか少しテンションが上がりますね。

しかも一度開いたページは読み込みが早い!サクサク動きます。

最後に

PWAはキャッシュを利用しているので読み込みが早く快適にWebサイトを閲覧することができる反面、更新が反映されにくい場合があるようです。ブログを大幅に変更したいときなどは使用しないほうがいいです。

リライトしたい記事がいくつもあるので更新が反映されにくいのはちょっと痛い

恐らくしばらくしたら設定をオフにしていると思います。

ほぼ完成されたブログで新規投稿のみだとメリットは大きいかもしれませんね。

閲覧いただきありがとうございました。

-WORDPRESS

© 2021 natumemo Powered by AFFINGER5