WordPressブログがアプリになる!PWA for WordPress

あなたのブログのアプリができる!

専用のアプリを作ろうとしたら、
普通はエンジニアさんに1から作成して
もらわないといけないのですが、

「PWA」という機能を使えば
プラグインを入れて、アイコンと
名前を決めるだけですぐに作れちゃいます^^

私もこのプラグインで
アプリを作ってみましたよ。

 

このブログをスマホ(Android)で見ると
「ホーム画面に追加しますか?」
とお知らせが出るようになっています。

 

それをタップすると、
ホーム画面にアプリができます♪

 

こんな風に、お客様のスマートフォンの
ホーム画面に、あなたのブログの
アプリができたら素敵ですね。

簡単なので、ぜひやってみてください♪

カスタマイズできる項目は多いですが
必要な設定は 「〇」印の6つです。

ブログをアプリ化するメリット


面白いけれど、ブログをアプリにして
どうするんですか?

普通にブラウザで見ればいいのでは?


村重

見た目はブックマークと同じですよね。

ブックマークと違って、アプリには
すごい機能があるんですよ!

■ 読み込みが早い!圏外でも読める!

・アプリに読み込んだデータを保存できるので
読み込み・表示がめちゃくちゃ早い。
一度読んだページは圏外でも読めます。

■ お知らせが出せる!(予定)

・アプリからのお知らせ(プッシュ通知)を
スマホに表示することができる。

スマホに「ブログが更新されました」
「新商品が追加されました」などの
通知が出たら、ご興味のあるお客様に
すぐにご覧いただけますよね^^

実装されるのがとても楽しみです。

それでは早速プラグインの設定の仕方を
ご案内しますね。

 

プラグイン PWA for WordPress

PWA for WordPressというプラグインを使います。

ピンクの可愛いアイコンが目印です。

 

インストールして有効化すると、
WordPressの管理メニューに
「WPA for WordPress」というメニューが出て来ます。

 

このプラグインには

・PWA for WordPress
・Manifest (マニフェスト)
・ServiceWoker(サービスワーカー)

という3つのメニューがあります。

 

PWA for WordPress

一番上のPWA for WordPressは
設定の状態を確認したり、
設定を始める手順の説明が読めたり、
お問い合わせ先などが確認できます。

■ 現在のPWAの状態を確認できます

 

設定が終わると緑色になります。

■ プラグインの設定手順の説明

設定ページ、「マニフェスト」と「サービスワーカー」の
説明と、ここからも各ページに移動できるようになっています。

 

■ お問い合わせ先

このプラグインを開発された方々のご紹介と
お問い合わせフォームが、開発を支援してくださる方への寄付ボタンがあります。

 

では早速設定に進んでいきましょう。

 

Manifest (マニフェスト)

「マニュフェスト」には
アプリの名前や、アイコン、色などを設定していきます。

 

〇 Sitename サイトネーム

 

私の場合、
「猫でもわかる!WordPressレッスン」と入れたら

「ン」が2段になってしまいました。
ちょっと長すぎたようです(笑)

ここは改行はできないので
かっこ悪いので「レッスン」を消しました。

「猫でもわかる!WordPressレッスン」
 123456789012345・・

全角15文字くらいまでがちょうど良さそうです。

他、ShortmaneやDiscriptionなど
名前を入れるところがあるのですが、
今の所、Sitenameに入れたものが
画面やアイコンに反映されているようです。

〇 Start URL スタートURL

アプリを開いたときに出てくる
最初のページのことです。

これはあなたのサイトのトップページの
アドレスでよいでしょう^^

〇 Icons アイコン

アプリのマークに使いたい画像を選択します。

画像は 512px x 512px 以上で
画像形式は「ping」と決まっています。

もちろん、画像はお好みで構わないのですが

ブランドイメージを統一するため、
サイトのロゴや「ファビコン」と呼ばれる
サイトのマークと同じにするのがオススメですよ。

〇 theme_color テーマカラー

