11/20(水) は「PWA Night vol.10 ~PWA × 技術~」に参加してきました。
会場は オイシックス・ラ・大地株式会社 さんのイベントスペース。
結構広いのですが、ここが一杯になるくらいの申し込みがあったということで、なんかPWAの熱を感じますね。
目次
PWA Night とは
初回と2回めに参加していて、参加報告を書いていますので、そちらも参照してください。
今年の2月からスタートして今回で10回目。毎月開かれているっていうのがすごいです。 人気の勉強会で、油断すると補欠になったりするので、参加したい方はグループメンバーになっておくことをおすすめします。
僕も暫く参加できていなくて、今回の参加が久しぶりでした。
内容
既にトゥギャられていますので、内容や雰囲気はこちらで。
250ツイート以上と、すごい盛り上がりでした。
とある個人開発PWAのSEO奮戦記
大岡由佳(おおおか・ゆか)@oukayuka さん
Mangarel というサイトのインデックスをGoogleにいかに拾ってもらえるようにするか、とPWA化について。
問題点
- ページそのものがインデックスされない
- タイトルや詳細が個別に表示されない
- コンテンツがレンダリングされない
サイトマップを送ってみたが、他のページからのリンクがなければインデックスから除外されていしまう。 カテゴリを増やすなどして地道に内部リンクを増やしてみたところ、少しずつ登録されるページが増えてきた。
コンテンツがレンダリングされない問題
- 遅いか遅くないか、それが問題。
- 全体の表示時間が4~5秒位が生命線と思われる。
- これを4秒未満に抑えるというのを当面の目標に。
無限スクロールはGoogleがあまり認識してくれない問題 * →ガイドラインがある。 * URLにpage=2とか付ければインデックスをしてくれるようになるらしい。これはなかなか大変そう。
PWAとサイトのインデックス化、何もしないでも大丈夫だと思っていたけど、色々対応をしないとうまく行かないんだなと思いました。 Mangarel、早速インストールしてみたけど、サクサク動いていい感じです。
PWA×クラウドゲーミング
おりばー(@oliver_diary)さん@Black Inc.
クラウドゲーミングプラットフォームのOOPartsと、そのクライアントアプリのPWA化という内容。
クラウドでレンダリングなどの重い処理をして、クライアントには映像を配信するような仕組み。Googleのstadiaと似ているのかな。
OOPartsの特徴 #pwanight pic.twitter.com/uqOIZv2pkm
— kabukawa (@kabukawa) November 20, 2019
ゲームだとアプリとしてのサイズはどうなんだろうと思ったけど、アプリで演算するわけではないからそんなに重くはないのかもしれない。 ゲームに起動=サーバー側のインスタンスが起動するまでの時間+αということなのか。面白い仕組みだな。
スマホでのデモです!すげぇ#pwanight pic.twitter.com/Qiah71VTJY
— 角谷仁 / TAM Inc. (@hitoshisum) November 20, 2019
PCでのデモです!#pwanight pic.twitter.com/mKxbq8QlgD
— 角谷仁 / TAM Inc. (@hitoshisum) November 20, 2019
なんの問題も起きずに(いや、当たり前なのかもしれないけど)サクサク動いていて、言われないとクラウドで動いているとは気づかないかも。ブラウザのアドレスバーとかもないから、没入感を得るには確かにPWA化は自然な感じもする。
サブスクリプションでのサービスなのか。
— kabukawa (@kabukawa) November 20, 2019
こういう形だとゲーム配信は確かにいいかもしれない。
#pwanight
もうちょっとモッサリした感じの動きを想像していたんだけど、想像以上にサクサク動いていいてびっくり。 裏側の開発は大変そうだけど、これはもしかしたらいい線いけるかも、と感じました。 サブスクリプションということなので、どれだけコンテンツが集められるかにも期待したいですね。
コードサイズの大きなプログラムのロード時間:WebAssemblyの場合
@chikoskiさん
WebAssembly については MDNのこちらの記事で。
WebAssemblyに変換してやると、Vimもブラウザ上で動くらしい。以下がそのデモページ。すごい。
PWA化することで、Javascriptより高速で安定した処理を行うことができるようになる。
いくつかの例:
サイバーエージェント社の「こえのブログ」。WAVをMP3に変換するなどの処理をWebAssemblyで処理しているとのこと。
InstagramのPWA版
WebAssemblyを採用することで、PWA版でもフィルタの適用ができるようになったらしい。
このあたりの話はこのスライドにも少し出てきますね。
www.slideshare.net
WebAssemblyおもしろいデモ #pwanight pic.twitter.com/egD1yLLBEi
— 角谷仁 / TAM Inc. (@hitoshisum) November 20, 2019
WebAssemblyは高速に実行できるけど、それをダウンロードして実行モジュールをビルドしたりする時間が結構大きいので、キャッシュ戦略が重要。
キャッシュを大事にするためにやるべきこと
- 不必要な変更をしない
- URLを変えない
- サイズを小さくしすぎない(小さいとキャッシュされないため)
- コンテンツが変わっていなければHTTPステータスは200ではなく304を返す
コンパイルを速くするにはMIME typeとして application/wasm をつける。 キャシュの話はこのあたりも参考にすると良いかもしれません。
WASMの話、興味はあってもなかなか話を聞く機会がなかったので、とても参考になった。
CDNでもこんな動きがあって、クライアントだけではなくネットワークのエッジでも使われるんだー、と注目をしていたところでした。
LT1:JAMStackの話
のまどまんさん
[資料は公開されたら追記します]
JAM Stack jamstack.org
どんなものかを意訳をされた方がいらっしゃるので、そちらも併せてどうぞ。
👀👀👀
— 🌲🌲🌲 🌲🌲 (@KiKiKi_KiKi) November 20, 2019
> JAMstackの概要を意訳しました。
🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏https://t.co/8CjU9hNvCI#pwanight
JAM Stack 知らなかったので、あとでもう少し調べてみよう。
LT2:Monacaで3Dモデルを動かす話
VMT-Yamashitaさん
www.slideshare.net
playcanvasというものを使うとグリグリできるものが作れるらしい。
Monaca、実はあまりわかっていないので、こちらも少し勉強してみたい。
懇親会
体調を考えて懇親会は参加せずに帰りました。
まとめ
PWA、半年前に参加していたときに聞いた話よりもずっと浸透していて、しかも割と普通に使えるものになってきているのを実感しました。
あと、年明けにこんなイベントも有るようなので、PWAに興味がある人は参加すると良いと思います。なんと驚いたことに参加費は1000円!!!
というわけで、今回も楽しく色々勉強になる回でした。
講演者、スタッフ、参加者の皆様、ありがとうございました!