Chrome では、Device Posture API と Viewport Segments Enumeration API の 2 つの API を試用しています。これらは Chrome 125 からオリジン トライアルとして利用できます。これらは総称して Foldable API と呼ばれ、デベロッパーが折りたたみ式デバイスをターゲットにできるように設計されています。この投稿では、これらの API を紹介し、テストを開始する方法について説明します。
物理フォーム ファクタは主に 2 つあります。1 つのフレキシブル スクリーン（シームレス）を備えたデバイスと、2 つのスクリーンを備えたデバイス（シームあり、デュアル スクリーン デバイスとも呼ばれます）です。
このようなデバイスは、デベロッパーに課題と機会をもたらします。これにより、コンテンツをさらに表示する方法が提供されます。たとえば、本のようなシームレスなデバイスを持っているユーザーが、画面が平らなタブレットのように使用するように変更することがあります。2 つの画面を持つデバイスでは、画面間の物理的な結合が必要となる場合があります。
これらの新しい API を使用すると、デベロッパーはこれらのデバイスのユーザー エクスペリエンスを向上させることができます。各 API は、CSS と JavaScript の 2 つの方法で、必要なウェブ プラットフォーム プリミティブを公開します。
デバイス ポスチャー API
折りたたみ式デバイスには、デバイスの形状（物理的な状態）を変更できる機能があります。フォーム ファクタを変更して、コンテンツ作成者は異なるユーザー エクスペリエンスを提供できます。また、これらの新しい API により、ウェブ コンテンツがさまざまな折りたたみ状態に反応できるようになります。
デバイスは、次の 2 つの形状にできます。
folded: ノートパソコンまたはブックの形状。
continuous: フラット、タブレット、またはシームレスな曲面ディスプレイ。
CSS
Device Posture API の仕様では、新しい CSS メディア機能（device-posture）が定義されています。このメディア機能は、一連の固定形状に解決されます。これらの形状は、デバイスの物理状態を含む事前定義の値で構成されます。
device-posture 特徴の値は、前述の使用可能なポスチャーの説明と一致します。
foldedcontinuous
今後、新しいデバイスが市場に投入されれば、新たな対策が追加される可能性があります。
例:
/* 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 位置をそれぞれ表します。
次のコード スニペットは、折りたたみの両側に 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 までオリジン トライアルで利用できます。オリジン トライアルの背景情報については、オリジン トライアルを使ってみるをご覧ください。
ローカルテストでは、折りたたみ式 API を有効にするには、試験運用版ウェブ プラットフォーム機能フラグ chrome://flags/#enable-experimental-web-platform-features を使用します。--enable-experimental-web-platform-features を使用してコマンドラインから Chrome を実行することでも有効にできます。
デモ
デモについては、デモリポジトリをご覧ください。テストに使用する物理デバイスがない場合は、Chrome DevTools でエミュレートされた Galaxy Z Fold 5 または Asus Zenbook Fold デバイスを選択し、[連続] と [折りたたみ] を切り替えることができます。必要に応じて、ヒンジを可視化することもできます。
関連リンク
- Device Posture API
- Viewport Segments API