デジタルマーケティングTips
Chrome 138 仕様変更発表まとめ
Google Chrome 138の主要な仕様変更発表のまとめです。(ベータ版発表時点での情報です)
要点
- 追加・拡張:
以下の機能が追加・拡張され、表現力・利便性が向上します
・リスト項目で1個ずつ順に表示遅延や位置等を変える演出がCSSで作りやすくなる
・テキスト機械翻訳APIが使えるようになる 等 - 仕様変更:
以下の仕様が変更されます
これを使用している場合は設定の移行等が必要になります
・ローカルストレージの正確な割り当て容量が取得できなくなる 等
メルマガでも情報を配信中です! ぜひご登録ください。
追加・拡張
マージン領域まで拡大できる長さ指定キーワード
width
や
height
等の各種サイズ指定系プロパティで、
width: stretch;
や
height: stretch;
といった指定が可能になります。
width: 100%;
やheight: 100%
の実際の拡大範囲が、要素のコンテンツ領域
外周もしくは境界線
外周(どちらを適用するかは
box-sizing
プロパティの値で決まる)までの拡大に留まるのに対して、
width: stretch;
やheight: stretch;
は更に外側のマージン領域外周まで拡大範囲が広がります。
CSS:符号・絶対値関連の関数
CSSで以下の関数に追加対応します。
CSS:OSのフォントサイズ設定取得
env()
関数(ブラウザ側の環境変数をCSSに取り込む)について、OS側でユーザーが指定しているフォントサイズ指定を入れられるようになります。文字サイズにOS側のサイズ指定を反映させたりする場合等に活用できます。
CSS:ディレイ一覧表示演出等に適した関数
リスト等の兄弟要素の個数・順番に応じた処理向けに、以下の関数が使用可能になります。
sibling-index()
…個々の兄弟要素の順番に応じた整数を返します。
sibling-count()
…兄弟要素の合計数を整数として返します。
calc()
関数等で計算式に組み込むことも可能です。活用例としては、メニュー項目等のスライド/フェード表示で、1項目ごとに0.1秒単位でディレイの間隔を刻んだりする等が挙げられます。
CSS:進行状況関連の関数
progress()
関数…変化する値の進行状況を取得するのに使います。
progress(現在値, 初期値, 完了値)
の順に3つ引数を入れると、現在値での進捗率を数値で返します。
画面折りたたみデバイス用API
- Viewport Segments Enumeration API
…折りたたみ状態に応じて画面を指定サイズでの複数領域に分割し、多画面Webシステム/コンテンツとして扱えるようになります。
WebCodecsで回転・左右反転表示の設定・情報継承に対応
WebCodecs API(映像・音声のエンコード/デコード機能)の
VideoFrame
インターフェイスで以下の設定項目が追加されました。
対応する実装箇所は以下の通りです。
VideoFrame
インターフェイスで、動画表示に任意の角度での回転・左右反転をかけられます。
VideoFrame
から表示出力された動画の回転角度・反転の有無に関する設定情報を、
VideoDecoderConfig
オブジェクト(コーデックや色空間といったデコーダーの設定)側で取得できるようになります。
VideoEncoder
インターフェイスでのエンコード時に、回転角度・反転の有無に関する設定情報を、
encode()
メソッドから
VideoDecoderConfig
オブジェクトに渡せるようになります。
Crash Reporting APIに状況測定項目追加
Crash Reporting API(Reports API)によるクラッシュレポート出力に、以下2つのフィールドが追加されます。
is_top_level
…クラッシュ発生がトップレベル遷移によるものか(別ドキュメントの埋め込みによるものでないか)を真偽値で表示します。
visibility_state
クラッシュ発生時にブラウザが表示(フォアグラウンド)状態か、非表示(バックグラウンド)状態であったかを
visible
/hidden
のキーワードで表示します。
サーバー側でのキャッシュクリア指定の選択肢追加
Clear-Site-Data
HTTPレスポンスヘッダー(サーバー設定で、表示サイトに関するキャッシュ等の削除をブラウザに指示する)で、対象として以下のディレクティブに新たに対応します。(カンマ区切りで複数指定も可)
Clear-Site-Data: "prefetchCache"
…該当ページに関するブラウザ内のプリフェッチキャッシュを消去します。
Clear-Site-Data: "prerenderCache"
…該当ページに関するブラウザ内のプリレンダリングキャッシュを消去します。
投機ルールで表示先タブ指定可能に
- Speculation Rules
(投機ルール…先読み・プリレンダリング効率化用のルール指定)の設定で、URL指定に併せて
target_hint
フィールドを指定することで、該当ページの表示形態に合わせたプリレンダリングの最適化が可能になります。
"target_hint": "_self"
…ページが現在のタブ(
target="_self"
属性もしくは無指定)で開かれることを想定して動作します。(デフォルトはこちら)"target_hint": "_blank"
…ページが新規タブ(
target="_blank"
属性)で開かれることを想定して動作します。
文章自動要約機能
- Summarizer API
…AI言語モデルを使って、テキスト入力から自動で要約を出力できるようになります。
言語検出機能の強化
- Language Detector API
…AIを活用したテキスト言語検出が可能になります。入力テキストがどの言語(自然言語)で書かれているかを特定し、検出結果に合わせた処理が可能になります。入力された文字列に対して、検出された言語とその信頼スコアを順序付きリスト化して返します。
テキスト翻訳機能
- Translator API
…テキストを指定した翻訳元・翻訳先言語で機械翻訳できるようになります。
Webアプリのスコープ拡張
scope_extensions
…Webアプリのスコープを拡張できる機能です。通常Webアプリのスコープは、単一オリジンの単一パスを基点として定義されます。が、scope_extensionsを使用すると、他の関連オリジンにスコープを広げることが可能になります。
AndroidデバイスがBluetooth経由でRS-232C機器と通信可能に
-
Web Serial API
(RS-232Cシリアルポート接続機器の制御)で、RFCOMM
(Bluetoothでシリアルポートをエミュレーションする機能)がAndroid版Chromeでも使用できるようになります。(PC版Chromeは117から対応)
- なお、Google Enterpriseでシリアルポートアクセス関連のポリシー設定を行っている場合、Androidを
future_on
状態にしておけば、同様のポリシーが適用されます。DefaultSerialGuardSetting
…シリアルAPIの使用を管理
SerialAllowAllPortsForUrls
…全シリアルポートへの接続をサイトに自動許可
SerialAllowUsbDevicesForUrls
…USB機器への接続をサイトに自動許可
SerialAskForUrls
…シリアルAPIを許可するサイトを指定
SerialBlockedForUrls
…シリアルAPIを遮断するサイトを指定
仕様変更
シリアル化時に属性値のエスケープ処理を追加
- クロスサイトスクリプティング(XSS)脆弱性対策の一環として、データをシリアル化する際に、属性値の<と>がエスケープ処理されるようになります。
サブリソース完全性のヘッダー対応
Integrity-Policy
HTTPレスポンスヘッダー…サブリソース完全性(取得した外部コンテンツのセキュリティ検証等を行う機能)で、指定した種類のサブリソース完全性検証が完了していることをサーバーから情報提供した場合、Chromeがそれを処理できるようになります。
これに伴い、完全性メタデータのないタイプのリソースを読み込もうとした場合、読み込み失敗(&レポート発行)が発生するようになります。
ローカルストレージ容量表示の半匿名化
- サイト側によるユーザーのブラウジングモード検出を防止するため、
StorageManager.estimate()
メソッド(自ドメインに許可されたローカルストレージの割り当て容量と使用量を取得)で返される容量が半匿名化されます。
- 変更前:実際の割り当て容量(上限)を表示
↓ - 変更後:実際の割り当て容量に関係なく、実使用量が10GB未満の場合はすべて10GBとして表示、実使用量が10GBを超える場合は1GB単位で容量表示を増加
※シークレットウィンドウではローカルストレージの割り当て容量が小さくなるため、ここを確認してユーザーのブラウジング環境を判別するというテクニックが存在していました。
- 変更前:実際の割り当て容量(上限)を表示
- 実際の割り当て量と表示に食い違いが発生しますが、実際の割り当て容量は影響を受けません。
- ストレージの無制限利用権限が付与されたサイト/ドメインについては今回の仕様変更の対象外です。
サブスク再登録時の通知許可復活
- Push API
(Webプッシュ通知関連)の
pushsubscriptionchange
イベント(定期購入状態の変更を通知するイベント)について、一度許可された通知権限が取り消し後再付与された場合にもイベントが発行されるようになります。
Storage Access APIの同一オリジンポリシー適用厳格化
- Storage Access API
で、同一オリジンポリシー
の適用が厳格化されます。
たとえば、埋め込みiframe内でdocument.requestStorageAccess()
メソッドを使ってブラウザストレージへのアクセス権リクエストをした場合、埋め込まれたiframe側のオリジンにのみ許可が与えられ、埋め込んだ側の親ページには許可は与えられなくなります。
廃止・削除
Media Source Extensionsの非同期範囲削除関連の旧仕様削除
Media Source Extensions API(ストリーミングメディア生成・再生)において、非同期範囲削除に関する以下の非推奨機能が削除されます。いずれも今後はエラー発生が通知されるのみとなります。
SourceBuffer.abort()
メソッド(処理中止・パーサーリセット)が、
SourceBuffer.remove()
メソッド(指定範囲のメディアセグメントを
SourceBuffer
インターフェイス内のデータから削除)の処理を中止しないようになります。
MediaSource.duration
プロパティ(表示中のメディアの再生時間の取得・設定)について、既にバッファリングされているメディアの切り捨てが不可能になります。
WebGLでSwiftShaderへの自動フォールバックを廃止
- 3DCG関連で、WebGLコンテキスト生成時、以前はGPUでの処理が失敗するとSwiftShader(CPU処理)にフォールバックするようになっていましたが、今後はフォールバックを行わず、単にWebGLコンテキスト生成が失敗するようになります。
理由としては、JITコード実行に関わるセキュリティ上の問題や、フォールバック時のパフォーマンス低下が挙げられています。
※参照:Chrome 138 beta - Chrome for Developers (2025/05/28)
https://developer.chrome.com/blog/chrome-138-beta
Roadmap - Chrome Platform Status
https://chromestatus.com/roadmap
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け!
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください!