Luxeritas(ルクセリタス)のカスタマイザー機能でPWAの設定をイジってみる【PWA 編】

2018年10月24日ブログ管理Luxeritas, Luxeritas内部カスタマイズ, PWA, ブログ管理, 初心者

PWAヘッダー

トリ師匠
トリ師匠
今日も朝っぱらからゴロゴロと。暇か?

ぐず夫
ぐず夫
暇ちゃうわ、テレビ見てるやろ。
トリ師匠
トリ師匠
世間ではそれを暇や言うんじゃ。
今回は最近の目玉機能でもあるPWAを設定するで用意しい。

ということで、今回はLuxeritasのカスタマイザー機能を使った「PWA」の設定をしてみたいと思います。

PWA 機能

内部カスタマイズ選択

トリ師匠
トリ師匠
PWA機能は、簡単に言えばサイトをアプリ化できる機能かの。ちょいと新しい機能やで耳馴染みはないかも知らんけど、管理画面から「Luxeritas」「カスタマイズ」を選択して、「PWA」タブを選んでみよか。

PWAってなんじゃらほい?

PWAとは?

ぐず夫
ぐず夫
なんやまた知らへん単語が出てきたの…

トリ師匠
トリ師匠
PWAはAMPと同じく近年Googleさんが推してるモバイルユーザーさん向けの新しい仕組みじゃの。ページをインストール不要のアプリ的な使い方ができるようにしてくれるっちゅうもんじゃ。
ぐず夫
ぐず夫
なんやそれ、意味あるんか?
トリ師匠
トリ師匠
ページの読み込み速度や表示速度が上がったり、オフラインでもサイトの記事が読めたりとか、まあスマホのアプリ的にサイトが楽しめるのがメリットじゃな。
ぐず夫
ぐず夫
…スマホのアプリ?
ワシ、あんま使わへんからよく知らへんけど便利なら使ってみたらどやねん。
トリ師匠
トリ師匠
そらぐず夫の勝手やけど、PWAにもメリットやデメリットが当然あるからの。
PWAのメリット!
  • ページ速度が早い!
  • オフラインでも動作可能!
  • インストールも不要!
  • アプリとしてリリースする必要もなし!
PWAのデメリット!
  • 認知度が低いため使われない場合が多い!
  • ページの目的に合っていなければ本当に無意味!
トリ師匠
トリ師匠
AMPと同じじゃけど、新聞媒体のモバイル向けサイトなんかでは導入する意味は大きいで。ただ何回も言うけど、ウチはページの作り方を説明してるページじゃからの。
ぐず夫
ぐず夫
スマホのお客はんが見いひんから、あんま意味ないってやつやな。AMPん時にも聞いたわ。
トリ師匠
トリ師匠
せや。ウチで使う意味はあんまないで有効にせえへんけど、サイトの中身によって使うのを検討してみるとええで!

※もっと詳しく知りたい人はここ(外部サイト)とか読んでみて!

① モバイル用テーマ

モバイルブラウザ上で表示される色味を設定します。

【 テーマの色 】
ブラウザURL入力欄等の色を設定する機能。

【 背景色 】
背景色を設定する機能。

トリ師匠
トリ師匠
これは作成者さんが紹介してくれてるで、そちら(外部サイト)を参考にしてちょ!

② PWA

PWA機能の有効化とPWAの設定を行う機能。

【 PWA(Progressive Web Apps)有効化 】
PWA機能の有効/無効を選択します。

【 モバイルからのアクセス時のみPWAを有効にする 】
モバイルからのアクセス時のみPWAを有効にする機能。

トリ師匠
トリ師匠
PWAを使用するなら基本的にチェックでええと思うで。

オフラインページ

【 キャッシュによるオフラインでの閲覧を許可する 】
オフラインでの閲覧を可能にします。なお、一部アフィリエイト、アドセンス等が非表示となることがあります。

【 アプリケーションのインストールボタンを表示する 】
ホームにアイコンが追加されるインストールボタンをページに表示する機能。

【 要求されたページがキャッシュされていない場合 】
キャッシュがない場合に表示するページを設定する。

トリ師匠
トリ師匠
インストールボタンなんかのイメージはこちらのサイトの画像(外部サイト)などで見てみてちょ

③ マニフェスト

使用者に提供するマニュフェスト(主にアプリケーションの情報。名前やアイコンや起動時URLなど)の設定やインターフェースを選択する機能。

【 PWA が無効でもマニフェストファイルを作成して読み込む 】
PWAが無効の場合もマニュフェストファイルを読み込む。

トリ師匠
トリ師匠
作者さんも言ってるけど、読み込めはするけど意味があるかどうかは不明じゃ。

【 スタートページ 】
アプリケーション登録後の起動時、最初に表示されるページを設定する。

トリ師匠
トリ師匠
ま、いわゆるホーム画面の設定じゃな。

【 アプリケーション名 】
【 短いアプリケーション名 】
【 説明 】
【 アイコン 】

トリ師匠
トリ師匠
イメージはこんな感じ(外部サイト)じゃ。モバイル端末上で表示される部分やで、好みの情報に直したってな!

【 画面表示モード 】
画面の表示モードを選択します。

トリ師匠
トリ師匠
こちらはGoogleさんが例を出してくれてるでこちら(外部サイト)を見てみてちょ。

【 画面の向き 】
画面の向きを設定します。

トリ師匠
トリ師匠
こちらも同じくGoogleさんの例(外部サイト)を参考にしたってちょ。
ダンパ
ダンパ
なお、PWAの動作確認方法は作者さんが詳しく解説(外部サイト)してくれています。設定を終えたら動作の確認をしてみるといいでしょう。

 

PWAの設定を終えて…

ぐず夫
ぐず夫
なんや今日はトリも口数が少なかったの。
トリ師匠
トリ師匠
正直ワシもそこまで詳しくないもんでの。PWAはこれまで使う用途もなかったから探り探りじゃ。
ぐず夫
ぐず夫
正直に言うやないか。免じて今日のところは許しといたる。
トリ師匠
トリ師匠
(ゆ、許された! て、…なにをじゃ?)

以上でPWA編の内部カスタマイズを終了します。

ではまた次回!