このページは Cloud Translation API によって翻訳されました。

Foldable API のオリジントライアル

Alexis Menard

Thomas Steiner

Chrome では、Device Posture API と Viewport Segments Enumeration API の 2 つの API を試用しています。これらの API は、Chrome 125 からオリジントライアルとして利用できます。これらは総称して Foldable API と呼ばれ、デベロッパーが折りたたみ式デバイスをターゲットにできるように設計されています。この投稿では、これらの API を紹介し、テストを開始する方法について説明します。

物理的なフォームファクタには、主に 2 つのタイプがあります。1 つのフレキシブルスクリーンを備えたデバイス（シームレス）と、2 つのスクリーンを備えたデバイス（シーム付き、デュアルスクリーンデバイスとも呼ばれます）です。

左側に 1 つのフレキシブルスクリーン（シームレス）を備えたデバイス、右側に 2 つのスクリーン（シーム付き、デュアルスクリーンとも呼ばれます）を備えたデバイスの概略図。

こうしたデバイスは、デベロッパーに課題と機会をもたらします。コンテンツを表示するための追加の方法を提供します。たとえば、ユーザーが本などのシームレスデバイスを持っていても、フラットスクリーンのタブレットとして使用されるようになります。画面が 2 つあるデバイスでは画面同士が物理的に結合されるため、その点を考慮する必要があります。

これらの新しい API は、デベロッパーがこれらのデバイスのユーザーエクスペリエンスを向上させる方法を提供します。各 API は、必要なウェブプラットフォームプリミティブを CSS と JavaScript の 2 つの方法で公開します。

Device Posture API

折りたたみ式デバイスには、形状（デバイスの物理的な状態）を変更できる機能があります。フォームファクタを変更することで、コンテンツ作成者は異なるユーザーエクスペリエンスを提供できます。また、これらの新しい API により、ウェブコンテンツがさまざまな折りたたみ状態に対応できるようになります。

デバイスの形状には次の 2 つがあります。

folded: ノートパソコンやブックの形状。

フラットまたはタブレット形状のデバイスと、シームレスな曲面ディスプレイの概略図。

continuous: フラット、タブレット、またはシームレスな曲面ディスプレイ。

ノートパソコンまたはブック形状のデバイスの概略図。

CSS

Device Posture API の仕様では、新しい CSS メディア機能である device-posture が定義されています。このメディア機能は、一連の固定形状に解決されます。これらの形状は、それぞれがデバイスの物理的な状態を含む、いくつかの事前定義済みの値で構成されます。

device-posture 特徴の値は、前述の考えられる形状と一致しています。

folded
continuous

今後、新しいデバイスが市場に投入されると、新たな対策が追加される可能性があります。

例:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

デバイスの形状をクエリするために、新しい DevicePosture オブジェクトを利用できます。

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

ユーザーがデバイスを完全に開いて folded から continuous に移動するなど、デバイスの形状の変化に対応するには、change イベントにサブスクライブします。

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

ビューポートセグメント API

ビューポートセグメントは、ビューポートの論理的に分離された領域の位置とサイズを定義する CSS 環境変数です。分割線として機能する 1 つ以上のハードウェア要素（折り目や個別のディスプレイ間のヒンジなど）によってビューポートが分割されると、ビューポートセグメントが作成されます。セグメントは、ビューポートの領域であり、作成者は論理的に区別できるものとして扱うことができます。

CSS

論理分割の数は、CSS メディアクエリレベル 5 の仕様で定義されている 2 つの新しいメディア機能（vertical-viewport-segments と horizontal-viewport-segments）を通じて公開されています。これらは、ビューポートが分割されるセグメントの数に解決されます。

さらに、各論理区分のディメンションをクエリする新しい環境変数が追加されました。変数は次のとおりです。

env(viewport-segment-width x y)
env(viewport-segment-height x y)
env(viewport-segment-top x y)
env(viewport-segment-left x y)
env(viewport-segment-bottom x y)
env(viewport-segment-right x y)

各変数には 2 つの次元があり、セグメントを分離するハードウェア機能によって作成された 2 次元グリッド内の x 位置と y 位置をそれぞれ表します。

水平セグメントと垂直セグメントを示す図。1 つ目の水平セグメントは x 0 と y 0、2 つ目の水平セグメントは x 1 と y 0 です。1 つ目の垂直セグメントは x 0 と y 0、2 つ目の垂直セグメントは x 0 と y 1 です。 — 最初の水平セグメントは x 0 と y 0、2 番目の水平セグメントは x 1 と y 0 です。1 つ目の垂直セグメントは x 0 と y 0、2 つ目の垂直セグメントは x 0 と y 1 です。

次のコードスニペットは、折りたたみの両側に 2 つのコンテンツセクション（col1 と col2）がある分割 UX を作成する簡単な例です。

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

次の写真は、実際のデバイスで実際にどのように見えるかを示しています。

縦向きのブック形状の折りたたみ式スマートフォン。

横向きのブック形状の折りたたみ式スマートフォン。

横向きのブック形状の折りたたみ式タブレット。

JavaScript

ビューポートセグメントの数を取得するには、visualViewport の segments エントリを確認します。

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

segments 配列の各エントリは、ビューポートの各論理セグメントを表し、DOMArray で座標とサイズを記述します。segments フィールドは、クエリされたときの特定の状態のスナップショットです。更新された値を受け取るには、形状変更をリッスンするか、イベントのサイズを変更し、segments プロパティを再クエリする必要があります。

Foldable API を試す

Foldable API は、Chrome 125 から Chrome 128 までオリジントライアルで利用できます。オリジントライアルの背景情報については、オリジントライアルのスタートガイドをご覧ください。

ローカルテストでは、chrome://flags/#enable-experimental-web-platform-features の試験運用版ウェブプラットフォームの機能フラグで折りたたみ式 API を有効にできます。これは、--enable-experimental-web-platform-features を使用してコマンドラインから Chrome を実行して有効にすることもできます。

デモ

デモについては、デモリポジトリをご覧ください。テストする実機がない場合は、Chrome DevTools で Galaxy Z Fold 5 または Asus Zenbook Fold をエミュレートしたデバイスを選択し、[連続] と [折りたたみ] を切り替えることができます。必要に応じて、ヒンジを確認することもできます。

折りたたみ式デバイスをエミュレートする Chrome DevTools。

Foldable API のオリジン トライアル

Device Posture API

CSS

JavaScript

ビューポート セグメント API

CSS

JavaScript

Foldable API を試す

デモ

関連リンク

Foldable API のオリジントライアル

ビューポートセグメント API