【THE THORの使い方】PWAの設定方法を詳しく解説!

ここあです。

 

WordPressテーマ「THE THOR(ザ・トール)」には

サイトの表示速度を早めるための目玉機能でもある

  • AMP(Accelerated Mobile Pages)※通称「アンプ」
  • PWA(Progressive Web Apps)

これら2つの機能があります。

 

とは言え、AMPの設定に関しては無責任なことに

「THE THOR(ザ・トール)」のマニュアルサイトは

AMPはただ闇雲に機能を有効にすれば良いわけでなく、AMPの機能を最大限に発揮するには、サイト運営者自身がAMP機能について十分に理解しておくことが重要です。AMPについての詳しい情報につきましては公式サイトでご確認されることをおすすめいたします。

と、AMPの公式サイト(英語サイト)に丸投げ状態。

 

ある意味「Unbelievable!」(笑)

 

なので、私はこのサイトを完璧にAMP化しておりますが

正直、設定当初はGoogleから日々届くエラーメッセージを

自力で解消するのに苦労しました^^;

 

しかし、そんな「THE THOR」のAMP機能は、

確かにきちんと設計された上で作られています。

 

なぜなら、THE THORのAMP機能で設定されたモバイルページは

通常のページと大差がないぐらい綺麗に表示されるからです。

 

だから、「THE THOR(ザ・トール)」のAMP機能は

正直、使わないともったいないと言うのが私の本音でもあります。

 

ということで、こちらの記事に私が行った

AMPエラーの解消方法」をしっかりとまとめているので

AMP設定をしたいというあなたはぜひチャレンジしてみてください。

 

また、そんな厄介なAMP機能とは対照的に、

一切エラーを気にすることなく誰でも手軽に設定できてしまう

もう1つの目玉機能が「PWA設定」です。

 

今回は「THE THOR(ザ・トール)」を導入したら

確実に設定して欲しい「PWA機能の設定方法」について

解説させていただきます。

 

THE THORのPWA機能とは?

そもそも「PWA機能」とは一体何なのか?

まずはその詳細について簡単に解説させていただきますね。

 

PWA(Progressive Web Apps)とは、簡単にいうと

モバイル端末上で、あなたのWebサイトを

まるでスマホ向けアプリのように使える仕組みのこと。

 

この機能はGoogleが開発したAMP機能と同様、

Googleが提唱し、普及に力を入れている機能でもあります。

 

実際、PWAの設定をONにすることで

スマホのホーム画面にアイコンを追加したり、

 

プッシュ通知などのスマホアプリの特徴的な機能を、

Webサイトに追加することが可能になります。

 

なので極端な話、PWA機能と言うのは

あなたのwebサイトをスマホ用に簡易アプリ化できる機能だと

考えてもらって大丈夫です。

 

つまり、PWAの設定をすれば、ネットユーザーは

あなたのサイトをスマホのアプリを起動するように

閲覧・利用することができるようになる非常に画期的な機能なのです。

 

ただ、あなたのサイトをネットユーザーにスマホの

ホーム画面に登録してもらう必要がありますけどね…^^;

 

ですが、そんな機能を

いち早く導入している「THE THOR(ザ・トール)」は

まさに最先端のWordPressテーマだと言えます。

 

ということで、

最先端の機能はどんどん活かしていきましょう。

 

THE THORのPWA機能を利用すると

「THE THOR(ザ・トール)」に実装されているPWA機能を使うと

実際にどうなるのかを解説させていただきます。

 

通常、Googleなどのブラウザ画面で「ホーム画面に追加」をクリックすると

ホーム画面上にアイコンを追加することができますが

そのままアイコンをクリックしても、

 

ホーム画面から開くサイトはWebブラウザの中で開きます。

 

例えば、以下は、iphoneで開いた時のsafariの画面ですが

ホーム画面から開いたページもsafari内で開くため、

両端の画面は見え方が全く同じです。

 

