2024年9月10日

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

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

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

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

加藤: 加藤です！

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

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

ruby要素のフォーマットに関するアップデート

菅原: まず私が気になったのは、日本語や韓国語、中国語でフリガナなど小さな注釈をつけるときに使うruby要素のアップデートです。今まではルビが長い場合に、ルビとベーステキストが別に改行したり、ベーステキストの前で改行されたりしてしまって、不自然な改行になっていました。

Chrome 128以降ではルビとベーステキストが一緒に改行されるようになったので、テキストの流れが自然になりました。

加藤: そうですね。あとruby-alignプロパティがサポートされたことで、ベーステキストに対するルビの位置を調整できるようになりましたね。

菅原: はい。今まではFirefoxでしか使えなかったruby-alignプロパティがChromeでも使えるようになりました。Edgeのバージョン 128以降でも使えますね。Safariについては、Technology Preview 202のリリースノートで「ruby-alignプロパティのサポートを追加する」とあるので、近々使えるようになりそうです。

参考リンク

@starting-styleルールとtransition-behaviorプロパティ

菅原: 次は、@starting-styleルールについてです。CSSでトランジションさせる場合の初期状態を指定する@ルールで、もともとChromeとEdge、Safariでは実装されていました。今回は新しくFirefox 129で実装されました。あわせて離散アニメーションの切り替えタイミングを変更するtransition-behaviorプロパティもFirefox 129から使えるようになりました。

今までは実装が複雑になりがちだったdisplayプロパティの切り替えが必要なトランジションもCSSだけで簡単に実装できるようになりました。

加藤: 表示、非表示、両方のトランジションをするには@starting-styleルールとtransition-behaviorプロパティの両方が必要になるというところがポイントかなと思います。また@starting-styleルールですが、Firefoxに実装はされたんですけども、display: noneのアニメーションができない不具合が残っているようなので、注意しておくと良いかもしれません。

菅原: はい、ありがとうございます。

参考リンク

PerformanceResourceTimingへの機能追加

菅原: 今日のトピックの最後がPerformanceResourceTimingのアップデートで、Firefoxバージョン129からcontentTypeプロパティとresponseStatusプロパティが参照できるようになりました。それぞれ、フェッチされたリソースのコンテンツタイプと、HTTPレスポンスのステータスコードを得るためのプロパティです。

加藤: PerformanceResourceTiming APIは、個人的にはリアルユーザーモニタリングをする際に使ったことはあるんですけども、そういった場合にcontentTypeやresponseStatusでデータを分類して分析することができるようになりますね。

菅原: はい。contentTypeプロパティとresponseStatusプロパティはFirefox以外のブラウザではまだサポートされていません。

参考リンク

クロージング

菅原: 以上、8月にWebプラットフォームに追加された機能の紹介でした！

加藤: 今回は取り上げてないんですけども、Chromeのバージョン128では、PointerEventにdevicePropertiesが追加されて、またPromise.try()メソッドが追加されました。Firefoxのバージョン129ではGeolocationCoordinatesとGeolocationPositionにtoJSON()メソッドが追加されて、そしてWebDriver BiDiがサポートされたことで、PuppeteerでFirefoxを動かすことができるようになったことなどが紹介されていました。気になる方は記事を読んでみてください！

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

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

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

2024年の記事一覧に戻る