Edited at

Screen Orientation APIを試してみる

More than 3 years have passed since last update.

モバイルブラウザで画面の縦長・横長を検出する方法を再確認してみた」の最後の方で触れましたが、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日現在)。


画面の向きを取得

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



  • "portrait-primary": 縦長が正面とされている端末で縦長になっている。


  • "portrait-secondary": 横長が正面とされている端末で縦長になっている。


  • "landscape-primary": 横長が正面とされている端末で横長になっている。


  • "landscape-secondary": 縦長が正面とされている端末で横長になっている。

一方、FirefoxとIE11では、screen.mozOrientationないしscreen.msOrientationに上記の値が格納されます。

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


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

画面の回転時に発生するイベントに対するハンドラは、Chromeの場合はscreen.orientation.onchangeに、FirefoxとIE11ではscreen.onmozorientationchangeないしscreen.onmsorientationchangeに設定することが出来ます。


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

さらに、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となる向きに相当。


  • "any": 全ての向きへの回転を許可する指定に相当。

Firefoxの場合は、screen.mozLockOrientation()を使用します。指定可能な引数は、「画面の向きを取得」で説明した4種類の文字列のうち1つ、もしくは複数の文字列を配列に格納したものとなります。

IEの場合は、screen.msLockOrientation()を使用します。概ねFirefoxと同様ですが、複数指定時は文字列を配列に格納する必要はなく、複数の引数として渡します。

Firefox、IEいずれの場合もメソッドの戻り値でロックの成功/失敗を判定します(true/false)。

ロックの解除は、Chromeの場合はscreen.orientation.unlock()、FirefoxとIEの場合はscreen.mozUnlockOrientation()screen.msUnlockOrientation()を利用します。


むすび

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