Ionic Meetup
#19 Tokyo

最新の情報を手に入れよう。2022/05/29(日)、東京開催。

DocsプラグインCLI

Capacitor アプリでの画面の向きの設定

すべてのアプリケーションは、デバイスの縦向きと横向きでうまく動作します。しかし、多くのアプリはそうではありません。また、アプリがどちらかのモードでのみ、あるいは時折、機能することを必要とする正当な理由もあります。

グローバルな向きの設定

Capacitor アプリの向きをグローバルに設定するには、対象とするプラットフォームに必要な設定値を設定します。

iOS の設定

iOS では、iPhone や iPad でサポートされる画面の向きが異なります。iOS で使用できる画面の向きを制限するには、Xcode を起動して、Info.plist ファイルを開きます。以下のキーを見つけてください。 Supported interface orientationSupported interface orientation (iPad) です。これらの値を使って、iPhone と iPad でサポートしたい異なる向きを指定します。

Info.plist ファイルを直接編集する場合は、以下のキーを探します。 UISupportedInterfaceOrientationsUISupportedInterfaceOrientations~ipad です。例えば、以下の設定では、iPhone では右向きの “Portrait” 、iPad では “Landscape” のいずれかの向きに制限されます。

  <key>UISupportedInterfaceOrientations</key>
  <array>
    <string>UIInterfaceOrientationPortrait</string>
  </array>
  <key>UISupportedInterfaceOrientations~ipad</key>
  <array>
    <string>UIInterfaceOrientationLandscapeRight</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
  </array>

Android の設定

Android では、 AndroidManifest.xml を修正して、メインアプリのアクティビティの <activity> エントリに android:screenOrientation を設定することで、向きを設定することができます。設定可能なエントリの詳細については、Android Manifest Documentation を参照してください。

動的な方向の設定

多くのアプリでは、複数の方向性をサポートする必要があり、コンテンツに応じて方向性をロックすることもあります。

Capacitor では、 cordova-plugin-screen-orientation プラグインでこの機能をサポートしています:

npm install cordova-plugin-screen-orientation
npx cap update

そして、 window.screen.orientation に用意されている lockunlock のメソッドを使います:

window.screen.orientation.lock('portrait');
window.screen.orientation.lock('landscape');

// To unlock orientation which will default back to the global setting:
window.screen.orientation.unlock();

使用可能な向きの値や設定オプションについては、 Orientation Plugin Docs を参照してください。

iPad Orientation Lock

By default, an iPad allows Multitasking and its orientation cannot be locked. If you need to lock orientation on an iPad set the option Requires Full Screen to YES by adding the following to Info.plist:

    <key>UIRequiresFullScreen</key>
    <true/>
Previous
<- React Hooks
Next
セキュリティ ->
Contribute ->