2024年12月12日

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

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

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

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

加藤 : 加藤です！

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

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

@page 余白ボックス

菅原 : まずはChrome 131で@pageアットルールの余白ボックスのサポートが追加されました。@pageアットルールを使うと、表示しているページを印刷するときや、PDFとして出力したときのコンテンツの外側の余白を調整することができますが、今回追加された余白ボックスは、余白部分に対してテキストなどのコンテンツを追加できる機能です。

加藤 : あの、ChromeでWebページを印刷すると、左上に印刷日時があって、右上にページのタイトルがあって、左下にURL、右下にページ番号が表示されるんですけど、ここを書き換えられるっていうことですかね？

菅原 : そうですね。余白はページの縁に沿って16個のボックスに分割されていて、それぞれに対応するアットルールが用意されています。例えば左上の角にあたる余白部分は@top-left-cornerアットルール、右下の角にあたる余白部分は@bottom-right-cornerアットルール、といった感じです。

加藤 : @pageアットルール自体あんまり使ったことがなかったので、こんな仕様があることも知らなかったですね。どういうコンテンツを追加するんですかね？

菅原 : CSSのcontentプロパティの値として指定できるテキストや画像、CSSカウンターの数値が追加できます。

@page余白ボックスはGoogle Chromeのバージョン131でサポートされましたが、Edge、Firefox、Safariではサポートされていません。

参考リンク

相対色構文での currentcolor のサポート

菅原 : つづいて、Chrome 131では7月のWebプラットフォームの新機能でとりあげたCSS relative color syntaxの、currentcolorが使えるようになりました。

加藤 : これは要素の背景色とか枠線の色を相対的に指定するときに、要素のテキストの色を基準にして設定できるようになるっていうことですね。

菅原 : そうですね！個別で色を指定する必要がなくなるだけでなく、テキストの色とその他の色が相対的な関係にあることを示せるようになるので、デザインシステムで色のルールをきっちり管理しているようなプロジェクトでは便利なんじゃないかなと思います！

相対的な色指定構文でのcurrentcolorの指定はChromeとEdgeのバージョン131でサポートされたことで、すべてのモダンブラウザで利用できるようになりました。

参考リンク

クロージング

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

加藤 : はい。今回取り上げたもの以外のアップデートもいくつかあったので、簡単にお話ししておこうかなと思います。まずFirefox 133に関する 3つのアップデートが紹介されていて、1つ目はWebCodecs APIのうちImageDecoder、ImageTrackList、ImageTrackの3つのインターフェースがサポートされました。ImageDecoderは画像データをデコードするもので、アニメーションgifやアニメーションpngなどのアニメーション画像から特定のフレームを取り出して、canvasに描画するといったようなことができます。2つ目はWeb Workerからプッシュ通知などの権限に対するユーザの許可状況を確認できるWorkerNavigator.permissionsプロパティのサポートが追加されたことが紹介されています。そして3つ目はBase64形式、Hex形式のデータをUint8Arrayに相互変換するための6つのメソッドのサポートについてです。6つのメソッドのうちfromBase64()メソッドとtoBase64()メソッドはそれぞれatob()メソッドとbtoa()メソッドよりも優先的に使用すべきだとMDNには書かれています。atob()メソッドとbtoa()メソッドが扱えるデータはASCIIデータのみで日本語の文字列を直接扱うことができないので、もしBase64形式のデータを扱う機会があるのであれば確認しておくとよさそうです。

またChrome 131では、キーボードやマウスなどの様々なデバイスを扱うためのWebHIDが専用ワーカーから扱えるようになったことが紹介されていました！気になる方はweb.devの記事をご覧ください！

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

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

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

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

2024年の記事一覧に戻る