読み込み中...

JavaScriptのScreen.orientationを使った画面向きの調整方法8選

JavaScriptのScreen.orientationを使った画面の向き制御 JS
この記事は約16分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●Screen.orientationとは？

スマートフォンやタブレットを使っていると、デバイスの向きに応じて画面の表示が切り替わることがありますよね。

縦向きから横向きに変えると、レイアウトが変わったり、特定の機能が有効になったりと、画面の向きは重要な役割を果たしています。

そんな画面の向きを検知し、JavaScriptから制御できるようにするためのAPIが「Screen.orientation」です。

Screen.orientationを使えば、現在の画面の向きを取得したり、向きが変化した時に処理を実行したりできるようになります。

これから、Screen.orientationの使い方を丁寧に解説していきますので、ぜひ実際にコードを書きながら学んでいってくださいね。

きっと、画面の向きを利用した面白い機能が実装できるようになりますよ。

○Screen.orientationの基本的な使い方

まずは、Screen.orientationの基本的な使い方から見ていきましょう。

Screen.orientationを使うと、次のようなことができます。

・現在の画面の向きを取得する
・画面の向きが変化した時に処理を実行する
・画面を特定の向きにロックする

画面の向きは、portrait（縦向き）、landscape（横向き）、portrait-primary（デバイスの自然な縦向き）、landscape-primary（デバイスの自然な横向き）のいずれかで表されます。

それでは、実際にコードを見ていきましょう。

○サンプルコード1：画面の向きを取得する

現在の画面の向きを取得するには、screen.orientation.typeプロパティを使用します。

次のようなコードを実行してみてください。

console.log(screen.orientation.type);

実行結果は、現在の画面の向きに応じて、次のいずれかが出力されます。

"portrait-primary"
"landscape-primary"
"portrait-secondary"
"landscape-secondary"

portrait-primaryとlandscape-primaryは、デバイスの自然な縦向き、横向きを表します。

一方、portrait-secondaryとlandscape-secondaryは、デバイスを上下逆さまにした状態の縦向き、横向きを表します。

このように、screen.orientation.typeを使えば、現在の画面の向きをシンプルに取得できます。画面の向きに応じて処理を分岐させたい時などに役立ちますね。

○サンプルコード2：画面の向きが変わったら処理を実行する

次に、画面の向きが変化した時に処理を実行する方法を見ていきましょう。

orientationchangeイベントを使えば、画面の向きが変わった時に指定した処理を実行できます。

window.addEventListener("orientationchange", function() {
  console.log("画面の向きが変わりました。現在の向きは " + screen.orientation.type + " です。");
});

このコードでは、画面の向きが変わる度に、コンソールに現在の向きを出力するようにしています。

実際にデバイスを縦向き、横向きに変えてみると、次のようなメッセージが出力されるはずです。

画面の向きが変わりました。現在の向きは portrait-primary です。
画面の向きが変わりました。現在の向きは landscape-primary です。

画面の向きが変わる度に何らかの処理を実行したい場合は、このようにorientationchangeイベントを使うと便利ですね。

画面の向きに応じてレイアウトを動的に切り替えるような場合に活用できそうです。

●画面を横向きに固定する方法

先ほどは、画面の向きを取得したり、向きが変わった時の処理について学びましたが、アプリによっては、常に特定の向きで表示したい場合もありますよね。

例えば、動画プレイヤーやゲームなどでは、横向きの画面で操作しやすいことが多いです。

そこで、ここからは「画面を横向きに固定する方法」について詳しく解説していきます。

CSSとJavaScriptの両方のアプローチを紹介するので、用途に応じて使い分けてみてくださいね。

○サンプルコード3：CSSで画面を横向きに固定

まずは、CSSを使って画面を横向きに固定する方法から見ていきましょう。

CSSのorientationメディアクエリを使えば、簡単に画面の向きに応じたスタイルを適用できます。

@media screen and (orientation: landscape) {
  body {
    transform: rotate(90deg);
    transform-origin: bottom left;
    position: absolute;
    top: -100vw;
    left: 0;
    width: 100vh;
    height: 100vw;
  }
}

このCSSコードは、次のような処理を行っています。

  1. @media screen and (orientation: landscape)で、画面が横向きの時のみスタイルを適用。
  2. transform: rotate(90deg)で、要素を90度回転。
  3. transform-origin: bottom leftで、回転の基点を左下に設定。
  4. position: absoluteで、要素を絶対位置指定。
  5. top: -100vwで、要素を上に100vw（ビューポート幅）分ずらす。
  6. width: 100vh、height: 100vwで、幅をビューポート高さ、高さをビューポート幅に設定。

このCSSを適用することで、画面が横向きの時には、要素が90度回転し、画面いっぱいに表示されるようになります。

ただし、この方法では、縦向きに戻した時に表示が崩れてしまうので、注意が必要です。

○サンプルコード4：JSで画面を横向きに固定

次に、JavaScriptを使って画面を横向きに固定する方法を見ていきましょう。

Screen.lockOrientation()メソッドを使うと、画面を特定の向きにロックできます。

