デジタルマーケティングTips
2022年3月の各種ブラウザ仕様変更発表まとめ
2022年3月に公式発表された、各種ブラウザ関連の主要な仕様変更発表のまとめです。
[Twitter | LINE | Instagram | Facebook | TikTok] [Google検索 | ブラウザ]
要点
メルマガでも情報を配信中です！ ぜひご登録ください。
Chrome 101新機能・仕様変更
Chrome 101で実装予定の新機能・仕様変更のまとめです。(ベータ版時点での情報)
追加・拡張
読み込み優先度ヒント設定
読み込み優先度を制御する機能が実装されました。(オリジントライアルを終了し、正規機能に昇格)
img・link・iframe・script要素について、読み込み優先度の高いもの・低いものを、「fetchpriority="high"」「fetchpriority="low"」という属性値指定によって明示できます。
※以前紹介されていたときは「importance="●●"」となっていましたが、「fetchpriority="●●"」に変更されました。
音声出力レイテンシー用プロパティ
98の時点で発表されていた、AudioContext.outputLatency(音声出力レイテンシー用プロパティ)について、公開予定が101にずれ込みました。
カラーフォントのパレット指定
カラーフォントのパレット設定を変更できるようになります。
CSSのfont-paletteプロパティに「dark」(黒系)・「light」(白系)・@font-palette-values仕様の識別子等を指定することで、カラースキーム等に合わせてカラーフォントの変更ができます。
HWB色空間での色指定
CSSの色指定で、RGBの代わりにHWB(Hue=色相・White=白色度・Black=黒色度)による色指定ができるようになります。
色相は赤～黄～緑～青～紫～赤を0～360の角度(実数値)で指定し、白色度・黒色度を0～100%のパーセンテージで表します。
白色・黒色が0%に近いほど高彩度(白黒とも0だと純色)となり、白色・黒色の和が多いほど彩度が下がり白～グレー～黒に近づきます。
色相・白色度・黒色度のあとにスラッシュを挟んで不透明度(パーセンテージ)を指定することも可能です。
MediaCapabilities APIがWebRTCに対応
MediaCapabilities API(映像等の変換を扱うAPI)がWebRTCでも使えるようになります。
USBデバイスの接続解除
WebUSB APIで接続したUSBデバイスについて、forget()メソッドで接続を解除できるようになります。
USBデバイスの判定
同じUSBデバイスによるアクセスであるかどうかを === 演算子で判定できるようになります。
オリジントライアル(先行試験実装)
以下がオリジントライアルに追加されます。
Federated Credential Management API ※Android限定
「Federated Credential Management API(FedCM、旧称WebID)」という、サードパーティCookieなしでサイト間をまたぐユーザー認証技術が、Android限定で利用できるようになります。
仕様変更
ユーザーエージェント情報の短縮
User-Agentヘッダーおよびnavigator.userAgent・navigator.appVersion・navigator.platformで取得できる情報が、本バージョンから順次短縮・簡略化されます。
Chrome 101では、バージョン番号4段階のうち、取得できる情報がメジャーバージョンのみに制限され、マイナーバージョン・ビルド・パッチの3段階は実情を問わず0(101.0.0.0)として表示されます。
ポップアップ動作用引数の有効化
window.open()の動作について、window.open(url,'','popup=true')と指定してもポップアップが有効化されない(falseとして扱われる)仕様になっていたのが、指定通り有効化されるようになります。
Secure Payment Confirmation API V3の仕様変更
Secure Payment Confirmation API V3に以下の変更が行われます。
- Relying Party IDを必須要素として追加します。必須でない実装にしている場合は、必須扱いにする変更が必要です。
- 決済端末アイコンのダウンロードに失敗した場合でも動作を許可できるようになります。オプションで真偽値指定を行うことで設定できます。
- payeeNameフィールドがオプションとして追加されます。(payeeOriginの代替)
廃止
サードパーティコンテクストでのWebSQL廃止
WebSQLをサードパーティコンテクストで扱う機能が削除されます。
なお、本機能は2010年に標準化が断念されており、Chrome以外で対応していたWebKitでも2019年に非推奨扱いに変更されています。
※参照：Chrome 101: Federated Credential Management Origin Trial, Media Capabilities for WebRTC, and More (2022/03/31)
https://blog.chromium.org/2022/03/chrome-101-federated-credential.html
Chrome 100新機能・仕様変更
Chrome 100で実装予定の新機能・仕様変更のまとめです。(ベータ版時点での情報)
※本バージョンからバージョン番号が3桁になります。バージョン番号が2桁であることを想定した処理がプログラム内に入っている場合、3桁のバージョンにも対応しておく必要があります。
追加・拡張
マルチスクリーンウィンドウ配置
マルチスクリーンウィンドウ配置API (Multi-Screen Window Placement API)がデスクトップで利用できるようになります。複数の画面表示を活用したWebアプリ等の開発に便利です。
デジタル商品取り扱い用API
デジタル商品の照会や管理を行う「Digital Goods API」が実装されます。(オリジントライアルを終了し、正規機能に昇格)
Payment Request APIを使った決済処理と組み合わせることも可能です。
Google Playストアのポリシーの都合上、Playストアで提供されるWebアプリは、デジタル商品の購入/課金処理を行う際に、本機能による処理が必須になります。
信号処理異常終了時の原因取得
AbortSignal.prototype.throwIfAborted()メソッドを使用すると、信号処理中に異常終了が発生した場合、終了理由を返すことができます。
API権限移譲機能
API呼び出し権限を持つフレームから、別のフレームに権限移譲(Capability Delegation)ができるようになります。
入力機器の接続解除
APIで接続した入力機器について、forget()メソッドで接続許可を解除できるようになります。
クロスフェード向けの描画モード
CSSのmix-blend-modeプロパティの値に「plus-lighter」が指定できるようになります。
2つの表示要素を正確にクロスフェードさせたい場合に向いています。
WoW64クライアント識別
Client Hintで、Sec-CH-UA-WoW64への対応が追加されます。WoW64(64bit版Windowsで32bitアプリを動作)を識別できるブール値を返せるようになります。
シリアルポート通信時のWritableStream途中切断
シリアルポート通信でWritableStream(ストリーミングデータ書き込み)を行っている最中、書き込み操作の完了を待たずにポートを閉じて通信を中断できるようになります。フロー制御の都合上、書き込み終了を待っていると不要な無限ブロックが発生する場合などに活用できます。
TLS ALPN 拡張
WSSスキームのWebSocketで接続を行う際に、TLS ALPN拡張が含まれるようになります。
NFCタグを読み取り専用にする機能
NDEFReader makeReadOnly()メソッドが追加されます。これにより、WebNFC APIでNFCタグを扱う際に、NFCタグを読み取り専用にすることができます。
PKIが使えない環境向けのWebTransport接続
公開鍵基盤(PKI)が使えないホストのWebTransportサーバーに接続する場合向けに、serverCertificateHashesオプションを使うことで、期待される証明書ハッシュに対する認証によって接続が可能になります。
オリジントライアル(先行試験実装)
Media Source Extensions API (Chrome 103まで延長)
専用ワーカーからMedia Source Extensions APIを使える機能のトライアルが延長されました。
※参照：Chrome 100 Beta: Reduced User-Agent Strings, Multi-Screen Window Placement, and More (2022/03/03)
https://blog.chromium.org/2022/03/chrome-100-beta-reduced-user-agent.html
Chrome 100: User-Agent 文字列の削減、マルチスクリーン ウィンドウ配置など (2022/03/24)
https://developers-jp.googleblog.com/2022/03/chrome-100-user-agent.html
Safari 15.4新機能・仕様変更
Safari 15.4の新機能・仕様変更のまとめです。
追加・拡張
HTML
- loading="lazy"による画像遅延読み込み
- dialog要素＆::backdrop疑似要素(ダイアログ表示に利用)
CSS
- カスケードレイヤー
- ビューポート表示単位を拡張(スクロール中と静止時で縦の表示範囲が変化する場合の条件切り分け等も可能)
- :focus-visible疑似クラス…フォーカスインジケーターが表示状態のときだけ適用される
- accent-colorプロパティ…チェックボックス・ラジオボタンの選択時やスライダーの表示色を設定可能
- calc()関数による三角関数・対数・円周率演算
- font-paletteプロパティ…カラーフォントの色変更が可能
- scroll-behaviorプロパティ…スムーズスクロールの挙動を値で制御(auto…スムーズスクロールなし、smooth…スムーズスクロールあり)
- text-alignプロパティの値にmatch-parentを使用可能
JavaScript / Web API
- BroadcastChannel…タブ・ウィンドウ・インラインフレーム・ワーカー間でメッセージ送受信を可能にする機能
- Web Locks API…タブ・ウィンドウ・インラインフレーム・ワーカーで、コントロールを非同期にロックする機能
- ResizeObserverSize…要素の縦横サイズが変更された場合の検知ができる機能
- structuredClone…データの構造を維持したままディープコピーができる機能
- File System Access APIで、getFile()メソッドを追加 ＆amp; WriteableStreamに対応
- requestVideoFrameCallback()…動画に対してフレームごとに処理を行う場合向けに、フレーム単位で動画のレンダリング結果を出力
- findLast() / findLastIndex()…配列内を後ろから順に検索できる
- at()…配列の添字(番号)をマイナスで指定できる＝「後ろから●番目」を取り出せる
- Object.hasOwn()…オブジェクト内に指定要素が含まれているかを返す
- Intl.Locale…V2になり、週の始まりの曜日等の追加形式に対応
その他
- 動画再生がコンテナ内チャプタートラックに対応
- WKWebViewによるアプリ内ブラウザの動作制御機能拡大
- ブラウザ拡張機能のクロスブラウザ相互運用を強化
- Webインスペクターの強化(カスケードレイヤー制御対応、プロパティ＆値入力のオートコンプリート、継承された未使用のCSSの非表示化機能等)
仕様変更
- アルファつきのグラデーションにグレーが混じるバグを修正
- 以下のCSSプロパティについて、-webkit接頭辞なし版に正式対応し、こちらを正とするよう変更(-webkit接頭辞ありのままでも、接頭辞なし版へのエイリアスとして従来通り動作)
- appearance (appearance: autoを含む)
- mask (mask-image, mask-size, mask-repeat-x, mask-repeat-y, mask-originを含む)
- backface-visibility
- text-combine-upright
- print-color-adjust
- WebRTC negotiation APIがWebRTC 1.0の仕様に準拠
- ECサイトのコンバージョン詐欺対策として、イベントトリガー時にリンクできないトークンを抑止
- 同一サイトコンバージョンピクセルに対応し、クロスサイトピクセルへの依存を排除
- ネストされたクロスサイトiframeのリンクに関する計測を許可
- Content Security Policy Level 3への対応を強化し、コンテンツ読み込み時のセキュリティを強化
廃止
- 以下の-webkit接頭辞つきCSSプロパティを廃止
- -webkit-border-fit
- -webkit-margin-collapse
- -webkit-margin-top-collapse
- -webkit-margin-bottom-collapse
- -webkit-margin-before-collapse
- -webkit-margin-after-collapse
- -webkit-background-composite
- XSS Auditorへの対応を終了(CSPやCOEPといった新しいクロスオリジンセキュリティ対策で代用)
※参照：New WebKit Features in Safari 15.4 (2022/03/14)
https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/
Microsoft Edge：画像認識によるAltテキスト自動生成
Windows・Mac・Linux版Microsoft Edgeで、ブラウザ側で画像注釈(altテキスト)を自動付加する機能が追加されました。Android・iOS版は未対応です。
- 機械学習を使って画像内容を自動認識
- 主要画像形式は一通り対応(jpg・png・gif・webp等)
- 画像内文字認識は日本語を含む120以上の言語に対応
- 文字のない画像からの説明文自動生成は日本語・英語・スペイン語・ポルトガル語・中国語簡体字の5言語に対応
情報を利用するにはユーザー側で機能を有効化する必要があります。
(edge://settings/accessibility で「スクリーンリーダー用にMicrosoftから画像の説明を取得する」をオン)
標準で全Edgeユーザー向けに有効化されるわけではありません。
以下の画像は対象外となります。
- 装飾用画像としてマークされたもの(altが空指定されているもの)
- 50×50ピクセル未満の小さい画像
- 極端に大きい画像
- Vision APIがポルノ・流血・性的挑発と判定した画像
※参照：Appears to say: Microsoft Edge now provides auto-generated image labels (2022/03/17)
https://blogs.windows.com/msedgedev/2022/03/17/appears-to-say-microsoft-edge-auto-generated-image-labels/
マックスマウスからのお知らせ
Web制作・マーケティング担当者向けのお役立ち情報をメールマガジンでお届け！
WebサイトやSNSでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください！
