Modern Web Guidance が安定版になりました。専門家が検証したウェブ開発のベストプラクティスで、コーディングエージェントをアップグレードしましょう。詳しくは、こちらのお知らせをご覧ください。

Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Chrome 93 の新機能

Pete LePage

次の説明をお読みください。

import ステートメントを使用して、JavaScript モジュールと同様に CSS スタイルシートを読み込めるようになりました。
インストールされた PWA は URL ハンドラとして登録できるため、ユーザーは PWA に直接ジャンプできます。
Multi-Screen Window Placement API がフィードバックに基づいて更新され、2 回目のオリジントライアルが開始されます。
PWA Summit が 10 月 6 ～ 7 日に開催されます。
他にも多数あります。

Pete LePage です。自宅で仕事と撮影をしています。Chrome 93 のデベロッパー向けの新機能を見ていきましょう。

CSS モジュールスクリプト

JavaScript モジュールと同様に、import ステートメントを使用して CSS スタイルシートを読み込めるようになりました。スタイルシートは、構築可能なスタイルシートと同じ方法でドキュメントまたはシャドウルートに適用できます。

新しい CSS モジュールスクリプト機能は、カスタム要素に最適です。また、JavaScript から CSS を適用する他の方法とは異なり、要素を作成したり、CSS テキストの JavaScript 文字列を操作したりする必要はありません。

これを使用するには、assert {type: 'css'} でスタイルシートをインポートし、adoptedStyleSheets を呼び出して document または shadowRoot に適用します。

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

ただし、assert を省略すると、ファイルは JavaScript として扱われ、機能しなくなるので注意してください。

詳しくは、web.dev の CSS モジュールスクリプトを使用してスタイルシートをインポートするをご覧ください。

Multi-Screen Window Placement API

一部のアプリでは、新しいウィンドウを開いて特定の場所や特定のディスプレイに配置することが重要な機能です。たとえば、スライドを使用してプレゼンテーションを行う場合、メインディスプレイにスライドを全画面表示し、もう一方のディスプレイにスピーカーノートを表示します。

Multi-Screen Window Placement API を使用すると、ユーザーのマシンに接続されているディスプレイを列挙し、特定の画面にウィンドウを配置できます。これは 2 回目のオリジントライアルであり、フィードバックに基づいて多くの変更が加えられています。

デバイスに複数の画面が接続されているかどうかを簡単に確認するには、次の手順を行います。

const isExtended = window.screen.isExtended;
// returns true/false

ただし、重要な機能は window.getScreens() にあり、接続されているディスプレイに関するすべての詳細情報を提供します。

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

たとえば、メイン画面を特定し、requestFullscreen() を使用してその画面に要素を表示できます。

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

また、新しいディスプレイが接続された場合や取り外された場合など、変更をリッスンする方法も提供します。

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

詳しくは、web.dev に掲載されている Tom の記事 Multi-Screen Window Placement API を使用して複数のディスプレイを管理するをご覧ください。

リリースサイクルの短縮

3 月に、リリースサイクルを短縮し、4 週間ごとに Chrome の新しいバージョンをリリースする計画を発表しました。

その時期が到来し、9 月 21 日に Chrome 94 がリリースされます。各バージョンのリリース予定日は、Chrome カレンダーで確認できます。

PWA の新機能

プログレッシブウェブアプリを構築している場合は、2 つの新しいオリジントライアルをチェックすることをおすすめします。

PWA の URL ハンドラ

PWA がインストールされている場合、その PWA へのリンクをクリックすると、ブラウザタブではなく PWA で開くことが望ましいでしょう。

ウェブアプリマニフェストで url_handlers を指定し、.well-known/ ディレクトリに web-app-origin-association ファイルを追加することで、ユーザーが PWA へのリンクをクリックしたときに、インストール済みの PWA 内で開くようにブラウザに指示できます。

manifest.json ファイル内の url_handlers の例:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association ファイルの例:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

また、少し追加の検証を行うことで、所有している他のオリジンからのリンクを PWA で処理することもできます。

オリジントライアルの詳細については、web.dev の URL ハンドラとしての PWA をご覧ください。

ウィンドウコントロールオーバーレイ

ウィンドウコントロールオーバーレイは、タイトルバーや、閉じる、最大化、最小化などのウィンドウコントロールボタンを含むウィンドウ全体をカバーするようにクライアント領域を拡張します。

この機能を使用すると、インストールした PWA を、インストールした他のアプリのように見せることができます。

オリジントライアルの詳細については、PWA のタイトルバーのウィンドウコントロールオーバーレイをカスタマイズするをご覧ください。

PWA サミット

10 月に PWA Summit が開催されます。これは、プログレッシブウェブアプリで誰もが成功できるように支援することに焦点を当てた、無料のオンラインカンファレンスです。PWA Summit は、PWA テクノロジーの作成に携わる Google、Intel、Microsoft、Samsung の各社のコラボレーションです。

素晴らしい講演やコンテンツが多数あります。詳しくは、PWASummit.org をご覧ください。

その他

もちろん、他にもたくさんあります。

Flexbox と Flexbox アイテムに、配置キーワード start、end、self-start、self-end、left、right のサポートが追加されました。
非同期クリップボード API で SVG ファイルがサポートされるようになりました。
また、meta theme-color を設定する際に media 属性が優先されるため、ライトモードとダークモードに異なるテーマカラーを指定できます。

<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">

Chrome 93 の新機能 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

CSS モジュール スクリプト