Screen Orientation APIを試してみる

2023年2月6日: 長らく放置してしまいましたが、現状の仕様に合わせた正しい内容に修正しました。

「モバイルブラウザで画面の縦長・横長を検出する方法を再確認してみた」の最後の方で触れましたが、window.orientationに代わる、端末の画面の向きを検出するためのAPIとして、新たにScreen Orientation APIの仕様策定が進んでいます。

Internet Explorer 11 (Windows 8以降), Firefox for Android, Chrome for Androidで実装されていますので、早速試してみます。なお、Chrome for Androidの実装はW3Cドラフトの最新版に基づいていますが、Firefoxの実装は一つ前のバージョンのドラフト、IE11の実装はさらに一つ前のバージョンのドラフトに基づいているようです(2015年1月14日現在)。

本記事では最新版の仕様に限定して説明します。

画面の向きを取得

Screen Orientation APIでは、screen.orientation.typeに画面の向きの状態が文字列として格納されています。具体的には次のような値となります。

• "portrait-primary": 縦長が正面とされている端末の場合は、縦長の向きになっている。横長が正面とされている端末では、時計回りに90度回転した向きになっている。
• "portrait-secondary": 縦長が正面とされている端末の場合は、縦長の逆さ向きになっている。横長が正面とされている端末では、反時計回りに90度回転した向きになっている。
• "landscape-primary": 横長が正面とされている端末の場合は、横長の向きになっている。縦長が正面とされている端末では、時計回りに90度回転した向きになっている。
• "landscape-secondary": 横長が正面とされている端末の場合は、横長の逆さ向きになっている。縦長が正面とされている端末では、反時計回りに90度回転した向きになっている。

また、window.orientationを置き換えるプロパティとして、screen.orientation.angleが用意されています。この値は、正面の向きであれば0となり、ウィンドウが時計回りに90度ずつ回転する毎に(すなわち端末を反時計回りに90度回転させる毎に)、90、180、270となります。window.orientationでは-90となっていたものがscreen.orientation.angleでは270に変わっている点にのみ注意が必要です。

画面の回転を検出(イベントハンドラ)

画面の回転時に発生するイベントに対するハンドラはscreen.orientation.onchangeに設定することが出来ます。また、screen.orientation.addEventLister('change', callback);のようにaddEventLister()/removeEventLister()を使うことも可能です。

画面の向きのロック及び解除

さらに、Screen Orientation APIでは、新たに画面の向きをロックしたりロックを解除したりするためのメソッドも定義されています。

ロックを実行するためには、ブラウザの画面表示がフルスクリーンに設定されていることが条件となります。例えば、次のうちいずれかの手順を踏む必要があります。

• webkitRequestFullScreen()やmozRequestFullScreen()、msRequestFullscreen()を利用してフルスクリーン表示にする。
• ブラウザのメニューでの操作でフルスクリーンモードにする。
• Chrome for Androidであれば、<meta name="mobile-web-app-capable" content="yes">を定義したWebページとしておき、「ホーム画面に追加」でホーム画面にアイコンを追加するとWebアプリとしてフルスクリーン起動できるようにする。
• Firefox for Androidであれば、「インストール可能なWebアプリ」としてインストールして起動する。

フルスクリーン表示になっている状態で、Chromeの場合は次のようにすることで、画面の向きをロックすることが可能です。すなわちロックの成功/失敗それぞれの処理をPromiseで記述します。

screen.orientation.lock('landscape').then(
  // ロック成功時
  function() {
    console.log('ロックされました');
  },
  // ロック失敗時
  function() {
    console.log('ロックできませんでした');
  }
);

screen.orientation.lock()の引数は、1つないし複数の画面の向きを表す文字列です。上記の4種類に加えて、次のような文字列も指定可能です。

• "portrait": "portrait-primary", "portrait-secondary"の省略形。
• "landscape": "landscape-primary", "landscape-secondary"の省略形。
• "natural": screen.orientation.angleの値が0となる向きに相当。端末が縦長であればportrait-primary、横長であればlandscape-primaryに対応。
• "any": 全ての向きへの回転を許可する指定に相当。

ロックの解除はscreen.orientation.unlock()を利用します。

むすび

Safari for iOSでもこれが実装されると楽になりますよね...