デバイスレイアウトモードとは:グレーのボタンの役割と、必要になる理由

何が起きているのか

本アプリを含め、iOS上のあらゆるブラウザはAppleのWebKitエンジンを使うことが義務付けられています。これは誰かが手を抜いた結果ではなく、プラットフォームのルールです。iOS版のWebKitはタッチ入力を前提にした挙動をしており、2台目の画面上で合成カーソルによってページが操作されている場合、その前提が崩れてしまいます。

この摩擦は埋め込みフレームに集中して現れます。あるサイトが別のドメインのiframe内に自身の一部を読み込んでいる場合、そのフレームはサンドボックス化されており、ブラウザエンジン自体の入力経路を通じてしかイベントを受け取りません。Cookie同意管理ツールはこの仕組みを使っています。決済フォーム、IDプロバイダーのサインイン欄、埋め込み動画プレイヤーも同様です。外部ディスプレイ上で発生したクリックが、内部まで届かないことがあるのです。

これはサイト側が意図せず起こしていることでもありません。機密性の高い操作要素をクロスドメインのフレーム内に隔離するのは、意図的な不正対策です。ページ内で動く自動化スクリプトが「支払う」や「サインイン」を勝手に押すことができないようにするためです。この仕組みはよく機能しますが、その分、2台目の画面から来る正当なカーソル操作まで一緒に弾いてしまうことがあります。

XeOSは、こうした事態をできる限り減らすための工夫を重ねています。クリックはShadow DOM(クローズドなシャドウルートを含む)を通してヒットテストされるため、ほとんどのCookieバナーはこれでカバーできます。フォーカスも、入れ子になった子要素ではなく正しい編集可能ホストに向けられるため、チャットやメモアプリのテキストフィールドも問題なく動作します。しかし、合成入力を拒むクロスオリジンのフレームは、アプリ側では乗り越えられない壁です。

回避策は、たった4秒

接続を外したり、そのページをあきらめさせたりする代わりに、XeOSはそのウィンドウを、完璧に操作できる画面、つまりあなたのiPhone自体に渡します。

1. ウィンドウの隅にあるグレーのスマホボタンをクリックします。
2. そのページが、通常のタッチ操作レイアウトのままiPhoneやiPad自体の画面に表示されます。
3. うまくいかなかった操作を行います。バナーへの同意、サインインボタンのタップ、カード情報欄への入力など。
4. iPhone側の戻るボタンをタップすると、ウィンドウは元あった場所そのままに外部ディスプレイへ戻ります。

ページが再読み込みされることはありません。表示位置もスクロール位置も、入力途中の内容もそのまま維持されます。

縦向きか横向きか?

ページをiPhone上でどちらの向きで表示するかは選べます。初回セットアップ時に確認され、設定からいつでも変更できます。

物理マウスを使っているなら横向きがおすすめです。その画面を操作している間、より広い横幅を活用できます。オンスクリーンのトラックパッドを使っているなら縦向きを選びましょう。すでにその向きで端末を持っているはずだからです。

どんなときに必要になるか

実際に必要になるのは、限られたいくつかの状況です。サードパーティの同意管理ツールによるCookie・同意バナー。フレーム内のIDプロバイダーに処理を委ねるサインインフロー(「〜でサインイン」といったボタンが典型例です)。まさに上記の理由から決済処理業者のフレーム内に置かれる決済入力欄。そして、地図、予約カレンダー、チャットのポップアップなど、周囲のページとは異なるドメインから読み込まれる埋め込みウィジェット。

それ以外、つまりサイト本体やそのメニュー、フォーム、動画などは、外部ディスプレイ上で通常どおり動作します。

これは不具合ではありません

クリックを受け付けないページは、XeOSが実装し忘れた機能ではありません。iOSのすべてのアプリが使用を義務付けられているブラウザエンジンの境界であり、このアプリのアップデートでは動かせません。なぜなら、そのレイヤーはアプリの制御が及ばない領域だからです。アプリにできるのは、その迂回を短く、損失なく済ませることだけです。

そして実際、その迂回はごく短いものです。iPhone側でワンタップするだけで、すぐに大画面へ戻ってこられます。