#63「Interop 2025」

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

佐竹 : 佐竹です！

加藤 : ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。えー今年もよろしくお願いします。

佐竹 : よろしくお願いします！

加藤 : はい。2025年最初のエピソードとなる今回は、Webにとって重要な取り組みであるInterop 2025をテーマに話していきたいと思います！

佐竹 : はい。Interopも2025で4年目？ですかね。早いですねー

加藤 : そうですね。個人的な感想ですけど、2022年にInteropが始まってから、やっぱりどのブラウザベンダーも実装スピードが上がっているような気がしますね。

佐竹 : ですね。テックラジオでもWebプラットフォームの新機能を紹介していますけど、毎月なにかしらの新しい標準技術が実装されていますよね。あとはやっぱりInteropを通して各ブラウザベンダーが注力すべきエリアを共有してくれるっていうのは安心ですよね。

加藤 : そうですね。あの機能はあのブラウザには実装されるのか？とか、いつごろ実装されるんだろ？とかってそわそわすることは減りましたね。ということでInterop 2024の成果をざっと振り返りつつ、Interop 2025で提案されている内容をいくつかピックアップしていきたいと思います！

加藤 : まずInteropという取り組みについて簡単におさらいしておくと、Interopとは、Apple、Google、Microsoft、Mozillaの4つの主要ブラウザベンダーと、Bocoup、Igaliaが協力してWebプラットフォームの相互運用性を向上するための取り組みです。特定のブラウザにしか実装されていない、もしくは全てのブラウザに実装はされているけどブラウザごとに挙動がちょっと違う、というようなブラウザ間の差異を減らすために各社が協力している感じですね。

佐竹 : そうですね。その他にも機能の仕様が十分でない場合はどのように動くのが良いか検討されたり、テストしながら定義されることもあるんですよね。

加藤 : はい。どういうテストがあるのかとか、テストの合格状況も公開されていると、機能を使う私たちからすると安心ですよね。2024年は全部で18個の注力エリアが新たに選ばれていたのですが、1年間の結果はどんな感じになっているんでしょうか。

佐竹 : はい。Interop 2024の達成状況はweb-platform-tests dashboardで確認することができます。安定版として公開されているバージョンのスコアは収録時点で、Chromeが98、Edgeが97、Firefoxが98、同じくSafariが98で、全体のスコアとしては、えー95となっていました。

加藤 : CSS NestingとかPopoverは一気に各ブラウザに実装された感じがしますね。2024年で佐竹さんが印象に残っているものってありますか？

佐竹 : えーそうですねー。2024年に重点分野に追加されたエリアについては比較的、進捗率が良いように見えるんですけど、うーん@starting-styleの進捗率が低いですかね。あと新しく追加されたものよりも、2023年からの引き継ぎとなっていたPointer and Mouse EventsとかFlexbox、GridなどのLayoutの進捗率が他と比べると若干低いのも気になるところではありますね。

加藤 : はい。@starting-styleはすべてのブラウザで実装はされているんですけど、ダッシュボードの詳細を見てみるといくつかのテストに合格していないケースがあるみたいですね。あとInteropは毎年新しい注力エリアが追加されていくので、これまでの積み残しがどんどん増えていくと大変だよな…とはちょっと思いますね。

私個人的にはRelative Color Syntaxが地味に印象に残っていますね。Firefoxのバージョン128でサポートされてすべてのモダンブラウザで利用可能になったんですけど、カラーコードをCSSに直接書くのではなくて、色を決めるためのルールのようなものを定義することがCSSで表現できるようになったので、デザインカンプからは読み取れないルールをデザイナーと開発者が一緒に考えるきっかけになってほしいなという期待も込めて、今後のポイントかなと思ってます。

佐竹 : なるほどーRelative Color Syntaxは、デザインの一貫性を保つときに使えますよね。ちなみに、Web Platform Statusでは、2024年に新たに利用可能になった機能が確認できまして、えーInteropで注力エリアとして選ばれたもの以外にもたくさん実装されていたので、こちらも見ておきたいですね！

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

加藤 : ここからは2025年のInteropについて話していきたいと思います。Interop 2025は去年の9月から10月の間にGitHubで注力エリアを公募していました。で、現在は応募された中から実際に取り組むエリアを決めている段階ですね。focus-area-proposalのラベルがついている提案の中からいくつか取り上げて話そうかと思うんですけど、佐竹さん的に気になるものというか、これは選ばれてほしい！みたいなものってありますか？

