書いてる人：myakura (Masataka Yakura)
Chrome Dev Summit 2020の前後でGoogleのひとが公開した記事を、やる気の続く限り読んで書いたメモ。
主にみているのは以下のサイト。
読んだ記事は記事ごとにファイルにしている。ファイル名先頭の数字は読んだ順。
おおよそ書いてることの要約だが、記憶をたよりに筆者がコメントしたり補足を入れたりを記事の終わりに書いている。記憶違いだったらごめん。
これを書いてる時点でキーノートくらいしか満足に観てないのと、時間がかかるのでやらないかも。気になったセッションはみるけど、先に記事を優先するかな。
Announcing Squoosh v2 (by Mariko Kosaka)
Chrome Dev Summit 2018で発表されたSquooshのv2がChrome Dev Summit 2020で発表。デザインが刷新され、サポートするコーデック（フォーマット）も増えた。またCLIのベータ版も発表。
新しく追加されたフォーマットはAVIF。v1と同じくエンコーダー・デコーダーをWebAssemblyモジュールに変換し利用している。
記事ではAVIFの言及のみだが、アプリにはJPEG XL（beta）がやWebP 2（unstable）も加わっている。
CLIはNode.jsで実装。ウェブアプリと同じWebAssemblyのモジュールを利用する。Workerも使い並行処理を実現。CLIということもあり複数の画像の入力や書き出しサポートしたり、自動圧縮のオプションもある。npmに@squoosh/cliとして登録され、インストールして使うのはもちろんnpxからも利用可能。
開発に関する話も少しある。モジュールバンドラーをWebpackからRollupに変更したと。RollupのプラグインとESモジュールのシンプルさがプロジェクトにあったからとのこと。
今後も、新しいフォーマットの対応、CLIの利用を拡大、CLIとビルドプロセスの親和性向上などにつとめたいと。またコントリビューターも増やしたく、2021年にはプロジェクト参加のプロセスも整備したいと。
WebP 2は始まったばかりのはずだけどエンコーダーが動くようにはなってるのかな。
2018年のセッションで、皆が使っているものを使って作るというのをテーマにしたのでWebpackを採用した（でもチームの人が慣れてなくてハマった）みたいなことを言っていたが、プロジェクトがうまくいったのでよりあってるものを使ったという感じかな。
2008年（Chromeがリリースされた年）公開のdeveloper.chrome.comがリニューアル。
Welcome to the new developer.chrome.com! - Chrome Developers (by Sam Thorogood, Rob Dodson, and Kayce Basques)
これまではChrome拡張のドキュメンテーションが置いてあるだけのサイトだったが、他のサイトに散らばっているChrome関連の情報を順次集約させる。Web Fundamentalsのブログで公開されているWhat’s New in ChromeシリーズなどChrome関連の話題や、DevToolsのドキュメンテーションを持ってくるみたい。
GoogleChrome/developer.chrome.com: Chrome Developers
Chrome Dev Summitのあとにソースを公開するとのこと。
Chromiumレポジトリに含まれている長めのドキュメントも移管が示唆されている。GitHubに移動し、HTMLをMarkdownに変換することで、より多くのコントリビューターを集めたいらしい。
NaCLやChrome Appsなど、終了する機能についてのドキュメンテーションも注意書きとともに引き続き掲載するが、なくなったら削除する。
GoogleChrome/chrome-extensions-samples: Chrome Extensions Samples
拡張のサンプルもGitHubに移行。
余談だけどChrome OSについては2020年8月に https://chromeos.dev/ という、Chrome OS関連のドキュメントをまとめたサイトが立ち上がった。
検索関連も2020年11月に https://developers.google.com/search/ にドキュメントやブログが移動している。プロダクトごとにサイトをつくるのがGoogleの流行りなのかも。
Chromium Blog: Easy to build, monetize, and discover: List your web app on Google Play (by PJ McLachlan and Tom Buckley)
Progressive Web AppsはTrusted Web Activityを使うことでGoogle Playにアプリとして掲載できるが、今回あらたにGoogle Playの支払いシステムを使えるようになった。
支払いはDigital Goods APIを使ってやるという話っぽい。AndroidではChrome 88からOrigin Trialが開始されるが、Chrome OSでも88からOrigin TrialのちChrome OS 89に投入予定と。
ええ…Origin Trial1マイルストーンで終了してすぐ出す気なの…？
Sign-up form best practices (by Sam Dutton)
登録フォームのベストプラクティス。フォーム全般のプラクティスではなく、登録に関するもの。
まず「アカウント登録しなくて済むやつならするな」と言っている。これは好感持てる。 セッションをまたいだりナビゲーションの間でデータを引き継がないといけない場合はクライアントサイドのストレージを検討してみると。またショッピングにおいては、アカウント不要で買えるゲストチェックアウトの機能を導入したほうがいいと。
登録やログインのリンクやボタンについて、アイコンのみであったり“Join us”など直接的でない言葉を使わない、ユーザーに考えさせないものにせよというのはなるほどなと。
パスワード入力欄はパスワードマネージャを使えるようにautocomplete="new-password"を使ってとか、ペースト拒否をしないとか、パスワードの更新を促さないとか、変更までの手順を分かりやすくするとか（）/.well-known/change-passwordも紹介されている）。
メールや電話番号でログインできるようにして、必要ないならユーザー名を求めるなとも。
などなど。他にもいっぱい紹介されている。
web.devにはほかにも、ログインフォームや購入・住所入力フォームなどの記事が同じくSam Duttonによって書かれている。
Sign-in form best practices Payment and address form best practices
Web Fundamentalsや外部サイトの記事を含めた参考リンクが https://web.dev/sign-up-form-best-practices/#resources にある。
Payment and address form best practices (Sam Dutton)
購入・住所入力フォームのベストプラクティス。
HTMLのネイティブのフォーム要素、autocomplete属性を使えと。ラベルはlabel要素を使い、placeholderは使うなと。ボタンもdivじゃなくbuttonを使えとか、基本的なマークアップの話から始まる。大事よな。
数字のキーパッドを出したい場合はtype="number"でもtype="tel"ではなく
サポートも進んだinputmode="numeric"にしなさいと。日付にはselectよりもinputとtype="numeric"がモバイルにはおすすめと。
購入に関してはログインを必要としないゲストチェックアウトを導入せよと。登録というステップが挟まることにより離脱率が上がっていることを理由に挙げている。
電話番号やクレジットカードの入力欄を分けずに一つにしなさいとか、カスタムしたUIで自動入力を妨げるなとか。
いっぱいあるが、プラットフォームの機能とブラウザの機能を生かせというとこに尽きる感じ。フォームの話だからかPayment Request APIを推してるとかそういうのでもなくてよい。
Chrome Dev Summit 2020で公開されたSquoosh v2で、旧バージョンが表示されたままの人がいた。そのバグの裏側についてJake Archibaldが解説。
バグを引き起こした要因はふたつあり、ひとつはService WorkerのURLを変更してしまったこと。SquooshではService Workerの更新を検知したら“Update available”というトーストを表示するが、そのコードは最初のインタラクションには必要がないためモジュールが分割されていた。
もうひとつは、Squoosh v2でビルドシステムを変更したこと。WebpackからRollupに変更したことで、生成されるモジュールのURLが変わってしまった。SquooshはJamstackのサイトなので、古いファイルはビルド・デプロイ時に消失してしまう。v1バージョンのキャッシュを持っているユーザーは、アップロード処理をするモジュールファイルの代わりに404を受け取ることになった。
こうして、SWの更新処理をするモジュールファイルがオフライン状態で存在しないことになったが、オフラインではアップデート処理なんて当然走らないのでそのバグに気づかなかったとのこと。
Jakeは7月にアプリのバージョン更新時に起こりうる影響について、Service Workerによってキャッシュされた旧バージョンと新バージョンの混在が引き起こす問題についてブログにまとめていたりもした。がそれに当たってしまうとはと述べている。 https://jakearchibald.com/2020/multiple-versions-same-time/
というわけで、消えたファイルを追加し対応したとのこと。 https://github.com/GoogleChromeLabs/squoosh/commit/d6de741ddc79ff1d5c1e7add9e6951ca61b6318b
更新されないなと思ったがそんなことが……ちょっとしたミスとビルドシステムの変更より起こってしまったが、v2はコード的に複雑になったにもかかわらず13k（KBかな？）でインタラクティブな状態に持っていけると。v1が16kだったらしいからすごいなあ。
ブログではないがツイートで面白かったのでここに書いとく。
Making Chrome extensions more private and secure (by Alexandre Blondin)
2021年にChrome拡張やChrome Web Storeに行われる変更について。
現在、Chrome Web Storeには25万以上の拡張があり、日に400万ものダウンロードが行われる。拡張がプライバシーやセキュリティを担保しつづけられるように、2021年には次の変更を行う。
プライバシーの厳密化と、ユーザーのデータの制御。拡張が行うデータへのアクセスの方法と、インストール時のパーミッションについて変更する。拡張がどのウェブサイトにアクセス可能かを、拡張ではなくユーザーが決められるようにする。 拡張がウェブサイトのデータにアクセスするのを許可したら、その状態は許可したサイトのドメインにのみ限定されるようになる。すべてのドメインに対して許可も可能だが、それがデフォルトではなくなる。
拡張の透明性。2021年1月18日から、Chrome Web Storeではすべての拡張に対し、“privacy practices”という、拡張がどのような種類のデータを集め、どのようなポリシーでデータを用いるかを表示する。 スクリーンショットにはその一部が見られる。データの種類として個人を識別する情報、認証情報、ユーザー行動が、データのポリシーとしてサードパーティに販売しない、データを拡張の主要機能以外の目的に使用しない、信用情報の一部として利用しないというのが少なくともあるらしい。
セキュリティチェック機構の強化。Chrome Web StoreではGoogle Safe Browsingの組み込みによって悪意ある拡張のブロック強化ができた。Chromeの設定にSafety checkというタブを設け、拡張が悪さをしていたらそのチェックと削除ができるようにもなった。2021年にはEhnanced Safe Browsingによってもっとユーザーを守るための機能を導入予定。
ストアでのプライバシーの表示はAppleのApp Storeにもそういうのが入るっぽいし潮流なのかな。 Manifest V3の話もあるかとおもったけど、ユーザー向けの説明だからか直接の言及はなかった。ドメイン別にパーミッションを管理する機能とやらが、おそらくそれなんだろうけど。
blog.googleの記事なので開発者ではなくユーザー向けの説明ではあるが、読んだので。
Privacy practicesについては、Chromium blogに開発者向けの記事が2020年11月に投稿されている。
Chromium Blog: Transparent privacy practices for Chrome Extensions
Chromium Blog: Seamless payments and password management in Chrome (by Sabine Borsay)
クレジットカードや住所などの支払い情報はGoogleアカウントに記録されているが、Chromeの同期機能を使わなければいけなかったため、同期していない場合は不便だった。
これが改善され、Android版Chromeでは同期を使わなくても、シングルタップでGoogleアカウントにログイン可能に。またGmailなど他のGoogleサービスにログインする際に、Chromeにもログインするというオプションを追加。これにより、Android版Chromeで、Googleアカウントに保存されている支払い情報を自動入力できるようになる。
デスクトップ版Chromeでは今後、Googleアカウントに保存されたパスワードの管理も楽になる。Chromeでサイトログイン時にパスワードを入力すると、その保存先をデバイスにするかGoogleアカウントに保存するかきくようになる（これまではデバイスだったはず）。Googleアカウントを選択すれば、Chromeの同期を使わずともパスワードが共有できる。
これに伴い、デスクトップ版にもパスワード生成機能が追加される。
Chromeのセキュリティ系のエンジニアのJochenのツイートがうまく要約されているので、そっちを読むといいのかも。
GoogleアカウントにログインしたらChromeにもログインするような仕組み（ツールバーのプロファイルアイコンのやつ）が入って顰蹙を買った（そして自動ログインはやめた）が、この機能はどうなるんだろうな。
パスワード生成機能はChrome OSには長らくあったが、デスクトップにもついに入るのか。autocomplete="new-password"が入ってるフォームだと特にうれしくなりそう。
Automating audits with AutoWebPerf
AutoWebPerfというCore Web Vitalsの継続的な計測を補助するためのツールが公開。 CrUX、PageSpeed Insights、WebPageTestなどのツールをまとめて実行し、結果をJSONやGoogle Sheetsなどに出力してくれる。
AWPはエンジン、ギャザラー、コネクターの3パートの構成。ギャザラーにはCrUX、PageSpeed Insights、WebPageTestに対応。コネクターにはGoogle Sheets、JSON、CSVに対応。出力結果をData Studioなどに流せばグラフにもしてくれる。
GoogleChromeLabs/web-vitals-report: Measure and report on your Web Vitals data in Google Analytics
Google Analyticsに送信したweb-vitalsライブラリの結果を見るウェブアプリ。既存のセグメントとWeb Vitalsの変化を比較できる。