ガイド
Capacitor で Screen Orientation を使う方法
@capgo/capacitor-screen-orientation を使用する
Capacitor Screen Orientation プラグインのインターフェース。
インストール
bun add @capgo/capacitor-screen-orientation
bunx cap sync
bunx cap sync プラグインのネイティブcodeをネイティブプロジェクトにコピーします。プラグインをアップグレードするたびに再度実行してください。
インポート
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
API の概要
| メソッド | 説明 |
|---|---|
orientation |
現在の画面の向きを取得します。 |
lock |
画面の向きを特定のタイプに固定します。 |
unlock |
画面の向きの固定を解除します。 |
startOrientationTracking |
モーションセンサーを使ってデバイスの向きの追跡を開始します。 |
stopOrientationTracking |
モーションセンサーによるデバイスの向きの追跡を停止します。 |
isOrientationLocked |
デバイスの向きのロックが現在有効かどうかを確認します。 |
isDeviceFoldable |
画面の向きの変化を検知します。 |
getFoldState |
現在の折りたたみ状態を取得します。 |
getHingeAngle |
ヒンジの角度を度単位で取得します。 |
getReservedRegions |
折りたたみ状態と画面を覆っているものを取得します。 |
getBarPlacement |
iPhone Duoにおけるネイティブのタブバーやツールバーの位置を取得します。 |
setVerticalBarBehavior |
iPhone Duo がこのアプリのバーをサイドに移動できるかどうかを選択します。 |
getSizeClass |
ウィンドウのサイズクラスを取得します。 |
例
orientation()
現在の画面の向きを取得します。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
const result = await ScreenOrientation.orientation();
console.log('Current orientation:', result.type);
lock()
画面の向きを特定のタイプに固定します。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
// Standard lock
await ScreenOrientation.lock({ orientation: 'landscape' });
// Lock with motion tracking on iOS
await ScreenOrientation.lock({
orientation: 'portrait',
bypassOrientationLock: true
});
unlock()
画面の向きの固定を解除します。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.unlock();
startOrientationTracking()
モーションセンサーを使ってデバイスの向きの追跡を開始します。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.startOrientationTracking({
bypassOrientationLock: true
});
// Listen for changes
ScreenOrientation.addListener('screenOrientationChange', (result) => {
console.log('Orientation changed:', result.type);
});
stopOrientationTracking()
モーションセンサーによるデバイスの向きの追跡を停止します。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
await ScreenOrientation.stopOrientationTracking();
isOrientationLocked()
デバイスの向きのロックが現在有効かどうかを確認します。
import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';
// Start motion tracking first
await ScreenOrientation.startOrientationTracking({
bypassOrientationLock: true
});
// Check lock status
const status = await ScreenOrientation.isOrientationLocked();
if (status.locked) {
console.log('Orientation lock is ON');
console.log('Physical:', status.physicalOrientation);
console.log('UI:', status.uiOrientation);
}
上記の表は13個のコアメソッドを一覧にしています。リスナーとバージョンのヘルパー、および各メソッドの完全な仕様は、次に記載されています。 GitHub リポジトリ.
イベントをリッスンする
addListener ハンドルを返します。画面がアンマウントされるときに handle.remove() 画面がアンマウントされるとき、または ScreenOrientation.removeAllListeners() すべてのリスナーを解除します。
完全なリファレンス
@capgo/capacitor-screen-orientation の使用方法から続ける
使用している場合 @capgo/capacitor-screen-orientation の使用 ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-screen-orientation @capgo/capacitor-screen-orientation の実装詳細については、 スタートガイド スタートガイドの実装詳細については、 @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 「@capgo/capacitor-video-player. の使い方」のネイティブ機能については