続いて色設定です。

上の段の「テーマカラー」というのは
スマホでみたときのアドレスバーに
つける色のことです。

一気にかわいくなりました^^
サイトがちょっと特別な感じに。。

この色は、お客様がアプリを入れなくても
誰でもこう見えるようになるので、ぜひ使ってみてくださいね。

〇 background_color バックグラウンドカラー

続いて、下の段の「バックグラウンドカラー」

これは、アプリをタッチしたら出てくる、

立ち上がるときの画面
(スプラッシュ、と言います)の背景色を決めるところです。

この画面の背景ですね。

 

・ display・orientation ディスプレイ・オリエンテーション

続いて、ディスプレイの向きなどを
設定できる項目がありますが
こちらは初期値の「fullscreen」「any」のままで大丈夫です。

 

以上の設定が完了したら、

Saveボタンをクリックして、「マニフェスト」の設定が完了です。

 

続いて、もう一つの「サービスワーカー」の
設定に進んでいきましょう。

 

ServiceWoker(サービスワーカー)

サービスワーカーの設定は、いろいろカスタマイズしたい場合に
変更する項目がほとんどです。

「オフラインページURL」だけ設定しておけば、
後はそのままで大丈夫ですよ。

一応説明していきますね。

・ 基本キャッシュ計画

アプリのメリットとして「表示が速くなる」とお話ししましたが、
それは、一度読み込んだデータを再利用してくれるからです。

ここは、その再利用についての設定を変更することができます。

1)常に、再利用する

2)インターネットにつながらないときだけ、再利用する

おすすめは1です。その方が速いですからね^^

 

〇 オフラインページURL

スマホを見ているとき、圏外になって電波が
途切れてしまうことってありますよね。

こんなページ見たことありませんか?

このように圏外をお知らせするページを
アプリ用に一つ作ってあげる必要があります。

固定ページで、簡単なもので大丈夫ですよ。

私はこんなページを作ってみました。

トップページへのリンクなど
付けてあげると親切ですね。

 

・ キャッシュ有効時間

一度読み込んだ情報を、どのくらいの期間
保存しておくかを変更することができます。

初期設定では2880分=2日間。

2日おきくらいがちょうどよいですね。
特に希望がなければ、この欄はこのままで大丈夫です。

 

・ キャッシュ除外URL

ここは、一度読み込んだデータを
”保存しておかないページ”を指定するところです。

料金表などは、改定前の価格をご覧になっていたら
誤解が生じる可能性がありますね。

常に最新の状態を見ていてほしいページがあれば、ここに指定します。

「リスト追加ボタン」で何個でも増やすことができます。
あまり多いと、読み込みに時間がかかることになりますのでご注意ください。

 

・ 初期キャッシュ

アプリを初めて入れたとき、
トップページとオフラインのお知らせページがまず読み込まれます。

通常その後は、お客様がご覧になったページが
保存されていくのですが、

まだ見ていないページでも、ここに指定しておくと
最初に自動的に読み込まれるため、スムーズに表示されるようになります。

このページはます見てほしい!大切なページを指定しておくといいですね。
(しなくてももちろん問題ありません)

・ デバッグモード

この「デバッグモード」というのは、
このプラグインがどんな動きをしているか?
調べたり、動きをテストするときに使うものなので
通常はつかいません^^

オフラインページURLが登録出来たら、
Saveボタンを押して完了です。

お疲れさまでした、設定は以上です。

ぜひAndroidスマホで
ご自身のブログを確認してみてください。

 

 

PWAについて、もっと詳しく知りたい方は

このプラグインは、AndroidやPWAの勉強会を
主催されている、エンジニアの進藤 龍之介さんが開発されました。

進藤さんのブログはこちら
https://www.compin.jp/wp/

進藤さんが詳しい資料を公開してくださっていますので
ご興味のある方はどうぞ^^

Challenge PWA!! TRY PWA4WP! from Ryu Shindo

 

Follow me!

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。