ブログをPWA化してみた。PWAとは、WordPressをPWA対応する方法。ARTICLE【FE風花雪月】煤闇の章、ハードクラシック攻略4日目【ファイアーエムブレム】HOME技術系ブログをPWA化してみた。PWAとは、WordPressをPWA対応する方法。ブログをPWA化してみた。PWAとは、WordPressをPWA対応する方法。自分のWordPressサイトでもプラグインを使って導入してみました。今回はその簡単な導入方法と、PWAとは何かについて解説していきます。Appsの略で、ザックリいうと、Webサイトをスマホアプリのように使用できる状態にすることです。「Push機能が実装できる」などがあります。有名なところだと、スターバックスなどがPWAを導入し、アプリのような感覚で商品の注文・予約が出来ることが話題になりました。ちなみに、同じようなWebのSEO用語でAMPというものがありますが、これはGoogleが出している、Webページを高速で表示するための指標のようなもので全く違うものになります。(どちらもGoogleが推奨しているという共通点はあります)ちなみに、この手の機能は大体がそうですが、IOSとAndroidで使える機能が違っています。IOSではPush機能などがまだカバーされていない等微妙な違いがあるので、実装の際はご注意ください。自分のブログでもPWAを試してみました。いっても、自分でコーディングする必要もないし、HTMLもCSSもいじってません。WordPressには強力な味方、プラグインがあるのでそれを使いました。SuperPWA今回使ったのはSuperPWAというプラグイン。設定方法は、WordPressの管理画面の「プラグイン」→「新規追加」をクリックプラグイン検索画面が出てくるので、「キーワード」の欄に「PWA」といれます。Apps」というプラグインが出てくるので、有効化しましょう。なんと、これだけで完了です。いえ、初期状態のままだと味気ないので、設定を変更していきましょう。SuperPWAの設定変更プラグインを有効化すると、管理画面左下に「SuperPWA」というアイコンと文字が出てくるので、そこをクリックして「Setting」リンクをクリックすると設定を変更できます。Name」が、ホーム画面のアイコンの下に表示される短縮名です。覚えやすい素敵な略称を付けてあげましょう。「Description」はアプリの詳細で見れる項目です。見られる箇所ではないのですが、どんなブログか書いておきましょう。Icon」は重要で、ホーム画面に表示されるアイコンのことです。アイコンは結構重要で、特徴的なアイコンの方が日常的にタップしやすいのでここは拘った方が良いかもしれません。Icon」は、Splash画面、つまりアプリ起動時の画像を設定できます。ここは要は起動待機時の画面なので、読み込みの速さに自信があれば特に拘らなくても良いかもしれません。Color」は、Splash画面での背景色を設定できます。Splash画像にマッチするような色合いを選んであげましょう。Color」はブログのテーマカラーです。ここで指定した色がシステムヘッダーなどにも反映されるので、自身のブログで良く使う色合いを使うのが良いと思います。Page」はアプリ起動時に表示されるページを指定できます。このブログであれば記事一覧ページ、といった感じですね。Page」はオフライン時に表示するページです。ここも記事一覧ページか、オフライン時用の固定ページを作っておいてそこを設定するのが良いと思います。「Orientation」はスクリーンの向きの設定です。Web状に横スクロールゲームを置いてPWA化した場合などに使うのが良いと思います。Setting」を押して完了です。Add-Onsさらに応用として、Add-Onsが用意されているようです。Icons」の二つが用意されています。Icons」は、IOS用のアイコン設定を出来るようになるみたいです。現在はこの二つですが、そのうち機能拡張がされれば、Push機能などもノンプログラミングで出来るようになるかもしれません。Apps)を始める方法についてまとめました。記事を提供するブログのような、毎日目を通すものにこそ便利な機能だと思います。SEO対策のためにも導入を検討してみてはいかがでしょうか。ARMS)についてまとめてみた。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。