フロー & ペイウォールビルダーのMediaカテゴリには、Image、Video、Iconの3種類のメディア要素があります。

画像

.JPG、.PNG、または .WEBP ファイルを最大 20 MB までアップロードできます。

アニメーション GIF および WEBP はサポートされていません。動きを加えるには、動画 要素を使用してください。

• Content mode — 高さを設定したときに画像がコンテナをどのように埋めるかを制御します。画像のサイズ設定を参照してください。
• Use custom media ID — 以下のカスタムメディア ID を参照してください。

画像のサイズ設定

画像には固有のアスペクト比があり、指定したボックスのサイズと一致しない場合があります。まず幅を設定し、次に高さをどうするか決めます。

• 高さを自動にすると、画像は元の形を保ちます。高さは設定した幅から自動的に決まります。この場合、コンテンツモードは無効になります（トリミングする必要がないため）。
• 高さを固定または塗りつぶしにすると、ボックスに独自の比率が生まれ、コンテンツモードで不一致を解消します。
  • Fit：画像全体をボックス内に収め、余白が生じます。
  • Fill：はみ出した部分をトリミングします。デフォルトの設定です。

画像をすべての画面幅でトリミングなしに表示するには、幅に Fill、高さに Auto を使用してください。高さを固定すると、上下のトリミング量が画面サイズによって変わってしまいます。

ビデオ

.MP4 または .WEBM ファイルをアップロードできます。ファイルサイズは最大 50 MB、再生時間は最大 30 秒です。最小解像度は 640x640 ピクセルです。

• Aspect — 高さを設定したときに、ビデオがコンテナをどのように埋めるかを制御します。詳しくはビデオのサイズ調整を参照してください。
• Loop — ビデオを繰り返し再生します。デフォルトではオンになっています。
• Use custom media ID — 詳しくは下記のカスタムメディア IDを参照してください。

エディターのプレビューではビデオは再生されません。キャンバスには静止フレームが表示されます。デバイス上での実行時、ビデオはデフォルトでミュート状態で再生されます。Loop がオンの場合、無限に繰り返されます。

ビデオのサイズ調整

ビデオには固有のアスペクト比があり、配置するボックスのサイズと一致しない場合があります。高さの設定によって動作が変わります：

• Hug height（コンテンツに合わせる）。高さはビデオ自身のアスペクト比に従います。
• Fixed または Fill height（固定または引き伸ばし）。Aspect プロパティで不一致を解決します：
  • Fit（フィット）。ボックス内にビデオ全体を収めるようにスケールし、余白が生じます。
  • Fill（フィル）。はみ出した部分をトリミングします。デフォルト設定です。

Adaptyが動画のアップロード時にサイズを読み取れない場合、次の警告が表示されます：「Could not determine video dimensions. Set a fixed height to ensure the video displays correctly.」動画に固定の高さを設定するか、動画を含むコンテナに固定の高さを設定してください。設定しない場合、高さが0に崩れることがあります。

動画終了時にアクションをトリガーする

Video 要素は、動画が末尾に達したときに発火する On playback finished トリガーをサポートしています。Interactions パネルで設定して、別の画面へ遷移したり、CTAを表示したり、その他のアクションを実行できます。

アイコン

バンドルされている Tabler Icons ライブラリから、2種類のビジュアルスタイルで数千のアイコンを選択できます：

• Stroke — アウトラインのみ。
• Filled — 塗りつぶし。

ピッカーでキーワード検索してアイコンを探せます。アイコンの色は Color ピッカーで設定します。保存済みのカラースタイルを選択するか、カスタムカラーを設定してください。

メディアのローカライズ

画像および動画要素は、ロケールごとに異なるファイルを保持できます。

1. Localizations パネルが開いている場合は、閉じてプロパティパネルを表示します。
2. ボトムツールバーで、Locale をターゲットロケールに設定します。
3. 要素を選択し、プロパティパネルでローカライズされたファイルをアップロードします。
4. 完了したら、Locale をデフォルトロケールに戻します。別のロケールが設定されている間は、プロパティパネルで編集したテキストがそのロケールの翻訳として変更されます。

ロケール専用のファイルがない場合、そのロケールにはデフォルトロケールのファイルが表示されます。Localizations パネルから、各ロケール用のファイルをアップロードすることもできます。

制限事項

以下の項目はローカライズできません：

• アイコン
• スクリーンまたはコンテナの Fill — これはスクリーンの背景と、Fill セクションから設定するコンテナ独自の背景画像や動画を指します。画像や動画をロケールごとに変えるには、スタンドアロンの Image または Video 要素として追加してください — それらは メディアのローカライズ で説明するように、ロケール固有のファイルに対応しています。
• カスタムメディア ID

カスタムメディアID

画像や動画要素にカスタムメディアIDを付けておくと、実行時にアプリのコードから差し替えられます。たとえばユーザーが選んだアバターを表示するなど、パーソナライズされたビジュアルに活用できます。

Flow & Paywall Builder でアップロードしたメディアはフォールバックとして機能します。実行時にそのIDに対してコードからメディアが提供されなかった場合、フォールバックが表示されます。

カスタムメディアIDは、同じ種類のファイル同士の入れ替えのみ対応しています。画像は画像、動画は動画への入れ替えが可能です。種類が異なる場合はフォールバックが表示されます。

ImageまたはVideoエレメントでカスタムメディアIDを有効にするには:

1. アップロードエリアの下にある Use custom media ID チェックボックスをオンにする。
2. メディアIDを入力する。
3. フォールバック画像または動画をアップロードする。

アプリのコードでIDを使ってメディアを取得する方法は、アセットのカスタマイズのSDK APIをご覧ください。