#62「12月のWebプラットフォームの新機能」
web.devで公開されているNew to the web platformシリーズの2024年12月の内容を日本語でお届けします！
※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。
菅原 : 皆さん、こんにちは！ミツエーリンクスの菅原です！
加藤 : 加藤です！
菅原 : ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はweb.devに公開されている12月にWebプラットフォームに追加された新機能の内容をご紹介します。12月に安定版がリリースされたのはSafari 18.2のみだったので、Safari 18.2でサポートされ、ベースラインで「新しく利用可能」とマークされた機能を中心にお話ししていきたいと思います。
ミツエーリンクスのWebサイトで公開している文字起こしページには、各機能の仕様や参考リンクなども載せていますので、そちらもぜひご覧ください！では早速まいりましょう！
@pageを使用したページ設定
菅原
: 1つ目は@pageアットルールです。これは印刷するときやPDFとして出力したときに、コンテンツの外側のページの余白ルールを指定できるCSSです。Safari 18.2でサポートされたことにより、すべてのモダンブラウザで利用できるようになりました。
加藤
: はい。11月のWebプラットフォームの新機能でも少し紹介しましたが、@page余白ボックスのほうはまだChromeだけで使える機能ってことですよね。
菅原
: そうですね。@page余白ボックスは、ページの余白を16個に分けてそれぞれに対応するアットルールがあります。余白にテキストを追加することなどができますが、こちらは今のところChrome 131以降でのみ使える機能になっています。
参考リンク
- 4.1. The @page Rule | CSS Paged Media Module Level 3
- 4.1. @page 規則 | CSS Paged Media Module Level 3 （日本語訳）
- @page - CSS: カスケーディングスタイルシート | MDN
ruby-align と ruby-position の CSS プロパティ
菅原
: 2つ目はruby-alignプロパティとruby-positionプロパティが使えるようになりました。これはテキストにフリガナをふる際などに使うruby要素に使用するCSSプロパティです。ruby-alignプロパティはテキストに対するフリガナの文字の揃えを、ruby-positionプロパティはテキストに対してフリガナを上下、縦書きの場合は左右どちらにおくかの位置を指定できます。
加藤
: はい。ruby-alignのほうは、8月のWebプラットフォームの新機能でも取り上げましたね。
菅原
: はい。SafariのTechnology Preview 202のリリースノートに「サポートを追加する」とあったものが、今回のアップデートで追加されました。これでruby-align、ruby-positionの両方のプロパティがすべてのモダンブラウザで使えるようになりました。
参考リンク
- 4.1. Ruby Positioning: the ruby-position property | CSS Ruby Annotation Layout Module Level 1
- 4.1. ルビの位置決め： ruby-position プロパティ | CSS Ruby Annotation Layout Module Level 1 （日本語訳）
- 4.3. Ruby Text Distribution: the ruby-align property | CSS Ruby Annotation Layout Module Level 1
- 4.3. ルビテキストの分布： ruby-align プロパティ | CSS Ruby Annotation Layout Module Level 1 （日本語訳）
- ruby-position - CSS: カスケーディングスタイルシート | MDN
- ruby-align - CSS: カスケーディングスタイルシート | MDN
::target-text 疑似要素
菅原
: 3つ目は::target-text疑似要素のサポート追加です。これはテキストフラグメントで使用されたテキストを装飾するときに使える疑似要素です。テキストフラグメントはURLの末尾にハッシュ記号などを付けることで、ページ内のテキストに直接リンクできる機能です。
加藤
: ::target-text疑似要素は10月のWebプラットフォームの新機能でテキストフラグメントと一緒にご紹介しました。ちなみに、::target-text疑似要素に指定できるプロパティは限られていますので、ハイライトの仕様を確認しておくとよさそうです。
菅原
: はい。ありがとうございます。これで::target-text疑似要素もすべてのモダンブラウザで使用できるようになりました。
参考リンク
- ::target-text | CSS Pseudo-Elements Module Level 4
- ::target-text | CSS Pseudo-Elements Module Level 4 （日本語訳）
- ::target-text - CSS: カスケーディングスタイルシート | MDN
WebAssembly のガベージ コレクションと末尾呼び出しの最適化
菅原 : 最後はSafariでWebAssemblyのガベージコレクション機能がサポートされたことです。これによりSafariがJavaScriptオブジェクトを管理するために使用しているネイティブのガベージコレクション機能をWebAssemblyから利用できるようになりました。
加藤 : はい。これまでは、Safariがブラウザ内部で持っているガベージコレクション機能を、WebAssemblyから利用できなかったので、JavaやKotlin、C#など、ガベージコレクション機能を標準で備えている言語をWebAssemblyにコンパイルする場合、元の言語のガベージコレクション機能を含めてコンパイルする必要がありました。これはコンパイル後のバイナリーサイズが大きくなってしまったり、あとはブラウザが持つガベージコレクションとの相互作用がないことで、メモリ管理の効率が低下するっていう課題があったようです。
菅原 : はい。あとはガベージコレクションだけでなく、末尾呼び出しもサポートされたようです。末尾呼び出しによって、スタックフレームを再利用しながら関数を呼び出すことで、メモリ使用量を削減できます。今回Safariでサポートされたことで、すべてのモダンブラウザがWebAssemblyのガベージコレクションと末尾呼び出しの最適化が利用できるようになりました。
参考リンク
- WebAssembly Core Specification
- WebAssemblyガベージコレクション（WasmGC）をChromeでデフォルトで有効化 | Blog | Chrome for Developers
- Google スプレッドシートが計算ワーカーを JavaScript から WasmGC に移植した理由 | web.dev
- WebKit Features in Safari 18.2 | WebKit
クロージング
菅原 : 以上、12月にWebプラットフォームに追加された新機能の紹介でした！
加藤 : ベースラインに追加されたもの以外だと、6月のWebプラットフォームの新機能で取り上げたCross-document view transitionsがSafariでもサポートされました。あとはFirefoxでサポートされればすべてのモダンブラウザで利用できるようになります。FirefoxのView Transitionsの実装が気になる方はBugzillaにView Transitions関連のチケットがまとめられていますので、そちらを参照するとよいと思います。
また11月のWebプラットフォームの新機能で最後に少し紹介したUint8Arrayの6つのメソッドがSafari 18.2でもサポートされました。こちらはChromeとEdgeでサポートされればすべてのモダンブラウザで利用できるようになります。気になる方はweb.devの記事をご覧ください！
菅原 : 最後に、ミツエーリンクスではスマートなコミュニケーションをデザインしたいUIデザイナー、UI開発者を募集しています。採用サイトではオンライン説明会やオンライン面接なども行っていますのでチェックしてみてください。
また、このPodcastはApple Podcast、Amazon Music、Spotify、YouTubeで配信していますので、お好みのプラットフォームでフォローいただけると、エピソードをすぐ視聴できます！こちらもぜひご活用ください。「#ミツエーテックラジオ」でご意見、ご感想、こんなこと話してほしいというリクエストなどもお待ちしております。
それでは今日はこの辺で！ありがとうございましたー！
加藤 : ありがとうございました！