<h1>Chrome 102</h1>
Chrome 102 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-102/">https://developer.chrome.com/blog/new-in-chrome-102/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-102/">https://developer.chrome.com/blog/new-in-devtools-102/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-102/">https://developer.chrome.com/blog/deps-rems-102/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D102">https://www.chromestatus.com/features#milestone%3D102</a></li>
<li><a href="https://v8.dev/blog/v8-release-102">https://v8.dev/blog/v8-release-102</a></li>
</ul>
<h2>New In Chrome (Chrome102)</h2>
Chrome102 で新しく追加された機能です。
<h3>File Handling API</h3>
PWA に MIME タイプや拡張子を紐づけることができる File Handling API がサポートされました。
PWA のマニフェストに関連づけたい MIME タイプや拡張子を設定することで、Mac だと「このアプリケーションで開く」の候補に PWA のアプリケーションが選択できるようになります。
参考: Let installed web applications be file handlers
<a href="https://web.dev/file-handling/">https://web.dev/file-handling/</a>
<h3>The inert property</h3>
<code>inert</code>プロパティは、グローバルな HTML 属性です。<code>inert</code>属性のついた要素は、フォーカスイベントや支援技術からのイベントなど、ユーザー入力イベントを無視します。
<code>inert</code>属性はモーダルダイアログやドロワーなどの UI パーツを作成するのに便利です。モーダルダイアログでは、モーダルが表示されている間、フォーカスをモーダル内に限定したくなりますが、これはモーダル外の要素に<code>inert</code>属性をつけることで実現できます。また、ユーザーから常に見えるわけではないドロワーでは、開閉時に<code>inert</code>属性を切り替えることで、「画面外にあるドロワーを誤ってキーボードで操作してしまう」ような誤作動を防止できます。
<code>inert</code>属性の利用例です。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;div>
 &#x3C;label for="button1">Button 1&#x3C;/label>
 &#x3C;button id="button1">inertではない&#x3C;/button>
&#x3C;/div>
&#x3C;div inert>
 &#x3C;label for="button2">Button 2&#x3C;/label>
 &#x3C;button id="button2">inertである&#x3C;/button>
&#x3C;/div>
</code></pre></div>
この例では二つ目の<code>div</code>に<code>inert</code>属性を付与しています。そのため内包された<code>&#x3C;label></code>要素や<code>&#x3C;button></code>要素はフォーカスやクリックできない要素になります。
<code>inert</code>属性は Chrome では 102 からサポートされますが、FireFox や Safari でも同様にサポートされる予定です。(執筆現在、Safari は 15.5 から、FireFox は Nightly で利用可能です。)
<h3>Navigation API</h3>
近年の多く見られる SPA で作られたアプリでは、ページ移動なしで URL を更新します。この挙動を実現するため、一般的に<code>History API</code>が利用されますが、<code>History API</code>ではうまく用件を満たせないことや、動作がわかりにくくなることがあります。
このような History API の問題点をカバーするべく作られた API 仕様が Navigation API です。
<h4>利用方法</h4>
Navigation API を使用するには、グローバルに生えた<code>navigation</code>オブジェクトに navigate リスナーを追加します。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">navigation.addEventListener('navigate', (navigateEvent) => {
 switch (navigateEvent.destination.url) {
 case 'https://example.com/':
 navigateEvent.transitionWhile(loadIndexPage());
 break;
 case 'https://example.com/cats':
 navigateEvent.transitionWhile(loadCatsPage());
 break;
 }
});
</code></pre></div>
ナビゲーションイベントは、<code>navigate</code>リスナーによって一元化されており、以下のような条件の有無に関わらずあらゆるタイプのナビゲーションイベントで発火します。
<ul>
<li>フォームを送信したかどうか</li>
<li>戻る・進むアクションによる遷移か</li>
<li>プログラムによって引き起こされたものかどうか</li>
</ul>
その上で、ほとんどの遷移に関するアクションに対して、デフォルトの動作を上書きすることができます。
詳細に関しては<a href="https://developer.chrome.com/docs/web-platform/navigation-api/">Modern client-side routing: the Navigation API</a>をご覧ください。
<h3>And more!</h3>
<ul>
<li>ページ内検索等でヒットするまで表示されない<code>hidden=unfil-found</code>の指定ができるようになります</li>
</ul>
<h2>What's New In DevTools (Chrome 102)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-102/">https://developer.chrome.com/ja/blog/new-in-devtools-102/</a>
<h2>Deprecations and removals in Chrome 102</h2>
<h3>Deprecate PaymentRequest.show() without User Activation</h3>
ユーザーのアクティベーションなしに<code>PaymentRequest.show()</code>を実行できなくなりました。
<code>PaymentRequest.show()</code>はクリックなどのユーザーイベント内で行う必要があります。
<h3>Remove SDP Plan B</h3>
WebRTC でセッションを確立するために使用される <code>Session Description Protocol</code> (SDP) は、Chromium 上で<code>Unified Plan</code>と<code>Plan B</code>という 2 種類の異なる実装が存在しています。
<code>Plan B</code>はクロスブラウザでの互換性がないなどの問題を抱えていたため、102 から削除されます。
このバージョンから Chrome では<code>Plan B</code>を利用すると例外が投げられるようになります。これを回避したい場合は 2022 年 5 月 25 日までに<a href="https://developer.chrome.com/origintrials/#/view_trial/3892235977954951169">非推奨のトライアル</a>に参加してください。また 12 月に終了した前回の非推奨トライアルに参加していて、今回のトライアルにも参加したい場合は、新しくトークンをリクエストする必要があることに注意してください。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>Add Save Data Client Hint</h3>
Permissions-Policy に<code>CH-Save-Data</code>を追加することで Client Hint として<code>Save-Data</code>が扱えるようになります。
<code>Sec-CH-Save-Data</code>が適切な Client Hint になり、Permissions-Policy を介してサードパーティへ送信されることを防ぐことができます。
参考: Save-Data
<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data</a>
<h3>AudioContext.outputLatency</h3>
<code>AudioContext.outputLatency</code>プロパティが追加されました。
このプロパティは音声出力レイテンシーの推定値(秒数)を返します。技術的には、UserAgent がホストシステムにバッファの再生を要求してから、バッファ内の最初のサンプルが実際に音声出力デバイスによって処理されるまで(スピーカーなどであれば音が出るまで)の間隔を指します。
このプロパティは入力から出力までのレイテンシーを調整するために必要で、ビデオとオーディオストリームの同期などに非常に有効です。
<h3>Capture Handle</h3>
ビデオキャプチャを行う他のアプリケーションに対して、特定の情報やコントロールを opt-in で公開できる仕組みを導入します。
たとえば、プレゼンテーション・アプリを開いたタブをビデオキャプチャしているアプリケーションがあったとします。この機能でプレゼンテーションアプリがキャプチャをしているアプリに対して、プレゼンテーションを操作を公開するとキャプチャをしているアプリからプレゼンテーションアプリを操作できるようになります。
ディスプレイキャプチャを行うアプリケーションは、キャプチャされるアプリケーションが Capture Handle 機能を提供していることを前提に、ユーザーに優れた機能性を提供できます。今までに似たような技術はありましたが、Capture Handle では、何を公開するか(オリジン・ハンドル・ID...etc)を選択可能にすることで、よりシンプルで信頼性が高く、安全な仕組みを提供します。
また私たちが提案するメカニズムでは、キャプチャされたアプリケーション側で、キャプチャする側のアプリケーションを制限できます。具体的には全ての web か特定の origin かを選択できます。
<h3>HTTP->HTTPS redirect for HTTPS DNS records</h3>
DNS に問い合わせをする際に、従来の<code>A</code>および<code>AAAA</code>クエリと並行して、<code>HTTPS</code>レコードを問い合わせるようになります。ウェブサイトが<code>HTTPS</code>DNS レコードを設定していて、Chrome がそれを受信すると、Chrome は常に HTTPS で接続します。
<h3>WebHID exclusionFilters option in requestDevice()</h3>
navigator.hid.requestDevice()に<code>exclusionFilters</code>が追加されました。
<code>exclusionFilters</code>を指定することでブラウザから扱いたくない HID デバイスを除外することができるようになります。
参考:
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HID/requestDevice">https://developer.mozilla.org/en-US/docs/Web/API/HID/requestDevice</a>

<h1>Chrome101</h1>
Chrome 101 のリリースノート関連の情報をまとめました。
<a href="https://developer.chrome.com/blog/new-in-chrome-101/">https://developer.chrome.com/blog/new-in-chrome-101/</a>
<a href="https://developer.chrome.com/blog/new-in-devtools-101/">https://developer.chrome.com/blog/new-in-devtools-101/</a>
<a href="https://developer.chrome.com/blog/deps-rems-101/">https://developer.chrome.com/blog/deps-rems-101/</a>
<a href="https://www.chromestatus.com/features#milestone%3D101">https://www.chromestatus.com/features#milestone%3D101</a>
<h2>New In Chrome (Chrome 101)</h2>
Chrome101 で新しく追加された機能です。
<h3><code>hwb()</code> color notation</h3>
CSSの色指定方法として<code>hwb()</code>値がサポートされました。
hwb() は、色相、白色度、黒色度にしたがって色を指定します。他の色表記と同様に、オプションのアルファ成分で不透明度を指定することもできます。以下の例では<code>#00c3ff</code>の色を50%透過度で指定しています。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">h1 {
 color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
