フロー & ペイウォールビルダーの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 ファイルをアップロードできます。サイズは50MB以内、長さは30秒以内です。最小解像度は640x640ピクセルです。

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

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

Video要素は、ロケールごとに異なる動画を設定できます。ダークモードで別の動画を表示するには、要素にダークファイルを追加してください。

ビデオのサイズ調整

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

• 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. プロパティパネルで、ローカライズ済みのファイルをアップロードします。
5. Locale をデフォルトロケールに戻して、以降の編集がデフォルトロケールに適用されるようにします。

カラースタイルの場合は、ターゲットロケールがアクティブな状態でスタイル内の画像または動画を差し替えてください。

デフォルトロケールのファイルが存在しない場合、ユーザーにはデフォルトロケールのファイルが表示されます。カラースタイルの場合、各バージョンはデフォルトロケールに個別にフォールバックします。また、Localizationsパネルで各ロケールのファイルをアップロードすることもできます。

制限事項

アイコンやカスタムメディアIDはローカライズできません。カスタムメディアIDを持つ画像や動画をローカライズするには、そのIDを使って実行時にローカライズ済みファイルに置き換えてください。

カスタムメディアID

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

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

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

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

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

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