2025年10月7日

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

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

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

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

加藤 : 加藤です！

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

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

Safari 26 の新しい CSS 機能

菅原 : まず1つ目はSafari 26で追加された新しいCSS機能の紹介です。web.devではCSS anchor positioning、text-wrap: pretty、スクロールドリブンアニメーション、contrast-color()関数、progress()関数、絶対位置指定のalign-selfとjustify-self、論理プロパティであるoverflow-block、overflow-inline、そしてmargin-trimのサポートが紹介されていました。加藤さん、気になる機能はありましたか？

加藤 : そうですね…progress()関数とかですかね。これは、3つの引数、現在値と開始値と終了値を受け取るんですが、その現在地が開始値と終了値の間でどの程度の進捗にあるかを計算して、その割合を0～1の数値で返す関数で、いろいろ使い道がありそうだなと思いました。プロポーザルを見ると現在値に100vw、開始値に最小コンテンツサイズ、終了値に最大コンテンツサイズを設定することで、今の画面の幅がどれくらい大きいかを、0～1の数値で取得して、フォントサイズの計算に使う例が紹介されていました。

菅原 : なるほど。画面の幅によって、フォントサイズを可変させたりということができるんですね。

加藤 : そうですね。今でもclamp()関数を使ってできるんですけど、progress()のほうがかなりわかりやすいなと思いました。あとは菅原さんが過去にフロントエンドBlogで書いていたalign-selfとjustify-selfも、Safariでサポートされたんですね。

菅原 : そうですね。今回すべてのメジャーブラウザでサポートされたので、やっと使えます！align-selfとjustify-selfだけなら今までも使えたんですけど、position: absoluteを使用した要素に使える、というのが今回サポートされた内容です。前に見出しのあしらいに、アイコンを置くデザインがあったんですが、この機能を使えたら、もうちょっとシンプルにCSSが書けそうなのに、と思ったことがありました。次の機会では使いたいですね。

参考リンク

Digital Credentials API

菅原 : 続いて、Digital Credentials APIがSafari 26とChrome 141でサポートされました。これはデバイスに保存されているデジタル認証情報を通じて、ユーザーに関する情報をリクエストできるAPIです。日本では、iPhoneのマイナンバーカードや、Androidのマイナンバーカードの取り組みが進んでいますが、ゆくゆくはスマートフォンにマイナンバーカードが登録されていれば、Webサイトからマイナンバーカードの情報をリクエストできるようになるとか、そういうことでしょうか？

加藤 : あ、そうですね、その可能性は高いと思います。過去のデジタル庁の発表によると、スマートフォンに搭載されるマイナンバーカードの機能は、国際標準規格の「mdoc」に準拠していて、Safari 26でサポートされたAPIも、このmdocのプロトコルに対応しています。ChromeでサポートされたAPIは、OpenID Foundationが定めている「OpenID for Verifiable Presentations」プロトコルに対応しているようで、こちらはmdocを含む、より汎用的なプロトコルになっているようです。

菅原 : Chromeのほうがより汎用性が高いんですね。

加藤 : そうみたいですね。Appleは、政府が発行するような情報に限定して、情報をより安全に扱っていく方針なのかなと、思います。

菅原 : なるほど。ちなみにユースケースですが、Chrome for Developersブログでは年齢確認、本人確認が必要なWebサイトや、レンタカーを利用する場合などに、ユーザーが運転免許を持っていることを、デジタル認証情報を通じて確認ができる、という紹介がされていました。

加藤 : うん、いろいろ便利にはなりそうなんですけど、まぁ一方でやっぱり情報セキュリティの懸念はありますね。現時点でMozillaのstandard-positionsはネガティブとしてラベル付けされていて、えーWebKitのstandard-positionsでも、機能のサポートはされているんですけど、懸念事項のラベルがたくさん付いていました。ブラウザベンダーによって方針が分かれているところなので、それぞれの動向を注意しておくとよいかと思います。

参考リンク

ARIA Notify API

菅原 : 最後は、Chrome 141でサポートされたARIA Notify APIについてです。これは、JavaScriptからスクリーンリーダーに読み上げる内容を指示できるAPIです。ARIAライブリージョンと似ている感じでしょうか？

加藤 : そうですね、機能的には似てますね。ARIAライブリージョンは、DOMの変更を検知して、その内容を読み上げる仕組みなので、DOMと密接に結びついているんですけど、Webページ上ではDOMが変更されない視覚的な変化もありますよね。Windows Blogsでは、たとえば、テキストエディタでショートカットキーを使って、テキストを太字にしたときとか、ビデオ会議に誰かが参加したことを通知したりする場合などが紹介されていました。

菅原 : たしかに、そういった通知はDOMの変更とは限りませんね。

加藤 : そうなんですよね。これまでは画面外に非表示のDOMノードを配置して、その内容をJavaScriptで書き換えるというような対策が、取られていたりしたんですけど、あんまりスマートな方法ではないというか、不具合のもとになってしまったりもするので、もう少し命令的に通知できるAPIとして実装された感じですね。

菅原 : なるほど。でもこれって通知を聞き逃したらどうするんですかね？

加藤 : あーいい疑問ですね！ライブリージョンとは違って、DOMには反映されないので、ユーザが内容を再確認する方法は今のところは、ないですね。実は仕様を検討するプルリクエストはまだマージされていなくて、絶賛検討中なんですよね。で、会話を掘っていくと、最初は履歴を確認できる機能を提供することを推奨するような内容があったんですけど、それもいったん削除されていて別のプルリクエストで進行することになったようです。

菅原 : そうなんですね。あまり使いすぎるとユーザーが混乱するもとになるので、濫用するのはよくないだろうなと思っていたんですが、仕様がまだ固まっていないなら、なおさら慎重に使ったほうがよさそうですね。

加藤 : そうですね！

参考リンク

クロージング

菅原 : 以上、9月にWebプラットフォームに追加された新機能の紹介でした！Digital Credentials API、便利だなーと思ったんですが、知らないプロトコルや技術が裏で使われていて、調べても難しいな…と思いました。

加藤 : うん。技術的な難しさもありますし、えー実際にWebで免許証とか、マイナンバーカードの情報を使えるようになるには、デジタル庁などの公的機関側の対応も必要になるので、いろいろ別の難しさも、ありそうだなぁと思いました。EUでもEUデジタルIDウォレットという動きがあるようで、えー日本だけなく、世界中で同じように使えるように、ということを考えると、まぁ改めて技術を標準化することの大事さを感じましたね。

菅原 : たしかにそうですね。うまくいけばWebでできることが大きく広がりそうなので、EUなど世界的な動きと足並みをそろえながら、より安全で便利なWebになっていくといいなと思いました。

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

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

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

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

2025年の記事一覧に戻る