概要

ウィジェットは、ダイナミックレイアウトシャウトアウトで使用されるビルディングブロックであり、フレーム内に構造化された柔軟なコンテンツを作成します。 テキスト、画像、ボタン、カルーセルなど、さまざまなウィジェットタイプを組み合わせることで、コンテンツと画面サイズに合わせたレスポンシブなレイアウトを設計できます。

この記事では、レイアウトの動作、間隔、ウィジェット固有の制限など、ダイナミックレイアウトのウィジェットの追加、スタイル、管理方法を説明します。

ウィジェットの追加

フレームにウィジェットを追加するには：

1. プロパティバッグの「プラス」アイコンを選択します。
2. ウィジェットをキャンバスにドラッグします。
3. 青色のインジケーターを使用して、ウィジェットの配置場所を選択します。

スタイルウィジェット

ウィジェットの外観と動作をプロパティバッグからカスタマイズできます。

画像

• 画像をアップロードする
• コーナー半径、境界線の幅、境界線の色を調整します。
• ユーザーと画像とのインタラクションにアクションを割り当てます：
  • 外部URLへのリダイレクト
  • メールクライアントを開く

アクションを選択すると、アクションインジケーターがニュートラルから緑に変わります。

テキスト

• フォント、フォントサイズ、テキスト色を選択します。
• テキストの配置を設定します。

ライン

• コーナー半径の調整
• 境界の幅、境界の色、ラインの色を変更します。

動画

• から動画を追加します。
  • YouTube
  • Vimeo
  • アセットライブラリ
• 高度な再生コントロールを使用して、動画をカスタマイズします。
  • トリム動画：カスタム開始時間と終了時間
  • ループ再生：動画は終了すると自動的に再開されます。
  • 自動再生：シャウトアウトが表示されると、動画は自動的に再生を開始します。
  • サムネイル：任意の画像をカバーとして選択します。
  • 再生コントロール：一時停止、前方/後方に移動、YouTubeを開く

ウェブビュー

• URLを貼り付け、外部コンテンツを表示します。
• ビジュアルデザイナーでコンテンツを直接プレビューします。

ボタン

• ボタンに実行するアクションの割り当て
• Enterキーを押すことで、複数行のボタンテキストを作成します。

アクションを選択すると、アクションインジケーターが赤から緑に変わります。

ウィジェットの管理

サイズ変更

ウィジェットのサイズを変更するには、次のいずれかを実行します。

• ウィジェットを選択し、ハンドルバーをドラッグします。
• サイドバーの「サイズ＆間隔」コントロールを使用します。

ボタンサイズの制御：

• 他のウィジェットからの距離を定義する外側スペース
• 内部スペース。ボタンテキストと境界線の間の距離を定義します。

ストレッチ

ストレッチアイコンを選択すると、ウィジェットを水平に伸ばすことができます。

• アスペクト比がロックされると、ウィジェットは元の寸法に基づいて比例して伸びます。
• アスペクト比がロック解除されると、ウィジェットがフレーム内の水平スペース全体を埋めます。

複数のウィジェットが1行に表示される場合、各ウィジェットの幅が自動的に調整され、利用可能なスペースを均等に埋めます。 例：

• 2つのウィジェットが、それぞれ行の50%を占めます。
• 4つのウィジェットが、それぞれ行の25%を占めます。

ウィジェットの高さは、手動で制御できます。

外部スペーシング

「外側スペース」は、ウィジェット間のスペースを決定します。

外側の間隔を調整するには：

• ウィジェットを選択します。
• プロパティバッグの外側スペース値を更新します。

デフォルトでは、すべての側に同じ値が適用されます。 各側に異なる値を設定するには：

• 枠線アイコンを選択します。
• 個々のサイド値を調整します。

間隔値が異なる場合、インジケーターは「混合」と表示されます。

カルーセルウィジェット

デフォルトで、カルーセルウィジェットを追加すると、3つのスライドが作成されます。それぞれに画像とテキストが含まれます。

カルーセルウィジェットでは、次のことができます：

• 各スライド内に他のウィジェットを追加します。テキスト、画像、ボタン、ウェブビュー、ラインウィジェットなど。
• 自動再生を有効にし、スライドを自動的に移動します。
• シャウトアウトの下部にあるドットインジケーターを使用して、スライドをナビゲートします。
• ドラッグしてスライドを並べ替える

追加の動作と制限：

• シャウトアウトの高さは、最も高いスライドに基づきます。
• 境界、コーナー、構造などのレイアウト設定は、すべてのスライドに適用されます。
• 背景色、背景画像、内容は、スライドごとに異なる場合があります。
• 最大5つのスライドがサポートされます。
• シャウトアウトごとにカルーセルウィジェットは1つだけ追加できます。
• スライドを複製すると、カルーセルに別のスライドが追加されます。

また、ボタン、テキスト、画像に「次へ」と「前へ」のアクションを割り当て、カスタムナビゲーションを作成できます。

動画ウィジェット

動画ウィジェットでは、YouTubeまたはVimeoの動画をビジュアルデザイナーに直接埋め込むことができます。

再生オプションには、次のものがあります：

• 動画の開始時間と終了時間のトリミング
• ループ再生
• シャウトアウトが表示されたときに自動再生

追加コントロール：

• カスタムサムネイル画像を選択します。
• 一時停止、または前後にスキップします。
• YouTubeで動画を開きます。

Tip Tuesday動画

シャウトアウトの背景画像、カルーセル、遅延

技術的なノート

• 1つのフレーム内の1行に最大4つのウィジェットを追加できます。