[go: up one dir, main page]

この記事は Chromium Blog の記事 "Chrome 104 Beta: New Media Query Syntax, Region Capture, and More" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

特に記載のない限り、下記の変更は Android、Chrome OS、Linux、macOS、Windows 向けの最新の Chrome ベータ版チャンネル リリースに適用されます。ここに記載されている機能の詳細については、リンクまたは ChromeStatus.com の一覧でご確認ください。2022 年 6 月 23 日の時点で Chrome 104 はベータ版です。PC 向けの最新版は Google.com で、Android では Google Play ストアでダウンロードできます。

リージョン キャプチャ

PC 版の Chrome で、セルフキャプチャした動画トラックをトリミングできるようになります。ウェブアプリでは、getDisplayMedia() を使ってタブを動画でキャプチャすることができます。ウェブアプリでリージョン キャプチャを使うと、トラックをトリミングしてコンテンツの一部を削除できます。通常、この機能は、リモートに共有する前に利用します。

たとえば、ビデオ会議が組み込まれた生産性向上ウェブアプリがあるとします。ウェブアプリのビデオ会議で画面の一部（下の図の赤線部分）をトリミングすることで、映像がループする現象を回避できます。詳細については、リージョン キャプチャでタブ共有を改善するをご覧ください。

リージョン キャプチャ ウィンドウ: 青い部分がブロードキャストされるコンテンツ、赤い部分がトリミングされるコンテンツ。


メディアクエリ レベル 4 構文と評価

メディアクエリを使うとレスポンシブ デザインを実現できます。また、ビューポートの最小サイズや最大サイズを確認できるレンジ機能は、メディアクエリを使っているサイトの約 80% で利用されています。

メディアクエリ レベル 4 仕様には、このレンジ クエリの新構文が含まれており、通常の算術比較演算子を使って範囲を記述できるようになっています。また、論理演算子 or および not、ネスト、"unknown" の評価機能もサポートされます。たとえば、これまでのメディアクエリは次のように記述されていました。

@media (min-width: 400px) { … }

これを、次のように記述できるようになります。

@media (width >= 400px) { … }

詳細については、Chrome 104 のレンジ メディアクエリの新構文をご覧ください。

オリジン トライアル

このバージョンの Chromium では、以下のオリジン トライアルがサポートされます。オリジン トライアルとして新機能を試して、ユーザビリティ、実用性、有効性についてのフィードバックをウェブ標準コミュニティに提供することができます。以下の項目を含め、現在 Chromium でサポートされているオリジン トライアルに登録するには、Chrome オリジン トライアル ダッシュボードをご覧ください。Chrome のオリジン トライアルの詳細については、ウェブ デベロッパーのためのオリジン トライアル ガイドをご覧ください。Microsoft Edge は、Chrome とは別に独自のオリジン トライアルを行っています。詳細については、Microsoft Edge オリジン トライアル デベロッパー コンソールをご覧ください。

新しいオリジン トライアル

focusgroup

focusgroup CSS プロパティを使うと、キーボードの矢印キーを使ってフォーカス可能な要素間でフォーカスを移動する操作を改善できます。ブラウザにこの機能を追加することで、整合性、ユーザー補助、相互運用性に欠けるカスタム ソリューションを使うことなく、フォーカス操作を制御できるようになります。Microsoft Edge のオリジン トライアルにはこちらから登録できます。このトライアルは、107 まで行われる予定です。

クレジット カード保存のオプトアウト

Secure Payment Confirmation において、今後の購入を簡単にするためにクレジット カードのデータを保存する機能をオプトアウトできるようになります。この新機能を使うには、PaymentRequest() コンストラクタの最初のパラメータとして渡す methodData.data で、showOptOut を true に設定します。次に例を示します。

const methodata = [{ 
  …
  data: {
    …
    showOptOut: true
    …
  }
}];
const request = new PaymentRequest(methodData, details);

実際の例は、デモでご覧いただけます。このオリジン トライアルにはこちらから登録できます。このトライアルは、Chrome 106 まで行われる予定です。

Shared Element Transition