</code></pre></div>
FireFoxではv96から、Safariではv15からこの<code>hwb()</code>値をサポートしているため、今回のChromeのサポートにより、多くのブラウザでこの記法が使えることになります。
<h3>Priority Hints</h3>
ブラウザがページ内リソース(<code>image</code>,<code>script</code>,<code>CSS</code>)を読み込む際の優先度ヒントを明示的に宣言できる<code>Priority Hints</code>機能がリリースされました。
htmlで読み込みの優先度ヒントを書く場合は、<code>fetchpriority</code>属性に<code>high</code>,<code>low</code>,<code>auto</code>のいずれかを指定します。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;!-- 優先度 low で画像を読み込む場合 -->
&#x3C;img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">
</code></pre></div>
この機能はChrome96からOriginTrialとして試験的に実装されており、当時は<code>importance</code>属性を用いる方法をとっていましたが、Web標準化プロセスの中で、HTMLでは<code>fetchpriority</code>、JavaScriptのFetch APIでは<code>priority</code>というプロパティを利用するよう仕様が変更されました。
優先度指定における細かい挙動やユースケースについては<a href="https://web.dev/priority-hints/">Optimize resource loading with Priority Hints</a>を参照してください。
<h3>Also in this release</h3>
<h4>USBDevice forget()</h4>
<code>USBDevice</code>オブジェクトで<code>forgot()</code>メソッドがサポートされました。このメソッドでは以前許可されていたデバイスの登録を削除することができます。例えば多くのデバイスで共有されているコンピューターで使用されているアプリケーションなどでは有用です。
<h4>Web USB sameObject behavior</h4>
<code>USBConfiguration</code>、<code>USBInterface</code>、<code>USBAlternateInterface</code>、<code>USBEndpoint</code> の4つのインスタンスが厳密な同値（<code>===</code>）なるのは、同じ<code>USBDevice</code>のアクセッサから取得した場合のみに変更されます。
<h4>Secure context fix for dedicated workers</h4>
全な(HTTPSの)Originからロードされていますが、安全でない(HTTPSでない)コンテキストでインスタンス化された専用ワーカーは安全だとはみなされなくなりました。
具体的に上記のような状況において、以下のような変更が入ります
<ul>
<li><code>self.isSecureContext</code>が<code>false</code>を返すようになる</li>
<li><code>self.caches</code> と <code>self.storageFoundation</code> が使用できなくなる</li>
</ul>
この修正により、上記のようなワーカーの挙動においてHTML標準やGeckoと互換性を持つようになりました。
<h4>Make 'true' a truthy value for window.open boolean features</h4>
chrome98から、<code>window.open()</code>に対し<code>popup=yes</code>または<code>popup=1</code>のように指定することで、ポップアップウィンドウで開くことをブラウザに要求することが出来るようになりました。
このpopup値として<code>yes</code>,<code>1</code>などがサポートされていたものの、<code>true/false</code>がサポートされていなかったため、<code>popup=true</code>はpopupを開かないことを意味していました。
このように<code>popup=true</code>がfalseとして評価されるのは直感に反しているため、Chrome101からは<code>popup=true</code>がtrueとして評価されるようになります。
<h2>What's New In DevTools (Chrome 101)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-101/">https://developer.chrome.com/ja/blog/new-in-devtools-101/</a>
<h2>Deprecations and removals in Chrome 101</h2>
<h3>Reduce user agent string information</h3>
ChromeではHTTPリクエストやnavigatorで利用されるUser-Agent文字列の削減に取り組んでいます。この取り組みはUser-Agent文字列がユーザーフィンガープリンティング(webブラウザからの情報だけで個人の情報を特定する技術)に利用されるのを防ぐために行われています。現在はOriginTrialとしてこれらの取り組みを進めています。
<h3>Remove WebSQL in third-party contexts</h3>
サードパーティーのコンテキストにおけるWebSQL機能を削除しました。Web SQL Database標準は2009年4月に提案され、2010年11月に放棄された標準で、FireFoxはこの機能を搭載せず、Safariも2019年から非推奨としています。またW3Cは代替手段として、Web StorageとIndexed Databaseを推奨しています。Chromeとしても使用率が十分に低くなった時点で完全に非推奨とし、削除する予定です。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>MediaCapabilities API for WebRTC</h3>
<code>MediaCapabilities API</code>でWebRTCストリームをサポートするようになりました。
<code>MediaCapabilities API</code>は、動画再生に使用できるコーデックや解像度などの情報を提供するAPIです。これらの情報によりwebアプリケーションは使用するコーデクなどがサポートされているかどうか、スムーズな再生が期待できるかどうかを判断できるようになります。
今回のリリースからWebRTCストリームについての情報もこの<code>MediaCapabilities API</code>から取得できるようになります。この機能がない場合、アプリケーションが不必要に低い解像度やフレームレートを使用して品質が低下したり、クライアントが希望するフレームレートでストリームを処理できずスタッタリングが発生したりする可能性があります。
<h3>font-palette and custom @font-palette-values palettes</h3>
カラーフォントで利用するパレットを選択することができる、<code>font-palette</code> CSSプロパティがサポートされました。
また<code>@font-palette-values</code>ルールを利用することで、ベースとなるカラーパレットを選択したり、カラーパレットの上書きなどができるようになります。
ベースとなるカラーパレットを選択する例
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@font-palette-values --Pinks {
 font-family: MultiColorFont;
 base-palette: 1; /* パレットを番号で指定 */
}

.text-pink {
 font-palette: --Pinks; /* @font-palette-valuesで作成したパレットを指定 */
}
</code></pre></div>
カラーパレットを上書きする例
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@font-palette-values --SkyAndYellow {
 font-family: MultiColorFont;
 override-colors:　
 0 #87dbe8, 
 1 #f7ca25;　/* 対応する番号のカラーを上書き */
}
</code></pre></div>
このように<code>font-palette</code> CSSプロパティのサポートは、すでにサポートしているCOLR/CPALカラーフォントの有用性を向上するものです。ダークモード対応をはじめとして、アイコンフォントをコンテンツの配色に合わせたいユースケースでこの機能はとても有用です。

