2024年8月7日

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

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

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

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

加藤: 加藤です！

佐竹: ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、 Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。今回はweb.devに公開されている6月にWebプラットフォームに追加された新機能を紹介します。

各機能のブラウザのサポート状況なども紹介していきますが、7月29日時点の内容ですので、ご注意ください。

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

JavaScript Set methods

まず1つ目はJavaScript Set methodsです。Setオブジェクト自体は以前から利用できましたが、和集合や積集合のような集合演算のためのメソッドを追加する提案が進んでいて、4月のTC39のミーティングでStage4になりました。メソッドは全部で7つ追加されていて、たとえばintersection()メソッドは引数に別のSetインスタンスをとって、自分と引数の両方に共通して含まれるデータだけを持つ新しいSetインスタンスを返します。逆にdifference()メソッドは自分にのみ含まれているデータだけを持つSetインスタンスを返します。

加藤: はい。これはなんか今までありそうでなかったメソッドだなと思っています。他にはunion()メソッド、symmetricDifference()メソッド、isSubsetOf()メソッド、isSupersetOf()メソッド、isDisjointFrom()メソッドが追加されています。MDNではそれぞれのメソッドを実行すると得られる集合がベン図とともに解説されてとても分かりやすいので、ぜひ見てみてください。

今回追加された7つのメソッドはすべてのモダンブラウザで利用できます。

参考リンク

Async Clipboard API

佐竹: はい、つづいて、Async Clipboard APIです。Clipboard APIはユーザーがコピーしたものを読み取ったり、ユーザーのクリップボードにデータを書き込んだりするAPIです。以前はexecCommandを利用してクリップボードとのやり取りを行っていましたけど、現在は非推奨になっています。execCommandは画面上で選択されているテキストをクリップボードにコピーする機能で、Clipboard APIは任意のテキストやえー画像を直接クリップボードに書き込みます。Clipboard APIの読み取り、書き込みメソッドはいずれも非同期で処理されて、大きなデータを扱う場合でも他の処理を止めない、という利点があります。

加藤: はい、そうですね。ただ一方でクリップボードの読み込みや書き込みはユーザーにとっては大きなセキュリティリスクとなってしまうので、Clipboard APIを使うにはPermissions APIを使ってユーザーからクリップボードへのアクセスを許可してもらう必要があるっていうところが注意点ですかね。

Async Clipboard APIはすべてのモダンブラウザで利用できます。

参考リンク

CSSグラデーションの色補間

佐竹: つづいてはCSSの色補間に関するアップデートで、linear-gradientなどのCSSのグラデーション関数で色の補間方法を指定するための<color-interpolation-method>が使えるようになりました。CSSのグラデーションはデフォルトではsRGB色空間による補完をおこないますが、display-p3やoklabのような他の直交座標系の色空間はもちろん、hslやoklchなどの弧を描くような極座標系の色空間も指定できます。極座標系の色空間を使う場合は、<hue-interpolation-method>によって、色相を時計回りに補完するか、反時計回りに補完するかも指定できます。

加藤: はい、これは特に補足はないですね。CSSグラデーションにおける色補間の指定はすべてのモダンブラウザで利用できます。

参考リンク

Cross-document view transitions

佐竹: はい、つづいて、マルチページアプリケーションにおけるView Transitionsです。Chromeがいち早くView Transition APIを実装していましたが、これまでのView Transitionsはシングルページアプリケーションでのみ有効な実装となっていて、ページの読み込みが発生するようなマルチページの遷移を補完することはできませんでした。

マルチページの遷移を補完するために必要になるのが、Chromeのバージョン126で実装された@view-transitionという@ルールです。@view-transitionルールの中にはnavigationというディスクリプターを指定できて、値にはautoとnoneを指定できます。

加藤: はい。えっと遷移前のページと遷移後のページの両方に@view-transitionルールを追加してnavigation: autoを指定するだけでマルチページの遷移間トランジションの準備が整う感じですね。シングルページアプリケーションではJavaScriptによる処理が必要だったんですが、マルチページの場合はCSSだけで実現できるというところも大きなポイントかなと思います。

マルチページアプリケーションにおけるView Transitionsは現在Google ChromeとMicrosoft Edgeのみ利用できます。Safariは6月のWWDCにてView Transitionsの実装が発表されたんですが、@view-transitionルールの実装は含まれていないようです。またFirefoxはシングルページアプリケーション向けのView Transitionsも含めて、まだ実装されていません。

参考リンク

Gamepad API trigger-rumble extension

佐竹: はい、最後がWebサイトと、ゲームパッドなどのコントローラーを接続するためのGamepad APIに関するアップデートです。Gamepad APIにはコントローラーを振動させるなどの、触覚的なフィードバック効果を与えることができるGamepadHapticActuatorというインターフェースがあって、今回実装されたtrigger-rumbleはトリガーランブルモータというモータを搭載しているタイプのコントローラーに対して振動を与えるための実装です。トリガーランブルモータはコントローラーの左右に1つずつ存在するタイプで、プレイステーションだったりXboxをプレイしたことがある方は、コントローラーで言うところのL2、R2辺りをそれぞれ振動させられる機能としてイメージしていただければと思います。

加藤: はい。これGamepad API自体私は使ったことがないですが、そんな細かいところまで制御できるんですね。trigger-rumbleタイプの制御はGoogle ChromeとMicrosoft Edgeでは利用できますが、FirefoxとSafariではまだ利用できません。

クロージング

佐竹: はい、以上6月にWebプラットフォームに追加された新機能の紹介でした！次はどんな機能がくるのか、楽しみですね。

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

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

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

2024年の記事一覧に戻る