AndroidのInAppMessaging 2.23.0以降では、Edge to Edgeへの対応としてSDKでisEdgeToEdgeEnabledオプションが利用可能になりました。

このオプションではtargetSdkVersion 35以降で確認している事象についての対応や、KARTEで配信されるポップアップ（IAM）タイプのアクションでのEdge to Edge対応を容易とするCSS変数の利用が可能になります。

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

オプションについて

有効化することでtargetSdkVersion 35以降で確認している事象についてへの対応や、後述のCSS変数を利用したポップアップの位置調整が可能になります。

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

オプションの有効化方法

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

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

🚧

オプションの有効化と、ActivityのEdge to Edge有効化について

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

val iamConfig = InAppMessagingConfig.Builder()
　　 ... 
    .isEdgeToEdgeEnabled(true)  
    .build()
    
  
val cfg = Config.Builder()
    ...
    .libraryConfigs(iamConfig)
    .build()
    
KarteApp.setup(this, cfg)

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

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

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

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

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

🚧

アクションの表示位置調整の必要性

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

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

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

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

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

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

アクションのエディタのカスタマイズ→JavaScriptで、widget.show()より前の箇所に以下を追記します。

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

// 過去バージョン等で 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 + ")"
});

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

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

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

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

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

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

アクションのエディタのカスタマイズ→JavaScriptで、widget.show()より前の箇所に以下を追記します。

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

// 過去バージョン等で 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 + ")",
});

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

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

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

注意点

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

FAQ

• --krt-safe-area-inset-*のCSS変数ははAndroidアプリ以外（iOSやweb）に影響しますか？
  • 影響しません。Androidのみで参照利用可能です
  • iOSで同様の対応が必要な場合は、上述sampleのように、 --safe-area-inset-*が利用できます
• targetSdkVersion 34以下、もしくはまだEdge to Edgeの対応をしていない場合、必要な対応はありますか？
  • 現状ありません。Edge to Edgeを有効化する際にisEdgeToEdgeEnabledの有効化をしてください
  • targetSdkVersion 35ではEdge to Edge強制適用のオプトアウト設定が可能ですが、その場合ではオプションの有効化は不要です