screen.orientation.lock("landscape")
  .then(function() {
    console.log("画面を横向きにロックしました。");
  })
  .catch(function(error) {
    console.log("画面のロックに失敗しました。: " + error.message);
  });

このコードでは、screen.orientation.lock("landscape")で画面を横向き（landscape）にロックしています。

ロックに成功した場合は、”画面を横向きにロックしました。”とコンソールに出力され、失敗した場合は、”画面のロックに失敗しました。”とエラーメッセージが出力されます。

ただし、lockOrientation()メソッドを使うには、ユーザーのアクションによる実行（クリックイベントなど）が必要で、ページ読み込み時に自動でロックすることはできません。

また、iOS Safariでは対応していないので、注意が必要です。

○サンプルコード5：特定の条件下でのみ横向き固定

最後に、特定の条件下でのみ画面を横向きに固定する方法を紹介します。

例えば、デバイスの幅が高さよりも大きい場合にだけ、横向きに固定したいことがありますよね。

function lockOrientation() {
  if (screen.width > screen.height) {
    screen.orientation.lock("landscape")
      .then(function() {
        console.log("画面を横向きにロックしました。");
      })
      .catch(function(error) {
        console.log("画面のロックに失敗しました。: " + error.message);
      });
  } else {
    screen.orientation.unlock();
    console.log("画面のロックを解除しました。");
  }
}

window.addEventListener("resize", lockOrientation);

このコードでは、screen.width > screen.heightで、画面の幅が高さよりも大きいかどうかを判定しています。

条件を満たす場合は、screen.orientation.lock("landscape")で横向きにロックし、満たさない場合は、screen.orientation.unlock()でロックを解除しています。

また、window.addEventListener("resize", lockOrientation)で、画面のリサイズ時にlockOrientation()関数を呼び出すようにしているので、デバイスの向きが変わった時に自動で判定されます。

●よくあるエラーと対処法

Screen.orientationを使っていると、思い通りに動作しなかったり、エラーが発生したりすることがあるかもしれません。

ここでは、よくあるエラーとその対処法を紹介するので、困った時の参考にしてくださいね。

エラーに遭遇した時は、まず落ち着いて原因を突き止めることが大切です。慌てずに、エラーメッセージや状況をよく確認しましょう。

そして、ここで紹介する対処法を試してみてください。きっと、問題を解決できるはずです。

それでは、具体的なエラーを見ていきましょう。

○エラー1：orientationchangeイベントが発火しない

orientationchangeイベントを使って、画面の向きが変わった時の処理を実装しようとしたのに、イベントが発火しないことがあります。

これは、意外と多くの人が遭遇するエラーです。

原因は、イベントの綴りが間違っていることが多いです。

正しくは、「orientationchange」です。

「orientation change」のように、スペースが入っていたり、「onorientationchange」のように、頭に「on」がついていたりすると、イベントが発火しません。

また、モバイルデバイスでないと、orientationchangeイベントは発火しないので、PCで試していると発火しないことがあります。

○エラー2：iOS Safariで思い通りに動作しない

iPhoneなどのiOS端末で、Safariブラウザを使っていると、Screen.orientationが思い通りに動作しないことがあります。

例えば、lockOrientation()メソッドでロックしても、画面が回転してしまったりします。

実は、iOS Safariでは、Screen.orientationに対応していないのです。

代わりに、webkitRequestFullscreen()メソッドを使って、全画面表示にすると、画面のロックができます。

function lockOrientation() {
  if (screen.width > screen.height) {
    document.documentElement.webkitRequestFullscreen();
  } else {
    document.webkitExitFullscreen();
  }
}

window.addEventListener("resize", lockOrientation);

このコードでは、画面の幅が高さより大きい場合に、webkitRequestFullscreen()で全画面表示にして、画面をロックしています。

全画面を解除するには、webkitExitFullscreen()を使います。

ただし、このコードはiOS Safari専用なので、他のブラウザでは動作しないことに注意してください。

○エラー3：古いブラウザとの互換性問題

Screen.orientationは、比較的新しいAPIです。

そのため、古いブラウザでは対応していないことがあります。

特に、Internet Explorer 11以前では、Screen.orientationは使えません。

古いブラウザでの使用を考えている場合は、Screen.orientationの代わりに、window.orientationを使うのがおすすめです。

window.orientationは、0、90、-90、180の値を取り、画面の向きを表します。

function getOrientation() {
  if (window.orientation === 0 || window.orientation === 180) {
    console.log("縦向きです。");
  } else {
    console.log("横向きです。");
  }
}

window.addEventListener("orientationchange", getOrientation);

このコードでは、window.orientationの値で、縦向きか横向きかを判定しています。

orientationchangeイベントを使って、画面の向きが変わった時に、getOrientation()関数を呼び出しています。

ただし、window.orientationは、iOS Safariでは動作しないので、注意が必要です。

●Screen.orientationの応用例

さて、ここまでScreen.orientationの基本的な使い方や、画面を横向きに固定する方法、よくあるエラーの対処法などを解説してきました。

みなさんは、もう Screen.orientationマスターに近づいているのではないでしょうか。

でも、学んだことを実践に活かさなければ、本当の意味でのマスターにはなれません。

