ニュース
Microsoft、折りたたみ式・2画面デバイス向けの新しいJavaScript/CSS機能を発表
「Edge 86」以降、または“Surface Duo”エミュレーターでプレビューテスト可能
2020年9月15日 09:45
米Microsoftは9月14日（現地時間、以下同）、折りたたみ式の新しいデュアルスクリーンデバイスに向けた実験的機能を2つ発表した。同社は先週、折りたたみ式のAndroid端末“Surface Duo”を米国で発売しており、開発者がデュアルスクリーン向けアプリケーションの開発へ取り組むには絶好のタイミングであるとしている。
CSS screen-spanning media feature
折りたたみ式デバイスは大まかに分け、2つのスクリーンを本のようにつなぎ合わせたもの（デュアルスクリーンデバイス）と、フレキシブルディスプレイ技術により1つのスクリーンを折り曲げるもの（シングルスクリーンデバイス）の2種類が存在する。とはいえ、いずれもユーザーが回転、反転、折りたたみといったさまざまな状態をとれるという点においては共通している。テントのように立てたり、本のように半開きでコンテンツを閲覧するケースも考えなければならない。
また、アプリケーションは片側のスクリーンだけに存在してもよいし、2つのスクリーンにまたがってもよい。つまり、折りたたみデバイス対応のWebページをデザインするには、スクリーンがどのような状態なのかを取得できる必要があるだろう。
そこで、同社はこうしたデバイスの状態を取得するため、新しいメディア機能を提案している。Web開発者は“@media (spanning: ……)”というCSSを用いることで、デバイスの状態に応じたスタイルの分岐を記述できる。
加えて、6つの定義済みのCSS環境変数を提案し、Webブラウザーが利用できる領域を取得できるようにする。折りたたみデバイスのなかには“Surface Duo”のようにヒンジをもつものがあり、そこにはコンテンツを表示できない。そこで“env(fold-width)”などとして主要な座標を開発者が取得できるようにし、デュアルスクリーンへの最適化に役立てられるようにする。
JavaScript window segments enumeration API
さらに、JavaScriptにも新しいAPIが追加される。セカンダリスクリーンを取得したり、スクリーンを列挙するAPIはすでにあるが、“1枚のスクリーンを折り曲げて、表示領域を分割する”といったケースに対応するには既存のAPIだけでは不十分なためだ。
現在提案されているのは“スクリーンセグメント（Screen Segments）”という概念を導入し、Webブラウザーに含まれるコンテンツ表示領域の数とその寸法を取得できるようにすることだ（Screen Enumeration API）。たとえば折りたたみ式デバイスで左右のスクリーンをWebブラウザーが占有している場合、セグメントは2個となる。別のアプリと同時表示している場合は1つだ。将来的に3つ以上の表示領域を持つデバイスが出現することも考慮されている。
この新しいAPIは既存のものを置き換えることを目的としておらず、開発者は従来の手法（リサイズイベントでレイアウトを取得・再計算するなど）に加え、新しいAPIを活用することになる。
新しいCSS/JavaScriptのテスト
これらの2つの機能は実験的フラグ“edge://flags/#enable-experimental-web-platform-features”で有効化することが可能。また、「Edge 86」以降のプレビュー版を利用すれば、Windows/Macで折りたたみ式・折り曲げ式デバイスをエミュレートできる。「Chromium」プロジェクトへもソースコードの提供が行われており、近々「Google Chrome」や他の「Chromium」ベースWebブラウザーでもテストできるようになるだろう（ベータ版「Chrome」にはすでに実験的フラグが存在する）。
さらに、プレビュー版“Surface Duo”エミュレーター（v2020.806.1およびそれ以降）を利用すれば、「Android Studio」などと連携してテストすることも可能。同社は現在、Android実装へのアップストリームに取り組んでおり、Androidで動作するすべての「Chromium」ベースブラウザーでこれらの機能が利用可能になる見込みだ。