ここあです。
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機能とは対照的に、
一切エラーを気にすることなく誰でも手軽に設定できてしまう
もう１つの目玉機能が「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に変更しましたが
- １記事１記事の微調整
- AMP設定の調整と修正
- サイトデザイン全体の調整
これら全てがある程度終わってから
PWA機能をONにしました。
PWA機能の設定方法
それではTHE THORの目玉機能でもある
「PWA機能」の設定をしていきましょう。
PWAの設定をする時は、ダッシュボードメニューから
外観 → カスタマイズをクリック。
続いて、PWA設定［THE］をクリックします。
そうすると、このように2つの設定項目が表示されますので
「PWA機能設定」をクリックします。
PWA機能設定をクリックしたら、以下2つの設定をしましょう。
- PWA機能を有効化
- ホーム画面のアイコンテキストを入力
私は一瞬、②のホーム画面のアイコン下テキストとは何？
と思ったのですが、要はここです。
なので、スマホのホーム画面に表示させる
アイコン下のテキストを設定する場合は
- 日本語なら7文字以内
- 英文字なら半角13文字以内（スペース含む）
に設定すれば、きちんと収まります。
それ以上の文字数を設定すると
「cocoa blogge…」と末尾が「…」で表示されてしまいますので
気を付けてくださいね。
PWAの有効化、アイコン名が入力できたら続いて
アイコンの設定をしていきます。
PWA設定［THE］に戻ると「アイコンの設定」という項目がありますので
「アイコンの設定」をクリックし、
PWA機能に必要なアイコンの登録を進めましょう。
アイコンサイズは以下の3つ。
- 72 × 72 pixel
- 192 × 192 pixel
- 512 × 512 pixel
上記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の設定方法について
解説させていただきました。
とは言え、設定方法に関しては、特に難しいこともなく
わざわざ記事にするまでもないぐらいですが
私がこの記事を書いたのにはきちんとした理由があります。
というのも、まだまだあまり聞き慣れないPWAの機能に関して
THE THORのマニュアルサイトには何の説明もないからです。
つまり、私が今回、あなたに説明した設定方法は
確かにマニュアルサイトにもあるのですが
- 「PWAとは一体何？」
- 「どんな機能で、何ができるの？」
というPWAの機能については、一切説明がありません。
そもそも、私たちは一般のネットユーザーであって
プログラマーでも、コーダーでもSEでもないわけです。
なので、ただ「PWA機能」と聞いただけで
その機能の内容まで理解できる人は正直ほとんどおりません。
それをわざわざ「ググれ！」というのもおかしな話。
だから、私は私自身がPWAの機能を理解するため
また、革新的な機能でもあるPWAをより多くの人に理解してもらうため
こうして記事をまとめました。
もちろん、これからPWA機能が当たり前のように
他のテーマに実装されれば、機能の認知度も上がり
理解はされやすくなってきます。
ですが、現時点では、ほぼPWA機能は認知されておりません。
だからこそ、私はPWAの機能に関して
機能の設定方法以上に、説明が必要だと感じたのです。
ということで、私もSEやコーダーではなく
PWA機能に関しては、Google先生を頼って勉強している程度なので
まだまだこの程度の記事しか書くことはできませんが
それでも「PWA機能とは何ぞや？」と
概要だけでも知りたいあなたに少しでもお役に立てると嬉しいです。
あとは、きちんと機能を使うことで
どんなメリットやデメリット、ベネフィットがあるのかを
さらに理解できるようになると考えておりますので
せっかく革新的な技術が実装されているのなら
全く使わず宝の持ち腐れにするのではなく、分からないなりにも実際に使ってみて、
その効果をしっかりと検証していきたいと思います。
なので、ぜひあなたもPWA機能を活用してみてくださいね。
ということで、最後までお読みいただき
ありがとうございました。