Shared Element Transition を使うと、シングルページ アプリケーション（SPA）で洗練された画面遷移を作成できます。見栄えのよい画面遷移を最小限の開発作業で作成でき、デフォルトのアニメーション プロパティを使うことも、独自の遷移効果をカスタマイズして希望どおりの画面遷移を実現することもできます。画面遷移は CSS プロパティを使って宣言的に設定します。詳細については、Shared Element Transition をご覧ください。オリジン トライアルへの登録は、ダッシュボードから行うことができます。

完了したオリジン トライアル

Chrome で以前にオリジン トライアルが行われていた以下の機能は、現在デフォルトで有効化されています。

推測ルール

推測ルールは、ウェブ コンテンツで特定の URL のプリフェッチまたはプリレンダリングを許可する仕組みを提供します。次に例を示します。

<script type="speculationrules">
  {
    "prefetch": [
      {"source": "list", "urls": ["/weather/kitchener", "/weather/seattle", "/weather/tokyo"]}
    ]
  }
</script>

ウェブバンドルによるサブリソースの読み込み

ウェブバンドルによるサブリソースの読み込みは、多数のリソースを効率的に読み込む方法です。この機能を使うには、特定のリソースが特定の URL でウェブバンドルから提供されることをウェブページで宣言します。次に例を示します。

<script type="webbundle">
{
   "source": "https://example.com/dir/subresources.wbn",
   "resources": ["https://example.com/dir/a.js", "https://example.com/dir/b.js", "https://example.com/dir/c.png"]
}
</script>

ウェブバンドルの詳しい作成方法については、ウェブバンドルを使ってみるをご覧ください。ウェブバンドルによるサブリソースの読み込みの詳細については、ウェブバンドルによるサブリソースの読み込みのオリジン トライアルをご覧ください。

インストールした PC ウェブアプリ向けのウィンドウ コントロール オーバーレイ

PC でウェブアプリのクライアント領域を拡張し、タイトルバー領域を含むウィンドウ全体を覆うことができるようになりました。その場合、ウィンドウ コントロール ボタン（閉じる、最大化 / 復元、最小化）はクライアント領域の上に重なって表示されます。ウェブアプリのデベロッパーは、ウィンドウ コントロール オーバーレイを除くウィンドウ全体の描画と入力ハンドリングをする必要があります。この機能を使うと、デベロッパーはインストールされた PC ウェブアプリをプラットフォームのアプリのように見せることができます。

今回のリリースに追加されたその他の機能

Cookie の Expires / Max-Age 属性の上限

明示的に Expires / Max-Age 属性を指定して Cookie を設定する場合、400 日を超える日付は設定できなくなります。これまでは制限がなかったので、有効期限が数千年の Cookie も可能でした。これは、仕様の変更に従ったものです。

400 日は、13 か月に近いきりのいい数であることから選ばれました。これだけの期間があれば、ほぼ 1 年に 1 度しかアクセスしないサイト（健康保険の給付金を選ぶサイトなど）も問題なく動作します。

CSS object-view-box

object-view-box プロパティを使うと、イメージの一部を指定して、置換対象となる要素のコンテンツ ボックスに描画できます。これにより、CSS シャドウのような適切な ink-overflow 動作を維持しながら、カスタムのグローやシャドウを適用したイメージを作成できるようになります。詳細については、CSS object-view-box プロパティの紹介をご覧ください。

全画面表示機能の委譲

全画面表示機能の委譲をすると、ある Window から別の信頼する Window に requestFullscreen() を呼び出す機能を移管することができます。これは、送信元の Window がユーザーによって一時的にアクティブ化され、それが解除された後に行われます。この機能は、Chrome 100 に含まれる汎用委譲メカニズムに基づいています。

マルチスクリーン ウィンドウ配置 : 全画面表示コンパニオン ウィンドウ

全画面表示コンパニオン ウィンドウを使うと、ユーザーが 1 度アクティブ化するだけで、全画面表示コンテンツとポップアップ ウィンドウを別の画面に配置できます。デモが公開されており、ソースコードは GitHub にあります。

Web Bluetooth API のパーミッション ポリシー

