2025年7月15日

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

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

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

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

加藤 : 加藤です！

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

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

CSS Custom Highlight API

菅原 : 1つ目は、CSS Custom Highlight APIです。Firefox 140で追加されたことで、すべてのモダンブラウザが対応しました。ここで注意したいのが、CSS Custom Highlight APIを使用するのに必要な::highlight()疑似要素について、Firefoxではtext-decorationとtext-shadowではまだ使えない、ということです。

加藤 : はい。Custom Highlight APIは、当社のコーポレートサイトのサイト内検索でも使っていて、たとえばアクセシビリティというキーワードで検索をかけると、ページ内の検索結果に含まれる「アクセシビリティ」という文字がハイライトされるようになってます。他にも、ハイライトのスタイルを設定する機能としては、::selection疑似要素や、::target-text疑似要素がありましたが、JavaScriptからプログラムでハイライトできるものではなかったので、より柔軟になりましたね。

菅原 : そうですね。CSSのハイライトに関する疑似要素は何種類かあるので、CSS Custom Highlight APIを使う前に練習しようと思いました。

参考リンク

Cookie Store API

菅原 : 次は、Firefox 140でサポートされたCookie Store APIです。このAPIは、非同期でCookieデータを管理できます。基本的な機能はすべてのモダンブラウザで使用できますが、部分的にサポートされていない機能もあるので、MDNでブラウザーの互換性などを見ておくとよさそうです。

加藤 : 今まではJavaScriptでCookieを扱うときはdocument.cookieを使っていましたが、文字列ベースの処理になるので、毎回パースしたり、シリアライズする必要がありました。Cookie Store APIではCookieの名前を指定して値の取得、更新、削除ができるようになります。他にもService WorkerからCookieにアクセスできるようになったり、エラーハンドリングがしやすくなったり、値の変更の監視ができたりなど、document.cookieが持っていた課題がかなり改善されましたね。

菅原 : 今は、JavaScriptで直接Cookieを読み書きするケースは減ってきている気がしますが、今後Cookieを扱う場合は、Cookie Store APIを使っていった方がよさそうですね。

参考リンク

翻訳、言語検出、要約用の組み込み AI API

菅原 : 最後は、Chrome 138のJavaScript AI APIについてです。Chromeに組み込まれているAIを使って翻訳、言語検出、要約ができるAPIがそれぞれ追加されました。翻訳などのタスクを、デバイス内で完結させることができたり、レスポンスが早かったり、あとはテキストを外部サーバーに送る必要もないので、セキュリティ面やプライバシー面で安心できます。

加藤 : 外部のサービスを使おうとすると、どうしてもAPIの利用料がかかったりとか、あとはデータプライバシーに関する懸念があったりで、サイト上でこう何かしらのAI機能を提供するのはちょっと難しいかなって結論に、なりがちかなと思うんですが、ブラウザに組み込まれているとその辺りがクリアになりやすい気はしますね。動作させるには一定のハードウェア要件があったりとか、ユーザーがAPIをはじめて呼び出したタイミングで、モデルのダウンロードが必要になったりするので、ユーザー体験含めてしっかり設計する必要があるかなーと思いました。

菅原 : そうですね。Googleのドキュメントには、CyberAgentさんがAmeba Blogの投稿者をアシストするための機能を実装した事例などが紹介されていました。これからこういった機能が増えていくんでしょうね。

参考リンク

クロージング

菅原 : 以上、6月にWebプラットフォームに追加された新機能の紹介でした！Chromeだけですが、とうとうJavaScriptで、AIが使えるようになりましたね。コーポレートサイトでAIを使った機能を実装するとしたら、どういうのがいいですかね？

加藤 : んー難しいですよね。当社のサイトに組み込むことを考えるなら、Blogとかのナレッジを、要約する機能とかがまあイメージしやすいですかね。あとは、今はまだ拡張機能でしか使えないプロンプトAPIが使えるようになったら、キーワードじゃなくて文章でサイト内検索をしたりとかも、できるようになるかもしれないですね。

菅原 : うん、なるほど。私はWebページの要約があると助かりますね。検索して表示されたページが読みたいものか確かめるために、最初にちょっと流し読みをするんですが、長いとそれも大変なんですよね。なので要約を見て判断できると、けっこう助かると思います。お客さまの使いやすいWebサイトのために、これからも新しい技術をチェックしていきたいですね。

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

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

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

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

2025年の記事一覧に戻る