画像、動画、アイコン
フロービルダーの Media カテゴリには、Image、Video、Icon の3種類のメディア要素があります。
画像や動画を、ノッチやホームインジケーターの背後を含む画面全体に表示するには、すべてのオフセットを0に設定して固定配置し、Ignore safe area を選択します。詳しくはレイアウトと配置をご覧ください。
画像
.JPG、.PNG、または .WEBP ファイルを最大 20 MB までアップロードできます。
アニメーション GIF や WEBP はサポートされていません。動きを加えたい場合は、ビデオ要素を使用してください。
- Aspect — 画像をコンテナに合わせる方法を設定します：
- Fit — コンテナ内に収まるよう、画像をクロップせずにスケーリングします。
- Fill — コンテナ全体を埋めるよう、画像を引き伸ばします。
- Cover — コンテナ全体をカバーするよう画像をスケーリングし、必要に応じてクロップします。デフォルト。
- Use custom media ID — 以下のカスタムメディア ID を参照してください。
ビデオ
.MP4 または .WEBM ファイルをアップロードできます。ファイルサイズは最大50 MB、長さは最大30秒です。最小解像度は640x640ピクセルです。
- Aspect — Fit、Fill、またはCover。デフォルトはFillです。
- Loop — ビデオをループ再生します。デフォルトでオンです。
- Use custom media ID — 下記のカスタムメディアIDを参照してください。
ビデオはエディタのプレビューでは再生されません。キャンバスには静止フレームが表示されます。デバイス上での実行時、ビデオはデフォルトでミュートで再生されます。Loopがオンの場合、無限に繰り返されます。
動画終了時にアクションをトリガーする
メイン記事：アクション
Video 要素は、動画が末尾に達したときに発火する On playback finished トリガーをサポートしています。Interactions パネルで設定して、別の画面へ遷移したり、CTAを表示したり、その他のアクションを実行できます。
アイコン
バンドルされている Tabler Icons ライブラリから、2種類のビジュアルスタイルで数千のアイコンを選択できます：
- Stroke — アウトラインのみ。
- Filled — 塗りつぶし。
ピッカーでキーワード検索してアイコンを探せます。アイコンの色は Color ピッカーで設定します。保存済みのカラースタイルを選択するか、カスタムカラーを設定してください。
メディアのローカライズ
関連記事：ロケールを追加する
ImageおよびVideo要素は、ロケールごとに異なるファイルを持つことができます。対象のロケールを有効にし、要素を選択して、プロパティパネルでローカライズされたファイルをアップロードしてください。独自のファイルが設定されていないロケールには、デフォルトロケールのファイルが表示されます。
制限事項
以下の要素はローカライズできません：
- アイコン
- 画面の背景
- カスタムメディア ID
カスタムメディアID
画像や動画の背景にもカスタムメディアIDを設定できます。
画像や動画の要素にカスタムメディアIDを付けておくと、アプリのコードから実行時に差し替えることができます。たとえばユーザーが選んだアバターを表示するなど、パーソナライズされたビジュアルに活用してください。
フローBuilder でアップロードしたメディアはフォールバックとして機能します。実行時にコードからそのIDのメディアが提供されなかった場合、フォールバックが表示されます。
ImageまたはVideo要素でカスタムメディアIDを有効にするには：
- アップロードエリアの下にある Use custom media ID チェックボックスを選択します。
- メディア ID を入力します。
- フォールバック画像または動画をアップロードします。
アプリのコードでは、メディア ID を使ってメディアを取得します。SDK API の詳細については、アセットのカスタマイズ を参照してください。