ですが、THE  THORのPWA機能をONにすると

このように、ホーム画面のアイコンからサイトを開くと

Webブラウザ(safari)の1ページとしてではなく

 

まるでアプリで開いているかのように開きます。

 

その証拠に、両端の画像を見比べれば分かりますが、

右側の画面は最上部にあるURLの表示が消え、

画面が広く見やすくなっています。

 

なので、Webブラウザとは異なり、ネットユーザーには

別のサイトへと安易に移動されなくなりますので

 

様々なページをサクサクと見てもらえる上に

閲覧数も確実にアップする可能性がかなり高くなります。

 

THE THORのPWA機能を導入するメリット

「THE THOR(ザ・トール)」のPWA機能を導入するメリットは

何と言っても、サイトの表示速度を高速化できることです。

 

そして、サイトの表示速度が速くなれば

当然、ネットユーザーのストレスが減り、直帰率も低くなります。

 

また、PWA機能はWebブラウザのキャッシュを使う機能となるため

一度読み込んだデータを再度読み込む必要がなくなり

サイトの表示速度を速められると同時に、

 

「オフラインの状況でも閲覧することができる」というのも

ある意味、非常に大きなメリットになります。

 

さらに、ホーム画面に追加されたアイコンをタップするだけで

簡単にあなたのサイトを閲覧することが可能となるので

 

ブラウザで検索されるより、サイトへのアクセスが容易となり

アクセス数の増加もかなり見込めるようになってきます。

 

とは言え、PWA機能はメリットばかりではありません。

 

THE THORのPWA機能を導入するデメリット

一見非常に良さそうなPWA機能ですが、

少しだけデメリットがあります。

 

というのもPWA機能というのは、あくまでも

Webブラウザのキャッシュデータを使って

サイトの表示速度を早める機能。

 

なので、「THE THOR(ザ・トール)」のマニュアルサイトにも

注意事項として記載されておりますが、一度PWAを有効にしてしまうと

PWAをOFFにしてもキャッシュ自体が残ってしまいます。

 

つまり、キャッシュデータが残ってしまうということは

あなたがサイトデザインをカスタマイズした際に、

データがすぐに反映されないという弊害が起こってしまうのです。

 

しかも、キャッシュデータは通常のキャッシュ削除方法では

削除することができません。

 

ということで、

PWA機能を導入する際、あなたに気をつけて欲しいことは

THE THORのマニュアルサイトにも記載がある通り

サイト作成初期のまだカスタマイズが済んでいない時期にPWAを有効にしてしまうと「カスタマイズが反映ししない・カスタマイズが進まない」と悩んでしまうことになりますので、PWAはサイト作成が済んでから有効にすることをおすすめします。

 

PWAの設定はサイトデザイン等のカスタマイズができた

一番最後に設定することをおすすめします。

 

なので、私もこのサイトをSTORKからTHE THORに変更しましたが

  • 1記事1記事の微調整
  • AMP設定の調整と修正
  • サイトデザイン全体の調整

これら全てがある程度終わってから

 

PWA機能をONにしました。

 

PWA機能の設定方法

それではTHE THORの目玉機能でもある

PWA機能」の設定をしていきましょう。

 

PWAの設定をする時は、ダッシュボードメニューから

外観 → カスタマイズをクリック。

 

続いて、PWA設定[THE]をクリックします。

PWA設定

 

そうすると、このように2つの設定項目が表示されますので

「PWA機能設定」をクリックします。

PWA設定[THE]

 

PWA機能設定をクリックしたら、以下2つの設定をしましょう。

  1. PWA機能を有効化
  2. ホーム画面のアイコンテキストを入力

PWA機能設定

 

私は一瞬、②のホーム画面のアイコン下テキストとは何?

と思ったのですが、要はここです。

アイコン下テキスト

 

なので、スマホのホーム画面に表示させる

アイコン下のテキストを設定する場合は

  • 日本語なら7文字以内
  • 英文字なら半角13文字以内(スペース含む)

