Above & Beyond

日々のアウトプット記録

PWA Night vol.10 ~PWA × 技術~

11/20(水) は「PWA Night vol.10 ~PWA × 技術~」に参加してきました。

pwanight.connpass.com

f:id:kabukawa:20191124112212p:plain:w500

会場は オイシックス・ラ・大地株式会社 さんのイベントスペース。

f:id:kabukawa:20191124124323j:plain:w600

結構広いのですが、ここが一杯になるくらいの申し込みがあったということで、なんかPWAの熱を感じますね。


目次


PWA Night とは

初回と2回めに参加していて、参加報告を書いていますので、そちらも参照してください。

kabukawa.hatenablog.jp

kabukawa.hatenablog.jp

今年の2月からスタートして今回で10回目。毎月開かれているっていうのがすごいです。 人気の勉強会で、油断すると補欠になったりするので、参加したい方はグループメンバーになっておくことをおすすめします。

pwanight.connpass.com

僕も暫く参加できていなくて、今回の参加が久しぶりでした。


内容

既にトゥギャられていますので、内容や雰囲気はこちらで。

togetter.com

250ツイート以上と、すごい盛り上がりでした。


とある個人開発PWAのSEO奮戦記

大岡由佳(おおおか・ゆか)@oukayuka さん

speakerdeck.com

Mangarel というサイトのインデックスをGoogleにいかに拾ってもらえるようにするか、とPWA化について。

mangarel.com

問題点

  1. ページそのものがインデックスされない
  2. タイトルや詳細が個別に表示されない
  3. コンテンツがレンダリングされない

サイトマップを送ってみたが、他のページからのリンクがなければインデックスから除外されていしまう。 カテゴリを増やすなどして地道に内部リンクを増やしてみたところ、少しずつ登録されるページが増えてきた。

github.com

コンテンツがレンダリングされない問題

  • 遅いか遅くないか、それが問題。
  • 全体の表示時間が4~5秒位が生命線と思われる。
  • これを4秒未満に抑えるというのを当面の目標に。

www.npmjs.com

無限スクロールはGoogleがあまり認識してくれない問題 * →ガイドラインがある。 * URLにpage=2とか付ければインデックスをしてくれるようになるらしい。これはなかなか大変そう。

webmasters.googleblog.com


PWAとサイトのインデックス化、何もしないでも大丈夫だと思っていたけど、色々対応をしないとうまく行かないんだなと思いました。 Mangarel、早速インストールしてみたけど、サクサク動いていい感じです。


PWA×クラウドゲーミング

おりばー(@oliver_diary)さん@Black Inc.

speakerdeck.com

クラウドゲーミングプラットフォームのOOPartsと、そのクライアントアプリのPWA化という内容。

oo.parts

クラウドレンダリングなどの重い処理をして、クライアントには映像を配信するような仕組み。Googleのstadiaと似ているのかな。

stadia.dev

ゲームだとアプリとしてのサイズはどうなんだろうと思ったけど、アプリで演算するわけではないからそんなに重くはないのかもしれない。 ゲームに起動=サーバー側のインスタンスが起動するまでの時間+αということなのか。面白い仕組みだな。

なんの問題も起きずに(いや、当たり前なのかもしれないけど)サクサク動いていて、言われないとクラウドで動いているとは気づかないかも。ブラウザのアドレスバーとかもないから、没入感を得るには確かにPWA化は自然な感じもする。


もうちょっとモッサリした感じの動きを想像していたんだけど、想像以上にサクサク動いていいてびっくり。 裏側の開発は大変そうだけど、これはもしかしたらいい線いけるかも、と感じました。 サブスクリプションということなので、どれだけコンテンツが集められるかにも期待したいですね。

jp.techcrunch.com


コードサイズの大きなプログラムのロード時間:WebAssemblyの場合

@chikoskiさん

WebAssembly については MDNのこちらの記事で。

developer.mozilla.org

WebAssemblyに変換してやると、Vimもブラウザ上で動くらしい。以下がそのデモページ。すごい。

rhysd.github.io

PWA化することで、Javascriptより高速で安定した処理を行うことができるようになる。

いくつかの例:

サイバーエージェント社の「こえのブログ」。WAVをMP3に変換するなどの処理をWebAssemblyで処理しているとのこと。

developers.cyberagent.co.jp

InstagramのPWA版

WebAssemblyを採用することで、PWA版でもフィルタの適用ができるようになったらしい。

このあたりの話はこのスライドにも少し出てきますね。

www.slideshare.net

WebAssemblyは高速に実行できるけど、それをダウンロードして実行モジュールをビルドしたりする時間が結構大きいので、キャッシュ戦略が重要。

キャッシュを大事にするためにやるべきこと

  • 不必要な変更をしない
  • URLを変えない
  • サイズを小さくしすぎない(小さいとキャッシュされないため)
  • コンテンツが変わっていなければHTTPステータスは200ではなく304を返す

コンパイルを速くするにはMIME typeとして application/wasm をつける。 キャシュの話はこのあたりも参考にすると良いかもしれません。

developers.google.com


WASMの話、興味はあってもなかなか話を聞く機会がなかったので、とても参考になった。

CDNでもこんな動きがあって、クライアントだけではなくネットワークのエッジでも使われるんだー、と注目をしていたところでした。

www.publickey1.jp


LT1:JAMStackの話

のまどまんさん

[資料は公開されたら追記します]

JAM Stack jamstack.org

どんなものかを意訳をされた方がいらっしゃるので、そちらも併せてどうぞ。


JAM Stack 知らなかったので、あとでもう少し調べてみよう。


LT2:Monacaで3Dモデルを動かす話

VMT-Yamashitaさん

www.slideshare.net

playcanvasというものを使うとグリグリできるものが作れるらしい。

playcanvas.com


Monaca、実はあまりわかっていないので、こちらも少し勉強してみたい。


懇親会

体調を考えて懇親会は参加せずに帰りました。


まとめ

PWA、半年前に参加していたときに聞いた話よりもずっと浸透していて、しかも割と普通に使えるものになってきているのを実感しました。

あと、年明けにこんなイベントも有るようなので、PWAに興味がある人は参加すると良いと思います。なんと驚いたことに参加費は1000円!!!

conf2020.pwanight.jp

というわけで、今回も楽しく色々勉強になる回でした。

講演者、スタッフ、参加者の皆様、ありがとうございました!