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

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

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

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

Amazon Web App SDKは、SDKのダウンロードからダウンロードしてください（[ウェブアプリ] をクリック）。

マークアップとスタイル
向き固定関数
向き固定関数の呼び出し

マークアップとスタイル

マークアップには、アプリのコンテンツのほか、デバイスの向きが正しくないときに表示されるメッセージが含まれる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(orientationEvent +"を使用");
    $(window).bind(orientationEvent, forceOrientation);
    forceOrientation(); // 起動時に向きを固定する
  } else {
    console.log("向きはサポートされていません");
  }
}

$(init);