Chrome Dev Summit 2019 とは
Chrome Dev Summit is an annual conference where developers can learn about the latest tools and updates coming to the Google Chrome browser.
Chrome Dev Summit は、開発者がGoogle Chrome ブラウザに関する最新のツールやアップデートについて学ぶことができる年に一度のカンファレンスです。
Google I/O よりも小規模だが、Web 系のセッションで埋め尽くされるため、 Web 関連をやっていると CDS の方がよっぽど興味深い。
会場はサンフランシスコのイエルバ・ブエナ芸術センター。特に周辺に観光として見るところはなかったが、かといってさびれた感じもしなかった。若干治安の悪いところもあるらしいが、近づかなかったので問題なかった。
余談
泊まったホテル会場から近いし綺麗だったけど、めちゃくちゃ高かった。
1日目
Keynote
- 先立って２日間の全体のサマリーという感じ。
- Chrome に新しく追加される機能やAPIなどがざっと紹介された。
- レイアウトエンジンが高速化されるなどChromeは着々と今も強くなり続けているんだなと感じた。
Zeit CEO の next.js の発表があったのがすごかった。
- 開発に使われる側の代表例に選ばれるほどのものになったんだなと。
- Google とは今後もコラボレートしていくとのこと。
chrome dev summit のキーノートで、next.js の CEO が話すのすごい。 #ChromeDevSummit pic.twitter.com/mhXmrcwk4M
— J (@ka2jun8) November 11, 2019
- 開発に使われる側の代表例に選ばれるほどのものになったんだなと。
Lighthouse ci は使ってみたいと思った。CI そのものだけでなく普通に UI も差分が見やすそうだった。
ライブでのSpeed hackathon はimg を data-src に追加しただけだったし用意してたと思うけど、それにしてもすごいなと思わせるものがあった。
その場でローカルでコード書き換えてlighthouse叩いて点数の上がりを確認するデモ面白かった。 #ChromeDevSummit pic.twitter.com/ZkiIOjxwwZ
— J (@ka2jun8) November 11, 2019
Chrome の devTools の Source から Overrides で書き換えればそのまま書き換えたコードで lighthouse できる。
- Auto lazy load 画像や iframe を自動的に lazy load にしてくれる。
- Accessibility で画像を解析して何の画像かを自動でキャプションする。
余談
- bigwebquiz.com 普通にリアルタイムで集計して結果表示してトーナメント勝ち進めるUI綺麗だし、動作も安定しててすごいと思った。
Protecting users on a thriving web
- 「example.com」に見えるが実はnon-ascii が混じったURLでURLバーに表示するフィッシングがあるらしい
- それに対して、検索でよくアクセスされてる似たドメインを探して、本当はこっちのページではないですか？というwarning を出してくれる
- 証明書は lock symbol から確認できる
- Lock symbol は自分自身を証明しているだけにすぎない
- 安全だったら 2FA なんてしてない
- パーソナライズしないようにしたads の収益が-52%する
What’s new in sign-up and sign-in
- SMS で 2FAするときに、入力をサポートする
- SMS で 2FA は本当に安全といえるか？
- 簡潔な答えは「Be careful」
- 安全だとは言い切れないけど、ないよりはいい。まあそりゃそうだ。
- Web AuthNの紹介
- Github の 2FA はSMSではない、ハードウェアの authenticator とかを使えるようになってる
- Yahoo!JAPAN だと re-auth で 端末の指紋認証とかを2FAで使えるようになってる。FIDOか。
Speed tooling evolutions: 2019 and beyond
- パフォーマンスの話、lighthouse っぽいアジェンダの書き方になってておしゃれ
- パフォーマンスのメトリクスがv6で変わる。Largest Contentful Paint が重要視される。これまで以上に大きな要素は作っちゃだめだな。
- 結果の出力も可能になって spread sheet とかにも出せるっぽいし、サチコンで speed report も見られるようになった。 Lighthouse の結果みるの、これらだけで十分かもしれない。
- Github Actions 使うのはあり。
- Extension がどうこう言ってたから、拡張も自分らで作って載せられるかも。
- LHCI (Lighthouse CI) の紹介。これは使ってみたくなる。
Adoptive Loading - Improving the user-experience for millions on low-end devices
- 使われる端末によってスペックに大きく差があるので、スペックが低い方に合わせて作る方がいい→弱い端末なら普通、いい端末ならはやくなる
- 端末のstatus や network の status で adaptive に 描画するものを変更する（強ければリッチにするし、弱ければ低画質だったり機能を削る）
- で、Low と high で webpack chunk 名つけて、 chunk 分けして、それぞれに対して不要なコードは落とさないようにする。まじかよ。
- クソ作るの大変そうだけど、まあやったらそりゃいいのはわかる
- レンダリングだけでユーザイベントをブロックしないようにしたり、フレームレートを自分でいじったりもできるので、そういうのを活かそう（きつい）
The main thread is overworked & underpaid
- UIを描画する以外のロジックはWorker を使おう
- Worker に対して操作する名前つけて switch するとか大変だから comlinik が便利
- Main thread は UI thread だ！
- Proxx がまあ参考になるらしいけど、あのアプリは化け物級だろ、、、
Next generation web styling
- Prefer theme で テーマカラーを変えれる
- Dark | light
- Margin-inline-start とかで Japanese だったら縦書きとかを再現できるようになる
- Filter css で画像にフィルターかけられる
- Js で style の要素を自分で書き加えたり、 js で要素の style をとってきて DOM っぽい TOM を操作できるようにする
- Animation を worklet で js で書ける
PWA and the installable web
- PWA の原則は “Don’t be. Annoying”
- ユーザーに利益がないならやらない。
- 本当に価値を分かっているユーザのために使うもの
- OYO で OYO lite として使ってうまくいってる。
- PWAはとりあえず入れればいいってものではない。きちんと注意して使えよ、という説明になっていたのがよかった。手放しに入れて良いものではない。
Bridging the native app
- Share API, contacts API, ファイル操作APIなど、ネイティブに近いAPI が使えるようになる
- 連絡帳が使えたり、エディタアプリみたいなのも作れる
- このためにエディタ実装してたらまじですごいんだが…。
余談
戦利品です。
2日目
Intent to explain: demystifying the Blink shipping process
新しい機能をChrome に導入し仕様策定にもっていくまでの話。 まず問題点を調査し、それに対する prototype を開発する。 experimental な flag で機能の出し分けを可能にした状態で開発者からのフィードバックを得て iteratable に機能を改善する。 そして最終的に ship / unship を決める。
HTML isn’t done!
フォームの要素を新しくする話。
カレンダー新しくなるんだね
Edge と Chrome でやっているというのがなかなか良い話。
なぜ Web エンジニアは フォームの要素を作り直しているのか？ こう見ると、やっぱりみんなフォーム嫌いだったんだなと思う。大変だよね。
select フォームが嫌い。
なぜ嫌いか？ 結局どんなフォームの要素だとしても styling が必要になる。 フォームの要素を自分たちで用意できるようにする、といったことを話していたと思う。
詳しくは、 Open UI をみてもらえれば、とのこと。
Advancing the web framework ecosystem
Chrome を取り巻く Webフレームワークの話。 React ならまだしも、 Next.js + Chrome の話が結構多めにあったのが注目すべき点。 Vue も一瞬出てきていたが、やはり世界的には React 一強という感じがした。 next.js に対して Google の開発者たちが contribution しているとのこと。 こういう話を聞くと、 next.js を使うのがデファクトになりそうだなと感じざるを得ない。
In which we make loading disappear with and friends
Portals, Periodic Background Sync, Web bundles など、 新たに試用的に開発されている Chrome の機能たちに関する内容。 勢いのある楽しい内容だったし、何よりも Japan 企業たちが例にあがっていたのが特徴的だった。Hatena, Yahoo!JAPAN が発表に現れていて、すごいなと思った。
Portals は簡単に言ってしまえば iframe で表示した next page をシームレスに画面遷移可能にするもの。 URL もシームレスに変更されるので、 MPA で SPA っぽい UX を提供可能になる。 ただ experimental なので、 chrome で flag を true にしないと利用できない。 Portals は Hatena や paypay モール, Yahoo ニュースで試験的に使われているとのこと。 こうやってサービス名出してもらえるのいいな。
Hatena は Background Periodic Sync も使っているとのこと。 Background Periodic Sync は、名の通りバックグラウンドで定期的にデータ同期するAPI。
Web bundles は、Web page を bundle して 1 つのファイルとしてダウンロード、配信、展開可能になるもの。 発表とは別に、現地で、どういうケースで使えるだろうかというのをいろいろ議論できたのが楽しかった。 Web bundles は、network が落ちていても bundle されたファイルを横展開で配信できれば、同じウェブアプリを動かすことができる。 Signed exchange を利用できればそのファイルが正しい信頼されたものであると chrome が保証してくれるもの。 日本だと network インフラが整っているので、なかなか展開が難しいよね、という話をした。
On the things you’ll compile - modern WebAssembly
Web Assembly に関する発表もあった。SIMD に対応したらしい。 Web で 3D レンダリング など行えるという話だった。 より早くなり、より使いやすくなっていきそうではあるものの、やはり活用面がピンとこなかった。
Q&A with the Chrome leads
Web as a building block for user experience
Chrome extensions and the world of tomorrow
上記三件、打ち合わせ等のため聴けなかった。
How to make your content shine on Google Search
Google bot が何年ぶりかに UA が update されるとのこと。 バージョン 41 固定にしてる人は変えてね。RegExp とかでみてね。
100% JS のページでも indexing されている実績がある。 CSR のページでも（十分に速ければ）ちゃんとインデクシングされるという紹介。
レンダリングは5秒が中央値。 90%は1分以内にレンダリングされる。 一方、ローディングが "done" の状態が難しい、という話があった。 変に接続・通信が続いた状態になってしまっていると遅いと判断されかねないので注意してほしいとのこと。(networkidle0にする)
まとめ
Chrome Dev Summit 2019 に参加してきた。 思っていた120倍楽しめたので本当に行ってよかった。 サンフランシスコという街はあまり好きになれなかったが、Chrome の最新事情を聴けたり、Chrome や Next.js の開発者と話すことができてよかった。 また来年以降も行けるなら行きたい。
