WordPress 5.0 リリース
12月6日(日本時間26時ぐらい?)に、WordPress 5.0 がリリースされました。
さーて、このエントリーも Gutenberg で書いてみるよ!
以前プラグイン版の Gutenberg でトライして挫折したことがあり・・・ちゃんと最後まで書けるかな?
PWA for WordPress は WordPress のコアとはあまり干渉しないので、新バージョンでもまったく影響なく動くのですが、便乗して少し継ぎ足していた機能をのせて、アップデートをリリースしました。
新バージョンは 1.1.2 です。
前夜に 1.1.0 を出すよ!なんて Facebook に書いちゃってたのですが、いざ出す段になってからちょろちょろ修正が入り、1.1.2 になっちゃいました。
0.0.1 は修正の分、そして 0.0.1 は公式にアップしたときに Subversion のリポジトリにスクリプトを乗せ忘れるという間抜けな失敗で上げ直しになって、予告していたより 0.0.2 上がっちゃいました(笑)
最近は IDE 使ってるとファイル追加しても自動でリポジトリに追加されるのに慣れちゃってることが多いので、油断するとこんなことになるんですね。
気をつけよう。。。便利な環境に甘えすぎてました。
PWA for WordPress
そういえば PWA for WordPress ( PWA4WP ) について、作るのに一生懸命になっちゃって、使い方とか説明するエントリーをぜんぜん書いていないということに今ごろになって気付きましたorz
既に僕が書くより(公式のマニュアルより)はるかにわかりやすく使い方を解説していただいた記事がいくつかありますので、ここはそれを紹介させていただいてお茶を濁すというか、ご勘弁をいただきたいと思います。
こちらは僕がちょくちょく参加させていただいてる WordPress の勉強会で仲良くしていただいてる村重さんのブログ「猫でもわかる!WordPressレッスン」でPWA for WordPress をご紹介いただいている記事です。
初心者にもとてもわかりやすく書いていただいてますので、PWA ってなんだ?っていう方でもすんなり実装までいけると思います。
そしてこちらはバシャログさんの記事です。
ABC 2018 Spring での PWA の講演をご覧いただいていたようで、これまたとてもわかりやすくて感謝感激です。
http://bashalog.c-brains.jp/18/10/03-090000.php
( うまく埋め込み作れませんでした、リンクでご容赦を)
ちょっとやってみようかな、と思われた方はぜひご参考にしてみてください。
PWA4WP アップデート v1.1.2 の機能追加
さて、本題に入ります。
今回実装した新機能が2つあります。
1.マルチサイト対応
2.インストールポップアップのコントロール
このエントリーでは、これらの機能の使い方について解説します。
マルチサイト対応
このブログをご覧になっていればわかるかもしれませんが、このサイトもマルチサイトです。
ずっと以前、もともと仕事と切り離してブログを書いてた経緯もあって、そのなごりみたいな感じです。
少し技術的な話になりますが、WordPress をマルチサイト化すると、データベースに格納される設定情報なんかも子サイトごとに親サイトから切り離されて管理されます。
それぞれに個別のテーマを設定したり、個別の設定値を持たせたりすることが簡単にできてとても便利なのですが、こと PWA に関しては、用途によって全部のサイトで同じ PWA にしたかったり、サブドメイン型のマルチサイトだったら個別に設定を持たせたかったり、環境によってやりたいことが変わってきます。
これまでも PWA4WP ではそれぞれのサイトごとに ServiceWorker と Manifest ファイルを生成するので個別設定には対応できていましたが、今回のアップデートで全部の子サイトの PWA を一元化できるようになりました。
ServiceWorker? Manifest? という方はこちらをご一読ください。
これがいわゆる PWA の基礎となる技術です。
さて、そんなマルチサイト時の設定ですが、メインサイト(親サイト)の設定画面で設定します。
あらら、なんか日本語出てないところが・・・翻訳漏れたかな(^^;)
(※バージョン1.1.4で修正しました)
この設定は、メインサイト側でのみ表示されます。
「Unify all multi site into one PWA. 」「すべてのマルチサイトのPWAをひとつのPWAとして統合する」を選択していただくと、全サイトで共通の PWA が出来上がります。
サブディレクトリ型で全体を統合した PWA を作るときはこちらを選びます。
「Make PWAs for each multi sites individually. 」
「マルチサイトごとのPWAを分離して構成する」を選択していただくと、各サイトで個別の設定ができるようになります。
サブドメイン型のマルチサイトで、それぞれのサイトに個別の設定を持たせたい場合や、サブディレクトリ型で特定のサイトだけ PWA をアクティブにしたい場合はこちらを選択します。
ちなみにサブディレクトリの複数のサイトに複数の PWA をセットした場合は、検証している限りではそれぞれのサイト毎に ServiceWorker が個別に切り替わって動く、ちょっと気持ち悪い状態になります。
はたしてちゃんと別個にインストールできるのか・・・ごめんなさいそこまで検証追いついてないです。
ちょっと興味あるのでいずれ時間のあるときに試してみようと思います。
キャッシュやキャッシュデータを記録する領域は個別に分けられているので、理論的にはそれぞれ動けそうな感じではありますが・・・。
ちなみにここで全サイトで統合された PWA を選択した場合は、子サイトの設定画面は無効化されます。
メニューからも ServiceWorker / Manifest の表示がなくなり、ステータス表示だけになります。
PWA インストールの保留
なんのこっちゃ?と思われそうですが、この機能はけっこう画期的です。
通常、Chrome のデフォルトの挙動では PWA が有効なサイトにアクセスした場合、2回目以降のアクセスで、かつ初回アクセスから5分以上の間隔を空けたタイミングでインストールを促すポップアップが表示されます。
いわゆるインストールイベントの「発火」というやつです。
デフォルトのままだと時期尚早な感じがしますよね。
しかもポップアップしてくるのでユーザーにしてみるとつい×ボタン押して閉じちゃいますよね。
そこでインストールの保留です。
この機能はインストールのポップアップが発生したイベントを保留しておく機能なのですが、簡単に説明すると、その保留しておいたイベントをボタンなどに割り付けることができるんです。
設定は簡単です。
「PWA インストールを保留」の設定項目を「Defer PWA install」「PWAインストールを保留する」に設定するだけでOKです。
※なんか設定の画面がところどころ日本語になってない・・・ごめんなさい後日対策調べます(バージョン1.1.4で修正しました)
インストールポップアップを抑止したいだけならこれだけで完了です。
ボタンの設置をしたい場合は、この先のサンプルコードを参考に、ボタンの設置をしてみてください。
インストールしないPWA?
ここでひとつ、疑問に思われたかもしれません。
インストールを抑止しちゃったら PWA の意味なくない?
はい、ごもっともです。
でも、インストールしなくても機能する魅力的な利点もあるんです。
インストールすることによって、
・ホーム画面にアイコンができる
・スプラッシュ画面
・アドレスバーのないアプリライクな見た目
などの利点があります。
しかし、インストールしなくても、
・ServiceWorker によるキャッシュ制御
・Manifest に設定されたテーマカラー等のブラウザ背景への適用
などは動いています。
つまり、独立したアプリとしては存在しないけど、ブラウザの中ではちゃんとPWAとして動いている、という状態なんです。
キャッシュ機能を活用したパフォーマンス向上などを目的とするのなら、必ずしもインストールは必須ではありません。
オリジナルの PWA インストールボタンを設置する(ここから上級者向け)
さて、ここからは少し難しい話になってきます。
自分でサイト内にPWAのインストールボタンを設置する方法です。
PWA4WP は、保留したインストールイベントを、javascript のグローバル変数「window.pwa4wp_installevent」に格納します。
そして、function 「pwa4wp_open_install 」をコールします。
みなさんはこの「pwa4wp_open_install」を作成して思い思いの PWA インストールを配置してください。
このサイトのトップページ一番下にサンプルとしてボタンを貼り付けています。
これをクリックすると、インストールイベントが発生し、ポップアップ「ホームボタンに compin.jp を追加」をタップしたときと同じ動作になります。
ちなみにこれはデスクトップ版のChromeでも機能します。
(Windowsでの挙動です)
デスクトップ版でやると、いきなりニョキっとアドレスバーのないウインドウが起動してきます。
また、デスクトップにはサイトアイコンのショートカットができてます。(ショートカットはChromeの中でPWAを起動する感じのものです)
サンプルコードは gist に掲載していますので、こちらも参考にしてください。
https://gist.github.com/ryu-compin/f2eea606f6a3db7fe9681cf7695e3c08
htmlとcss
まずは html と css ですが、特別なことは何もありません。
<div id="pwainstall">
<button id="pwainstall_button" class="square_btn">Add to Home Screen</button>
</div>
#pwainstall {
display: none;
}
javascript
そして javascript ですが、このサイトでは以下のように書いてます。
var pwa4wp_open_install = function(){
console.log("install button show");
jQuery('#pwainstall').css('display','block');
};
document.getElementById("pwainstall_button").addEventListener("click",function(){
if(window.pwa4wp_installevent !== undefined ){
window.pwa4wp_installevent.prompt();
window.pwa4wp_installevent.userChoice.then(
function(choiceResult){
if(choiceResult === 'accepted'){
// insert actions for installation accepted here
console.log('pwa installation accepted.');
}else{
// insert actions for installation refused here
console.log('pwa installation refused.');
}
});
window.pwa4wp_installevent = null;
}else{
console.log("install event is undefined");
}});
functions.php から埋め込み
そしてこれらを埋め込むためのコードをfunctions.phpに追記します。
// add this code to functions.phpfunction
enque_pwa4wp_installaction(){
wp_enqueue_script('pwa4wp_pwa_installer',
get_stylesheet_directory_uri()
. '/js/pwainstall.js','','1.0',true);
}
add_action( 'wp_enqueue_scripts', 'enque_pwa4wp_installaction' );
これで完成です!
ちょっと最後のほうのオリジナルボタンの実装は複雑で難しいかもしれませんが、かなり自由度が増すことはお分かりいただけたのではないかと思います。
(追記)
このサイトは「Nishiki」というテーマを使用しています。
Nishikiには専用プラグインに javascript をページ内に挿入する機能があり、このプラグインの機能を利用すれば functions.php を使用することなく直接 javascript を挿入できます。
詳しくはNishikiのサポートサイトを参照してください。
https://support.animagate.com/manual/wp-nishiki-gb-install/
javascript をページ内に挿入できるようなプラグインもいくつかあるようですので、こうしたものを活用すればさらに簡単に PWA インストールボタンを設置できそうですね。