# AndroidのtargetSdk 35以降でのEdge to Edge対応と、InAppMessaging 2.23.0以降で利用可能なisEdgeToEdgeEnabledオプションについて

Androidの[InAppMessaging 2.23.0](/android-sdk/release-notes-android-sdk.md#inappmessaging-2230)以降では、Edge to Edgeへの対応としてSDKで[isEdgeToEdgeEnabled](https://plaidev.github.io/karte-sdk-docs/android/inappmessaging/latest/inappmessaging/io.karte.android.inappmessaging/-in-app-messaging-config/-builder/index.html#-1111879916%2FProperties%2F119841050)オプションが利用可能になりました。

このオプションでは[targetSdkVersion 35以降で確認している事象について](https://app.developers.karte.io/app-faq/pages/I3iDz4mfy9JVPqxeVR9L#targetsdkversion-35以降で確認している事象について)の対応や、KARTEで配信されるポップアップ（IAM）タイプのアクションでのEdge to Edge対応を容易とするCSS変数の利用が可能になります。

以降ではこのオプションやCSS変数の利用方法について説明します。

## isEdgeToEdgeEnabledオプションについて

有効化することで[targetSdkVersion 35以降で確認している事象について](https://app.developers.karte.io/app-faq/pages/I3iDz4mfy9JVPqxeVR9L#targetsdkversion-35以降で確認している事象について)への対応や、後述のCSS変数を利用したポップアップの位置調整が可能になります。

アプリの環境によって有効化の要否が異なりますが、**エンドユーザーの環境でEdge to Edgeが有効化される条件では、SDKのisEdgeToEdgeEnabledの有効化が推奨されます。**

### Android SDKでのisEdgeToEdgeEnabledオプションの有効化方法

前提として、KARTE Android SDKのinappmessaging moduleのバージョンを2.23.0以上へアップデートする必要があります。

このバージョン以降で、 `KarteApp.setup` 時に `InAppMessagingConfig` のビルダー上でisEdgeToEdgeEnabledのFlagをtrueに設定することで有効化されます。\
※このバージョン以降でオプションを有効化指定しない場合の初期値はfalseとなります。

{% hint style="warning" %}
**オプションの有効化と、ActivityのEdge to Edge有効化について**

`isEdgeToEdgeEnabled`のオプションを有効化する場合、KARTEのポップアップ（IAM）を表示させるActivityでは、全てEdge to Edgeを有効化させてください。
{% endhint %}

{% tabs %}
{% tab title="Kotlin" %}
{% code overflow="wrap" %}

```kotlin
val iamConfig = InAppMessagingConfig.Builder()
　　 ...
    .isEdgeToEdgeEnabled(true)
    .build()

val cfg = Config.Builder()
    ...
    .libraryConfigs(iamConfig)
    .build()

KarteApp.setup(this, cfg)
```

{% endcode %}
{% endtab %}

{% tab title="Java" %}
{% code overflow="wrap" %}

```java
InAppMessagingConfig iamConfig = new InAppMessagingConfig.Builder()
  ...
  .isEdgeToEdgeEnabled(true)
  .build();

Config cfg = new Config.Builder()
  ...
  .libraryConfigs(iamConfig)
  .build();

KarteApp.setup(this, cfg);
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Flutter SDK、React Native SDK、Cordova SDKでのisEdgeToEdgeEnabledオプションの有効化方法

[こちら](#android-sdkでのisedgetoedgeenabledオプションの有効化方法)の対応に加えて、`build.gradle`の`dependencies` ブロックに`inappmessaging`モジュールの追加が必要です。

{% code title="build.gradle" overflow="wrap" %}

```groovy
dependencies {
  implementation 'io.karte.android:inappmessaging:2.+'
}
```

{% endcode %}

※ React NativeでExpoを使用している場合には、別対応が必要なため、お問い合わせください。

## CSS変数とアクションでの対応

### 利用可能なCSS変数について

Edge to Edge環境下では表示領域が画面の端まで広がる一方で、画面端に表示されるステータスバー、ナビゲーションバー、カットアウトの位置にまでポップアップが表示されてしまう可能性があります。

ポップアップの表示位置をこれらに合わせて調整する（画面の端に対してマージンを設ける）ために、以下のCSS変数が追加されています。

これらのCSS変数は、ステータスバーやナビゲーションバー、およびディスプレイのカットアウトを考慮したInsetsのサイズをpixel数ベースの値を返します。

| CSS変数                        | 内容                       |
| ---------------------------- | ------------------------ |
| --krt-safe-area-inset-top    | 画面上部のステータスバーの高さpixel数    |
| --krt-safe-area-inset-bottom | 画面下部のナビゲーションバーの高さのpixel数 |
| --krt-safe-area-inset-left   | 画面左端のカットアウトの横幅のpixel数    |
| --krt-safe-area-inset-right  | 画面右端のカットアウトの横幅のpixel数    |

{% hint style="warning" %}
**アクションの表示位置調整の必要性**

画面上部のステータスバー、画面下部のナビゲーションバーの位置に表示されたポップアップは、ステータスバー、ナビゲーションバーの領域に表示された箇所ではタップが反応しません

ポップアップがバーの領域に表示されている、ポップアップ上部のバツボタンがバーの領域に表示されている場合には、ユーザーがポップアップをタップした際に反応しない等の影響が出る可能性があるため、適切な位置調整を行ってください
{% endhint %}

以降ではこれらのCSS変数の利用例について説明します。

### CSS変数の利用例①: 画面上部の位置調整

Edge to Edge適用環境下では、画面上部に表示されるポップアップは、デフォルトでは以下の状態でポップアップが表示されます。

![](/files/8q3J0LAwxPjDBy6y99ZZ)

これを以下のような形式でステータスバーの分だけ下げて表示する場合には、後述のようなカスタマイズで対応可能です。

![](/files/XkSNtRNNL1Lxf8UR4NuO)

アクションのエディタのカスタマイズ→JavaScriptで、widget.show()より前の箇所に以下を追記します。\
※フレックスエディタの場合は[別の方法](#フレックスエディタでの対応例) での設定が必要です

`marginTop`には任意の動的変数の名称を設定してください。

{% code overflow="wrap" %}

```javascript
// 過去バージョン等で isEdgeToEdgeEnabledのオプションが有効になってない場合に適用される値
var fallbackTopInset = '4vh';

// 追加で任意のマージンを加えたい場合は以下にpx数を設定
var marginTopInset = '0px';

widget.setVal("marginTop", {
  "margin-top": "calc(var(--krt-safe-area-inset-top, env(--safe-area-inset-top, " + fallbackTopInset + ")) + " + marginTopInset + ")"
});
```

{% endcode %}

アクションのエディタのカスタマイズ→HTMLで、適用させたい範囲に以下の `krt-bind:style="marginTop"` を追記します。\
※JavaScript側で動的変数の名称を任意で変更した場合は、marginTopの箇所をその名称に変更してください。

{% code overflow="wrap" %}

```html
<div krt-bind:style="marginTop">
 ...
</div>
```

{% endcode %}

表示位置の上下を調整したい場合、JavaScript側の`marginFromTopInset`の値を変更することで対応可能です。

### CSS変数の利用例②: 画面下部の位置調整

Edge to Edge適用環境下では、画面下部に表示されるポップアップは、デフォルトでは以下の状態でポップアップが表示されます。

![](/files/dqCWWTbf8XaSt5vMZme7)

これを以下のような形式でナビゲーションバーの分だけ上げて表示する場合には、後述のようなカスタマイズで対応可能です。

![](/files/FnWbIg9RcmVE1XcnalbM)

アクションのエディタのカスタマイズ→JavaScriptで、widget.show()より前の箇所に以下を追記します。\
フレックスエディタの場合は[別の方法](#フレックスエディタでの対応例) での設定が必要です

`marginTop`には任意の動的変数の名称を設定してください。

{% code overflow="wrap" %}

```javascript
// 過去バージョン等で isEdgeToEdgeEnabledのオプションが有効になってない場合に適用される値
var fallbackBottomInset = '4vh';
var fallbackRightInset = '4vw';

// 追加で任意のマージンを加えたい場合は以下にpx数を設定
var marginBottomInset = '0px';
var marginRightInset = '0px';

widget.setVal("marginBottomRight", {
  "margin-bottom": "calc(var(--krt-safe-area-inset-bottom, env(--safe-area-inset-bottom, " + fallbackBottomInset + ")) + " + marginBottomInset + ")",
  "margin-right": "calc(var(--krt-safe-area-inset-right, env(--safe-area-inset-right, " + fallbackRightInset + ")) + " + marginRightInset + ")",
});
```

{% endcode %}

アクションのエディタのカスタマイズ→HTMLで、適用させたい範囲に以下の `krt-bind:style="marginBottomRight"` を追記します。\
※JavaScript側で動的変数の名称を任意で変更した場合は、marginBottomRightの箇所をその名称に変更してください。

{% code overflow="wrap" %}

```html
<div krt-bind:style="marginBottomRight">
 ...
</div>
```

{% endcode %}

表示位置を調整したい場合、JavaScript側の`marginBottomInset`,`marginRightInset`の値を変更することで対応可能です。

### フレックスエディタでの対応例

[フレックスエディタ](https://support.karte.io/post/2Skn80HWbQNeSeXIkblMYl)の場合はCSS変数の設定方法が異なります。

CSS変数の適用は、フレックスエディタの最上部のレイアウトを選択し、画面右側のCSSカスタマイズ→CSSの欄に入力する必要があります。

![](/files/e5u2KPdO7IuKZ80VmD7Q)

例として[CSS変数の利用例②: 画面下部の位置調整](#css変数の利用例②-画面下部の位置調整) の内容をフレックスエディタで適用する場合は、以下のような内容になります。\
※0vh, 0vw, 0pxの箇所はfallbackBottomInset, fallbackRightInset, marginBottomInset, marginRightInset等の変数に相当します。必要に応じて適宜設定してください

{% code overflow="wrap" %}

```css
.layout[data-layer-id="rgq1g"] {
  margin-bottom: calc(var(--krt-safe-area-inset-bottom, env(--safe-area-inset-bottom, 0vh)) + 0px);
  margin-right: calc(var(--krt-safe-area-inset-right, env(--safe-area-inset-right, 0vw)) + 0px);
}
```

{% endcode %}

## 注意点

* 画面上部のステータスバー、画面下部のナビゲーションバーの位置に表示されたポップアップは、ステータスバー、ナビゲーションバーの領域に表示された箇所ではタップが反応しません。
* ポップアップがバーの領域に表示されている、ポップアップ上部のバツボタンがバーの領域に表示されている場合には、ユーザーがポップアップをタップした際に反応しない等の影響が出る可能性があるため、適切な位置調整を行ってください

## FAQ

* `--krt-safe-area-inset-*`のCSS変数はAndroidアプリ以外（iOSやweb）に影響しますか？
  * 影響しません。Androidのみで参照利用可能です
  * iOSで同様の対応が必要な場合は、上述sampleのように、 [--safe-area-inset-\*](https://developer.mozilla.org/ja/docs/Web/CSS/env)が利用できます
* targetSdkVersion 34以下、もしくはまだEdge to Edgeの対応をしていない場合、必要な対応はありますか？
  * 現状ありません。Edge to Edgeを有効化する際に`isEdgeToEdgeEnabled`の有効化をしてください
  * targetSdkVersion 35では[Edge to Edge強制適用のオプトアウト設定が可能](https://developer.android.com/about/versions/16/behavior-changes-16?hl=ja)ですが、その場合ではオプションの有効化は不要です


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://app.developers.karte.io/app-faq/about-android-isedgetoedgeenabled-option.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.