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

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

Alexis Menard

Thomas Steiner

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

物理フォームファクタは主に 2 種類あります。フレキシブルスクリーン（シームレス）、2 画面構成のデバイス（シーム機能、別名: （デュアルスクリーンデバイスなど）と同等）。

左側にフレキシブルスクリーン（シームレス）が 1 つ、右側に 2 つの画面（シームあり。デュアルスクリーン）があるデバイスの概略図。

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

これらの新しい API を使用すると、デベロッパーはより優れたユーザーエクスペリエンスを提供できます。利用できます各 API は、必要なウェブプラットフォームプリミティブを 2 つの実装できます

デバイスポスチャー API

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

デバイスは、次の 2 つの形状にできます。

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

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

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

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

CSS

Device Posture API の仕様では新しい CSS が定義されました media-feature—デバイスポスチャー。このメディア機能は、一連の固定形状に解決されます。これらのポスチャーは、それぞれが物理的な状態を包含する多数の定義済みの値にダウンロードします

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 つ以上のハードウェア機能（折りたたんだりディスプレイをつなぐヒンジなど）にし、分割線として機能する。セグメントは Pod によって論理的に異なるものとして扱えるビューポートの領域を、表示されます。

CSS

論理部門の数は 2 つの新しいメディア機能、 CSS MediaQueries Level 5 仕様で定義されている 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)

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

水平セグメントと垂直セグメントを示す図。1 つ目の水平セグメントは x 0 と y 0 で、2 つ目の水平セグメントは x 1 と y 0 です。1 つ目の垂直セグメントは x 0 と y 0 で、2 つ目の垂直セグメントは x 0 と y 1 です。 — </ph> 1 つ目の水平セグメントは x 0 と y 0 で、2 つ目の水平セグメントは x 1 と y です。 0.1 つ目の垂直セグメントは x 0 と y 0 で、2 つ目の垂直セグメントは x 0 と y 1 です。

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

<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

ビューポートセグメントの数を取得するには、segments visualViewport。

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詳しくは、オリジントライアルを使ってみるをご覧ください。

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

デモ

デモについては、デモリポジトリをご覧ください。まだ設定していない場合は、テストに使用する実機を選択する場合は、Galaxy Z Fold 5 または Asus Zenbook Fold でエミュレートしたデバイスを Chrome DevTools で開いて切り替え連続と折りたたみ。別のビューに移動して、ヒンジを適用されます。

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

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

デバイス ポスチャー API

CSS

JavaScript

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

CSS

JavaScript

Foldable API を試す

デモ

関連リンク

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

デバイスポスチャー API

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