ヒンジはハードウェアだけでなく、ページも変えることができる
デバイスのヒンジは、ハードウェアだけでなくWebページも変えることができます。CSSの「device-posture」メディア特性は、Webコンテンツを適応させる強力な手段を提供します。これは、フラットなタブレットのような「continuous（連続）」画面と、「folded（折りたたみ）」状態を区別し、デバイスの物理的な状態に直接反応するスタイルを可能にします。
Better Stackによる最近の動画では、架空のApple製折りたたみデバイスを曲げた際に、ページが「フラット」から「折りたたみ」に変化する様子が示されました。動画では「2,000ドルの折りたたみスマホ」や「iPhone Surface Duo」といった名称が使われていますが、Appleは現時点でそのような製品を発表しておらず、これらは技術を説明するための推測に基づいた例です。
JavaScript APIでも利用可能なこの機能は、単なるデモンストレーションではありません。目的は意図的なデザインにあります。例えば、ビデオプレーヤーは「continuous」状態では全画面表示にし、「folded」状態になると自動的に適応して、一方の画面で動画を再生し、もう一方の画面でチャプターの詳細やコメントを表示するといったことが可能です。
Google Chromeはすでにこれらの機能をサポートしており、Samsung InternetもGalaxy Z Foldのようなデバイス向けに数年前から同様の機能を提供しています。Safariは「iPhone Surface Duo」シミュレーターでAPIを実装していますが、これらはまだ機能フラグの背後にあり、一般公開ではなく初期開発段階であることを示しています。Firefoxはまだこれらの機能をサポートしていません。
デバイスが曲がったときにJavaScriptを反応させる
CSSがデバイスの物理的な状態に適応するのと同様に、JavaScriptにも強力な対抗機能である「Device Posture API」があります。現在の姿勢には「navigator.devicePosture」を通じてアクセスでき、さらに重要なことに「change」イベントを使用して変化をリッスンできます。このイベントは、デバイスが「continuous」（フラット）と「folded」（折りたたみ）のような状態間で遷移するたびに発生し、Webアプリを動的に反応させることができます。
単なる遊び心のある折りたたみカウンター以上のものを想像してみてください！このAPIを使えば、真に有用な動作を実装できます。ビデオプレーヤーはデバイスが折りたたまれたときに自動的に「再生を一時停止」して誤操作を防いだり、テキストエディタが未保存の編集内容を保存したりすることができます。マルチステップのタスクでは、折りたたみをトリガーにして次のステップへ移行させ、ユーザーのコンテキストを維持することも可能です。
姿勢はあくまでシグナルであり、ユーザーへの指示ではないことを忘れないでください。デバイスが曲がったという理由だけで、コア機能を劇的に変更したり、操作を困難にしたりしてユーザーを驚かせないようにしましょう。代わりに、これらのシグナルを使用してエクスペリエンスを向上させ、画面がフラットか折りたたまれているかに関わらず、主要なアクションが直感的でアクセスしやすい状態を維持してください。Google ChromeとSamsung Internetはすでにこれらの機能をサポートしており、適応性の高いインターフェースを構築するための強力なツールを提供しています。
折り目をレイアウトの境界線にする
折りたたみデバイスの物理的なヒンジは、単なるハードウェア機能ではありません。1つのディスプレイを複数の「viewport segments（ビューポートセグメント）」に分割することができます。つまり、折りたたまれた画面は個別の論理領域を提示できるため、開発者は各サイドに補完的なコンテンツを割り当てることができます。重要なコントロールやコンテンツを折り目にまたがって配置する不自然なデザインを避け、明確なペインを設計することが可能です。
ビデオプレーヤーを例に挙げると、デバイスがフラットなときは画面全体に表示し、折りたたまれたときは一方のセグメントで動画を再生し、もう一方のセグメントでチャプターや説明、コメントを表示することができます。これにより、ユニークなフォームファクタを最大限に活用した、より直感的で効率的なユーザーエクスペリエンスが実現します。
CSSは、horizontal-viewport-segmentsやvertical-viewport-segmentsといったセグメントメディア機能を提供しており、これらを使用して個々の領域を検出し、スタイルを適用できます。calc()式内でenv(viewport-shift-width 0 0)やenv(viewport-shift-height 0 0)などの環境変数を使用することで、要素のサイズを正確に指定可能です。これにより、重要なUI要素が物理的なヒンジの上に直接配置されるのを防ぐことができます。
これらのツールは強力ですが、従来の連続した画面でもレイアウトが適切に機能するように常に配慮してください。Google ChromeとSamsung Internetは数年前からこれらの機能をサポートしており、WebKitもフラグの背後で進歩を遂げています。技術的な詳細については、Device Posture API - W3Cの仕様書をご覧ください。
この記事が気に入ったら、毎朝同じようなものをメールで受け取れます。
1日1通 · 2クリックで解除 · サードパーティのトラッキングなし
噂のiPhoneのためではなく、今日のブラウザのために構築しましょう
では、これらの巧妙な折りたたみ式機能を今日実際にどこで使用できるのでしょうか？Google ChromeとSamsung Internetがこの分野をリードしており、device-postureとビューポートセグメントの強力なサポートを提供しています。Samsung Internetは数年前にGalaxy Z FoldおよびFlipデバイス向けにこれらの機能を先駆けて導入し、Google Chromeは最近、オリジントライアルからベースラインサポートへと昇格させました。
残念ながら、Firefoxは現在これらのAPIをサポートしていません。SafariとWebKitは特定の「iPhone Surface Duo」シミュレーター内で実験的な取り組みを見せていますが、これらの機能はフラグの背後にあり、一般的には利用できません。ブラウザのバージョンごとにサポート状況は急速に変化するため、常に最新のMDNリファレンスやブラウザの互換性テーブルを確認してください。
折りたたみ式デバイス向けに構築する場合は、プログレッシブ・エンハンスメントを採用してください。まず、navigator.devicePostureを使用しようとする前に、それが存在するかどうかを検出します。次に、すべての連続した画面でうまく機能する便利なベースラインレイアウトを設計し、その上に折りたたみ式デバイス固有のスタイルを重ねます。
姿勢の変化に応じてインターフェースを常にテストしてください。重要なコンテンツや機能を折りたたまれた状態だけに依存させないようにし、デバイスがフラットであっても曲がっていてもシームレスな体験を保証してください。思慮深い設計はユーザーに喜ばれるでしょう。
よくある質問
CSSのdevice-postureメディアクエリは何をしますか？
折りたたみ式画面が折りたたまれているか連続しているかなど、デバイスの物理的な姿勢に基づいてWebページがスタイルを適用できるようにします。
ビューポートセグメントは折りたたみ式画面でどのように役立ちますか？
セグメント化されたディスプレイの個別の領域を公開するため、ページはヒンジや折り目の両側にコンテンツを配置できます。
JavaScriptで折りたたみ式携帯電話の姿勢の変化を検出できますか？
はい。Device Posture APIは現在の姿勢を公開しており、変化が発生したときにページが応答できるようにする変更イベントを提供します。
すべてのブラウザが折りたたみ式デバイスのWeb APIをサポートしていますか？
いいえ。サポート状況は異なります。ChromiumベースのブラウザとSamsung Internetは機能を提供していますが、Firefoxには実装がなく、Safariのサポートは実験的な段階です。
Appleは折りたたみ式iPhoneをリリースしましたか？
折りたたみ式iPhoneは発表されていません。このビデオで議論されているのは仮説上のデバイスとSafariの実験的な取り組みであり、Appleの確定した製品ではありません。