スポンサーリンク

CocoonでPWA設定する方法と導入のメリット、デメリット

WordPress
この記事は約12分で読めます。

みなさんは『PWA』って聞いたことがありますか?

『Progressive Web Apps(革新的なウエブアプリの意)』というGoogleが開発した技術で導入すれば、サイトの表示速度が上がったりキャッシュを利用してオフラインでのサイト閲覧が出来るようになったりと、これまで以上にサイトを閲覧してもらう機会を増やすことができます。

しかし「導入してみたいけれど、なんだか難しそう…。」と導入を先送りにしていた人も多いのではないでしょうか?

実は、Cocoonという無料テーマを使えば誰でも簡単に『PWA』を導入することができるのです。

私

本当に誰でもできるの?

ロボ
ロボ

”HTTPS環境”のサイトであればどなたでもできます!

Cocoonテーマを使用するまで『PWA』という言葉を知らなかった私でさえ、迷うことなく導入することが出来ましたので、本当にどなたでもできます♪

この記事では、CocoonでPWA設定をする方法導入のメリット、デメリットをわかりやすくご紹介していきます。

私

記事を読み終えると『PWA』への理解が深まり、すぐに自サイトに導入すべき技術かどうかを判断出来るようになりますよ!

無料テーマ『Cocoon』のダウンロードはこちらから

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

テーマ開発者の”わいひら”さんが、テーマの説明や特徴、インストール方法などを詳しく紹介されているページになりますので、宜しければご確認下さい。

スポンサーリンク

CocoonでPWA設定をする方法

私

ここからは、Cocoonテーマの有効化が完了している前提で進めていきます。

まずCocoonでPWA設定をする方法をご説明します。

設定方法は簡単で、Cocoon設定の「PWA」タブから『PWAを有効化する』にチェックを入れて「保存」するだけです。

この時「ログイン時もPWAを有効化する」にチェックを入れておくと、ログインユーザーにもPWAが適用されます。

次項目では表示されるアプリ名などの詳細を設定していきます。

PWA詳細設定

名前

『アプリ名』:WEBアプリとして表示させたい「アプリ名」を入力します。

例:たにあどアプリ

『短いアプリ名』:ホーム画面のアプリアイコンの下などに表示される「短縮名」を入力します。※最大12文字まで。

例:たにあど

説明文

アプリ(サイト)の説明やキャッチフレーズを入力します。※最大132文字まで。

アイコン

アイコンには、512×512pxのPNG画像を設定します。
※この項目だけは「外観」→「カスタマイズ」内の「サイト基本情報」から設定します。

配色

アプリで表示する時の「テーマカラー」と「背景色」を設定します。

※ここで設定した配色がどこで表示されるかは、ブラウザやOSによって異なります。

「テーマカラー」はアプリとして表示した際、下記画像の赤枠部分に適用されました。

「背景色」はスプラッシュ画面でサイトアイコンの周りの色に適用されました。

表示モード

「fullscreen」
利用可能な表示エリアが全て使用されます。

「standalone」
ブラウザのUIが非表示になるため、ネイティブアプリのような表示になります。

「minimal-ui」
standaloneのような外観や操作感になりますが、ナビゲーション制御のために最小限のUIを表示します。どのUIが表示されるかは、ブラウザによって異なります。

「browser」
ブラウザのUIがそのまま表示されるため、ブラウザで通常のページを開いているような外観や操作感になります。

画面の向き

ゲームアプリなどでは、横向き固定に設定されていることがよくありますが、通常のサイトであれば、ユーザーが自由に画面を回転させることができる「any」で良いかと思います。

「any」
画面の回転を許可する。

「landscape」
画面を横向きに固定する。

「portrait」
画面を縦向きに固定する。

ここまでで、PWAの詳細設定も全て完了となります。

PWA設定が正しく反映しているかを確認する方法

ここでは、PWA設定が正しく反映しているかの確認方法をご紹介しています。

PWA設定を完了後すぐに確認した場合、正しく設定がされていても下記手順で反映が確認できない場合があります。

その場合は少し時間をおき、何度かサイトを表示させると設定が反映されます。

PCの場合