に設定すれば、きちんと収まります。

 

それ以上の文字数を設定すると

「cocoa blogge…」と末尾が「…」で表示されてしまいますので

気を付けてくださいね。

 

PWAの有効化、アイコン名が入力できたら続いて

アイコンの設定をしていきます。

 

PWA設定[THE]に戻ると「アイコンの設定」という項目がありますので

PWA設定[THE]

 

「アイコンの設定」をクリックし、

PWA機能に必要なアイコンの登録を進めましょう。

 

アイコンサイズは以下の3つ。

  • 72 × 72 pixel
  • 192 × 192 pixel
  • 512 × 512 pixel

PWAアイコン設定

 

上記3サイズになります。

 

なお、アイコン用の画像サイズは以下のサイトで

簡単にリサイズすることができますので、適正サイズにリサイズし

それぞれの画像をアップロードしてみてください。

 

操作は非常に簡単で便利です。

画像リサイズツール

 

PWA用のアイコンが3つとも全て登録できたら

PWAアイコン設定

 

最後に公開ボタンをクリックして設定を保存しましょう。

そうすると、以下のようなメッセージが表示されますので

 

「再送信」のボタンをクリックし

しばらく待っていると設定が完了します。

※再送信にはしばらく時間がかかりますので、気長に待ちましょう。

 

なお、登録が全て完了したら、それで終わるのではなく

スマホの画面を表示させ、「ホーム画面に追加」をクリックし

 

実際にアイコンからPWA設定した画面が

きちんと開くかどうか必ず確認するようにしてくださいね。

 

 

上記画面のように、最上部にwebブラウザのURL表記がなく

ブラウザとして開いてなければOKです。

 

とりあえず、あなたご自身のスマホに

PWA機能で設定したアイコンがあれば

 

いつでも簡単にスマホの画面で確認できますので

自分で自分のサイトを見る時も非常に便利になります。

 

ということで、THE THORのPWA設定は簡単にできますので

ある程度、サイトの体裁が整ったらPWAの設定も

ぜひ「有効」にしてみてください。

 

THE THORのPWA機能を導入する時の注意点

PWA機能はWebサイトの通信プロトコルがSSL化された

「https」から始まるURLでしか設定することができません。

 

なので、あなたのサイトをSSL化していない場合は

PWA機能は使えませんのでご注意ください。

 

また、iphone(iOSのシステム上)では

Androidのスマホに比べて次のような制限があるため、注意が必要です。

  • オフラインのデータ容量は50メガバイトまで。
  • プッシュ通知、アイコンのバッジ、Siriの統合は使えない。
  • アプリ内課金やその他のAppleサービスにアクセスできない。

 

つまり、PWA機能は革新的な技術とは言え

まだまだ発展途上の機能のため、上記のような制約などもあり

 

不具合も出てくる可能性は決して0とは言えませんので

その点を踏まえた上で、PWA機能を使うようにしてくださいね。

 

PWAのキャッシュをクリアする方法

PWAの設定をすると当然、

キャッシュデータをクリアしたい!」というタイミングが

必ず出てくると思います。

 

なので、PWAのキャッシュデータをクリアする方法も

合わせてお伝えしておきます。

 

Google Chromeの場合

Google Chromeのキャッシュデータをクリアする場合は

あなたのサイトの任意ページを開いた状態で右クリックをすると

 

このようなデベロッパーツールを開くためのウインドウが表示されますので

その中の「検証」をクリックします。

検証ツール表示

 

検証をクリックすると、以下の画面が表示されますので

検証ツール

 

画面右上に表示されている「≫」をクリックし

「Application」を選択します。

検証ツール

 

「Application」を選択すると以下のような画面が表示されますので

「Clear site data」をクリックすることで

手動でキャッシュデータをクリアすることができます。

検証ツール

 

ただし、キャッシュデータをクリアする際には、