🔗 <a href="https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/">https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/</a>
Safari 15.4 がリリースされました 🎉 
これまで Technology Preview として公開されていた様々な変更が含まれています。
<h2>HTML</h2>
<ul>
<li>遅延読み込みのための <code>lazy-loading</code> のサポート
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading">https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading</a></li>
</ul>
</li>
<li><code>&#x3C;dialog></code> Element のサポート
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element</a></li>
</ul>
</li>
<li><code>::backdrop</code> 疑似要素のサポート
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop">https://developer.mozilla.org/ja/docs/Web/CSS/::backdrop</a></li>
</ul>
</li>
<li><code>autofocus</code> 属性のサポート
<ul>
<li>dialog 表示時にどの要素にフォーカスをセットするかを指定できる</li>
</ul>
</li>
</ul>
<h2>CSS</h2>
<h3>Features for CSS Architecture</h3>
<ul>
<li><code>:has()</code> のサポート (現状 Safari のみサポート)
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/:has">https://developer.mozilla.org/ja/docs/Web/CSS/:has</a></li>
</ul>
</li>
<li>CSS Cascade Layers のサポート
<ul>
<li>FEE チームの @nus3 が書いた CSS Cascade Layers の紹介エントリ: <a href="https://cybozu.github.io/frontend-expert/posts/css-cascade-layers">https://cybozu.github.io/frontend-expert/posts/css-cascade-layers</a>)</li>
</ul>
</li>
</ul>
<h3>Solving Pain Points</h3>
<ul>
<li>主にモバイル向けに、viewport に応じた新しい値の指定が可能に
<ul>
<li><code>svh</code>, <code>svw</code> → メニューバーなどを除いた最小の viewport</li>
<li><code>dvh</code>, <code>dvw</code> → スクロールによるメニューバーなどの表示切り替えに応じて変化する viewport</li>
<li><code>lvh</code>, <code>lvw</code> → メニューバーなどが存在しない状態を想定した最大の viewport</li>
<li><code>svmin</code>, <code>svmax</code>, <code>lvmin</code>, <code>lvmax</code>, <code>dvmin</code>, <code>dvmax</code> → <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code> の上記 CSS 値版 (幅, 高さに対する割合指定)</li>
</ul>
</li>
<li><code>:focus-visible</code> 疑似要素のサポート</li>
<li><code>accent-color</code> プロパティのサポート
<ul>
<li>checkbox, radio, progress, select, datalist (iPad OS と iOS のみ range, button) にアクセントカラー指定が可能になる</li>
</ul>
</li>
<li><code>calc()</code> 数学関数のサポート</li>
</ul>
<h3>Typography</h3>
<ul>
<li><code>font-palette</code> と <code>@font-palette-values</code> CSS プロパティのサポート
<ul>
<li>カラーフォントに含まれるパレットの指定と、カラーパレットの独自定義</li>
</ul>
</li>
<li><code>text-decoration-skip-ink</code> CSS プロパティのサポート
<ul>
<li>text-decoration (underline とか)を文字に被らず表示できる</li>
</ul>
</li>
<li><code>ic</code> 単位のサポート
<ul>
<li><code>1ic</code> が <code>水</code> の文字の幅と同等になる</li>
</ul>
</li>
</ul>
<h3>Retiring WebKit prefixes</h3>
<ul>
<li><code>-webkit</code> vendor prefix の付与が必要だった様々なプロパティが廃止。また、廃止に伴い prefix 不要で利用可能なプロパティのサポート追加
<ul>
<li><code>appearance</code></li>
<li><code>mask</code></li>
<li><code>backface-visibility</code></li>
<li><code>text-combine-upright</code></li>
<li><code>print-color-adjust</code></li>
<li><code>match-parent</code> (<code>text-align</code> プロパティに指定可能な値)</li>
<li>削除: <code>-webkit-border-fit</code>, <code>-webkit-margin-collapse</code>, <code>-webkit-margin-top-collapse</code>, <code>-webkit-margin-bottom-collapse</code>, <code>-webkit-margin-before-collapse</code>, <code>-webkit-margin-after-collapse</code>, <code>-webkit-background-composite</code></li>
</ul>
</li>
</ul>
<h2>Web APIs</h2>
<ul>
<li>BroadcastCannel のサポート
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts">https://html.spec.whatwg.org/multipage/web-messaging.html#broadcasting-to-other-browsing-contexts</a></li>
<li>タブ、ウィンドウ、iframe, worker の相互通信が可能になる</li>
</ul>
</li>
<li>Web Locks API のサポート
<ul>
<li><a href="https://w3c.github.io/web-locks/">https://w3c.github.io/web-locks/</a></li>
<li>タブ、ウィンドウ、iframe, worker 間でリソースのロックコントロールを行う</li>
</ul>
</li>
<li><code>scroll-behavior</code> または <code>window.scroll()</code>, <code>window.scrollTo()</code>, <code>window.scrollBy()</code> の <code>behivior</code> オプションでスクロール制御を可能に</li>
<li><code>ResizeObserver API</code> で <code>ResizeObserverSize</code> インタフェースのサポート
<ul>
<li>対象要素の <code>box-sizing</code> プロパティの変更を監視可能に</li>
</ul>
</li>
<li><code>structuredClone</code> のサポート
<ul>
<li>DeepClone</li>
<li>Chrome/Edge/Firefox/Safari のすべてがサポートされました 🎉</li>
</ul>
</li>
<li><code>Origin Private File System</code> のサポート
<ul>
<li>詳細はこちら: <a href="https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/">https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/</a></li>
</ul>
</li>
</ul>
<h2>JavaScript</h2>
<ul>
<li><code>findLast()</code>, <code>findLastIndex()</code> メソッドのサポート</li>
<li><code>at()</code> のサポート</li>
<li><code>Object.hasOwn()</code> のサポート</li>
</ul>
<h3>Internationalization</h3>
<ul>
<li><code>Intl Enumeration API</code> (<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl">https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl</a>) の強化
<ul>
<li><code>Intl.Locale</code> で、暦週・書く方向・12h/24h のサイクル・番号システムといった情報を取得可能になった</li>
<li><code>Intl.DisplayNames</code> で calendar・dateTimeField のサポート追加および languageDisplay オプションのサポート</li>
<li><code>Intl.PluralRules</code> に <code>selectRange()</code> メソッドの追加
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/selectRange">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/selectRange</a></li>
<li><a href="https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules">https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html#rules</a> に従い、数値の複数形のルールを示す文字列を得る</li>
</ul>
</li>
<li><code>Intl.NumberFormat</code> に <code>formatRange()</code> と <code>formatRangeToParts()</code> メソッドの追加
<ul>
<li>数値範囲を示す文字列にフォーマットする</li>
</ul>
</li>
<li><code>Intl.DateTimeFormat</code> に 複数の <code>timeZoneName</code> オプションの追加</li>
</ul>
</li>
</ul>
<h2>Web Apps</h2>
<ul>
<li>Web App Manifest 周りのアップデート (≒ PWA 絡みでのアップデート)
<ul>
<li>Manifest ファイルをページロード時に常にフェッチするようになる</li>
<li>Manifest ファイルでのアイコン宣言のサポート
<ul>
<li><code>purpose</code> 指定に応じて <code>apple-touch-icon</code> 以外のアイコンを利用する</li>
</ul>
</li>
<li>ServiceWorker で Navigation Preload が使えるように
<ul>
<li>ServiceWorker の起動時のブロッキングを回避できるように</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>Media</h2>
<ul>
<li>WebRTC negotiation API が WebRTC 1.0 仕様に準拠</li>
<li>in-band chapter tracks のサポート
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind">https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind</a></li>
</ul>
</li>
<li><code>&#x3C;video></code> で <code>requestVideoFrameCallback()</code> のサポート追加
<ul>
<li>ビデオフレームの表示可能タイミングでのコールバックとメタデータ受け取りが可能になる</li>
</ul>
</li>
</ul>
<h2>Privacy</h2>
<ul>
<li>Private Click Measurement (<a href="https://webkit.org/blog/11940/pcm-click-fraud-prevention-and-attribution-sent-to-advertiser/">https://webkit.org/blog/11940/pcm-click-fraud-prevention-and-attribution-sent-to-advertiser/</a>) 周りで幾つかのアップデート</li>
</ul>
<h2>Security</h2>
<ul>
<li>Inline Script / Style / eval などでリソースがブロックされた場合のレポートが Web 標準にあわせて更新</li>
<li>XSS 対策機能の XSS Auditor サポート削除 (CSP や COEP で代替)</li>
</ul>
<h2>WKWebView</h2>
<ul>
<li>iOS, iPadOS, macOS 上のアプリケーションの場合、FullScreen API 利用の制御が可能になった</li>
<li>iPadOS で Media Source Extensions を利用するコンテンツが動作するようになった
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Media_Source_Extensions_API">https://developer.mozilla.org/ja/docs/Web/API/Media_Source_Extensions_API</a></li>
</ul>
</li>
</ul>
<h2>Safari Web Extensions</h2>
<ul>
<li>クロスブラウザでの拡張機能サポートに伴う <code>manifest_version 3</code> のサポートなど
<ul>
<li>バックグラウンドスクリプトで <code>service_worker</code> のサポート</li>
<li><code>browser.scripting</code> によるスクリプトとスタイルのインジェクション</li>
<li><code>browser.declarativeNetRequest</code> を介したネットワークリクエストの動的ルールやセッションルール</li>
<li><code>externally_connectable:matches</code> による、Web ページから拡張機能へのメッセージング</li>
</ul>
</li>
</ul>
<h2>Web Inspector</h2>
<ul>
<li>CSS Cascade Layer サポート追加に伴い、Web Inspector 上で <code>@layer</code> ルールセットが確認可能になった</li>
<li>Flexbox および Grid で、視覚的なコントロールの追加</li>
<li>Style パネルでのプロパティや値の変更時の自動補完の強化</li>
<li>CSS 表示の改善。未使用の継承値の非表示や、フィルタによる検索、種類でのグループ化など</li>
</ul>
<hr>
<code>&#x3C;dialog></code> のサポートや <code>:focus-visible</code> などは身近な感じがありますね。
また、Web Extensions で manifest_version 3 のサポートが強化されたことで、クロスブラウザ向けのブラウザ拡張で Safari も含めやすくなるかもしれません。

Chrome 98 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-98/">https://developer.chrome.com/blog/new-in-chrome-98/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-98/">https://developer.chrome.com/blog/new-in-devtools-98/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-98/">https://developer.chrome.com/blog/deps-rems-98/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D98">https://www.chromestatus.com/features#milestone%3D98</a></li>
</ul>
<h2>New In Chrome (Chrome 98)</h2>
Chrome98 で新しく追加された機能です。
<h3>Opting out of auto-dark themes on Android</h3>
Chrome96 から、Android では OriginTrial として「<a href="https://developer.chrome.com/blog/auto-dark-theme/">Auto Dark Themes</a>」という機能を追加しています。
この機能はユーザーの OS がダークモードである場合、明るいテーマのサイトに対しブラウザが自動的に生成したダークテーマを適用するものです。
今回のアップデートでは OriginTrial に登録したサイトのうち、特定のページで自動生成されるダークテーマを無効にする方法が追加されました。
具体的には以下のように<code>meta</code>タグを利用して無効化することが出来ます。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;meta name="color-scheme" content="only light" />
</code></pre></div>
また以下のように<code>color-scheme: only light</code>というスタイルを<code>:root</code>要素にあてることでも無効化できます。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">:root {
 color-scheme: only light;
}
</code></pre></div>
CSS スタイルを利用する方法の優れた点として、以下のように要素ごとに自動生成されるダークテーマを無効にできる点が挙げられます。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">.only-light,
#my-element {
 color-scheme: only light;
}
</code></pre></div>
詳しくは<a href="https://developer.chrome.com/blog/auto-dark-theme/">Auto Dark Themes on Android</a>における<a href="https://developer.chrome.com/blog/auto-dark-theme/#per-element-opt-out">How to opt-out of Auto Dark Theme</a>の章を参照してください。
<h3>COLRv1 font support</h3>
COLRv1 フォントがサポートされました。
COLRv1 では COLRv0 と比べて、新たにフォントのグラデーションや合成などに対応しています。また、フォントが鮮明なまま圧縮率が高いのも特徴の一つです。
次の参考記事では実際にグラデーションを導入したカラーフォントや COLRv1 と Bitmap を比較してどれほど鮮明なのかを確認することができます。
お使いの Chrome のバージョンを 98 にアップデートした上で、ぜひ見てみてください！
参考:
<a href="https://developer.chrome.com/blog/colrv1-fonts/">https://developer.chrome.com/blog/colrv1-fonts/</a>
<h3>Emulate Chrome 100 in the UA string</h3>
ここ何回かのリリースには必ず含まれている内容ですね。
Chrome のバージョンがもうすぐ 100 になるので、Chrome のバージョンを使っているような実装がある場合はバージョン番号が 3 桁になっても正しく動くかどうか確認しましょう。現在のバージョンを 100 にする<a href="https://developer.chrome.com/blog/force-major-version-to-100/">#force-major-version-to-100</a>フラグを使って、既存のコードが正しく動くか確認することができます。
<h3>And more!</h3>
<h2>What's New In DevTools (Chrome 98)</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-97/">https://developer.chrome.com/ja/blog/new-in-devtools-97/</a>
<h2>Deprecations and removals in Chrome 98</h2>
<h3>Remove SDES key exchange for WebRTC</h3>
Chrome97 で記載があったものですが、98 で Shipping になりました。
詳細は<a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-97">前回のリリースノートのまとめ</a>でも記載したので、そちらをご覧ください。
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<h3>Add support for Promise to Blobs in clipboard item</h3>
<code>ClipboardItem</code>オブジェクトに対して Promise をサポートしました。
今まで、Chrome では<code>ClipboardItem</code>コンストラクターの引数として「文字列または blob に解決される Promise」を受け取ることが出来ませんでした。
今回のアップデートにより<code>clipboard.write</code>API が呼ばれた時に、一旦クリップボードに書き込む Blob データを同期的に取得する必要がなくなり、ブロックすることなく非同期的に write メソッドを呼び出すことができるようになります。
<h3>CSS Color Adjust: 'only' keyword for color-scheme</h3>
<code>color-scheme</code>プロパティの<code>only</code>キーワードがサポートされました。only を指定することでユーザーエージェント(ブラウザ)が要素のカラースキーマを上書きすることを禁止します。
参考:
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme">https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme</a></li>
<li><a href="https://drafts.csswg.org/css-color-adjust/#color-scheme-prop">https://drafts.csswg.org/css-color-adjust/#color-scheme-prop</a></li>
</ul>
<h3>FileSystemHandle::Remove() method</h3>
FileSystemHandle に<code>Remove()</code>メソッドを追加しました。
今ままで<code>FileSystemHandle</code>から直接ファイルやディレクトリを削除することは不可能で、親ディレクトリの<code>FileSystemDirectoryHandle</code>から<code>RemoveEntry</code>を呼ぶ必要がありました。
今回のアップデートにより「<code>showSaveFilePicker</code>から<code>FileHandle</code>を取得したが、結局保存したくなくなったのでファイルを削除したい」というような、よくあるユースケースに対応できるようになりました。
<h3>HDR CSS Media Queries: dynamic-range</h3>
CSS のメディアクエリーに<code>dynamic-range</code>が追加されました。
次のサンプルコードのように、ディスプレイが HDR をサポートしてるかしていないかを<code>dynamic-range</code>で判別できるようになります。
<div class="remark-highlight"><pre class="language-css"><code class="language-css">/* HDRをサポートしていない */
@media (dynamic-range: standard) {
 .contrast {
 color: red;
 }
}