PCの場合、PWA対応ブラウザである【Google Chrome】で確認するのですが、確認作業に入る前にCocoon設定「PWA」タブの「PWAの有効化」からログイン時もPWAを有効化する』にチェックを入れておいて下さいその後【Google Chrome】でサイトを開き、ブラウザの右上にある『点が縦に3つ並んだボタン』をクリックします。

表示されたメニューの中に【「”サイト名”」をインストール】という項目があれば、PWA設定が正しく反映されています


【「”サイト名”」をインストール】をクリックすると「アプリをインストールしますか?」と表示されます。

【インストール】をクリックするとサイトのインストールが開始され、完了後はデスクトップ上にサイトアイコンが表示されます。

【デスクトップに表示されたサイトアイコン】をクリックすれば、アプリとしての表示を確認することができます。

iPhoneやiPadの場合

iPhoneやiPadの場合【Safari】でサイトを開き『共有メニュー』をクリックします。

「共有メニュー」の中から「ホーム画面に追加」をクリックします。
「ホーム画面に追加」画面になりますので、「追加」をクリックします。
ホーム画面にアイコンが作成(サイトがインストール)されます。

iPhoneやiPadの場合、追加された「サイトアイコン」から起動してもSafariでサイトが表示されますので、見た目にはあまり変化がありませんが、キャッシュされているページについてはオフライン(機内モード等)でも閲覧することが出来るようになっています

つまりオフライン(機内モード)で閲覧できる状態であれば、PWA設定が正しく反映されているということになります。

Androidの場合

Androidの場合はサイトを表示した時、画面下部に表示される「ホーム画面に(サイト名)を追加」ボタンをタップすることで、ホーム画面にアイコンが作成(サイトがインストール)されます。

 

「ホーム画面に追加」ボタンが表示されていれば、PWA設定が正しく反映されているということになります。

※Android端末で【ホーム画面に追加ボタン】が表示される条件として「サイトへの訪問回数が2回以上で、それぞれのアクセスに5分以上の間隔がある」という仕様があるようです。

ちなみに作成されたアイコンからサイトを起動すると、起動前に『サイトのアイコンとドメイン名またはサイト名(スプラッシュ画面)』が表示されます。

『たにあど』スプラッシュ画面

スポンサーリンク

PWAを導入するメリット、デメリット

ここまでは、CocoonテーマでPWAを設定する方法と設定の確認方法をご説明致しました。

ここからは、PWAを導入するメリットとデメリットをそれぞれまとめてご紹介します。

私

設定も簡単だったし、デメリットなんてなさそうだけど?

PWAを導入するメリット

ここではPWAを導入するメリットをご紹介しています。

PWAを導入することで、下記のような効果があなたのサイトで得られます。

キャッシュを利用して、電波が繋がらない場所(オフライン)でも閲覧可能となる

PWAを導入すると『Service Worker』というスクリプトで、サイトコンテンツがキャッシュされます。

このキャッシュのおかげで【オフライン状態】でもサイトを閲覧してもらうことが可能となるのです。

またページの読み込みが短縮されることで、サイトが高速化されます。結果ユーザーの離脱率が下がり、ページビューの向上などが見込めます。

アプリストアからのインストールが不要

”ブラウザのUIを非表示にしたり”と、アプリのようなインターフェースが設定できるPWAですが、アプリストアからインストールする必要がなく、気軽に利用して頂くことができます

サイト上に表示される「ホーム画面に追加」ボタンをタップしてもらうだけで、利用準備(インストール)が完了するため、ユーザーの手間が少なくインストール前に離脱されることがなくなります

またアプリと違って、リリース時や更新時にアプリストアの審査を受ける必要がないというのも注目ポイントです。

「ホーム画面に追加」ボタンを表示できる

「Android端末のChrome・Firefox・Edge」、「ChromeOS」を利用しているなど限られたユーザーのみとはなりますが、サイトにアクセスした時にホーム画面に追加」というボタンをバナー表示させることができます

「ホーム画面に追加」ボタンを押すと、アプリと同じようにサイトのアイコンがホーム画面に追加される他、アプリとして認識されるためアプリドロワーにもアイコンが表示されます。

