このセッションではまず、PWAとはどんなものなのか、その利点と、ワードプレスのウェブサイトのPWA化について、その手法や注意点などの脳派をお話しいただきます。また、ワードプレスPWA化プラグインPWA4ワードプレスを利用した簡単なワードプレスサイトのPWA化のデモをご紹介いただきます。それでは、シン・ド・リュウロスケさんでチャレンジPWAウェブの舞台はホーム画面へ進撃するです。どうぞよろしくお願いします。これからですね、だいたい40分くらいですね、PWAについてのお話をさせていただきます。シン・ドと申します。よろしくお願いします。先ほどご紹介いただきましたけど、僕、今年の春先くらいからPWAに関しての集中勉強会にちょっと集中したりしてですね、PWA押しみたいな感じで、最近ちょっとですね、身近感の時に、PWAの人って言われるような、ちょっと嬉しいやな、なんかちょっと押しすぎてるのかなっていうのが、ですね、そんな感じなんですけど、ワードプレスについてもですね、普段僕があのウェブも作ったりしてますので、その関係でワードプレスもよく使っていまして、そこでワードプレスをPWA化するっていうですね、プラグインを開発しまして、これ先月レディースしたばっかりです。まだですね、あんまりこうダウンロード伸びてないんでよかったら使ってやってください。はい、じゃあ早速お話を入っていきたいと思います。PWAそのものについてですね、ちょっと皆さん、PWA初めて聴くっていう人、どのくらいらしいですか?バラバラ、バラバラいらっしゃいますね。はい、プログレッシブウェブアップスということで、まぁ、ウェブサイトがアプリになるようみたいな価値のですね、イメージで考えていただければと思うんですけど、プログレッシブって意味ですね、あのまぁ進歩とか確信とか前に進む、前進するみたいな感じの意味があるんですけど、まぁ、あの、ここでいうPWA、プログレッシブでは、最近一般的に言われているものとしては、ウェブサイトをアプリ化するようなイメージでですね、まぁ、ローカルのスマホとかにアプリとしてインストールされてアイコンができるようみたいな感じがですね、そういったものという感じでイメージしていただければと思います。まぁ、こういう感じで、これGoogleさんのサイトから引っ張ってきた初めてのプログレッシブウェブアップスっていうイメージがあったんですけど、こう、ザーがあってみていくとこう、ちょっとアカシでハイライトしているんですけど、例えばオフラインとかですね、サービスワーカーとかちょっとキーワードがチラチラと出てくるんです、HTDSとかですね、そういう感じの魔法はちょっとバラバラあるんですけど、ざっくり言うと、ウェブアプリがローカルアプリになるよ。で、まぁ、あんまりですね、ちょっと注目度低い技術なのかなというかさあ、あんまりこう意外とまだ知られていないところが多くてですね、なんだけど、結構これからですね、ちょっとまぁこう、何て言うかね、ウェブっていう、ウェブの世界にとっては、これがこう、スマートフォンのホーム画面にアイコンができてですね、よりこう、ユーザーさんがこのページ、ウェブサイトに辿り着きやすくなるとかですね、そういったことを考えると、ちょっと新しいフロンティア的な技術なのかなっていうのが思うんで、これちょっと僕はもっとですね、グイグイ押していきたいなっていうふうに思っている技術です。で、まぁ今言ったところにホーム画面にアイコンができて、インストールしたときに、ウェブコンテンツとかをですね、こう、自分のブラウザの中にですね、キャッシュとして、キャッシュとしてダウンロードしておくことによって、オフラインのときとかでも、サイトを開くと、まぁオフラインのときにウェブページを開くと、だいたいオフラインですと、まぁ、共流アイコンが出たりとかして、何も表示されないんですけど、こういうときでも、自分の好きなようですね、オフラインのコンテンツをコントロールできる、そういった利点があったりします。あとまぁ、今のとこアンドロイドだけしか対応してなかったりするんですけど、バックグラウンドで、バックグラウンドシンクっていうんですけど、例えばオフライン状態で遅れてなかったメッセージを裏で送ってくれるとかですね、そういったバックグラウンドでシンクですね、バックグラウンドでの動作とか、優秀通知とかですね、そういったものが実装可能になるという利点もあります。PWDじゃあ具体的にどんな感じで動いているの?今日ちょっとまぁ、あまり技術的な話っていうのを深掘りしないでさっと流していこうと思ってるんですけど、実装に重点も置いてですね、ざっくり絵で示すとこんな感じで、真ん中のこのサービスワーカーっていうこのハグルマですね、このサービスワーカーがそのキャッシュをコントロールしたりとかですね裏で動く部分になって、キャッシュしておいたコンテンツをグラウザからリクエストがあった時にキャッシュを表示するかとかオンラインでサーバーからコンテンツを取ってくるかとかですね、そういったところをコントロールしてあげるというような役割をになっています。このサービスワーカーってやつがこのPWAのコアというかですね、キーニナル技術っていうふうに思っていただければと思います。はい、今こうしてるPWAですね、これ何がいいのっていうところをちょっとお話をしておきたいと思います。まぁ、ウェブとアプリの良い所取りって感じで書いてますけど、まず早いってことですね、動作は早い。オフラインこそ最速って言ってますけど、サーバーに来かずにオフラインに保存してるキャッシュを表示するわけですから、どんなサーバーをチューニングするよりも、どんなにネットワークを早くするよりも、ローカルでいっぱい取ってきて表示する方が早いって思ってますから、早いっていうところですね。それから導入が早い、これ早いって2種類の早いっていう意味ですね。既存コンテンツ、もしウェブサイトを既存で持っている場合、そこにちょっとつけたすだけでもアプリ化することができるっていう。なので、導入が非常に手軽に1からPWAとしてアプリ的なものを作らなくてもいいよっていうところですね。導入がやはりと手軽に早くできる。で、うまい。これは言ったことありってことですね。アプリの良い所、ホーム画面にアイコンがあるってこれ非常に強力ですよね。皆さん、スマートフォンたぶん使われてると思うんですけど、スマートフォンでウェブを見るときに、ブックマークから辿って、あのサイトはっていう辿り方って、今時僕を全然しなくなっちゃったんですよ。もうどっちかというと、あのサイトなんだっけってなったら、もうググっちゃうって感じで、あんまりこう特定のサイトをブックマークしたからといって、後で思い出してブックマークから折ってってことがあるんですよ。もうしなくなってる気がするんですね。で、あのところですね、なんといっても検索に乗るところですね。あのググって出てくるところですね。で、アプリと違って、そのコンテンツの内容とかそういったものを普通にクローリングされて、検索エンジンにインデックスされてるんで、普通に検索すれば出てくるっていう、検索に乗るよっていうところ。あとは普通のウェブサイトですから、更新も用意ですよっていうところ。あと、一つのコードで多くのプラットフォームに対応している。アイコン用とか、アンドロイド用とかを別々に作る必要がないっていうのは、ウェブなんで当たり前ですね。そういった利点を兼ね合わせていると言えると思います。あと、安い。導入コストが安いっていうところですね。まずは作るのが簡単なので、その分ささっとできちゃうので、既にウェブサイトがあればそのままアプリができるんで、個別の開発が不要ですよということで、非常に導入コストを抑えられる。それから通信料も当然キャッシュを使うので、その分キャッシュされてるコンテンツは毎回毎回サーバーに引きにく必要はないので、サーバーに対する通信料、いわゆる皆さんの議がも抑えられますし、あとはサーバーを運営する側にとってもサーバーに毎度毎度トラフィックが発生しませんので、サーバーの負荷も軽くなるっていう両方にとっていいということはあります。PWAそのものもアプリとして非常にコンパクトですので、例えばフィリスフックのアプリとかだったら多分100目が超えてますよね。だけど通常PWAのアプリって何百Kとかに収まるくらいのサイズ、非常にコンパクトなサイズで収まります。その上で後はインストールした後にキャッシュを取るためにコンテンツを取ったりとかするんですけど、それはコンテンツのサイズによるっていう感じになるんですけど、非常にPWAの自体、自体がアプリとして非常にコンパクトです。以上のような感じの利点がありますよということと、あとあらゆるプラットフォームへということで、なんで今今年に入ってこんなPWAをしてるのっていうところなんですけど、まずこれ、今年の3月のPWAに対する対応プラットフォームなんですか。これキャナリユースドットコムっていうところでAPI何が使えるって、これサービスワーカーのAPIなんですけど、3月の時点だとまだこんな感じ、クロムとファイヤーホックスぐらいしか対応してないような状態だったんですけど、今月ですね、今月の見ていただけると、ほぼほぼほぼですね、エッジとかサファリとかIOSのサファリとかこういったところも対応してきてますので、ほぼほぼのプラットフォームで対応されているような状態になってきてます。やっぱりiPhoneの試合が非常に大きい日本人はサファリがこれに対応してきた。これ3月末ぐらいにサファリバージョンアップでPWAというかサービスワーカーに対応してきたんですけど、サファリで使えるようになったというのは非常にインパクトが大きいです。海外だとAndroidの試合は結構8割ぐらい出たりするので、海外ともうわりと当たり前にPWAが実装されているサイトってたくさんあるんですけど、日本の人だとどうしてもですね、やっぱりiPhoneで使えないんでしょうっていうところがあって、まだ進んでないというのが結構現状ですね。あとWindowsなんかもですね、Microsoftさん結構独特な対応をしてきてて、Windowsはパッケージ化したPWAをストアで配布できるようになるということで、WindowsストアアプリストアみたいなところでPWAのパッケージが配布できるようになるという感じで聞いています。あとMSさん自身もですね、PWAを作るパッケージ化するためのツールとしてPWA Builderというのをですね、フリーで公開していただくとかですね、しています。あとなんかビンの検索でPWAを収集して、それもなんか勝手にマーケットに乗るような、なんかそういう感じの話も聞いています。はい、ということで、さっきのサービスワークの対応状況のまとめなんですけど、こんな感じ、このオレンジのラインのところですね、これ、上の段が日本で、下の段がグローバルなんですけど、すべてのブラウザーっていう観点でいくと、日本ですね、だいたい場合になるという感じですね。で、グローバルもIOSが乗っかってきてグイっとこう、上がってきたという感じで、ただこれ、右下のグレーのところがあったりするんですけど、これをですね、日本が8割、グローバルで88%。で、これ、モバイルに絞ると99%がサービスワークが動くよっていう環境が整ってきている、っていう風に言えます。これ、まあ、そう考えれば、今、ほとんどの人Webってモバイルで見る人をターゲットに、まあ、モバイルファーストで作る人が多いんじゃないかなと思うんですけど、モバイルの99%が対応してるってなれば、これはもう導入の価値ありなんじゃないかというふうに思います。あと、導入してなんかデメリットあるんじゃないかとか、ちょっと怖いとかっていうのもあるかと思うんですけど、これ正しく導入さえすればですね、たとえ対応してない端末から参照したりとかしたとしても、同いことですね、対応してるところを避けて動いてくれるっていうような感じで動いてくれますので、このところは心配しなくても大丈夫です。ただ、一つだけ気をつけてほしいのが、iPhone、iPhone、PWDとアポリカするとですね、ツールバーというかアドレスバーの部分を消すことができるというか、表示しないようにすることができるんですけど、その時、iPhone、アンドレードが違って戻るボタンがないので、例えばなんか、画像だけをウェブページの全面にボーンと表示するようなページに辿り着いてしまうと、戻りようがないっていう、なんかドンズマになっちゃうっていうですね。そして、これを置きますので、ちゃんとあの、ナビゲーションですね、あの、ウェブサイトにちゃんとスマホの、スマホ版のウェブサイトに、ナビゲーションつけてあげるのを忘れないようにしましょうっていうところですね。この辺はちょっと気をつけていただきたいと思います。導入の話になっていくんですけど、段階的導入っていうところから、話をしていきたいと思います。プログレッシブっていう言葉、PWAのPですけど、プログレッシブのアプローチって書いてますけど、プログレッシブっていう言葉には、段階的っていう意味合いも含んでます。なので、いきなりですね、今あるウェブサイトを全部スクラッチから作り直して、PWAに最適化したページを作ろうとかですね、そういった感じのアプローチ、それはお金と時間がたくさんあるんだったらいいですけど、いきなりですね、全部ゼロから作らなくてもいいです。段階的なアプローチでですね、段階的に機能を追加していくことができますので、なので、SPAでなくてもいいって書いてますけど、SPAシングルページアプリケーションって言い方するんですけど、これはウェブサイトの作りとして、側、ウェブサイトの側の部分を固定的な、HTMLページを組んでおいて、その中をJavascriptでグリグリさばから取ってきて、動的なコンテンツを表示するみたいなアプリみたいな、ウェブアプリですね、いわゆる、そういった作りになっていると、それ非常にPWGと相性がいいんですけど、いきなりそういう感じに作り替えなくてもいいよというところですね。そういったところ、あとプログレッシブエアハンスメントってこれも多分結構前に流行ったことがなんですけど、環境の作業を受け入れて、当然ウェブサイトを見る人はいろんな環境があるので、その作業を受け入れて、機能に制約のある環境でも最低限の情報をきちんと表示させてあげられるように、そういった工夫を押してあげるというか、そういう組み方を押してあげるというところですね、そういうのを意識していただければと思います。あともう一つ、アプリカっていうのは必須じゃないよ、必ずしもインストールしなきゃいけないもんじゃないよというところですね。これサービスワーカーっていうのは普通にブラウザのAPIとして裏で動いてますので、サービスワーカーをきちんと導入していれば裏でキャッシュの機能とかそういったのが動いてくれます。なのでウェブサイトの高速化とかですね、そういったツールとしてサービスワーカーは活用できますので、そういった意味合いでインストールさせなくてもサービスワーカーを導入するというのが価値があるところです。で、そのKWAですが、ちょっとここから導入に入って、やべ、あと25分だ、デモまで辿りつけるように祈ってください。ファイルの構成、大きく分けて3種類のファイルという風に、ファイルグンというような感じでちょっとイメージしていただければと思うんですけど、1つ目はですね、コンテンツアセットマニューです。2つ目がマニューですと、3つ目がサービスワーカーって書いてますけど、1つ目はコンテンツアセットっていう部分、これ基本的に既存のコンテンツで結構です。新しくコンテンツ作る人がなくて、レスポンシブであるならば、ウェブサイトをそのままでもとりあえずOKです。で、あとその中でキャッシュするものしないものとかっていうのですね、つまり最新の状態に保たなきゃいけないもの、常に最新のものをサービスワーカーとってもなきゃいけないもの。もしくはキャッシュするものをずっとキャッシュしておいて、高速感、例えば画像とかそうですよね。キャッシュしておいて、早く表示させたいものとかですね、そういったものを区別をしてあげる。で、あとアイコン、これは追加しなきゃいけないんですけど、アプリにしたときのアプリのアイコンですね、これはアプリの顔になりますので、非常に大事です。あと、もう一つオフラインジに表示するためのコンテンツを追加で用意しておきます。これちょっとデモのときにお見せします。はい、それからマニフェストですね。マニフェストはJSONファイルとして設置します。各設定項目ですね、バックグランドの色がどうだとか、画面のアドレス版の部分を表示するしないとか、そういったものを設定してあげる。あとアイコンですね、アイコン何を使うとか、そういったものを表示してあげる感じになります。もうちょっと内容の説明まではちょっと発表させていただきますけど、こういう設定入る的なものがありますよ。で、それからサービスワーカーですね。これ先から言っているPWAの機能を保安になる部分ですけど、キャッシュを制御したりとか、プッシュ通知を受け取ったりとかですね、あとバックグランドの処理をしたりとか、いなう部分をチャバスクリプトで書いてあげます。ということで、ひとまずのPWAのアプリ化するっていう話だってあれば、サイトそのままでも、今はフルHTTPS、これHTTPSになっているのは絶対必須ですので、HTTPSのサイトであれば、マニフェストとサービスワーカーを追加して、インストール部分ってことを追加してあげると、とりあえずPWAになりますよっていう感じで言います。ですので、なんか式が高い難しそうとか思われるかもしれないですけど、実はそんなに難しいもんじゃないです。既存サイトをPWA化しましたということで、これ、僕がやっているサイトなんですけど、ワードプレスとウコマスで組んでいるECサイト、そのままPWA化してみましたっていう感じで、こんな感じでですね、PWA化すると、まずこういう感じでインストールですね、インストール画面なんです。これちょっと古いバージョンだと、こんな感じの大きいのがにおきっとくるんですけど、新しいバージョンこんな感じで、下にちょっと細めのですね、インストールのサジェストも出ます。インストールが完了してアプリ立ち上げると、立ち上げ画面にスプラッシュ画面ができます。これ、スプラッシュ画面なんですけど。で、コンテンツが表示されます。で、1回目の表示は普通のウェブページと同じです。ダウンロードしてきて表示するんで、ですけど、1回目の表示の時にキャッシュに、データが組み込まれますんで、2回目以降の表示はサーバーに問い合わせることなく、パッパッパッと出てきます。なので、2回目以降の表示はめっちゃ早いです。あと、ホーム画面にですね、アイコンを表示されます。で、ブラウザの表示と何が違うの?左側がブラウザなんですけど、ブラウザの表示との違いで、ドレスパーがない程度で、基本的に同じような感じの表示になります。あとオフラインですね。これ、オフラインページを1ページ用意するって先ほど言いましたけど、ワードプレスの場合固定ページを1個、オフラインって書いた固定ページを用意しておくだけです。で、これ、ちょっと右辺ところですね、赤いが重視オフラインってありますけど、ここ、飛行機マンドですね。これは飛行機モードで表示してみたんですけど、そうするとこうやってオフラインページが出ますよ、っていう感じになります。で、あとアプリのサイズ、これ1枚下のクラウドファームっていうのもそうなんですけど、ちょっとギザギザなっちゃって申し訳ないんですけど、201Kなので、アプリのサイズ非常にコンパクトです。で、ちょっと上のところにクロームがあるんですけど、172メガとなってますね。非常に巨大ですね。なので、アプリのサイズとしても非常にコンパクト。で、先ほどちょっと戻って、これ、インストールのサジェスチョンが出る条件なんですけど、これ、HTTPSであるっていう、さっきの大前提で言いましたけど、HTTPSであるってことと、5分以上間を分けて、2回目以降のアクセスがあった時に、インストールしますかっていうのもきっと出てきます。なので、初見できないインストールしますかって出てこられるとやるですよね。なので、一応そこはちょっとですね、1クッションを置いて2回目以降のアクセスで出るようにっていうふうにデフォルトで組まれています。2回目でもちょっと早いかなって気をするんですけど、そこのところはまたですね、コントロールできるようにしていけたいと思います。で、あと、当然ですけど、マニフェストとサービスワーターのパイルが両方ともちゃんと存在してるよっていうこと。これはこの3つがインストールの発生要件になります。ザロット最低限設定するところっていう感じで、準備するのこんな感じですね、サイトメイトとかアプリケーションの短縮名とかそういったものを用意してあげる。アイコンとかスプラッシュ用のアイコンとかですね、そういったものを用意して、背景色とかテーマカラーを決めておいて、あとオフラインページ、固定ページを1ページで用意してあります。これなんか面白いのはですね、どこだっけな?どっかトリバーボーサンカラーのサイトとかだと、オフラインの時は迷路が表示されたりとかですね。なんかこうオフラインだから、暇通しにこんなんででも遊んでてよみたいな、ジャバスクリプトとかでゲーム用意したりとか、そういったやりとく風するのも面白いかと思います。で、最近からキャッシュキャッシュ、コンテンツをとってきて、キャッシュして表示するみたいな感じで、お話をしていますが、やっぱそのキャッシュのコントロールっていうのがPWMの疑問ができますってことで、キャッシュの運用計画こそがPWMの命ってことでですね、そのキャッシュをどうする、どうコントロールしていくかっていうところですね。そういったお話をちょっとしてデモに入りたいと思います。で、ここでいうキャッシュはですね、よくワードプレスやってると、サーバー側でキャッシュプラミンとかあったりとかするんで、サーバーの高速化のためのですね、そういうキャッシュではなくて、たくまでブラウザーの中にデータを取り込んで保持しておくっていう、そういうキャッシュってするんで、そのイメージで入れようお願いします。で、PWMにおけるキャッシュのコントロールの基本としてですね、3パターンを覚えていただければと思います。1つはキャッシュファースト。コンテンツをこう1回取り込んでキャッシュしておいた場合、2回に以降にそのコンテンツを見に行った時に、キャッシュがあればキャッシュを優先的に表示します。っていうコントロールのパターン。それからネットワークファースト。これはキャッシュを持っていても、ネットワークがつながっている状態であれば、オンラインのコンテンツを優先的に取ってきて表示しますよ、っていうパターンですね。なのでキャッシュはあくまでオフラインの時の予備ですね。それからノーキャッシュ。つまりキャッシュしない。これはもう情報の線度が問われる時に、キャッシュを表示してもしょうがないですから、オンラインでデータを取りに行って、それがつながらなければ、オフラインのページを表示してしまおうっていういさぎ用いパターンですね。そういったら大体3パターンを考えていただければと思います。このキャッシュをコントロールとキャッシュを保持してくれるグラウザの中の機能。これキャッシュAPIっていう機能があるんですけど、そのキャッシュAPIですね、都合の悪いことに有効期限とかがないんですよ。なので一度キャッシュしてしまって、普通にこの3パターンみたいな感じで素直な運用をした場合ですね。有効期限がないので、キャッシュいつまでもずっとキャッシュを表示し続けるとかですね。そういったことに落ち入り兼ねないんです。そこが非常に気をつけなきゃいけないところですね。有効期限がないので、ほっといても消えません。キャッシュの動機とか、更新とか、削除とかそういったのは自分でやらなきゃいけないんですよっていうところは気をつけてください。あと、サイト構成によってキャッシュの制御のやり方っていうのはちょっといろいろ違ってくるかなと思うんですけど、大きく分けて、SPAシングルページアプリケーションですね。先ほど言った側の部分、アップシェルって皆さん多分いるかなと思うんですけど、側の部分、アップシェルと中のコンテンツの部分ですね。がきれいに切り離せる場合は、その側の部分だけとりあえずキャッシュしとけばそのロード時間があっとく、それをロードするための時間があっとく短縮できるので非常にサクサクですね。中身はオンラインから取ってきてるんだけど、それでも実質的に半分くらいのですね、ロードの時間を短縮することができたりとかそういった使われ方ができるので非常にピラビレートの相性がいい。そのコンテンツとアプリの側の部分の切り分けも非常にしやすいので、ピラビレート非常に相性がいいというところはあるんですけど、これ2点目がマルチプルサイトってこれ僕が家庭につけて読んでますけど、ワードプレストのサイトはほとんどこれに当たるかと思うんですけど、普通にサイトのページってどんどんできてヘッダーとかフッダーとかありますけど、それ全部ひっくるめて1つのHTMLのファイルになってブラザに降りてきますよね。なのでそこ全部サラバーで構成して1つのページがポンと折れてくるっていうタイプ。そうなるとキャッシュのコントロールっていうのはページ単位でこのページキャッシュする、このページキャッシュしないとか、そういう感じになってしまいがちなので非常にコントロールが困難になってきたりとか複雑になってくるっていうのがあります。なので、ちょっとだからといって二の足を踏まないでくださいっていうところなんですけどキャッシュの計画にちょっと当たるものを一般的なPWAのキャッシュってどういうタイミングで更新するの?とは言え、PWAのキャッシュ、シッパラシで影響にそのままとはいかないまあダメですよねっていうところもあるので通常ですねPWAの一般的なサンプルソースとかを見るとサンプルコードとかを見ていくとサービスワーカーのジャバスクリプトを更新したタイミングで一回キャッシュを捨てて取り直すみたいなそういう感じの動きをさせているものが非常に多いです。ということで一般的な更新タイミングでサービスワーカーそのもののジャバスクリプトのプログラムっていうのはオンラインになったときに同期されますサーバーと同期を取って更新されてれば次回起動したときに新しいジャバスクリプトのファイルと差し替えられるっていうのを動きをしますキャッシュされたデータの部分画像だったりHTMLだったりCSSだったりデータの部分っていうのはそのサービスワーカーが更新されたタイミングでサービスワーカー自身によって一度捨てられるとかですねそういった実装の仕方っていうのは非常にメチャなやり方になりますただワードプレスの多くはブログサイトだったり情報発信系のサイトだったりとかですねそういった感じの使われ方あとはECサイトとかですねそういったものが多いんでこのままだと新しく記事を書いても記事書くたびにサービスワーカー更新するのかとかそういった感じ新着リストとかありますよねあそこもキャッシュされちゃってたら新着リストが更新されないとかなっちゃいますのでこのままだ新しく書いた記事が乗らないとかですね新しく書いた記事へのリンクがどこにもないとかそういう感じになりかねないっていうのがありますそのキャッシュをどう使うかっていうところですねそこを考えをめぐらせてそもそもキャッシュの目的ですね高速からだったりネットワークの切剥オフライン対応とかですねあと考慮点としてその更新をどうやって反映させるかあとインタラクティブなコンテンツとかをどういうふうにキャッシュしないで除外してうまいことを回していくかとかですねそういったところを考えてあげる必要がありますで悩みどころまたワードプレスの話に立ち返りますが更新を反映したいところとかですねすぐさま反映したいところまますぐさま即時で反映って言うとつながらですけど例えばリアルタイムな情報を表示してあげたいとかですねそういったところですねそこをどうやってカバーしていくかっていうところワードプレスでほとんどのコンテンツがサーバー側に埋め込まれた状態でブラウザンに届くんでそこを切り離すのが非常に難しいってところがありますブログのサイドバウンドこういうウィジェットの中の部分とかウィジェットが切り離されていればウィジェットのURLの部分とかを取り元のURLとかを除外してあげればいいんですけどなかなかこれの一つ前のセッションレストAPIのセッションを見ましたけどレストAPIからウィジェットを取ってくるとかそういうのをちゃんと実装されているところというのはなかなかないかと思うんですけどそういったところをどうやってあげるかというところでこれ6月のワードベンチでいい感じのプラグインがないんだよという話をしてなら作ろうという感じで僕は宣言しましてこれが目でたく先月リリースとなりましたということで8月にリリースされましたありがとうございますPWA for Wordpressというタイトルで良かったこの名前を空いててみたいな感じでもうドストレーズにそのままかもいないんですけどPWA for Wordpressというプラグインをリリースしましたキャッシュの悩みを解決できるプラグインを作りましたということでこれ検索する時とかもPWS4WPというのがスラッグ名になってるんでそのままPWA4WPとかで検索していただいても出てくると思うんですけどキャッシュに対して先ほど有効期限がないって言ったんですけど内部的にサービスワーカーの中で有効期限を持たせるという処理を入れています具体的に言うとIndexDBというデータベースの中にいつキャッシュした有効期限いつまでだよというのを持たせることで有効期限を切れたキャッシュを捨てるみたいな感じの処理をさせるという内部的に持たせていますあとキャッシュの除外を柔軟に指定できるようにしてみますなのでこういうページはキャッシュしたくないようとかこの拡張詞のファイルはキャッシュしたくないようとかそういったのを柔軟に設定できるようにしていますここで分かる分かんない方もいらっしゃるかもしれませんそういう正規評価によるアスタリスクで全指定いただくという書き方がありますけどそういうので指定してあげることができるようになっていますので柔軟にキャッシュの除外とか対応できるようにしていますということでよかったあと1週間デモに行きますさっきスライドのURLをツイートしたんですけどスライドの中には一応デモが動かなかったの時のために画面ショートとかも入ってますラブデコラになるからそっち見ていただければと思うんですけどまず事前に用していくものですねオフラインページとアイコン画像ちょっとそこから入っていきたいと思いますでデモデモページまんままんまの裸のワードプレスがここにあるんですけどここにですねまずPNGファイルアイコンはPNGファイルで作ってくださいPNGでこんな感じでアイコンを用意しておいておきますそれからオフラインページですね定ページで固定ページではいこうオフラインっていうのがありますねオフラインページを用意しておいておきますでこれ中身はですねもう入ってみるとはいフリーズトライアゲームレーターって感じでまあ今フラインで山みたいな感じがですねこの2点を用意したらプラグインのインストールに入っていく感じなんですけどでしょプラグインのページからでちょっとこれネットラップQというのにすでにすでにちょっと導入済みなんですけど一応ですねここでですねさっきのスラッグでもPWA-4WPって言ってあげるともうほんと出てきますこのピンクのiPhoneを覚えておいてくださいPWA-4ワードプレスですねでこいつをダウンロードしてインストールしたいと思いますでインストールが終わるとですね画面の左下にとかここですねメニューPWA-4WPっていうメニューができてきますなのでここから設定をしてあげる感じになりますでメインパネルのとかこんな感じの今PWAの稼働状態どうなってますかっていうので上からマニフェストサービスワーカーPWAステータスって書いてますけど上がマニフェストっていうのマニフェストファイルが生成されて有効な状態ですっていうのとサービスワーカーこれもサービスワーカーのジャバスクリプトが生成されて有効な状態ですよでPWAステータスっていうのはこれPWAをインストールするためのタグがヘッダーの中に埋め込まれる状態になってるオンの状態ですよっていうのをさしてますなのでこれをオフにしとけばアクレストップでオフにしとけばとりあえずページの方のヘッダータグの中にPWAのインストール部分のタグが埋め込まれなくなりますのでサービスワーカーとマニフェストがファイルとしては存在してますけどPWAとしては動かない状態になってますということでこのページをロードしたときの最初に皆さんに見ていただきたいこれですねこれこのページをトップページをロードしたときのネットワークのタイムラインの部分になりますけどこれ拡大できないえーとえーとですねザクリザクリこの辺2ミリセックとか23ミリセック58ミリセックとかですね何ミリ秒かのロード時間かかってこのページですねこのページを構成するコンテンツがダウンロードされてますよっていう感じになるんですけどはいそしたらPWAを有効にしてみますスタートこれで稼働中の状態になりましてえー今これで稼働中全有効な状態ですよここで一度リロードしますリロードが完了するとですねえーとこれはクロムのデベロッパーツールなんですけどここでもちょっと使い方確認方法を皆さんにちょっと覚えて書いていただければと思うんですけどこのクロムデベロッパーツールの中のえーとですねアプリケーションっていうことがありますすいませんこれここ拡大できなくてちょっとお見せしたいんですけどアプリケーションっていうところがあってちょっとスライドで見れるかなネタバレしちゃうバーが出てこないなアプリケーションっていうタブのところを見ていただくとこの中にですねサービスワーカーっていうのがですねここにちゃんと導入されていれば左上のサービスワーカーっていうところを選択するとあとですねこのマニフェストっていうところを見ていただくとマニフェストファイルの内容っていうのはですねバッと出るようになっていますで今慌てて僕いきなり有効にしちゃったんですけどその有効にする前に設定をお案内しないといけないですよねえーとはい今ちょっといきなりマニフェストのところですねはいこんな感じでまずサイト名テストWPってなんかすごい味気ない感じなんですけどサイト名と導入した時にアイコンの下にこう出るテキストですねあそこはショートネームそれからまずはワードプレスサイトてっぱんですよねはいであとスタートURLこれPWAを起動した時に最初に表示するURLとスコープこれはですねPWAが自分が管理するファイルのパスなので特定のサブディレクトリーの下だけをPWのコンテンツとして持たせたい場合とかキャッシュしたい場合っていうのはこのスコープにスラッシュナンチャラーって入れておいてあげれば特定のスコープの中だけでPWを動作させることができるようになりますあとアイコンですねアイコンこれ普通にメディアとしてアップロードして登録していただければいいです中に選択してアップロードみたいな感じでセレクトイメージになります選んであげますでテーマカラーとかバックグランドカラーを選んでいただいてあとディスプレイフルスクリーンとかスタンドアローンとかですねこれもちょっと説明個別の説明を省略しますけど上にアドレス場を表示するかどうかとかそういったところを選んであげますオリエンテーションっていうのは縦画面か横画面かですねスマホを縦に見るのか横に見るのかとかですねそこを設定してあげますでセーブしてあげるさらにサービスワークラムこれさっき言った3つの字のキャッシュファーストとオンラインファーストっていう2つのバターンを選べるようになっていますサービスワークラムキャッシュ設定基本のキャッシュ計画をオンラインファーストにするかキャッシュファーストにするかってところを選んでいただいてでここがさっきのオフラインの固定ページですねちょっとサンプルページとオフラインの寂しい感じなんですけどこの中からちょっと自分固定ページの中からオフラインの時に表示するページを選んであげるちなみにこれリンク出ていますのでこれを押すとこんな感じでさっきのオフラインなうですねオフラインなうが出てきますであとキャッシュの有効時間ここがさっきほど言ったキャッシュに有効時間を持たせてあげるこれ分短いで設定できますので例えば1週間だったら10080ですかねという感じで1週間キャッシュしますとかですね1日分だったら14401440分とかですねその中で指定してあげますであとキャッシュの除外URLこれがさっき言ったこの部分はキャッシュしないよということで今僕ちょっとこうサンプルとしてですねこうなんかちょっと十分ですねとっと明日だなかなWP-JSONっていうこれレストAPIですねレストAPIで取得するコンテンツっていうのはキャッシュしませんっていう感じでこういう感じで除外を指定してあげますさらに例えばなんかこの追加ってのをしたけど回って追加できますのでリストに追加しますって感じで例えば落ちアスタースラッシュAPIとかですねスラッシュ落ちアスターだろうとかですねこんな感じでまあキャッシュを除外するとかですねそういうキャッシュを除外するURLを正規表現で指定していうことができますまあもっと簡単に言うと普段多分絶対やっぱりMMark.JPGともするとJPEGファイルが除外されます画像を除外してどうすんだって感じですけどこんな感じで指定ができるようになってますあと初期キャッシュですねここは特典のURLをアプリをインストールした時にキャッシュしておきたいよ最初からキャッシュしておきたいよっていうふうに使いますなのでアプリを導入してこのページをキャッシュ必ずオフラインにも見れるようにしておきたいとかですねそういう時には初期キャッシュに追加してあげるとかそういう感じでやりますあとこれですねなんか変なのが出ちゃってますけどなんか偉いが出てますデバッグモードを有効にするか無効にするか多分PHPノーティスが出ちゃってますけどここで有効向こうを設定してあげてキャッシュ設定をしてあげるこれでサービスワーカーのファイルが出来上がりっていう感じになりまして今も有効な状態になってますのでそしてじゃあこいつを読み込みしてあげるとちなみにアイコンファイルはアイコンのサイズに合わせて内部的に自動的にリサイズしたものをバーブ登録してくれますので1個だけでかいものを用意してあげて登録してあげれば通常アイコンのファイルとして使われる192かてる192とかそのほうの画面に合わせてリサイズをしてくれますさっきほどのネットワークのところをサービスワーカー更新されたのがネッテーションのサービスワーカーとかにないですねサービスワーカーがなくなっているということでサービスワーカーがいる状態で脱出がかかってるはずなんでまだ読み込みがあるですねアプリケーションちなみにこのアプリケーションタブの中にいると今キャッシュのストレージの中にどんなキャッシュがどんなファイルがキャッシュされているようとかに思いますのでキャッシュはからこのリロード指定でバックしてリロード指定でバックしているというのがあなた大変なんですけど聞きますかね時間が時間ですけれどもキャッシュされたデータをちゃんと読んでくれてればこんな感じでサービスワーカーというふうに出て読み込み時間が見事にゼロミリゼックというのがどう思うかわからないですけどきちんと設定してあげると先ほどのクロームのデベロッパーツールのオーディットというところもタブを開くとライトハウスというウェブの内容をチェックをしてくれるツールがあるんですけどそこでもPWAのところちゃんと100点がでますちなみに左側39点でちょっと臨房なサーバーなんでちょっと許してくださいPWAとしては100点もあるのにかけますまだちょっと僕まだ納得したよくていろいろ追加したい機能とかもあるんですけどプッシュ通知とか何かうまいこと各社のプッシュ対応できるような感じのプッシュ通知とかあと今まだマルチサイトでちょっと使える状態じゃないのでマルチサイトで使えるようにしたいなとかあとはインストールしますかというのは粉感覚の2回目のアクセスというところのタイプとかですねちょっとタイミングのコントロールができるようにしたりあとはコンテンツの中のリジェットの部分ですねさっきあったサイドバーのところとかをエージャクスに切り離してあげてさっきの除外URLに突っ込むようなそういうことができないかなというところがですねそういったのを実装していきたいなと思ってます皆さん是非使ってみていただいて欲しい機能とかったらパンパンリクエストとかしていただけると僕も嬉しいので是非見てみてください最後にちょっとまとめとしてキャッシュの声優がとっても大事だよというところといきなり完成形っていうの難しいと思うので除外にちょっと多面にしてもいいので多めに除外した状態から段階的に導入していって自分でコースマホに試してみるとかですねそういったところも試してみていただければと思いますワンモワシムでPWAフォアドプレスはグーテンベルグレディーです全く干渉しないだけなんですだいにだいにタグ入れるだけだからグーテンベルグはなんだろうと別に関係ないよっていうだけなんですけどいってみた方だけですすいませんあとちょっと最後に口をさせていただきますもっと知りたい方へということで来週の水曜日に日本アンドロイドの会で9月の定例会で時間をもらったので今日のこういう内容のちょっと技術的な部分テクニカルな部分ジャバスクリフトの中身だったりとかそれともちょっと掘り下げた感じの話とかをしたいと思ってますのでこの辺とかあと来週の土曜日に茅山町でワードプレスもくもく勉強会毎月やられてるんですけどそこの方でもちょっと時間をいただいててそこはもうくもく会なんで声かけていただければハンズオンとかもしますのでぜひこちらとかあと30日は羽田の方のワードプレスミートアップの方にも僕ちょっとお時間をいただいていく予定でいますのでハンズオンとかそういったものをご希望の方声かけていただければ一緒に導入したいとかしてみたいと思いますはいということでぜひPWAをお試しいただければと思いますありがとうございましたちょっと大学を教えましたちょうど良かったですね僕の中のPWAに対する心の中の衝撃が相当低くなりましたありがとうございますそれが大事であのちょっと試してみるっていうのをぜひでさっきのでもちょっと気になったんですかデベロッパーツールのネットワークのディセブルキャッシュチェック入ってそこやっぱそこだったんですかそうだ僕さっき初回のやつを見せるためにディセブルしたの忘れてましたごめんじゃあこれで2回リロードしたらワンモーチャンスこれで1回リロードしてキャッシュしますはい キャッシュされましたで 何ミリセック出てますありがとうございます気づいていただいてはいこれで2回目ターンあ ゼロだったのゼロが鳴られましたありがとうございますもう1ついいですかはいアンドロイドだとアプリインストールのための誘導が出るって話があったじゃないですかアイオSを出ません出ません出ません自分で手動でインストールというかデスクとあなたがフォーム画面に追加みたいなのを押していただく必要がありますアプリはそういうのを嫌いみたいなんですよねこれね ちょっとねコントはこれも用意してたんですけど手本オーバーしてますけど大丈夫見つかりませんここにね今もインストールしますから出た状態を用意しているんですよ本当はこうリロードしてインストール出ますかかによるって出るとこう見せたかなんですけど表示したらいきなり出ちゃったのでないから今日やる方シンドさんネットワークルームにおられますのでちょっと見せてくださいって声をかけていただいたらと思いますそれでは次まずはシンドさんどうもありがとうございました