/* ディスプレイがHDRをサポートしている */
@media (dynamic-range: high) {
 .contrast {
 color: green;
 }
}
</code></pre></div>
参考:
<a href="https://www.w3.org/TR/mediaqueries-5/#dynamic-range">https://www.w3.org/TR/mediaqueries-5/#dynamic-range</a>
<h3>New window.open() popup vs. window behavior</h3>
<code>window.open()</code>では第 3 引数として<code>windowFeatures</code>という option を DOMString で指定できますが、今バージョンから<code>popup</code>という機能に対応するようになりました。<code> popup=yes</code>または<code>popup=1</code>のように指定することで、ポップアップウィンドウを利用して開くことをブラウザに要求することが出来ます。
この変更は window.open の新しくリリースされた仕様に合わせて、相互運用性のために行われた変更です。 広報互換性のため、ポップアップやタブ/ウィンドウを開く既存の動作に変更はありません。
<h3>Private Network Access preflight requests for subresources</h3>
サブリソースに対するプライベートネットワークリクエストの前に CORS プリフライトリクエストを送信し、ターゲットサーバーからの明示的な許可を求めるようになります。
プライベートネットワークリクエストとは以下のようなリクエストとのことです。
<ul>
<li>パブリック Web サイトからプライベート IP アドレスまたはローカルホストへのリクエスト</li>
<li>プライベートな Web サイト（イントラネットなど）からローカルホストへのリクエスト</li>
</ul>
プライベートネットワーク上のサービスや機器(ネットワーク機器やプリンタなど)は CSRF 対策が不十分なものが多く、今回のアップデートはこれらの攻撃リスクを軽減させるための対策になります。
<h3>WritableStream controller AbortSignal</h3>
<a href="https://developer.mozilla.org/ja/docs/Web/API/WritableStream/abort">WritableStream.abort()</a>を実行した際に、ストリームへの進行中の書き込みの中止や終了がすぐに実行されるようになりました。
<h3>self.structuredClone()</h3>
ディープコピーができる<code>structuredClone()</code>がついに 98 で実装されました。
お使いの Chrome を 98 にアップデートした上で、DevTools の Console で次のサンプルコードを試しに実行してみると<code>structuredClone()</code>で実際にディープコピーが実行されていることが確認できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const myOriginal = {
 someProp: "with a string value",
 anotherProp: {
 withAnotherProp: 1,
 },
};

const myShallowCopy = { ...myOriginal };
myShallowCopy.anotherProp.withAnotherProp = "a new value";
console.log(
 myOriginal.anotherProp.withAnotherProp,
 myShallowCopy.anotherProp.withAnotherProp
);
</code></pre></div>
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const myOriginal = {
 someProp: "with a string value",
 anotherProp: {
 withAnotherProp: 1,
 },
};

const myDeepCopy = structuredClone(myOriginal);
myDeepCopy.anotherProp.withAnotherProp = "a new value";
console.log(
 myOriginal.anotherProp.withAnotherProp,
 myDeepCopy.anotherProp.withAnotherProp
);
</code></pre></div>
参考:
<a href="https://web.dev/structured-clone/">https://web.dev/structured-clone/</a>

Chrome 97 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-97/">https://developer.chrome.com/blog/new-in-chrome-97/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-97/">https://developer.chrome.com/blog/new-in-devtools-97/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-97/">https://developer.chrome.com/blog/deps-rems-97/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D97">https://www.chromestatus.com/features#milestone%3D97</a></li>
<li><a href="https://v8.dev/blog/v8-release-97">https://v8.dev/blog/v8-release-97</a></li>
</ul>
<h2>New In Chrome (Chrome 97)</h2>
Chrome97 で新しく追加された機能です。
<h3>Web Transport</h3>
サーバーとクライアントの双方向リアルタイム通信を実現する新しいフレームワークとして提案されている<code>Web Transport</code>が正式にサポートされました。
Web Transport は既存の代表的手法である<code>Web Sockets</code>や<code>WebRTC</code>と比べ以下のような利点を持っています。
<ul>
<li><code>WebSockets</code>よりも低遅延な通信を実現する</li>
<li>P2P メッセージング用に設計された<code>WebRTC</code>と違い、クライアントサーバーメッセージングを前提として設計されているため扱いやすい</li>
</ul>
Web Transport では<code>streams API</code>と<code>datagram API</code>という２種類の通信 API がサポートされており、それぞれ以下のような特徴から使い分けることができます。
<ul>
<li>streams API : 信頼性の高い順序付けられたデータ送信に最適</li>
<li>datagram API : 信頼性や順序がそこまで求められず、より低遅延でベストエフォートなデータ送信に最適</li>
</ul>
注意点として、Web Transport を試すためには<code>HTTP/3</code>をサポートしたサーバーが必要となります。
Web Transport は以下のような形で簡単に利用することができます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url); // WebTransportインスタンス生成
await transport.ready; // 接続を待つ

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);
</code></pre></div>
詳しくは<a href="https://web.dev/webtransport/">Experimenting with WebTransport</a>を参照しててください。
<h3>Script type feature detection</h3>
ブラウザ側で<code>ES Modules</code>の対応状況を判別する方法として今まで<code>nomodule</code>属性がありましたが、<code>import maps</code>, <code>speculation rules</code>,<code>bundle preloading</code>などの新しく提案されている仕様には対応しきれていませんでした。
今回サポートされた<code>HTMLScriptElement.supports()</code>を利用することで以下のように JavaScript側でscriptがどの仕様に対応しているかのチェックをすることができるようになります。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">if (HTMLScriptElement.supports('importmap')) {
 // Use &#x3C;script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
 // Use &#x3C;script type="module" ...>
} else {
 // Use classic method...
}
</code></pre></div>
<h3>New array prototypes</h3>
Array と TypedArray で<code>findLast()</code>と<code>findLastIndex()</code>が使えるようになりました。
この二つの関数は引数で渡された条件に合致する配列内の最後の要素の値、位置をそれぞれ返します。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const array = [5, 12, 8, 130, 44, 3, 6];