Web Bluetooth をパーミッション ポリシーで制御できるようになります。トークンの名前は "bluetooth" で、デフォルトの許可リストは 'self' です。

overflow-clip-margin の visual-box

overflow-clip-margin プロパティは、要素のコンテンツがクリッピングされずに描画できる範囲を指定します。この機能により、visual-box 値を使って参照ボックスを設定できるようになります。この参照ボックスが、コンテンツをクリッピングするオーバーフロー クリップのエッジを定義します。

Async Clipboard API のウェブ カスタム フォーマット

ウェブ カスタム フォーマット機能により、標準化されたウェブ カスタム フォーマットを使って、サニタイズされていない任意のペイロードを読み書きできるようになります。また、一部の限定された OS 固有のフォーマットを読み書きすることもできます（以前のアプリをサポートするため）。

コンテンツがウェブからのものであることを示すため、ブラウザはクリップボードのフォーマットの名前を標準化された方法で難読化します。そのため、プラットフォームのアプリケーションは、サニタイズされていないコンテンツを受け入れるかどうかを選択できます。

オペレーティング システムのクリップボードを通してウェブとプラットフォーム アプリケーションの間でデータ ペイロードを交換したいウェブアプリ デベロッパーもいるかもしれません。Clipboard API は、特によく使われる標準データタイプ（テキスト、イメージ、リッチテキスト）をすべてのプラットフォームでサポートしています。ただし、この API はロングテールな特殊フォーマットまでは対応していません。特に、現在のウェブ プラットフォームでは、カスタム フォーマット、TIFF（大型イメージ フォーマット）などの非ウェブ標準フォーマット、docx（ドキュメント フォーマット）などの独自フォーマットはサポートされません。

WebGL の描画キャンバス カラー マネジメント

仕様に従い、Chromium の WebGL 実装で以下の指定ができるようになります。

  • 描画バッファのカラースペース
  • コンテンツをテクスチャとしてインポートする際に変換するカラースペース

以前のバージョンの Chrome では、両方とも既定の sRGB となっていました。現在のバージョンより、"display-p3" も利用できるようになります。

サポートの終了と機能の削除

このバージョンの Chrome では、以下のサポートの終了と機能の削除が行われます。現在サポートが終了している機能と以前に削除された機能のリストは、ChromeStatus.com をご覧ください。

ファイルシステム URL にアクセスするサードパーティ コンテンツのブロック

iframe はファイルシステム URL に移動することができなくなります。トップフレームのファイルシステム URL への移動は、Chrome 68 で削除されています。

非標準クライアント ヒント モードの削除

4 つのクライアント ヒント（dpr、width、viewport-width、device-memory）にはデフォルトの許可リスト self がありますが、Android では仕様とは異なり、デフォルトの許可リスト * があるかのように動作します。この点が修正され、これらのヒントで明示的な委譲が必須となるため、Android でのプライバシーが改善されます。

U2F API（Cryptotoken）の削除

Chrome で以前にセキュリティ鍵を操作するために使われていた U2F API のサポートが終了します。U2F セキュリティ鍵自体は非推奨ではなく、今後も動作し続けます。

影響を受けるサイトは、Web Authentication API に移行する必要があります。もともと U2F API で登録された認証情報は、ウェブ認証経由でチャレンジできます。U2F API でサポートされる USB セキュリティ鍵も、Web Authentication API のサポート対象です。

U2F は Chrome オリジナルのセキュリティ鍵 API で、フィッシングに強い 2 要素認証システムを構築するために、サイトから USB セキュリティ鍵に公開鍵認証情報を登録して、チャレンジできるようにします。U2F はオープンなウェブ標準になることはなく、Web Authentication API（Chrome 67 でリリース）に取り込まれました。Chrome は FIDO U2F JavaScript API を直接サポートすることはありませんでしたが、同等の機能を持つ chrome.runtime.sendMessage() メソッドを提供する Cryptotoken と呼ばれるコンポーネント拡張機能を公開しました。U2F と Cryptotoken は確実にメンテナンス モードに入っており、ここ 2 年間にわたって Web Authentication API への移行が推奨されています。

Reviewed by Eiji Kitamura - Developer Relations Team

