2025年11月7日

#78「10月のWebプラットフォームの新機能」

web.devで公開されているNew to the web platformシリーズの2025年10月の内容を日本語でお届けします！

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

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

加藤 : 加藤です！

菅原 : ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はweb.devに公開されている10月にWebプラットフォームに追加された新機能から 3個のトピックを紹介します。各機能のブラウザのサポート状況なども紹介していきますが、11月5日時点の内容ですので、ご注意ください。

ミツエーリンクスのWebサイトで公開している文字起こしページには、各機能の仕様や参考リンクなども載せていますので、そちらもご覧ください！では早速まいりましょう！

シングルページアプリ用の View Transitions API

菅原 : まず1つ目は同一ドキュメント内のView Transitionsが、Firefox 144でサポートされたことです。Baselineでは、すべてのモダンブラウザの最新バージョンで利用可能になったことを示すNewly availableとなりました。同一ドキュメント内のView TransitionsはInterop 2025の注力エリアとしても選ばれていましたね。

加藤 : はい、おめでたいですねー！View Transitionsは様々なプロパティやAPIの総称として呼ばれるので、何をもってサポートしたといえるのかは、ちょっとはっきりしない感じはありますが、えー具体的には、view-transition-class、view-transition-nameプロパティ、えー::view-transition擬似要素を含む6つの擬似要素、そしてJavaScriptのstartViewTransition()メソッドがサポートされたようです。逆に、状況によってトランジションの仕方を変えたいときに使える、View Transition Typesはまだサポートされていないようでした。

菅原 : はい。シングルページアプリ用とのことですが、通常のWebサイトではあまり活用できないですかね？

加藤 : んーそうですね…View Transitionsというと、アニメーションしながらページ遷移するようなデモが多いので、ページ遷移に目がいきがちな気もしますけども、えー特定のパーツの見た目を切り替えるときとかにも使えますね。たとえば、ページの上部に固定されているヘッダーが、スクロールすると、サイズが変わったりするサイトってあると思うんですけど、アニメーションなしで切り替えると、ガタつきがけっこう気になるので、View Transitionsを使ってクロスフェードさせると、すこし滑らかに切り替えられたりしますね。

菅原 : パーツ単位の状態を切り替えるときにも使えるんですね。それならけっこう、使いどころがありそうです。あとはマルチページ用のView Transitionsがサポートされるのも待ち遠しいですね！

加藤 : うん、そうですね！

参考リンク

:target-before 擬似クラスと :target-after 擬似クラス

菅原 : つづいては:target-before擬似クラスと、:target-after擬似クラスです。この2つの擬似クラスは、スクロールマーカーグループ内の::scroll-marker擬似要素や、スクロールターゲットとなる、a要素のスタイルを制御できる擬似クラスです。

加藤 : スクロールマーカーグループっていうのは、スクロールコンテナー内で、現在どのコンテンツが画面に表示されているかを示すための、マーカーの集まりのことです。たとえば、カルーセルのインジケータとか、記事サイトなどで見かける、スクロールと連動する目次を実現するときとかにも使える機能ですね。

菅原 : はい。Chromeのバージョン135で:target-currentという擬似クラスが実装されたのですが、:target-currentは、カルーセルのインジケータのなかで、今アクティブなマーカーのスタイルを指定するときに使える擬似クラスです。その:target-currentを基準に、順番的に前のマーカーの見た目を変えたいなら:target-beforeを使って、後ろのマーカーの見た目を変えたいなら:target-afterを使う、という感じですね。

加藤: 目次リストでいうなら、現在読んでいるセクションよりも前の項目は、既読ということで薄い色にしたり、ということができるっていうことですね。

菅原: そうですね。:target-before擬似クラスと:target-after擬似クラスはChromeの142でサポートされましたが、Firefox、Safariではまだサポートされていません。

参考リンク

Interest Invokers（interestfor属性）

菅原 : 最後は、Chrome 142でInterest Invokers、つまりinterestfor属性が、button要素と、a要素に追加されました。これは、ユーザーが要素に「興味を示した」ときに、ターゲット要素でアクションをトリガーする属性ですね。典型的なユースケースとしては、ツールチップなどが想定されています。

加藤 : はい。やっぱり、ユーザーが要素に興味を示すってどういうこと？っていうところが気になりますね。

菅原 : えっとこれは、今のところは、特定の要素の上にマウスポインターを合わせてホールドしたり、タッチスクリーンで要素を長押しすることを「興味を示した」と判定するみたいです。マウス操作を前提とした「ホバー」という特定の操作に限定せずに、キーボードや、タッチスクリーンなど、他のインターフェースでも共通する、抽象的な名前を考えた結果、interestforという名前になったみたいです。

加藤 : あーなるほど。もともとOpen UIが想定していたユースケースに書かれている「Hover menus」っていうのは、おそらくホバーで開閉するタイプのメニューを指していると思うんですけど、私はちょっと個人的にこのUIがあまり好きではなくてですね…。いちユーザーとして使いづらいというのも、理由の1つなんですけど、機能を開発するときに、ホバー操作をトリガーにしてしまうと、マウス操作以外のときに機能しなくなってしまうので、他の環境も考慮しようとして、実装がどんどん複雑になってしまうんですよね。そういう大変さを、このinterestfor属性が吸収してくれるっていうことですよね。

菅原 : そういうことなんだと思います。ただ、タッチスクリーンの長押しは、テキストを選択するときなど、すでに別の用途で使われていますし、Vision Proのような新しいデバイスで興味をどう示すか、という定義が難しいことなどもあって、標準化はかなり難航しているみたいですね。

加藤 : うん、そうですよね。

菅原 : interestfor属性はChrome、Edgeではサポートされていますが、Firefox、Safariではまだサポートされていません。

参考リンク

Interest Invokers (Explainer) | Open UI

クロージング

菅原 : 以上、10月にWebプラットフォームに追加された新機能の紹介でした！加藤さんも途中でいってましたが、何をもって機能をサポートしているといえるのか、はっきりしない機能が増えてきていて、調べるのが難しいなーと最近思います。View Transitionsもそうですし、今回は取り上げませんでしたが、Chrome 142では、スタイルコンテナークエリーやif()関数でRangeシンタックスが使えるようになったとかもですね。

加藤 : はい、分かります。スタイルコンテナークエリー自体はサポートしているけど、Rangeシンタックスは使えるブラウザと使えないブラウザがある、みたいなことですよね。他にも、スクロールドリブンアニメーションとかもそうだと思うんですけど、いくつかのプロパティやAPIなどの機能を組み合わせるような、複雑な機能が増えてきているなぁっていう印象はありますね。細かい粒度のサポート状況はCan I useでも、Web Platform Statusでも、もしかしたら判別できないかもしれないので、各自で気を付けつつ、しっかり検証が必要だなと思います。

菅原 : そうですね。

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

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

加藤 :　ありがとうございました！

前の記事 #77「9月のWebプラットフォームの新機能」

2025年の記事一覧に戻る