デバイスの向きを固定する方法


デバイスの向きを固定する方法

JavaScriptを使用して、アプリを使用するデバイスの向き(縦向きまたは横向き)を固定できます。

ForceOrientationのサンプルでは、この機能を実装する方法が示されます。このサンプルのコードは、Amazon Web App SDKの次のフォルダにあります。

Amazon-Web-SDKs/Webapps/examples/Cookbook/ForceOrientation/

Amazon Web App SDKは、Amazon Developer SDKからダウンロードしてください([Web] ボタンをクリック)。

マークアップとスタイル

マークアップには、アプリのコンテンツのほか、デバイスを持っている向きが正しくないときに表示されるメッセージが含まれるdivを含めるようにしてください。

<div>アプリのコンテンツをここに記述</div>

<div id="forcerotation">
  <div id="message">
    デバイスを持つ向きが間違っています。
  </div>
</div>

ここに表示されるスタイルは「向きが間違っています」というメッセージに適用され、最初は非表示になっています。

#forcerotation {
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
}

#forcerotation #message {
    position: relative;
    top: 45%;
    text-align: center;
}

向き固定関数

向き固定関数は、グローバル変数forcedOrientationの値に依存します。この向きは、ユーザーがアプリのコンテンツを表示するためにデバイスを持つ向きです。forcedOrientationは文字列「portrait」または「landscape」になります。forcedOrientationは現在のウィンドウの向きと比較され、一致しない場合は「向きが間違っています」というメッセージが表示されます。次に向き固定関数のコードを示します。

var forcedOrientation = "landscape"; // デバイスを持つ向きを横向きに固定する
function forceOrientation() {
  var orientation = (Math.abs(window.orientation) === 90 ? "landscape" : "portrait");
  if (orientation !== forcedOrientation) {
    $("#forcerotation").show();
  } else {
    $("#forcerotation").hide();
  }
}

向き固定関数の呼び出し

向き固定関数は、画面の向きが変わるたびに呼び出される必要があります。これが行われるには、まず向き設定イベントが認識されているかどうかを検出します。認識されている場合、forceOrientation()関数を向き設定イベントに紐付け、向き設定イベントが検出されるたびにforceOrientation()が呼び出されるようにします。

function init() {
  if (typeof (window.orientation) !== "undefined") {
    var orientationEvent = "resize";
    if ("onorientationchange" in window) {
        orientationEvent = "orientationchange";
    } else if ("ondeviceorientation" in window) {
        orientationEvent = "deviceorientation";
    }
    console.log("Using " + orientationEvent);
    $(window).bind(orientationEvent, forceOrientation);
    forceOrientation(); // 起動時に向きを固定する
  } else {
    console.log("No orientation supported");
  }
}

$(init);