その下に表示されている以下の項目に

チェックが入っているかも併せて確認してくださいね。

検証ツール

 

Firefoxの場合

Firefoxのキャッシュデータをクリアする場合は

画面右上にあるメニューバーをクリックし

キャッシュクリア

 

続いて「設定」をクリックします。

キャッシュクリア

 

設定をクリックしたら、そのまま

「プライバシーとセキュリティ」をクリックしましょう。

キャッシュクリア

 

「プライバシーとセキュリティ」の画面を開いたら

「Cookieとサイトデータ」の項目が表示されるまで画面をスクロールし

「データ管理」をクリックします。

キャッシュをクリア

 

そうすると、以下のような管理画面が開きますので

キャッシュデータをクリアしたいURLを選択し

キャッシュのクリア

 

「選択したサイトデータを削除」をクリックしたら

最後に「変更を保存」して完了です。

キャッシュをクリア

 

なお、Firefoxのキャッシュデータをクリアする際は

公式サイトのマニュアルも参考にしてみてください。

 

ということで、Google ChromeとFirefoxのキャッシュデータを

クリアする方法を解説させていただきましたので

 

PWA設定後に、カスタマイズがうまく反映されないなど

不具合が生じた場合にぜひ確認してみてくださいね。

 

【THE THORの使い方】PWAの設定方法まとめ

【THE THORの使い方】PWAの設定方法まとめ

 

今回は、THE THORの目玉機能でもあるPWAの設定方法について

解説させていただきました。

 

とは言え、設定方法に関しては、特に難しいこともなく

わざわざ記事にするまでもないぐらいですが

私がこの記事を書いたのにはきちんとした理由があります。

 

というのも、まだまだあまり聞き慣れないPWAの機能に関して

THE THORのマニュアルサイトには何の説明もないからです。

 

つまり、私が今回、あなたに説明した設定方法は

確かにマニュアルサイトにもあるのですが

  • PWAとは一体何?
  • どんな機能で、何ができるの?

というPWAの機能については、一切説明がありません。

 

そもそも、私たちは一般のネットユーザーであって

プログラマーでも、コーダーでもSEでもないわけです。

 

なので、ただ「PWA機能」と聞いただけで

その機能の内容まで理解できる人は正直ほとんどおりません。

それをわざわざ「ググれ!」というのもおかしな話。

 

だから、私は私自身がPWAの機能を理解するため

また、革新的な機能でもあるPWAをより多くの人に理解してもらうため

こうして記事をまとめました。

 

もちろん、これからPWA機能が当たり前のように

他のテーマに実装されれば、機能の認知度も上がり

理解はされやすくなってきます。

 

ですが、現時点では、ほぼPWA機能は認知されておりません。

 

だからこそ、私はPWAの機能に関して

機能の設定方法以上に、説明が必要だと感じたのです。

 

ということで、私もSEやコーダーではなく

PWA機能に関しては、Google先生を頼って勉強している程度なので

まだまだこの程度の記事しか書くことはできませんが

 

それでも「PWA機能とは何ぞや?」と

概要だけでも知りたいあなたに少しでもお役に立てると嬉しいです。

 

あとは、きちんと機能を使うことで

どんなメリットやデメリット、ベネフィットがあるのかを

さらに理解できるようになると考えておりますので

 

せっかく革新的な技術が実装されているのなら

全く使わず宝の持ち腐れにするのではなく、分からないなりにも実際に使ってみて、

その効果をしっかりと検証していきたいと思います。

 

なので、ぜひあなたもPWA機能を活用してみてくださいね。

 

ということで、最後までお読みいただき

ありがとうございました。

 

 

WordPressテーマ「THE THOR」
一流の開発陣によって集客と収益に徹底的にこだわり開発された究極のテーマ「ザ・トール」。どのテーマよりも早く実装された革新的機能が詰まったこのテーマで、あなたもインターネットを活用したビジネスを始めませんか?

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG