#66「Interop 2025の注力エリアを見てみよう」

加藤: 皆さん、こんにちは！ ミツエーリンクスの加藤です！

佐竹: 佐竹です！

加藤: はい、今回もミツエーテックラジオやっていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。2月にInterop 2025の正式な内容が確定したので、今回は今年の注力エリアをざっと確認していきたいと思います！

佐竹: よろしくお願いします！ まず、1月のテックラジオInterop 2025の中でも少し触れましたが、改めてInteropの取り組みについて簡単に説明します。 Interopは、Apple、Google、Microsoft、Mozillaの4つの主要ブラウザベンダーと、Bocoup、Igaliaが協力してWebプラットフォームの相互運用性を向上するための取り組みです。

加藤: はい。ありがとうございます！

加藤: では早速注力エリアについて話していきましょう。えー今年は全部で19個の注力エリアが選ばれました。まず1つ目、backdrop-filterですね。

佐竹: はい。backdrop-filterは、要素の背後にある領域をぼかして見せたり、透明感のあるエフェクトを作るのに便利なCSSプロパティですけど、一部ブラウザ間で挙動に差があるんですよね。

加藤: そうですね。backdrop-filterが当たっている要素を入れ子にしたときに、思った通りにボケなかったような覚えがありますね。ぼかし表現を使ったデザインはちょっとずつ増えてきているような気もするので、このあたり改善させるといいですね。

加藤: 次がCore Web Vitalsです。個人的にはWeb Vitals関係は、仕様はあるものの、Googleの主導で進んでいる印象が強かったので、Interopで重点項目として扱われるのはちょっと意外でしたね。

佐竹: そうですね、これ私も驚きました。具体的にはPerformanceObserverで計測できるメトリクスの互換性を上げていくことになると思うんですけど、今年はLCPとINPに焦点を当てるようで、CLSは対象外とのことでした。

加藤: はい。次がCSS anchor positioningですね。anchor positioningは過去のテックラジオで佐竹さんも取り上げていましたよね。

佐竹: はい！anchor positioningが本格的に標準化されれば、ポップオーバーやツールチップの相対的な位置指定が、より柔軟にできるようになりますね。

加藤: そうですね。次がdetails要素ですが、これはdetails要素自体っていうより、関連する::marker疑似要素や、::details-content疑似要素の実装などが挙げられていますね。

佐竹: はい。その他にもページ内検索でdetails要素内のテキストがヒットしたら自動的に展開する機能の実装だったり、関連するhidden="until-found"属性についても含んでいるようです。

加藤: はい。次は毎年恒例となりつつあるLayoutですね。

佐竹: Flexible BoxレイアウトとGridレイアウトは使用頻度の高いCSSの機能ですし、SubgridはState of CSS 2024の機能の項目で最も期待されている機能という結果も出ていましたので、今年も注目ですね。

加藤: あ、そうだったんですね！であれば、なおさら互換性は上げておかないとですね！

加藤: 次はModulesですね。これはJSのimport文のことで、type属性付きでJSONデータを読み込むJSONモジュールのインポートに焦点を当てるらしいです。

佐竹: はい。私的にはCSSモジュールのネイティブのサポートも期待していたんですけど、今年のInteropではJSONモジュールに重点を置くということでした。

加藤: 続いてはNavigation APIですね。Navigation APIはブラウザのナビゲーションを制御したり、履歴を管理できるAPIですね。

佐竹: はい。またHistory APIやwindow.locationの後継とも言われていて、JavaScriptでの画面遷移に関する処理を柔軟に書けるようになりそうです。

加藤: Navigation APIは開発者の間でもなんかけっこう期待されているような印象がありますね。

加藤: 次はPointer and mouse eventsです。これはたしか去年もありましたよね。

佐竹: そうですね。取り組み内容も去年からの引き継ぎとなっています。

加藤: はい。では次、えーMutation eventsの削除です。これは機能の追加ではなく、すべてのブラウザでMutation Events のサポートを完全に削除するのが目標のようです。

佐竹: 機能を削除するっていうのも大変ですよね。Mutation Eventsは、DOMの変更を検知するための古いAPIですが、パフォーマンスの問題から現在は非推奨となっています。代替としてはMutationObserverがありますね。

加藤: はい。次が@scopeです。@scopeはCSSでスタイルを適用する範囲を限定できるアットルールですが、現在はFirefoxではまだ未対応なので、Mozillaの実装が進むことに期待って感じですかね。

佐竹: はい。あとはWebプラットフォームテストダッシュボードを見るとSafariも少しテストが追いついていないようなところがあるので、そのあたりも含めてだと思います。

加藤: えーここまでざっと10個の注力エリアをご紹介しましたが、佐竹さんの一押しとかありますか？

佐竹: んーそうですね～えーCSSでifだったりfunctionが使えるようになってきているので、影響範囲を絞り込める@scopeに注目しているっていうのと、Layout関連で言うと今後Masonryレイアウトも実装される予定なので、今あるバグは引きずらないようにしてほしいっていうのはありますね。

加藤: あーそうですね。たしかに、将来の機能追加を見据えると、今のうちに土台を固めておくっていうのは大事ですね…！

加藤: では残りの9個の注力エリアについても話していきたいと思います！まず scrollend eventです。これはスクロールが止まったら発火するイベントですね。

佐竹: はい。scrollend eventは、現在Safariではまだ実装されていないですね。macOSではデフォルトで慣性スクロールが有効になっていて、scrollendを開発者側で実装するのは特に大変なので、期待したいところです！

加藤: はい。次がStorage Access APIです。Storage Access APIは、ページに埋め込まれたクロスオリジンのiframeから、サードパーティCookieやローカルストレージへのアクセスをリクエストできるAPIです。

佐竹: はい。このAPIを使ってリクエストすると、ブラウザのプロンプトがでるので、ユーザーの明示的な許可のもとでストレージアクセスを制御できるようになるんですけど、ユーザーが何を許可しているのかは、ユーザーに対してしっかり説明する必要がありそうですね。

加藤: 次はtext-decorationです。これ知らなかったんですけど、text-decorationショートハンドで一括指定する場合、Safariだとwebkitのプレフィックスが必要なんですね。

佐竹: そうなんですよね。最近はプレフィックスが必要なCSSプロパティが減ってAutoprefixerを使用しないことがあるんで、プレフィックスをつけるプロパティがまぁ気になってはいたんですが、text-decoration は目新しいプロパティではないので、今年のInteropで採用されるっていうのは予想外でしたね。

加藤: はい。続いてはURLPatternで、これはあるURL文字列が指定したURLのパターンにマッチするかを確認したいときとかに使えますね。

佐竹: あとマッチするかだけではなく、マッチさせたうえでURLのpathnameだったりhashの部分だけを取り出すとかも簡単になりそうですね。

加藤: そうですね。次がView Transition APIです。今年は同一ページ内のView Transitionのみに注力するらしく、ページをまたいだView Transitionは今年の注力エリアには含まれていないみたいでした。

佐竹: はい。直近だとChromeでNested View Transition GroupsやScoped View Transitionsのような新しい機能も実装されてきているので、そのあたりも踏まえて実装してほしいですね。

加藤: はい。えーで続いてがWebAssemblyです。JavaScriptのString APIのサブセットをWebAssembly から直接呼べるようにしたり、あとはResizable ArrayBufferとのインテグレーションが予定されているそうです。

佐竹: WebAssemblyからJavaScriptの任意のAPIを使用するためには、互換性がない部分同士を結合するためにグルーコードと呼ばれるコードをインポートする必要がありました。グルーコードによるパフォーマンスの影響はまぁ小さいとは言われてはいるんですけど、 プリミティブなオブジェクトに関してはグルーコードなしで扱えるようにしたいということで、今年はString関係のAPIに取り組んでいくようです。

加藤: 次がWeb Compatで、これはブラウザー間の違いにより、問題が起きているようなプロパティをいくつかまとめている注力エリアですね。

佐竹: はい。今年Web Compatとしてまとめられたのはappearance、zoom、list-style-position、overscroll-behaviorなどのCSSプロパティと、WorkerがContents Security Policyによってブロックされたときのエラー処理、PerformanceObserver、そして caretPositionFromPoint()に焦点を当てるとのことでした。

加藤: はい。次がWebRTCです。WebRTCはブラウザをまたいで映像や音声のリアルタイム通信を可能にするAPIで、えー今だとWeb会議などに使われることが多いと思います。

佐竹: はい。WebRTCでエンドツーエンドの暗号化（E2EE）を行う際などに活用されるRTCRtpScriptTransformや、RTCDataChannelsのWorkerへの転送機能の互換性向上に注力されるようです。

加藤: はい。そして注力エリアの最後がWriting modesです。Writing modesは縦書きのサポートなど、テキストがどのように流れるかを指定できるプロパティですね。

佐竹: はい。Interopではsidewaysのサポート、overflowの論理プロパティにあたるoverflow-inlineとoverflow-blockのサポートを目標にしているということでした。

加藤: えーここまでInterop 2025で注力エリアとして選ばれた機能をざーっとお話ししてみました。ここまで紹介した注力エリアは基本的には、用意されている共通の自動テストをどれだけクリアしているか、という観点で相互運用性スコアを向上させていくのですが、すべての機能が自動的なテストで確認できるわけではないので、そういった機能の相互運用性をどのように高めていくか、というところはInvestigation Effortのほうで取り組まれていきます。

佐竹: はい。Investigation Effortのほうも5つのテーマが決められていて、Accessibility Testing、Mobile Testingの2つが2024年からの継続で、2025年からは、えーGaming Testing、Privacy Testing、WebVTTの3つが追加になりました。

今年のInteropは、CSSやパフォーマンス、APIの標準化など、幅広い分野にバランスよく注力されている印象でした。特に、Webアプリの開発者にとっては使いやすい機能が増えるので、楽しみですね。

加藤: そうですね！最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。

また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、最新のエピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。それでは今日はこの辺で！ありがとうございましたー！

佐竹: ありがとうございました！