この記事は Maps JavaScript API 担当ソフトウェア エンジニア Aleh Medzviadziuk による Google Cloud Blog の記事 "The latest accessibility updates in the Maps JavaScript API" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。



先月グローバル アクセシビリティ アウェアネス デーを迎えたことにちなみ、昨年の取り組みからの進捗状況と、Maps JavaScript API と Maps Embed API のユーザー補助機能の向上に関する最近の更新情報についてお知らせします。

Google Cloud は昨年より Embed API の根本的な改善に焦点を絞り、「タブ」の順序、キーボードとスクリーン リーダーのインタラクティブな機能、ユーザー補助ラベルの追加、各種マップ コントロールのカラー コントラストの強調といった改善に取り組んできました。このような改善により、目の不自由な方に加え、スクリーン リーダーやキーボード ナビゲーションを使うすべての方に、よりインクルーシブなマップをご利用いただけるようになります。この記事では、これまでに実現できた改善点の詳細をいくつかご紹介します。

タブが左から右、上から下の順に並べられ、スペースバーでボタンをアクティブにして選択でき、色のコントラストが上がって視認性が増しています。


ハイ コントラスト モードでの UI 表示

ハイ コントラスト モードのマップも改善し、一部のボタンとチェックボックスを見やすく、認識しやすくしました。このために、マップがハイ コントラストの設定に合うようにコードベースの CSS に変更を加えました。

ハイ コントラスト モードでもボタンとチェックボックスの視認性が保たれます。


情報ウィンドウの改善

また、マップで特に使用される UI コンポーネントである情報ウィンドウ（InfoWindow）のさらなる改善にも引き続き取り組みました。デベロッパーはユーザー補助ラベルを指定して、情報ウィンドウが表示されているときにフォーカスするようプログラムで設定できるようになりました。

 const infoWindow = new google.maps.InfoWindow({

  ariaLabel: 'Hello Accessibility',

  content: '<h2>Hello Accessibility!</h2>',

});


infoWindow.addListener('visible', () => {

  infoWindow.focus();

});


infoWindow.open({

  anchor: marker,

  shouldFocus: false,

});


情報ウィンドウにユーザー補助ラベルを指定して、情報ウィンドウが表示されているときにフォーカスするようにプログラムで設定できます。


スクリーン リーダーとマーカーの連携

最後に、キーボードでのマーカー操作を支援するためにスクリーン リーダー向けの使用手順を追加しました。この機能は、初めて利用するユーザーで、キーボードを使ってインタラクティブなマーカー（登録したクリック イベント リスナーがある場合）を移動する方法についてご存知ない方に特に便利です。マーカーをより使いやすくする方法について詳しくは、「マーカーをアクセス可能にする」ガイドと「マーカーのユーザー補助機能」コードサンプルをご覧ください。

キーボードでのマーカー操作を支援する、スクリーン リーダーの使用手順。


ユーザー補助機能の改善にご協力ください

新たに改善した機能をお試しいただき、変更点に関するフィードバックや新しいバグの報告にご協力いただけますと幸いです。それらを参考にして、最も影響が大きい領域に優先して対応してまいります。皆様のウェブサイトに影響する既存のバグに [+1] で投票するか、新しいバグレポートを提出してください。

ユーザー補助機能は、さまざまなユーザーやコミュニティに多様な影響を与える複雑なトピックです。お客様のフィードバックは、Google Maps Platform の機能を誰でも利用できるようにする取り組みの指針として活用されます。Maps JavaScript API と Maps Embed API のユーザー補助機能や改善点の最新情報もご確認ください。

今後導入予定の機能

ウェブでは毎日、世界中の何百万人ものユーザーが Maps JavaScript API によって提供される Google マップの基本地図を利用しています。Google の目標は、多くのユーザーに受け入れられる主題図を容易に作成するために必要となるツールをデベロッパーに提供することです。

Google Maps Platform チームは、Maps JavaScript と Maps Embed の UI と API のユーザー補助機能の向上に向けて、まだまだできることがあると認識しています。詳細については、Maps JavaScript API と Maps Embed API の更新状況は、リリースノート ページでご確認ください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。