更に起動時の”*スプラッシュ画面”を設定することもできます。

【*スプラッシュ画面とは
サイトの読み込み時に表示される、サイトアイコンやサイト名が表示される画面のことです。
PWAを導入したサイトがホーム画面から起動されると「スプラッシュ画面」→「サイトページ」という順に表示されます。

『たにあど』スプラッシュ画面

PWAを導入すると上記のようなメリットが得られます。

この他にも「プッシュ通知」が利用できるようになったり、ネイティブアプリとは違い「検索結果からの流入が見込めたり」と良い点はたくさんあります。

ホーム画面にサイトのアイコンを手軽に追加してもらうことで、ブックマークからアクセスする手間を減らし、更にページの表示速度が早くなることで、サイトユーザーのストレスを減らすことができるというのは、PWAを導入する大きなメリットと言えるのではないでしょうか。

PWAを導入するデメリット

ここではPWAを導入するデメリットをご紹介しています。

2020年5月現在、PWA導入には下記のようなデメリットがあります。

ブラウザやOSによって利用できるPWAの機能にばらつきがある

Cocoonテーマを利用すればどなたでも手軽に導入できるPWAですが、まだまだ対応しているブラウザ・OSが少なく、ブラウザによって利用できるPWAの機能にばらつきがあります

例えば、Androidでは「ホーム画面への追加」を促すバナーを表示させることが出来ますが、iOSでは出来ません。(*2020年5月現在)

また『Chrome』ブラウザは、Android版・デスクトップ版にのみ対応しており、iOS版はPWA非対応となっています。

更に、日本人利用者の多いiPhoneの『iOS』では、下記のように一部機能が制限されています。

iOSで制限されているPWAの機能

・オフラインでのデータ容量が50MBまで
・プッシュ通知が使用できない
・「ホーム画面への追加」を促すバナーの表示ができない
・アプリ内課金ができない

iPhone(iOS)については、現時点(2020年5月現在)ではPWAの恩恵は少ないと言えます。

今後、PWAのすべての機能がiPhoneで使えるようになるかは定かではありませんが、PWAを導入したからといって既存のページが見られないということはありませんので、iPhoneで使えないからといってPWAの導入を見送る必要はないようです。

私

Androidは良いですが、iPhone(iOS)への対応はまだまだですね。今後要望が増えれば、少しずつ機能の対応範囲を改善していくとのことでした。

オフライン時は広告が表示されない

オフライン時は【Google AdSense】などの広告を表示することができません

オフラインでサイトが閲覧できると言っても、ほとんどのユーザーはオンラインでサイトを閲覧しますので、収益に大きな影響が出ることはなさそうです。

ちなみに【Google Analytics】によるアクセス解析については、オンラインになった時に必要な情報がまとめて送信されますので、問題ありません。

ネイティブアプリと同時に運用すると2倍の手間がかかる

PWAではネイティブアプリと似たような機能が実現できますが、完全にネイティブアプリと同じように使用することはまだ難しいのが現状です。

そのため既にネイティブアプリを提供している場合は、PWAの管理と合わせて2倍の手間がかかる可能性が考えられます

PWAの普及率が低いため、トラブルが起こった時に対処しにくい

PWAの普及率は、2020年5月現在でもそれほど高くありません。

ですので、なんらかのトラブルが発生した際にインターネットなどで検索しても解決方法が見つからない可能性が考えられます。

CocoonテーマでもPWA機能は【β版】となっており、キャッシュ等が原因で問題が発生した際に自身で対応できる方への利用をおすすめしています。
スポンサーリンク

まとめ

今回はCocoonテーマを使用しての「PWA設定方法」や「導入のメリット、デメリット」をご紹介させて頂きました。

PWA設定方法のおさらい

1.Cocoon設定の「PWA」タブから『PWAを有効化する』にチェックを入れて「保存」する。
2.同じく「PWA」タブにある【名前】【説明文】などの項目を入力していく。

たったこれだけの手順で、PWA設定を有効にすることができました。

HTTPS環境のサイトを運営している方がCocoonテーマを利用すると、僅かな時間でPWA設定を完了することができるかと思います。

