PWA Night vol.10 ～PWA × 技術～
アジェンダ
- 開催概要
- 自己紹介
- とある個人開発PWAのSEO奮戦記
- PWA×クラウドゲーミング
- コードサイズの大きなプログラムのロード時間：WebAssemblyの場合
- LT1 うわさのJAMstackとPWAで空も飛べる？
- LT2 Monaca × PWA
- 全体所感
- 注釈
最近はjekyllのカスタマイズにおネツな野村屋ごろうです、お世話になります。
いつものように、その場で書いて即上げる！を地でやっていくんでクオリティは多少怪しいのはご愛嬌。
以下、公式ページより開催概要です。
※今回、最前列ではないので撮影がうまくいかず、前の方が写ってしまっているため自主的に採用を見送っています。 そのため、画像少なめです。
開催概要
最初のプログラムとしてやってるっぽいです。 今回会場をご提供いただいたオイシックスさんのお話も。
開催趣旨
PWAについて制作・開発会社の中でも関心が高まってきています。いまは主にエンジニア中心に認知が広がっている状況で、本格的なビジネス活用や消費者への浸透はこれから・・・というところかと思います。 このPWA勉強会では、エンジニアはもちろん、幅広くPWAに関心をもった有志の方に集まっていただき、PWAの活用方法やPWAのミライについて考えていく会にしたいと思っています。 まだまだ学びの多い技術、みんなでカジュアルに、フラットに情報交換していきましょう！
PWA Nightでやること
PWA Nightでは技術に関する話はもちろん、実際にどんな場面で適用できるのか、その時の留意点、顧客への提案方法や、事業への導入方法など、PWAを技術やビジネス面から捉えてコミュニケーションをしたいと考えています。
どんな方が対象？
プログラマー、デザイナー、ディレクターがメインですが、PWAに興味がある、PWAを使ってみたいという方はぜひぜひご参加ください！
PWAは新しいWebの流れになります。皆さん、楽しく新しい時代を作りましょう！
対象者
PWAに興味を持つ方であればどなたでも！開発もビジネスの話も、PWAに関わる（または興味がある）方であればぜひご参加ください！
タイムスケジュール
時間 内容
19:00 開場
19:20 挨拶&PWA Nightについて
19:30 自己紹介（全員）
19:40 とある個人開発PWAのSEO奮戦記 by 大岡由佳（おおおか・ゆか）@oukayuka さん
20:00 PWA×クラウドゲーミング by おりばー（@oliver_diary）さん@Black Inc.
20:20 休憩
20:25 コードサイズの大きなプログラムのロード時間：WebAssemblyの場合 by @chikoskiさん
20:45 LT-1: のまどまんさん
LT-2: VMT-Yamashitaさん
21:05 懇親会
21:55 片付け
22:00 終了
※ LTは5分、テーマ縛りなしです。PWAに関することであれば何でもOKです！
「PWA Nightは毎月第三水曜日に開催します！」とのことですので、来月参加してみるのもアリだと思います。 サイトはこちら。
自己紹介
10秒で社名・お名前、PWAへの熱意を参加者が全員がやっていく、というやべー時間が設けられていて草が茂りますね。1 そしてキッチリこなしていく皆さんすげぇ！
「のむらさん」は私しかいなかったんですが、 「フリーでAIデータサイエンティストをやっていたもので、PWAは過去にWordPressで実装していました」 なんて言えばピンと来てくれる人がいるかもしれない……？
とある個人開発PWAのSEO奮戦記
りあクト！の作者。これ（同人誌）でご飯食べてるっていうスゲー人。 書店に下ろすよりいいのか……？
PWAはブルーオーシャン！API拾ってきて画面にいい感じに出すだけでお金になるぞ。 でもGoogleクローラーに引っかからない、おかしい？ →JavaScriptのコンテンツがレンダリングされていないらしい？
厳密には、認識はしているが除外ルールに当たってしまっているらしい？ sitemapでリンクしても、内部リンクが足りないのでインデックスされていないのかも知れない説。 →インデックス用のリストページを作ると、徐々に登録されるようになった。
静的コンテンツっぽくしたいのでcloud functionsで対応。 BOTだけ実施するようにして回避した。
表示がおっそい！ 致命的だなぁ、PWAの問題ではなさそうな気がするが。 テストマイサイトでやったところ、Twitterでもスコア25%でおっそいらしい。マジかよ。
PWA×クラウドゲーミング
クラウドゲーミングとは？
ユーザーがクラウドにデータを送って、サーバー側で処理して映像をストリーミングでユーザーに返す。
| 名称 | 概要 |
|---|---|
| PlayStation Now | 「PlayStation Now for PC」でPS筐体でなくても遊べる！CERO Zも遊べる、マジか！ |
| Google Stadia | ブラウザで遊べる！ |
| Steam loud Gaming | まだ出てないけど、これから出てくる |
| OOParts | 昔のWindows専用ゲームがブラウザで動かせる |
→こいつがPWAを使っている。
PWAで解決
アプリ化すると
- デスクトップワンポチで起動
- オフライン化、
- 無審査で使える
ゲームオンエア
↑PC版 と スマホ版↓
どちらにもキッチリ対応している。見た目の違いが分からないことに注目してください。 これだけ見てると、どちらもPC版じゃね？って思いますが、実はそうじゃないんです。
なお、起動しているゲームは「聖鍵遣いの命題《プロポジション》」 登録されているゲームで一番新しいタイトルがこれか？と思ってしまうのはデバッガーの定めかなぁ。
コードサイズの大きなプログラムのロード時間：WebAssemblyの場合
WebAssemblyとは？
クライアントでいい感じに実行できるスクリプト。JavaScriptじゃないの？って思ってるんだけど違うらしい。 ビルドが必要なプログラミング言語をJavaScriptみたいに動かす事ができる仕組み。
JavaScriptではできなかった色々なアレコレがWebに持ってこれる、超イケてる仕組み。 VimをWeb上に実現できる。キモい。 実行はアセンブリ。超キモい。
AssemblyScript(.wasm)というものがある。これは気になる。 これができるとバカでかいファイルのアップロードのタイムアウト処理をもたせられるのでは？
言語不問でWebを書けるようになるんじゃないか？と思ってる。 特にリアルタイム処理（今までPromiseとかで非同期処理を頑張ってたやつ）をもっとマシな作り方ができるようになる。 →これは激アツ！
PWA設計については、キャッシュ管理が大事。 chromeなどは管理の仕方が少々厄介。カスタマイズ性が高いといえば聞こえは良い。 が、?などGETで渡すと別物扱いにされるので常に新規扱いで死ぬ。 変更がない場合のHTTPリクエストの返却値は304とする。200だと新規で読み直す。 →Webページの場合でも読み直してたっけ？
LT1 うわさのJAMstackとPWAで空も飛べる？
のまどまん さんのLTです。 何気に過去回のLT枠なので安心して見れますね。
JAMstackとは？
動的なデータコンテンツを扱う静的なコンテンツ。 正直何いってんだ？感があるので、
- ヘッドレスCMS
- ホスティングサービス
- （すみません、色々考えることがあったのでメモが間に合わなかった） をいい感じにくっつけて使える。
LT2 Monaca × PWA
VMT-Yamashita さんのLTです。
Monacaはあんまり使ったことがないんだけど、非常に便利なやつらしい。 PlayCanvasでゲーム作るのにいい感じになるやつ？
UnityとかVRとか色々なものでつかえる
この辺はMonacaの機能かな。 PWAだけではなく、Unityはもう標準ツールみたいな印象あるな。
全体所感
バッテリーが持たなかったので現地からpushできなかった……。
発表内容がLTも含めて、今までのらりくらりやってきた環境とは明らかにレベルが違いすぎた感があります。 ここで感じたのはめちゃくちゃレベルが高い、PWAに対する参入障壁の高さ！今回が初参加の方には厳しい印象を与えてしまったのではないか、ちょっと心配です。 今回は技術編なのでそりゃそうだろうな、とも思うけど、初心者回の内容を復習しておいたにしても、一気に格差を感じられてしまいますね。 一応、初心者向けの資料も残っているので、こちらを実戦編にしてしまっても良いかも知れません。
また、現地で「実践PWA」という本も頒布されていたので、これからやってみたい人は手にとってみるのも良いでしょう。 参加することに自体に意味があるイベントです。昨今珍しいですよこれは。
勉強会を通じて業界を見るのが一つの楽しみなんですが、総じてフロントエンドエンジニアの仕事がますますレベルが高くなって、今バックエンドでガチャガチャ弄ってるものはどんどん淘汰されている（厳密には、あまり意識しなくて良くなっている）ように思いますね。 今までのキャリア的にインフラやバックエンドを軸に色々やってきていたのですが、そろそろ時代を見つめ直すべきかも知れないな、と感じた回でした。 もうフルスタックエンジニア＝技術が高い、ではなく何でもできる人、という位置づけなのでしょうか。2