Google Developers Japan: 7月 2022

Chrome 104 ベータ版: メディアクエリの新構文、リージョンキャプチャなど

2022年7月20日水曜日

この記事は 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 オリジントライアルデベロッパーコンソールをご覧ください。新しいオリジントライアルfocusgroupfocusgroup 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 TransitionShared 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-boxobject-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-boxoverflow-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 への移行が推奨されています。Eiji Kitamura - Developer Relations Team

Maps JavaScript API のユーザー補助機能に関する最新情報

2022年7月7日木曜日

この記事は 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 の更新状況は、リリースノートページでご確認ください。