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

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

加藤 : 加藤です！

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

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

Intl.DurationFormat

菅原 : まず1つ目のIntl.DurationFormatは、時間の長さを表すオブジェクトデータから、指定した言語・地域のフォーマットに沿った文字列を生成できるJavaScriptのAPIです。Firefox 136で追加されたことで、すべてのモダンブラウザで利用できるようになりました。

加藤 : はい。今までは、テンプレートリテラルとかを使って文字列ベースで組み立てたり、ライブラリを使ったりしていましたが、これからはDurationFormatを使うことでシンプルに実装できますね。えーちなみにDurationFormatは経過時間という情報を扱いますが、日時情報を扱うDateTimeFormatというオブジェクトもあります。使い方はほぼ一緒ですね。

菅原 : そうですね。あとは言語の他に時間、分、秒などの単位ごとに書式をカスタマイズするためのオプションを指定できるんですが、指定できる値が多種多様なのと、今のところ日本語ではオプションを変えても結果が変わらなかったりするので、そこは注意したいですね。

参考リンク

• Intl.DurationFormat | TC39 - Specifying JavaScript
• GitHub - tc39/proposal-intl-duration-format
• Intl.DurationFormat - JavaScript | MDN
• Intl.DurationFormat がベースラインに追加されました | Blog | web.dev

contenteditable属性のplaintext-only値

菅原 : 次はcontenteditable属性のplaintext-onlyについてです。div要素などに contenteditable=”true”をつけることで、ユーザーがテキストを編集できるようになりますが、値をplaintext-onlyにすることで、入力できる内容をプレーンテキストに限定できます。

加藤 : contenteditable=”true”だと、テキストをコピー＆ペーストをしたときに、もとのフォントサイズとかフォントカラーなどのスタイル情報、またHTMLも引き継ぐので、プレーンテキストのみに限定したい場面では、plaintext-onlyを指定することで、ユーザーの意図しないスタイル付きの入力とかを防げますね。

菅原 : はい。このplaintext-onlyはFirefox 136で使えるようになったことで、すべてのモダンブラウザで利用できるようになりました。

参考リンク

• 6.8.1 Making document regions editable: The contenteditable content attribute | HTML Standard
• 6.8.1 編集可能な文書領域を作成する：contenteditableコンテンツ属性 | HTML Standard 日本語訳
• contenteditable - HTML: ハイパーテキストマークアップ言語 | MDN
• contenteditable 属性と「plaintext-only」属性の値の組み合わせがベースラインで新たに使用可能に | Blog | web.dev

<dialog>のライトディスミス

菅原 : 3つ目はdialog要素に追加されたclosedby属性です。これはダイアログを閉じる方法を指定できる属性で、値にanyを入れるとダイアログの外側をクリックしたときに自動で閉じるようになります。

加藤 : 今までだと「ダイアログの外側をクリックしたかどうか」はJavaScriptで判定して、閉じる機能を実装していたんですけど、もうシンプルなモーダルダイアログはほぼほぼHTMLとCSSだけで実装できそうですね。

菅原 : そうなりましたね。あとはform要素を使えばボタンクリックで閉じられますし、@starting-styleを使えば表示アニメーションもつけられるので、以前より実装が楽になりましたね。

dialog要素のclosedby属性はChromeとEdgeではサポートされていますが、Firefox、Safariではまだサポートされていません。

• 4.11.5 Dialog light dismiss | HTML Standard
• 4.11.5. ダイアログを軽く退ける | HTML Standard — Interactive elements（日本語訳）
• Chrome 134 の新機能 | Blog | Chrome for Developers

クロージング

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

加藤 : はい。そのほかにも、Firefox136で:has-slotted疑似クラスと:open疑似クラスがサポートされたこと、Safari18.4でwriting-modeプロパティのsidewaysやCSSの shape()関数、またClipboardItem.supports()メソッドが実装されたこと、Chrome134ではShared StorageにWeb Locks APIが統合されたことなどが紹介されていました。気になる方はweb.devの記事をご覧ください。

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

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

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