佐竹 : うーん、そうですね。どの提案も良くて迷ったんですけど、いくつかピックアップしてきました。まずはクエリ系の@custom-mediaルールは選ばれてほしいですね。

加藤 : @custome-mediaルールはメディアクエリのクエリ部分を変数として定義できる機能ですね。

佐竹 : そうですね。今でもSassとかPostCSSのようなツールを使って同じようなことをやっているケースがほとんどだと思うので、ブラウザに標準機能として実装されてもいいのかなと思っています。

加藤 : たしかに。クエリが増えてくると混乱するので、変数として名前を付けられるのはいいですよね。あとは標準機能として実装されれば、ツールに依存する部分も減らせるので、そこも大事なポイントですね。

佐竹 : はい。次が画像のフィルターとか、クリッピング、マスク系で、SVG filters、background-clip: text、filter()関数、background-clip: border-area、mask-border CSS shorthandあたりですね。2024年はbackground-clip: border-areaに関して、えーSafariがけっこう積極的だったように見えたので、フィルターとかクリッピング系は2025年もけっこう動きがあるんじゃないかなと個人的に予想してます。

加藤 : あー面白いですね！とくにSVGフィルターはブラウザ側の実装はすごい大変そうに感じますけど、実装されればデザインの幅も広がりますし、JSを使わずにいろいろできそうですね。

佐竹 : はい。SVGフィルターはイシューへのリアクションも他に比べると多いので、結構期待されているようには見えますね。

あと、Interop 2024の重点分野にPopoverがありましたよね。なので組み合わせて使うことができるCSS Anchor Positioningは2025年に入るんじゃないかなと思います。

加藤 : たしかに。Popoverを制御するボタンの位置を基準としてPopover要素の位置を決めるにはまだJSが必要ですよね。

佐竹 : はい。Anchor Positioningを使えば、そのあたりがCSSだけで実現できるようになるので、Popover自体ももっと普及するんじゃないかなと思うんですよね。

最後にピックアップしたのがScroll end、Scroll-Driven Animations、Scroll Snap Eventsなどのスクロール系ですね。例えばカルーセルで、これまでだと動きをつけるのにJSを必要としていましたよね。それが最近はCSSだけでスクロールにあわせてアニメーションをさせる流れ、いわゆるScroll-Driven Animationsがきているんじゃないかなと個人的に思っているので、スクロール系の機能も重点分野に入ると予想しています。

加藤さんが気になっている機能はありますか？

加藤 : 個人的にはView Transitionsですかね！去年ChromeとSafariで実装が一気に進んだんですけど、Firefoxへの実装がまだなんで、ぜひ進んでほしいなと思っています。View Transitionsは画面遷移をシームレスにできる機能として取り上げられることが多いんですけど、画面遷移だけではなくて、要素の見た目をシームレスに切り替えるときに使ったりもできるので、ブラウザのサポート状況を気にせずに実装できると嬉しいなと思います。

佐竹 : なるほど。画面遷移をシームレスにするなら情報設計とかデザインの段階からView Transitionsの利用を前提に考えたいですね。

加藤 : そうですね！なので、開発者だけではなくて、ディレクターさんとかデザイナーさんにも知っておいてほしい機能ですね。

あとは実は私も1つスクロール可能な要素のキーボードフォーカスに関する提案をしています。去年、Chromeのバージョン130から、スクロール可能な要素はデフォルトでキーボードフォーカス可能になったんですけど、各ブラウザで挙動がちょっと違っていたりして、結局Webサイト側でtabindex属性の制御が必要なので、統一されるといいなーと思っています。

佐竹 : そうですね、それは動きを合わせてほしいですね。スクロール可能かどうかを判断してtabindexを付けるっていうのもJSで対応ですよね。

加藤 : そうなんですよね。それだけのためにJSを用意するんだったらブラウザ側でやってくれるとありがたいな、という気持ちです。

今回はInterop 2025に上がっている提案をいくつかピックアップしてお話ししました。どの機能が注力エリアとして選ばれるのか、楽しみですね！

佐竹 : はい。1月中には注力エリアが確定するはずなので、今回の予想と照らし合わせながら楽しみに待ちたいと思います！

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

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

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