プラグインなしで Capacitor をEdge-to-Edge表示

Capacitor アプリに edge-to-edge 表示を実装しようとしていませんか？ ハックやプラグイン、回避策は不要です。Capacitor は edge-to-edge 表示を公式にサポートしています。方法は adjustMarginsForEdgeToEdge 設定オプションですが、まだ広くドキュメント化されていません。

Capacitor アプリ、特に Android 15 以降をターゲットにする場合、エッジ・トゥ・エッジのレイアウトに苦労する開発者は多いです。モダンなエッジ・トゥ・エッジの見た目を実現するために、カスタムプラグインや CSS ハックに頼りがちですが、より優れたネイティブな方法があります。

エッジ・トゥ・エッジ表示とは？

エッジ・トゥ・エッジ表示とは、アプリのコンテンツをシステムバー（ステータスバーやナビゲーションバー）の背後まで広げ、より没入感のあるモダンな UI 体験を提供するものです。Android 15 から、Google はすべてのアプリの標準としてエッジ・トゥ・エッジを推進しています。

公式の解決策: adjustMarginsForEdgeToEdge

Capacitor は、 adjustMarginsForEdgeToEdge この目的専用の設定オプションを提供しています。詳細は以下に記載されています。 Capacitor の公式設定ドキュメント、ですが見落としがちです。

設定方法

これを以下に追加してください： capacitor.config.ts または capacitor.config.json:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'My App',
  webDir: 'dist',
  android: {
    adjustMarginsForEdgeToEdge: 'auto' // or 'force' or 'disable'
  }
};

export default config;

または JSON 形式の場合：

{
  "appId": "com.example.app",
  "appName": "My App",
  "webDir": "dist",
  "android": {
    "adjustMarginsForEdgeToEdge": "auto"
  }
}

設定オプション

この adjustMarginsForEdgeToEdge このオプションは3つの値を受け付けます：

1. `"auto"` （推奨）

adjustMarginsForEdgeToEdge: 'auto'

動作内容： Android 15+ と以下を自動的にチェックします： windowOptOutEdgeToEdgeEnforcement 設定。デバイスや構成に合わせてマージンをインテリジェントに調整します。

最適な用途： 古いAndroidバージョンとの互換性を維持しつつ、対応デバイスでエッジ・トゥ・エッジを実現したい、ほとんどのプロダクションアプリ向け。

2. `"force"`

adjustMarginsForEdgeToEdge: 'force'

動作内容： Androidのバージョンや他の設定に関わらず、エッジ・トゥ・エッジのためにマージン調整を強制します。

最適な用途： サポートされているすべてのAndroidバージョンで、エッジ・トゥ・エッジ表示を実現したいアプリ。

3. `"disable"`

adjustMarginsForEdgeToEdge: 'disable'

動作内容： 自動的なマージン調整を完全に無効化します。

最適な用途： エッジ・トゥ・エッジのレイアウトを手動で処理するアプリ、またはエッジ・トゥ・エッジ動作を必要としないアプリ。

注意: 現在は "disable" がデフォルトですが、これは "auto" Capacitor 8 で変更される予定です。

Android 15以降で重要な理由

Android 15からは、Googleによってエッジ・トゥ・エッジ表示がデフォルトの動作として強制されます。エッジ・トゥ・エッジのレイアウトを適切に処理していないアプリでは、以下のようなUI問題が発生する可能性があります：

システムバーにコンテンツが隠れてしまう
不自然な余白やパディング
デバイス間で見た目が不一致
ユーザー体験の悪化

公式の adjustMarginsForEdgeToEdge configを使用することで、カスタムな code を書かずに、アプリがこれらの変更に適切に対応できるようになります。

完全な実装例

モダンな Capacitor アプリ向けの完全な設定例はこちらです：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'My Awesome App',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  },
  android: {
    // Enable edge-to-edge automatically on supported devices
    adjustMarginsForEdgeToEdge: 'auto',

    // Other Android config options...
    backgroundColor: '#ffffff'
  }
};

export default config;

CSSに関する注意点

エッジ・トゥ・エッジ表示を使用する場合、セーフエリアを扱うためのCSSを追加する必要があるかもしれません：

/* Add padding for system bars */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Or use viewport-fit */
meta[name="viewport"] {
  content: "width=device-width, initial-scale=1, viewport-fit=cover";
}

設定のテスト

設定完了後、 adjustMarginsForEdgeToEdge以下の環境でアプリをテストしてください：

Android 15以降のデバイス - コンテンツがシステムバーを適切に避けているか確認
古いAndroidバージョン - 後方互換性を確保
異なる画面サイズ - 各デバイスでレイアウトが崩れないか検証
ライトモードとダークモード - 両方のテーマモードをテストする

避けるべきよくある間違い

プラグインは不要

以下のようなサードパーティ製プラグインは capacitor-edge-to-edge などは必要ありません。ネイティブ設定でスマートに処理できます。設定を有効にした後、システムクロームを細かく制御したい場合は、 adjustMarginsForEdgeToEdge, @capgo/capacitor-navigation-bar と @capgo/home-indicator ネイティブ設定を置き換えるのではなく、補完するように使用してください。

手動の実装と混ぜないこと

以下を使用している場合 adjustMarginsForEdgeToEdge、追加していた手動のwindow insets処理やCSSハックをすべて削除してください。

Safe AreaのCSS設定を忘れずに

この設定でマージンの調整は行われますが、コンテンツのパディングを適切に保つには、引き続きCSSのsafe area insetsを使用する必要があります。

移行ガイド

現在、エッジ・トゥ・エッジ表示のためにプラグインやハックを使用している場合は、以下の手順を行ってください：

エッジ・トゥ・エッジ用のプラグインを削除 依存関係から
設定オプションを追加 あなたの capacitor.config.ts
クリーン＆リビルド Androidプロジェクト
徹底的なテスト 対象デバイス上で

# Clean the Android project
npx cap sync android
cd android
./gradlew clean
cd ..

# Rebuild
npx cap copy android
npx cap open android

将来への備え

Capacitor 8 では、 "auto" これがデフォルト値になります。準備手順：

〜でテストして "auto" たった今 問題を早期に発見する
CSSを更新し セーフエリアを適切に処理する
レイアウトを確認する エッジ・トゥ・エッジ対応デバイスで

まとめ

Capacitor での Edge-to-edge 表示に、プラグインやハック、複雑な回避策は不要です。この adjustMarginsForEdgeToEdge 設定オプションにより、公式にサポートされた、クリーンでネイティブな解決策が提供されます。

まずはこちらから "auto" ほとんどのアプリにおいて、デバイスごとに徹底的にテストし、適切な safe area CSS を追加してください。最小限の手間で Android 15 以降に対応できます。

質問や問題が発生しましたか？ Capacitor コミュニティや公式ドキュメントは、追加のサポートを得るための素晴らしいリソースです。

プラグインなしで Capacitor の Edge-to-Edge 表示を実現する方法

使用している場合 プラグインなしで Capacitor をEdge-to-Edge表示 ネイティブメディアとインターフェースの挙動を計画するには、次と連携させてください @capgo/capacitor-live-activities の使用 @capgo/capacitor-live-activities の使用におけるネイティブ機能については、 @capgo/capacitor-live-activities @capgo/capacitor-live-activities の実装の詳細については、 @capgo/capacitor-video-playerの使用方法 @capgo/capacitor-video-player の使い方におけるネイティブ機能については、 @capgo/capacitor-video-player @capgo/capacitor-video-player の実装の詳細、および @capgo/capacitor-native-navigation の活用 @capgo/capacitor-native-navigation. の使い方におけるネイティブ機能については