そこで、ここからはScreen.orientationの応用例を紹介していきます。

実際のプロジェクトでも使えそうな、実践的なサンプルコードを用意しましたので、ぜひ参考にしてみてくださいね。

○サンプルコード6：ゲームの操作を向きで切り替え

まずは、ゲームアプリでの応用例です。

横持ちでプレイするゲームでは、デバイスの向きに応じて操作方法を切り替えると、より直感的で快適な操作性を実装できます。

let isLandscape = false;

function handleOrientation() {
  if (screen.orientation.type.includes("landscape")) {
    console.log("横向きです。ゲームパッドを表示します。");
    isLandscape = true;
    // ゲームパッドを表示する処理
  } else {
    console.log("縦向きです。タッチ操作に切り替えます。");
    isLandscape = false;
    // タッチ操作に切り替える処理
  }
}

screen.orientation.addEventListener("change", handleOrientation);
handleOrientation(); // 初期化時にも呼び出す

このコードでは、screen.orientation.typeで現在の画面の向きを取得し、横向き（landscape）かどうかを判定しています。

横向きの場合は、ゲームパッドを表示し、縦向きの場合は、タッチ操作に切り替えるようにしています。

実行すると、次のような出力が得られます。

横向きです。ゲームパッドを表示します。
縦向きです。タッチ操作に切り替えます。

このように、画面の向きに応じて操作方法を動的に切り替えることで、ユーザーに最適な操作性を提供できます。

ゲームアプリ開発の参考にしてみてくださいね。

○サンプルコード7：縦長/横長に応じたレイアウト切り替え

次は、Webサイトでのレイアウト切り替えへの応用です。

デバイスが縦長か横長かに応じて、最適なレイアウトを表示するようにしましょう。

function updateLayout() {
  if (screen.orientation.type.includes("portrait")) {
    console.log("縦長のレイアウトを適用します。");
    document.body.classList.add("portrait");
    document.body.classList.remove("landscape");
  } else {
    console.log("横長のレイアウトを適用します。");
    document.body.classList.add("landscape");
    document.body.classList.remove("portrait");
  }
}

screen.orientation.addEventListener("change", updateLayout);
updateLayout(); // 初期化時にも呼び出す

このコードでは、screen.orientation.typeで縦長（portrait）か横長（landscape）かを判定し、それぞれに応じたCSSクラスを body要素に付与しています。

縦長の場合は portraitクラス、横長の場合は landscapeクラスを付与し、もう一方のクラスを削除しています。

実行結果は次のようになります。

縦長のレイアウトを適用します。
横長のレイアウトを適用します。

あとは、portraitクラスと landscapeクラスに対応するCSSを用意すれば、画面の向きに応じて最適なレイアウトを表示できます。

例えば、次のようなCSSを書けば、縦長時は縦に要素を並べ、横長時は横に要素を並べるレイアウトになります。

.portrait .container {
  flex-direction: column;
}

.landscape .container {
  flex-direction: row;
}

このように、Screen.orientationとCSSを組み合わせることで、レスポンシブデザインをさらに強化できます。

ぜひ、自分のWebサイトに取り入れてみてくださいね。

○サンプルコード8：デバイスの傾きを検知して処理

最後は、もう一歩進んで、デバイスの傾きを検知する応用例を紹介します。

Screen.orientationに加えて、DeviceOrientationEventを使うことで、デバイスの傾きを検知できます。

function handleDeviceOrientation(event) {
  const { beta, gamma } = event;
  console.log(`デバイスの傾き - beta: ${beta}, gamma: ${gamma}`);

  // デバイスの傾きに応じた処理を行う
  if (gamma > 15) {
    console.log("右に傾いています。");
    // 右に傾いた時の処理
  } else if (gamma < -15) {
    console.log("左に傾いています。");
    // 左に傾いた時の処理
  }
}

window.addEventListener("deviceorientation", handleDeviceOrientation);

このコードでは、deviceorientationイベントを監視し、イベントオブジェクトから beta（前後の傾き）と gamma（左右の傾き）の値を取得しています。

そして、gammaの値が 15以上の時は右に傾いていると判定し、-15以下の時は左に傾いていると判定しています。

実行すると、次のような出力が得られます。

デバイスの傾き - beta: 10, gamma: 20
右に傾いています。
デバイスの傾き - beta: 10, gamma: -20
左に傾いています。

デバイスの傾きに応じて、グラフィックスを動かしたり、ゲームの操作に使ったりと、様々な応用が考えられます。

ただし、DeviceOrientationEventは、iOS Safariでは独自の許可が必要だったり、古いブラウザでは対応していなかったりと、注意点もあります。

使用する際は、ブラウザの互換性をよく確認してくださいね。

まとめ

ここまで、JavaScriptのScreen.orientationについて、基本的な使い方から応用例まで幅広く解説してきました。

画面の向きを取得したり、向きに応じて処理を実行したり、さらにはデバイスの傾きを検知したりと、Screen.orientationを使えば様々な可能性が広がります。

Screen.orientationを使いこなせば、きっとあなたのスキルは一段階上がるはずです。