PWA導入のメリット、デメリットのおさらい

メリット

・キャッシュを利用して、電波が繋がらない場所(オフライン)でも閲覧可能となる。
・サイトが高速化される。
・アプリストアからのインストールが不要。
・「ホーム画面に追加」ボタンが表示できる。

デメリット

・ブラウザやOSによって利用できるPWAの機能にばらつきがある。
・オフライン時は広告が表示されない。
・ネイティブアプリと同時に運用すると2倍の手間がかかる。
・PWAの普及率が低いため、トラブルが起こった時に対処しにくい。

PWAの導入には上記のようなメリット、デメリットがありました。
このメリット、デメリットを知った上で自サイトにPWAを導入すべきかを判断すれば、導入後に後悔することは少ないでしょう。
またCocoonテーマの場合は『PWAを有効化する』のチェックを外せば、すぐにPWA設定前の状態に戻すことができますので、一旦導入してみて自サイトに合わないようであればチェックを外すというのもありかと思います。
WordPress
スポンサーリンク
たにぽよをフォローする
たにぽよ

当サイトの運営者。
30超えてからいつもしんどい。

・32歳男
・大阪府出身→沖縄県在住
・個人事業主(アフィリエイト&クラウドワーク)

『趣味』
・オンライン麻雀(天鳳)
・格闘技観戦(プロレス・大相撲・ボクシング)

このサイトの他
沖縄巡り.com(沖縄の芸能人・観光・グルメ情報まとめサイト)』
天鳳マニアクラブ(オンライン麻雀ファンサイト)』
などを運営中。

たにぽよをフォローする
たにあど

コメント

おすすめサーバーランキング

アフィリエイター&ブロガー満足度No.1!

・日本で唯一の”LiteSpeed公式パートナー”
・元アフィリエイターが立ち上げたレンタルサーバー
・最高レベルのサイト表示速度
・無料独自SSL証明書対応
・復元無料の自動バックアップ機能
・WordPressクイックスタート機能
・大容量のディスク容量&転送量(高PVサイトも安心)
・サイト運用数20万件以上

格安料金ですぐに記事が書ける!

・月額費用が480円からと格安
・大容量のディスク容量&転送量(高PVサイトも安心)
・無料独自SSL証明書対応
・プランを自由自在に変更できる
・同サービス内でドメイン管理が可能
・「WordPress快速セットアップ機能」で簡単にSSL対応のWordPressサイトを作成できる
・安全性が高い遠隔地での自動バックアップも標準搭載(無料)
・データベース&ファイルの無料自動復旧可能(14日以内)

コストパフォーマンスNo.1!

・LiteSpeed対応のサーバーでは最安値(月額費用290円~)
・WordPressワンタッチインストール機能
・他サーバーからのサイトデータの引越代行が無料
・費用に対して利用できるサーバーのスペックが高い
・独自ドメインが無制限で利用できる
・ディスクの拡張だけでなくCPU、メモリを増強可能
・無料独自SSL証明書対応
・他のサイトが原因で自分のサイトが表示できなくなることがない
・24時間365日のサポートが受けられる
・無料お試しトライアルあり

低価格!初心者におすすめ!

・月額99円からという超低価格プランあり
・LiteSpeedを利用できるプランでも月額469円~
・無料独自SSL証明書対応
・自動バックアップ機能あり
・障害情報が少ない(安定性が高い)
・サポートの評価も高い

国内最速!サポート◎

・WEBサーバーの応答速度で国内最速を獲得している
・大容量のディスク容量&転送量(高PVサイトも安心)
・自動バックアップ機能あり
・データベース&ファイルの無料自動復旧可能(14日以内)
・WordPressかんたんインストール機能あり
・簡単サーバー移行ツールが用意されており、サイトの引越しが容易
・プランを自由自在に変更できる
・サポートの対応が迅速丁寧

初心者向き!安心と信頼の老舗!

・国内最大級のレンタルサーバー
・月額100円からという超低価格プランあり
・サーバーの管理画面が使いやすい
・これまでに170万人が利用している安心感

タイトルとURLをコピーしました