不登校ブログ

不登校ブログ

IT好きの小6がプログラミングや不登校について書くブログです。分からないことなどあれば本ブログをどうぞ!

#BlackLivesMatter

WordPressサイトをPWA+AMPに対応させるやり方。

WordPressでPWA+AMP

【Progressive Web Apps】HPをアプリ化した

この記事でPWA化したのはWordPressではなく1から作ったHTMLサイトです。
なので今回はPWAをWordPressでやったということとWordPressでAMPに対応させたという記事です。

PWAとは?

PWAとはGoogle(LLC)が進めているプロジェクトです。

PWAはProgressive Web Appsの略です。

日本語ではプログレッシブウェブアプリケーションと言います。

これは何なんだと言うとwebサイトを簡単にアプリのようにできるものです。

Google PlayやAppleStore(Apple系OSはPWA非対応も多い?)なども経由せず自分のページでホーム画面にインストールできます。

f:id:quietplace_1:20200306052241p:plain

AMP(Accelerated Mobile Pages)とは?

AMPはGoogleTwitterで共同で開発されてるプロジェクトです。

AMPはAccelerated Mobile Pagesの略です。

これはモバイルページを高速に表示させることができるものです。

ページの高速化をすることによってウェブサイトの離脱率が下がりユーザーに取ってストレスなくサイトを見れるようになります。

またGoogleの検索結果にも表示されることがあります。

デメリットとしてはページを軽くするためにJavaScriptなどが使えないなどさまざまなルールがあります。

詳しいルールについてはこちらを参考にしました。↓

AMPルール - Qiita

導入方法

PWA

注意

SSL化しておいてください。
導入時の条件です。

PWAは実はWordPressでやるのはめちゃくちゃ簡単です。
プラグイン入れるだけです。

なので今回は紹介しません。

プラグインでやりたい場合はこちらを参考にしてみるといいと思います。↓

因みにGoogleも作成に協力している公式プラグインもあります。

ですが実は自分はプラグインを使用してはいません。
なぜかと言ったら一番上のディレクトリがPWA化されてるからです。

つまりWordPressがインストールされているのはサブディレクトリです。

なのでそのファイルを引っ張り出すのをheadタグに書いておきました。

これでうまくいくのか分かりませんがサブディレクトリで普通にインストールできたので多分できてはいるとは思いますが詳しくは分かりません...

あんまり情報が無いんですよね。

<link rel="manifest" href="/manifest.json">
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/serviceWorker.js').then(function () {
console.log("Service Worker Registered");
});
}
</script>

AMP

WordPressだと公式が作っているAMPプラグインがあります。

これを入れるだけで完了しました。
基本はデフォルト設定でいいと思います。

f:id:quietplace_1:20200402085916p:plain

記事のURLの後ろに/ampを付けると確認できます。

本当に認識しているかAMPテストで確認しました。

f:id:quietplace_1:20200402091048p:plain

ちゃんと認識していますね。

PageSpeed Insightsで計測した所明らかに早くなっています。(モバイルの結果)

左:標準ページ、右:AMPページ

※使用テーマはSANGO+PORIPUtearsです。

f:id:quietplace_1:20200402090425p:plain
f:id:quietplace_1:20200402090558p:plain

まとめ

今回はPWA・AMPをとは何かということと導入方法までを解説しました。
間違ったことなどあればコメント頂けると嬉しいです。