const last = array.findLast((value) => value > 10);
console.log(last); // 44
const lastIndex = array.findLastIndex((value) => value > 10);
console.log(lastIndex); // 4
</code></pre></div>
<h3>Emulate Chrome 100 in the UA string</h3>
あと数ヶ月で Chrome のバージョンは 3 桁となる 100 に到達します。
バージョンや UA 文字列をパースするコードがある場合は 3 桁でも動くかどうか確認しましょう。
現在のバージョンを 100 にする<a href="https://developer.chrome.com/blog/force-major-version-to-100/">#force-major-version-to-100</a>フラグを使って、既存のコードが正しく動くか確認することができます。
<h3>And more!</h3>
上記以外のようなアップデートがあります。
<ul>
<li>フォーム入力の改行が Gecko や WebKit と同じ方法で正規化されるようになりました。
<ul>
<li>これによりブラウザ間の相互運用性が向上しました。</li>
</ul>
</li>
<li><code>client hint</code>のプレフィクスを<code>sec-ch</code>にするように標準化を進めています。
<ul>
<li>例えば<code>dpr</code>は<code>sec-ch-dpr</code>のようになります。</li>
<li>以前の仕様も当分の間サポートを続けますが、いずれは非推奨となり削除されることを想定しましょう。</li>
</ul>
</li>
<li>閉じている<code>&#x3C;detail></code>要素が検索可能になり、閉じている<code>&#x3C;detail></code>要素内の element にスクロールしようとした際は閉じられている<code>&#x3C;detail></code>要素を自動的に開くようになりました。</li>
</ul>
<h3>What's New In DevTools (Chrome 97)</h3>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-97/">https://developer.chrome.com/ja/blog/new-in-devtools-97/</a>
<h3>Deprecations and removals in Chrome 97</h3>
Chrome97 で非推奨になったもの、もしくは削除されたものです
<a href="https://developer.chrome.com/blog/deps-rems-97/">https://developer.chrome.com/blog/deps-rems-97/</a>
<h3>Remove SDES key exchange for WebRTC</h3>
WebRTC の SDES 鍵交換の仕様は 2013 年以降、関連する IETF の標準仕様では MUST NOT となっており、近年では Chrome での使用率も大幅に低下しているので Chrome97 で廃止されました。
参考:
<a href="https://webrtc-security.github.io/report_ja/">https://webrtc-security.github.io/report_ja/</a>
<h3>Remove WebSQL in third-party contexts</h3>
サードパーティ製の WebSQL が廃止されました。W3C では代わりに Web Storage と Indexed Database を推奨しています。
<h3>Remove SDP Plan B</h3>
WebRTC でセッションを確立するために使用される SDP に非標準の実装であった<code>Plan B</code>が削除されました。
参考: SDP の Unified Plan と Plan B
<a href="https://blog.jxck.io/entries/2018-01-05/sdp-unified-plan.html">https://blog.jxck.io/entries/2018-01-05/sdp-unified-plan.html</a>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<a href="https://www.chromestatus.com/features#milestone%3D97">https://www.chromestatus.com/features#milestone%3D97</a>
<h3>Feature policy for Keyboard API</h3>
各言語に対応した keybord レイアウト情報を返す<code>getLayoutMap()</code>メソッドは全てのコンテキスト(iframe 内など)では利用できないという問題点がありました。今回のアップデートで iframe の allow 属性に<code>keyboard-map</code>を追加することでこの問題を解決することができるようになりました。
<a href="https://chromestatus.com/features/5657965899022336">https://chromestatus.com/features/5657965899022336</a>
<h3><code>PermissionStatus.prototype.name</code></h3>
<code>PermissionStatus</code> インターフェースに読み取り専用の属性 <code>"name"</code> を追加し、<code>PermissionStatus</code> が作成された後、パーミッションの名前が取得できるようになりました。
今までは<code>Permissions API</code> を使って複数のパーミッションを同時に問い合わせた際、どの PermissionStatus がどのパーミッションに対応しているのかを識別する方法がありませんでした。
<a href="https://chromestatus.com/features/5651653697994752">https://chromestatus.com/features/5651653697994752</a>
<h3>Propagate request origin and redirect chain in passthrough service workers.</h3>
<code>fetch(evt.request)</code>メソッドで navigation requests を発行する ServiceWorker が<code>FetchEvent.request</code> からのオリジンとリダイレクトチェーンを使用するようになります。
今までは常に ServiceWorker のオリジンが設定され、リダイレクトチェーンを使用することはありませんでした。
<a href="https://chromestatus.com/features/5752539724120064">https://chromestatus.com/features/5752539724120064</a>
<h3>Support calc(<code>&#x3C;number></code>) where only accepts <code>&#x3C;integer></code></h3>
<a href="https://cybozu.github.io/frontend-expert/posts/release-chrome-96">Chrome 96 リリースノートまとめ</a>にも記載したものが、Chrome97 で追加されました。
<blockquote>
css の calc()関数で integer しか受け取らないような場所でも number を指定できるようになりました。 もっとも近い整数に丸められます。
</blockquote>
<a href="https://chromestatus.com/features/5656451751084032">https://chromestatus.com/features/5656451751084032</a>
<h3>transform: perspective(none)</h3>
CSS transform プロパティ内で利用できる、<code>perspective()</code>関数への引数として'none'を実装としてサポートしました。<code>perspective(0)</code>と<code>perspective(none)</code>では挙動が変わるため、変形をしないことを意図する場合(単位行列として扱いたい場合)は<code>perspective(none)</code>を利用するようにしましょう。
<a href="https://chromestatus.com/features/5687325523705856">https://chromestatus.com/features/5687325523705856</a>

<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/96.0/releasenotes/">https://www.mozilla.org/en-US/firefox/96.0/releasenotes/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96</a></li>
</ul>
Firefox 96 がリリースされました！
全体的に性能面での改善が多くを占めるアップデートでした。
本リリースでは Cookie Policy がデフォルトで <code>SameSite=lax</code>を指定するようになりました。
また、<code>color-scheme</code>プロパティが追加され、IE 以外の主要なブラウザで利用可能になりました。
<h2>New</h2>
<ul>
<li>ノイズ抑制やオートゲインコントロールの大きな改善とエコーキャンセレーションの若干の改善がされました</li>
<li>メインスレッドの負荷が大きく軽減されました</li>
<li>Cookie Policy をデフォルトで <code>SameSite=lax</code> に強制するようになりました</li>
</ul>
<h2>Fixed</h2>
<ul>
<li>macOS で Gmail のリンクをコマンドクリックした際、正常に新しいタブが開くようになりました
<ul>
<li>Firefox95 で unresolved になっていた問題の解決</li>
</ul>
</li>
<li>ビデオの SSRC(RTP セッションでの参加者の識別子) が断続的にドロップする問題が修正されました</li>
<li>特定のサイトでビデオの画質が劣化する問題が修正されました</li>
<li>macOS でいくつかの問題を回避するためにフルスクリーンでのビデオが無効化されています</li>
</ul>
<h2>Developer</h2>
<ul>
<li>Linux にて <code>Select All</code> のショートカットキーが <code>Alt-A</code> から <code>Ctrl-A</code> に変更されました
<ul>
<li>web-compatibility の確保やアクセスキーとの衝突回避のため</li>
</ul>
</li>
</ul>
<h2>Web Platform</h2>
<ul>
<li>Web Lock API が実装されました。
<ul>
<li>異なる ServiceWorker やタブで実行されているスクリプトを相互連携させることが可能になります</li>
</ul>
</li>
<li>WebRTC ライブラリが更新されたことで Web 会議アプリでの音声やビデオ機能が改善されました</li>
<li>CSS にて <code>color-scheme</code> がサポートされ、Web ページがどのカラースキームでレンダリング可能かを指定できるようになりました</li>
</ul>
<h2>開発者向けの変更</h2>
<h3>for web developers</h3>
<h4>CSS</h4>
<ul>
<li>CSS で色の値として利用される <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()"><code>hwb()</code></a> 関数が実装されました</li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme"><code>color-scheme</code></a>プロパティがサポートされました</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset"><code>counter-reset</code></a> プロパティにて逆順の CSS カウンターを生成する <code>reversed()</code> 関数がサポートされました</li>
</ul>
<h4>HTTP</h4>
<ul>
<li>同じドメインから送信された Cookie でも異なるスキームを使用されているものは Cookie SameSite ディレクティブについて別サイトから送信されたものと見なすようになりました</li>
<li>SameSite 属性が指定されていない Cookie は暗黙的に <code>SameSite=lax</code> が指定されるようになりました</li>
<li><code>SameSite=none</code> を指定した Cookie はセキュアなコンテキストが必要になりました</li>
<li>Cookie の SameSite についてはこちらをお読みください
<ul>
<li><a href="https://blog.cybozu.io/entry/2020/05/07/080000">Cookie の SameSite 属性について - Cybozu Inside Out | サイボウズエンジニアのブログ</a></li>
</ul>
</li>
</ul>
<h4>APIs</h4>
<ul>
<li>Android において <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare"><code>navigator.canShare()</code></a> がサポートされました</li>
<li>デフォルトで <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API">Web Locks API</a> が有効になりました</li>
</ul>
<h4>Canvas</h4>
<ul>
<li>WebP の画像エンコーダーをサポートしました</li>
</ul>
<h4>DOM</h4>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/IntersectionObserver"><code>IntersectionObserver()</code></a> のコンストラクターが関連付けられたパラメータオプションにから文字が渡された場合に例外発生ではなく <code>rootMargin</code> を設定するようになりました</li>
</ul>
<h4>Media, WebRTC, and Web Audio</h4>
<ul>
<li>いくつかの非標準な静的フィールドが <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_Statistics_API">WebRTC Statistics API</a> から削除されました</li>
</ul>
<h4>WebDriver conformance (Marionette)</h4>
<ul>
<li><code>WebDriver:GetElementShadowRoot</code> コマンドが追加されました
<ul>
<li>指定された要素が持っている shadow root を取り出す</li>
</ul>
</li>
<li><code>WebDriver:ExecuteScript</code> 及び <code>WebDriver:ExecuteAsyncScript</code>にて要素の <code>ShadowRoot</code> を返す際に <code>cyclic object error</code> が発生する問題が解決されました</li>
<li><code>WebDriver:Print</code> が PDF にプリントする際のページ範囲をサポートするように拡張されました</li>
</ul>

<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/95.0/releasenotes/">https://www.mozilla.org/en-US/firefox/95.0/releasenotes/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95</a></li>
</ul>
Firefox 95 がリリースされました。
本アップデートでは RLBox という新しいコードサンドボックス機能が導入されて信頼できないコードに対する安全性が向上しました。
また、Firefox App から Slack.com の Huddle や Call 機能が利用できるようになったのは嬉しいですね。
<h2>New</h2>
<ul>
<li><a href="https://hacks.mozilla.org/2021/12/webassembly-and-back-again-fine-grained-sandboxing-in-firefox-95/">RLBox</a>が全てのプラットフォームで有効になりました
<ul>
<li>信頼できないコードを WebAssembly を用いてネイティブコードへコンパイルすることで意図しない領域外へのメモリアクセスを防止する機能のようです</li>
<li><a href="https://hacks.mozilla.org/2021/12/webassembly-and-back-again-fine-grained-sandboxing-in-firefox-95/">mozilla hacks</a>によれば、従来のプロセスを分割する手法における非同期化のオーバーヘッドやメモリフットプリントの増加を懸念した手法だと記載されていました。</li>
</ul>
</li>
<li>Windows 10 及び Windows 11 において Firefox App を Microsoft Store からダウンロードできるようになりました</li>
<li>ブラウザクロームとツールバースクリーンショットがシンプルになりました</li>
<li>macOS において WindowsServer イベントの処理時の CPU 使用量が削減されました</li>
<li>macOS において主にフルスクリーン時のソフトウェアでコードされたビデオコンテンツの使用電力が削減されました</li>
<li>PiP のトグルボタンをビデオウィンドウの反対側にへ移動できるようになりました</li>
<li>Site Isolation が有効化されました。</li>
</ul>
<h2>Fixed</h2>
<ul>
<li>Firefox を起動した際、JAWS や ZoomText が Firefox をフォーカスするようになりました</li>
<li>VoiceOver が ARIA の switch ロールの状態を正しく報告するようになりました</li>
<li>macOS でコンテンツプロセスの起動速度が速くなりました</li>
<li>メモリアロケータが改善されました</li>
<li>JavaScript を先行してコンパイルするようになり、ページロード時のパフォーマンスが改善されました</li>
</ul>
<h2>Changed</h2>
<ul>
<li>Slack.com で Call や Huddles へアクセスできるように User Agent オーバーライドが追加されました</li>
</ul>
<h2>Developer</h2>
<h3>For web developers</h3>
<h4>HTML</h4>
<ul>
<li>グローバル属性 <code>inputmode</code> が全てのプラットフォームでサポートされるようになりました</li>
</ul>
<h4>CSS</h4>
<ul>
<li>Android 版 Firefox で cursor プロパティがサポートされました</li>
</ul>
<h4>APIs</h4>
<ul>
<li><code>Crypt.randomUUID()</code> 関数がサポートされました</li>
</ul>
<h4>Media, WebRTC, and Web Audio</h4>
<ul>
<li><code>SpeechSynthesisEvent.elapseTime</code> がミリ秒ではなく秒単位の経過時間を返すようになりました</li>
</ul>
<h4>WebDriver Conformance (Marionette)</h4>
<ul>
<li>Marionette が使用しているポートがプロファイルディレクトリにある <code>MarionetteActivePort</code> ファイルに書き込まれるようになりました</li>
<li><code>WebDriver:NewSession</code> が最初のタブのロードが完了するまで待機するようになりました</li>
</ul>
<h3>For add-on developers</h3>
<ul>
<li>browserSettings に <code>overrideContentColorScheme</code> が追加され、<code>.css.prefers-color-scheme.content.override</code> という環境設定を制御することでブラウザのテーマとは独立したページ単位の優先的な配色を設定する機能が追加されました</li>
</ul>
<h2>unresolved</h2>
<ul>
<li>Gmail のリンクをコマンドクリックしても新しいタブが開かない問題がありました
<ul>
<li>回避策: Gmail のリンクをコマンドキーを利用せずにクリックすると新しいタブが開きます</li>
</ul>
</li>
</ul>

Chrome 95 のリリースノート関連の情報をまとめました。
<ul>
<li><a href="https://developer.chrome.com/blog/new-in-chrome-95/">https://developer.chrome.com/blog/new-in-chrome-95/</a></li>
<li><a href="https://developer.chrome.com/blog/new-in-devtools-95/">https://developer.chrome.com/blog/new-in-devtools-95/</a></li>
<li><a href="https://developer.chrome.com/blog/deps-rems-95/">https://developer.chrome.com/blog/deps-rems-95/</a></li>
<li><a href="https://www.chromestatus.com/features#milestone%3D95">https://www.chromestatus.com/features#milestone%3D95</a></li>
</ul>
<h2>Routing with URLPattern</h2>
<code>URLPattern</code>という機能が追加されました。現在は Chrome、Edge の 95 以上に対応しています。
他のブラウザや Node.js ではまだサポートされていない機能ですが、<a href="https://github.com/kenchris/urlpattern-polyfill">urlpattern-polyfill</a>で polyfill できます。
<div class="remark-highlight"><pre class="language-javascript"><code class="language-javascript">const pattern = new URLPattern({ pathname: "/books/:id" });
console.log(pattern.test("https://example.com/books/123")); // true
console.log(pattern.exec("https://example.com/books/123").pathname.groups); // { id: '123' }

// 引数で渡せる全てのプロパティ
const p = new URLPattern({
 protocol: "http{s}?",
 username: ":username",
 password: ":password",
 hostname: ":subdomain.example.com",
 port: ":port(80|443)",
 pathname: "/:path",
 search: "*",
 hash: "*",
});
</code></pre></div>
詳細はこちら
<a href="https://web.dev/urlpattern/">https://web.dev/urlpattern/</a>
<h2>Picking colors with the Eye Dropper API</h2>
カラーを取得する Eye Dropper API が追加されました
詳細はこちらの記事で解説しています。
<a href="https://cybozu.github.io/frontend-expert/posts/eyedropper-api">Chrome 95 で追加された画面上の色を取得する EyeDropper API について</a>
<h2>PWA Summit</h2>
10 月 6~7 日に PWA Summit が開催されてました 
見逃した方はアーカイブが下記のリンクに残ってるので、そこから確認できます
<a href="https://pwasummit.org/">https://pwasummit.org/</a> 
<a href="https://www.youtube.com/channel/UC1j3gvdVISAEO1_2MwA5oQw/videos">https://www.youtube.com/channel/UC1j3gvdVISAEO1_2MwA5oQw/videos</a>
<h2>User-agent reduction origin trial</h2>
Origin Trial で実際に User-Agent の文字列が削減された後の挙動が試せます
参考:
<ul>
<li><a href="https://web.dev/user-agent-client-hints/">User-Agent Client Hints によるユーザーのプライバシーと開発者体験の改善</a></li>
<li><a href="https://developers-jp.googleblog.com/2021/09/chrome-user-agent.html">User-Agent Reduction origin trial(日本語訳)</a></li>
</ul>
<h2>And more!</h2>
<ul>
<li>Storage Foundation API を origin trial で試せます</li>
<li>WebAssembly で例外処理のサポートが提供され、例外がスローされたときにコードが中断できるようになります</li>
<li>Chrome 100 が来年きます。バージョンが 2 桁から 3 桁になるので、自分のコードに何らかの影響があるかどうかを確認するといいかもしれません</li>
</ul>
<h2>DevTools</h2>
DevTools についてはこちらの日本語訳を参照ください。
<a href="https://developer.chrome.com/ja/blog/new-in-devtools-95/">https://developer.chrome.com/ja/blog/new-in-devtools-95/</a>
<h2>Deprecations and removals in Chrome 95</h2>
Chrome 95 で非推奨になったもの、もしくは削除されたものです。
<h3>Support for URLs with non-IPv4 hostnames ending in numbers</h3>
有効な IPv4 アドレスではない、 <code>http://foo.127.1/</code> のような数字で終わる host name を持つ URL が拒否されるようになります。
社内のプレビュー環境などで IP アドレスをポストフィックスとして利用してたりする場合は影響がでているかもしれません。
<h3>WebAssembly cross-origin module sharing</h3>
cross-originでsame-siteな環境間でのWebAssemblyモジュールの共有が非推奨になりました
<a href="https://www.chromestatus.com/feature/5650158039597056">https://www.chromestatus.com/feature/5650158039597056</a>
合わせてこちらも参考にしてください 
<a href="https://developer.chrome.com/blog/wasm-module-sharing-restricted-to-same-origin/">Restricting Wasm module sharing to same-origin</a>
<h3>Deprecate U2F API (Cryptotoken)</h3>
U2F API が非推奨になり、Chrome 98 からはデフォルトで無効になります。
U2F とはなんぞやという人はこちらの記事が参考になります。
<a href="https://blog.jxck.io/entries/2018-05-15/webauthentication-api.html">Web Authentication API で FIDO U2F(YubiKey) 認証 | blog.jxck.io</a>
<h2>その他 Chrome Platform Status に記載されていたもの</h2>
<blockquote>
<a href="https://www.chromestatus.com/features#milestone=95">https://www.chromestatus.com/features#milestone=95</a>
</blockquote>
<h3>Back-forward cache for same-site navigations on Android</h3>
Chrome 86 から origin trial で試せていた Android での戻る/進むのキャッシュが same-site で効くようになりました。 
<a href="https://www.chromestatus.com/feature/5694778600587264">https://www.chromestatus.com/feature/5694778600587264</a>
bfcache(Back/forward cache)については下記に詳細の説明が載っています。 
<a href="https://web.dev/bfcache/">https://web.dev/bfcache/</a>
<h3>CSS @counter-style rules in shadow trees</h3>
Shadow tree に対してカスタムの counter-style を定義することができるようになりました。 
<a href="https://www.chromestatus.com/feature/5716198446596096">https://www.chromestatus.com/feature/5716198446596096</a>
<code>@counter-style</code>については下記を参考ください
<div class="remark-highlight"><pre class="language-css"><code class="language-css">@counter-style circled-alpha {
 system: fixed;
 symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
 suffix: " ";
}

.items {
 list-style: circled-alpha;
}
</code></pre></div>
このスタイルを当てた list を作ると次のようなリストができます。
<div class="remark-highlight"><pre class="language-unknown"><code class="language-unknown">Ⓐ One
Ⓑ Two
Ⓒ Three
Ⓓ Four
Ⓔ FIve</code></pre></div>
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style#specifying_symbols_with_counter-style">https://developer.mozilla.org/ja/docs/Web/CSS/@counter-style#specifying_symbols_with_counter-style</a>
<h3>Cookie size limits</h3>
Set-Cookie header、及び、document.cookie、CookieStore で設定される Cookie のサイズが制限されます。
具体的には Cookie の名前と値の合計が 4096 バイトまでになり、Cookie の各属性値は 1024 バイトに制限する必要があります。
<a href="https://www.chromestatus.com/feature/4946713618939904">https://www.chromestatus.com/feature/4946713618939904</a>
<h3>Logical properties for contain-intrinsic-size</h3>
contain-intrinsic-size を省略した次の表記が追加されます。
<ul>
<li>contain-intrinsic-{width,height}</li>
<li>contain-intrinsic-{inline,block}-size</li>
</ul>
<a href="https://www.chromestatus.com/feature/5709654999957504">https://www.chromestatus.com/feature/5709654999957504</a>
参考:
<a href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override</a>
<h3>contain-intrinsic-size</h3>
content-visibility で指定された要素の自然なサイズを制御するプロパティです。
次の実装は画面外の section のレンダリングをスキップする例です。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;style>
section {
 content-visibility: auto;
 contain-intrinsic-size: 0 500px;
}
&#x3C;/style>
</code></pre></div>
ビューポート外のコンテンツはレンダリングされなくなります。
<a href="https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility">https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility</a>
<h3>New UA platform version source on Windows for User-Agent Client Hints</h3>
Windows の Sec-CH-UA-Platform-Version(User-Agent Client Hints)で返されるバージョンが Windows プラットフォームの違いを識別できるように更新されました。
<a href="https://www.chromestatus.com/feature/5080939765956608">https://www.chromestatus.com/feature/5080939765956608</a> 
<a href="https://github.com/WICG/ua-client-hints/issues/220#issuecomment-870858413">https://github.com/WICG/ua-client-hints/issues/220#issuecomment-870858413</a>
<h3>Note taking new note URL</h3>
Web Application Manifest が <code>note_taking</code> と <code>new_note_url</code> に対応しました。
Web Application 側から新しいメモを書きたい時にユーザーエージェントに読み込ませたい URL を指定できるようになります。
<a href="https://www.chromestatus.com/feature/5205972320518144">https://www.chromestatus.com/feature/5205972320518144</a> 
<a href="https://wicg.github.io/manifest-incubations/index.html#note_taking-member">https://wicg.github.io/manifest-incubations/index.html#note_taking-member</a>
<h3>Secure payment confirmation</h3>
WebAuthn を利用して、Web 上での支払い時の認証を強化することができるようになります。
<a href="https://www.chromestatus.com/feature/5702310124584960">https://www.chromestatus.com/feature/5702310124584960</a>
※ Payment Request API で簡単・高速な決済を実現する
<a href="https://developers.google.com/web/updates/2016/07/payment-request?hl=ja">https://developers.google.com/web/updates/2016/07/payment-request?hl=ja</a>
※ PaymentRequestAPI で secure-payment-confirmation を使った実装例
<a href="https://www.w3.org/TR/2021/WD-secure-payment-confirmation-20210831/#sctn-sample-authentication">https://www.w3.org/TR/2021/WD-secure-payment-confirmation-20210831/#sctn-sample-authentication</a>
<h3>droppedEntriesCount in PerformanceObserver callback</h3>
PerformanceObserver のコールバックに droppedEntriesCount が追加されます。
<a href="https://www.chromestatus.com/feature/5320666234486784">https://www.chromestatus.com/feature/5320666234486784</a>
PerformanceObserver 
<a href="https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver">https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver</a>
<h3>self.reportError()</h3>
キャッチされない例外をレポートする<code>self.reportError()</code>が追加されます。
<a href="https://www.chromestatus.com/feature/5634523220934656">https://www.chromestatus.com/feature/5634523220934656</a>
以下のコードを実行するとerrorはcatchで握り潰されずに<code>Uncaught Error: foo</code>になります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const addition = (a, b) => {
 if (a > 0) {
 self.reportError(new Error('foo'))
 }
 return a + b;
};
const count = (a, b, callback) => {
 try {
 callback(a, b)
 } catch (error) {
 console.log('bar')
 }
};

count(2, 3, addition)
</code></pre></div>
参考:
<ul>
<li><a href="https://html.spec.whatwg.org/#runtime-script-errors">https://html.spec.whatwg.org/#runtime-script-errors</a></li>
</ul>

先日 Safari 15 がリリースされました。
<a href="https://webkit.org/blog/11989/new-webkit-features-in-safari-15/">https://webkit.org/blog/11989/new-webkit-features-in-safari-15/</a>
影響の大きそうな箇所や、知っておいたほうが良さそうな箇所を中心に紹介します。
<h2>HTML</h2>
<h3>theme-color</h3>
meta タグ上での <code>theme-color</code> のサポートが追加されました。
指定することで、ブラウザのメニューバーやタブバーといった領域のカラーを変更することができます。 <code>prefers-color-scheme</code> と併用することで、ダークモード/ライトモードに応じた色の指定もできます。
<a href="https://developer.apple.com/videos/play/wwdc2021/10029/">Design for Safari 15</a>
<h2>CSS</h2>
<h3><code>aspect-ratio</code> プロパティのサポート</h3>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio">aspect-ratio - CSS: Cascading Style Sheets | MDN</a>
<h3><code>lab()</code> <code>lch()</code> <code>hwb()</code> シンタックスのサポート</h3>
<a href="https://www.w3.org/TR/css-color-4/">W3C Color Module Level 4</a>に沿った新しいカラーシンタックス <code>lab()</code> <code>lch()</code> <code>hwb()</code> が利用可能になりました。
<h3>list-style-type に設定可能な値が追加</h3>
li 要素など、リストアイテム要素のマーカーを指定するための <code>list-style-type</code> 新たに 12 個の値が設定可能になりました。
MDN のデモで値に応じた表示を確認することができます。
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#result_2">https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#result_2</a>
<h2>Web Inspector</h2>
CSS Grid に対応したオーバレイ表示が可能になりました。
<a href="https://webkit.org/blog/11588/introducing-css-grid-inspector/">https://webkit.org/blog/11588/introducing-css-grid-inspector/</a>
デバッグ用のブレークポイント周りなどにも改善が施されています。その他の変更点は WWDC2021 の発表動画に含まれます。
<a href="https://developer.apple.com/videos/play/wwdc2021/10031/">Discover Web Inspector improvements - WWDC21 - Videos - Apple Developer</a>
<h2>JavaScript and WebAssembly</h2>
Worker や ServiceWorker で ES6 Modules のサポートが追加されました。
また、JavaScript エンジンで次の機能がサポートされました。
<ul>
<li>top-level <code>await</code></li>
<li><code>Error.cause</code></li>
<li>プライベートクラスメソッド とアクセサ</li>
<li><code>BigInt64Array</code> および <code>BigUint64Array</code></li>
</ul>
WebAssembly では次のサポートが追加されました。
<ul>
<li>streaming compilation</li>
<li>bulk memory operations</li>
<li>reference types</li>
<li>non-trapping conversions from <code>float</code> to <code>int</code></li>
</ul>
<a href="https://github.com/WebAssembly/spec/tree/main/proposals">WebAssembly/spec - proposals</a>
<a href="https://developer.apple.com/videos/play/wwdc2021/10030">Develop advanced web content - WWDC21 - Videos - Apple Developer</a>
<h2>Web APIs</h2>
<h3>WebGL2 に対応</h3>
WebGL2 に対応し、かつ Apple の グラフィック API の Metal 上で動作するようになり、パフォーマンスが向上しました。
<h3>Web Share API Level 2 の実装</h3>
Web Share API Level 2 の実装により、Web ページからアプリへのファイル共有が可能になりました。
<a href="https://developer.apple.com/videos/play/wwdc2021/10030">Develop advanced web content - WWDC21 - Videos - Apple Developer</a>
<h2>Media</h2>
<ul>
<li>MediaSession API のサポートの追加</li>
</ul>
<a href="https://developer.apple.com/videos/play/wwdc2021/10189/">Coordinate media playback in Safari with Group Activities - WWDC21 - Videos - Apple Developer</a>
<h2>Security and Privacy</h2>
<h3>自動 HTTPS アップグレードのサポート</h3>
http と https の双方が利用可能なページの場合、自動で https を利用するようになります。
<h2>所感</h2>
<code>aspect-ratio</code> が 主要 4 ブラウザ(Chrome/Safari/Firefox/Edge)すべてで利用可能になりましたね。今後利用するケースが徐々に増えていきそうです。
余談ですが、<code>list-style-type</code> に <code>japanese-formal</code> を指定すると <code>壱・弐・参・四・伍…</code> になるのですね。カッコいいです。

<a href="https://developer.chrome.com/blog/new-in-chrome-95/">Chrome 95 がリリース</a>され、新機能として EyeDropper API が追加されました。(Edge 95 にも追加されました)
<h2>EyeDropper API とは</h2>
EyeDropper API は画面上から色情報を取得するスポイトツールをブラウザ上で実現する API です。スポイトツールはデザインツールなどに搭載されていることが多いかと思います。
Chrome の DevTools にも色選択をするときにスポイトアイコンをクリックするとスポイトツールが使えますが、この機能が単体の Web API として実装された形になります。
<img src="/frontend-expert/image/eyedropper-api/eyedropper.png" alt="DevToolsのカラーピッカー" width="687" height="307" >
<h2>使い方</h2>
EyeDropper API の使い方は次のようになります。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
console.log(result); // {sRGBHex: '#92d0e1'}
</code></pre></div>
<code>EyeDropper</code>のインスタンスで<code>open</code>を実行すると色選択の UI が表示されます。
<h3>セキュリティ上の制約</h3>
EyeDropper API の <code>open</code> はユーザーの操作なしに実行するとエラーになります。
<div class="remark-highlight"><pre class="language-markup"><code class="language-markup">DOMException: Failed to execute 'open' on 'EyeDropper': EyeDropper::open() requires user gesture.
</code></pre></div>
これはプライバシーやセキュリティを考慮しての制限になります。<code>open</code>はユーザーの操作によってのみスポイトモードに移行し、ユーザーがクリックしたときのみ色の値を返します。
これによって悪意のあるサイトがユーザーの画面のピクセル情報を勝手に取得できないようになっています。
<h3>console からは起動できる</h3>
ユーザーの操作なしに起動できない API ですが、DevTools の console からはその限りではありません。次のワンライナーのコードを console で実行するとスポイトツールを起動できます。
<div class="remark-highlight"><pre class="language-js"><code class="language-js">await new EyeDropper().open();
</code></pre></div>
覚えておくと便利かもしれません。
ちなみにですが、Snippets からは起動できませんでした。
<h2>EyeDropper API を使ったデモサイト</h2>
EyeDropper API のデモサイトの紹介です。こちらのデモでは EyeDropper API を使った色選択ゲームが遊べます。
<a href="https://captainbrosset.github.io/eyedropper-demos/color-game.html">eyedropper-demos/color-game</a>
Play ボタンをクリックするとカウントダウンが開始されます。時間内に左のマスに表示された色と同じ色を選択すると勝ちです。
<img src="/frontend-expert/image/eyedropper-api/demo.png" alt="EyeDropper APIのデモ" width="704" height="491" >
一部ブラウザでは <code>input</code>タグで<code>type="color"</code>とすることで似たようなピッカーを使用できましたが、UI なしに実行できるようになったことでいろいろな使い道が考えられそうですね。
<h2>参考リンク</h2>
<ul>
<li><a href="https://wicg.github.io/eyedropper-api/">https://wicg.github.io/eyedropper-api/</a></li>
<li><a href="https://web.dev/eyedropper/">https://web.dev/eyedropper/</a></li>
</ul>

Firefox 93 がリリースされました！
<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/93.0/releasenotes/">https://www.mozilla.org/en-US/firefox/93.0/releasenotes/</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/93">https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/93</a></li>
</ul>
今回のリリースから AVIF 画像フォーマットがデフォルトで有効化されます。
クライアント側の使用感が変わるわけではありませんが、今後こういった高圧縮可能な形式がスタンダードになることでよりリッチな Web コンテンツを多く提供できるようになるかもしれませんね。
また、クラスの <code>static</code> 初期化ブロックをはじめとして、多くのイベントハンドラやプロパティの追加が盛り込まれているため、開発者視点では重要なアップデートではないかと思われます。
<h2>New</h2>
<ul>
<li>AV1 形式の画像フォーマットに対応</li>
<li>PDF ビューアーがより詳細なフォームに対応(複数の政府や銀行が使用している XFA ベースフォーム)</li>
<li>Windows 版にて、利用可能メモリが極端に少ない場合に利用状況や属性に基づいてタブを自動的にアンロードするようになった</li>
<li>macOS 版にて、.dmg ファイルからマウントされた Firefox を実行している時、セッションを失わないためにインストールを完了するかどうかプロンプトが表示されるようになった</li>
<li>安全でない接続に依存している、もしくは安全でない可能性のあるダウンロードをブロックするようになった</li>
<li>Smart Block 3.0 (プライバシー保護機能)の互換性向上</li>
<li>新しい referrer tracking protection を Strick Tracking Protection と Private Browsing に導入</li>
<li>Firefox Suggest(Web ナビゲーター) の導入</li>
</ul>
<h2>Fixed</h2>
<ul>
<li>VoiceOver がアクセス可能なツリーコントロール内にあるチェック可能アイテムのチェック状態を正しく判別するようになった</li>
<li>Orca スクリーンリーダーが Firefox で正しく動作するようになった</li>
<li>その他セキュリティ修正</li>
</ul>
<h2>Changed</h2>
<ul>
<li>3DES を使用する TLS 暗号スイートが無効化
<ul>
<li>非推奨バージョンの TLS を有効化する設定により利用は可能</li>
</ul>
</li>
<li>ダウンロードパネルが Firefox のビジュアルスタイルに沿うようになった</li>
</ul>
<h2>for web developer</h2>
<h3>HTML</h3>
<ul>
<li>ARIA <code>meter</code> ロールを実装</li>
<li><code>&#x3C;input type="datetime-local"></code> の UI を実装</li>
</ul>
<h3>CSS</h3>
<ul>
<li><code>font-synthesis</code> に <code>small-caps</code> キーワードを追加</li>
</ul>
<h3>JavaScript</h3>
<ul>
<li>クラスの <code>static</code> 初期化ブロックをサポート</li>
<li><code>createImageBitmap()</code> にて option オブジェクトを用いて <code>imageOrientation</code> 及び <code>premultiplyAlpha</code> プロパティを渡せるようになった</li>
<li><code>Intl.supportedValueOf()</code> をサポート
<ul>
<li>実装でサポートされている値をコードで列挙できるようになった</li>
</ul>
</li>
</ul>
<h3>HTTP</h3>
<ul>
<li>ダイジェストを用いた HTTP 認証で SHA-256 アルゴリズムをサポート</li>
<li>画像のデフォルト HTTP ACCEPT ヘッダーが <code>image/avif,image/webp,*/*</code> に変更
<ul>
<li>AV1 フォーマット対応によるものだと思われます</li>
</ul>
</li>
</ul>
<h3>APIs</h3>
<ul>
<li><code>ElementInternals.shadowRoot</code> 及び <code>HTMLElement.attachInternals</code> をサポート</li>
<li><code>ResizeObserver.Observe()</code> にて <code>device-pixel-content-box</code> 値をサポート</li>
<li>グローバル関数 <code>reportError()</code> をサポート
<ul>
<li>スクリプトがコンソールやグローバルイベントハンドラに対してエラーを報告できるようになった</li>
</ul>
</li>
</ul>
<h3>Events</h3>
<ul>
<li>グローバルイベントハンドラプロパティ <code>onsecuritypolicyviolation</code> をサポート
<ul>
<li>コンテンツセキュリティポリシー違反時に発生する <code>securitypolicyviolation</code> イベントを処理するハンドラを割り当てることが可能になった</li>
</ul>
</li>
<li><code>GlobalEventHandlers</code> 及び <code>ShadowRoot</code> にて <code>onslotchange</code> イベントハンドラプロパティをサポート
<ul>
<li>スロットに含まれるノードが変更された際に <code>&#x3C;slot></code> 要素で発生する <code>slotchange</code> イベントを処理するハンドラを割り当てることが可能になった</li>
</ul>
</li>
</ul>
<h3>Removals</h3>
<ul>
<li><code>KeyboardEvent.initKeyEvent()</code> が <code>dom.keyboardevent.init_key_event.enabled</code> によって実行可否が制御されるようになり、デフォルトで無効になった</li>
</ul>
<h3>WebDerive conformance (Marionette)</h3>
<ul>
<li>大きなドキュメントに対して <code>WebDriver:Print</code> が失敗する原因になっているバグを修正</li>
</ul>
<h3>for add-on developers</h3>
<ul>
<li><code>windowId</code> が指定されている場合、サイドバーが <code>extension.getViews</code> に包含されるようになった</li>
</ul>
<h3>Other</h3>
<ul>
<li>AVIF 画像のサポートがデフォルトで有効になった
<ul>
<li><code>image.avif.compliance_strictness</code> を用いて仕様準拠の厳密生を調節できる</li>
<li>アニメーション画像には非対応</li>
</ul>
</li>
</ul>
<h2>Web Platform</h2>
<ul>
<li><code>&#x3C;input type="datetime-local"></code> の UI を実装</li>
</ul>

Browser