BEMLでレイアウトを組む

(ご紹介するBEML機能はProfessionalエディション以上でご利用いただけます)

前回の記事では、BEMLを使わなくても出来るデザインの範囲をご紹介しました。BEMLを使わなくても、色味の変更やロゴの設定などで、ある程度の見た目のカスタマイズが出来ることをご理解頂けたかと思います。
ただ、プレイヤー上のそれぞれのコンポーネントの位置やサイズの変更が必要な場合は、BEMLでのカスタマイズが必要となります。では、実際にBEMLで簡単なデザインを組んでみましょう。

今回は、liquidレイアウトでデザインを組むことにします。
liquidレイアウトとは、プレイヤーのサイズに応じて自動的に伸び縮みしてくれるレイアウトを指します。標準のプレイヤーでは、Video Playerテンプレートなど、プレイリストを持てないタイプのプレイヤーテンプレートがliquidレイアウトになっています。

それでは、実際にBEMLを作成します。まず、Publishingモジュールに行き、[新規テンプレート]ボタンを押します。
新規テンプレートを作成すると、以下のタグがデフォルトで設定されています(この状態が一番まっさらな状態で、何も表示されません)。

<Runtime>
 <Layout id="application">
  <!-- Insert layout here -->
 </Layout>
</Runtime>

動画プレイヤーを表示するためのVideoPlayerタグを置きます。
Layoutタグの内側が、実際に描画されるコンポーネントを置く部分で、HTMLで言うとbodyタグに相当します。

<Runtime>
 <Layout id="application">
  <VideoPlayer id="videoPlayer" />
 </Layout>
</Runtime>

このBEMLタグを貼り付けた後、テンプレートの幅×高さを480×366に設定し、[テンプレートのプレビュー]を押すと、入力したBEMLのプレビューが表示されます。


図1: BEML編集画面とプレビュー結果

VideoPlayerタグ自身には幅・高さを設定していない状態ですが、liquidレイアウトのため、VideoPlayerが領域全体にめいっぱい広がるように表示されています。
例えば、この状態でテンプレートの幅×高さを480×600など変則的なものに変更してプレビューしてみると、VideoPlayerの幅・高さが追随していることがわかると思います。


図2: BEMLの幅・高さを480×600にしたプレビュー

次に、動画の名前を表示するために、テキストを表示するコンポーネントであるTitleLabelタグを置きます。
Layoutタグなど、レイアウト用のタグの中に複数のタグを置く場合(今回の場合VideoPlayerとTitleLabel)、それらのタグの配置をどのように行うかをまず設定する必要があります。
今回は、VideoPlayerとTitleLabelを縦に並べて表示するため、Layoutタグの属性に「boxType="vbox"」を付け足します(Layoutの子タグを縦に並べてレイアウトするという指示です)。
その後、TitleLabelタグを付け足します。ここまででBEMLは以下のようになります。

<Runtime>
 <Layout id="application" boxType="vbox">
  <VideoPlayer id="videoPlayer" />
  <TitleLabel text="テキスト123" size="14" height="18" />
 </Layout>
</Runtime>


図3: TitleLabelタグを付け足した状態でプレビュー

試しに「boxType="vbox"」属性を取り除くと、レイアウトが意図した形になっていないことが確認できると思います。


図4: 「boxType="vbox"」を取り除くと、テキストが意図しない位置に配置される

最後に、仮で置いた『テキスト123』の代わりに、実際の動画名が表示されるようにデータバインディングをします。
データバインディングとは、他のコンポーネントで表示しているデータを引っ張ってきて表示するというもので、今回の場合はVideoPlayerコンポーネントで表示している動画の名前をTitleLabelのtextに割り当てます。
書き方は「text="{videoPlayer.video.displayName}”」という風に記述し、データをどこから引っ張ってくるかを波括弧内に記します。
{videoPlayer.video.displayName}とは、『idがvideoPlayerとなっているコンポーネント内のvideoオブジェクトの中のdisplayNameフィールド値(Studio上の動画名)をここに割り当てる』という意味です。こうすることで、Studio上の動画名ををTitleLabelにバインドすることが出来ます。


図5: のdisplayNameをデータバインドすると、プレビューでは「選択した動画名」となる

displayName以外にもshortDescriptionやlinkTextなど、VideoDTOに存在するものを割り当てることが出来ます。例えば、以下のように書くと、Studio上の関連リンクに設定した短い説明を表示することができます。短い説明は1行に収まらないことがあるので、「multiline="true" 」で複数行表示を許可しています。

<Runtime>
 <Layout id="application" boxType="vbox">
  <VideoPlayer id="videoPlayer"/>
  <TitleLabel text="{videoPlayer.video.displayName}" size="14" height="18" />
  <Label text="{videoPlayer.video.shortDescription}" size="12" height="28" multiline="true" />
 </Layout>
</Runtime>


図6: プレイヤーの下に、動画名と短い説明の表示できるプレイヤーの完成

このように、BEMLでは、テキスト(XML)の編集を行う事で、プレイヤーのコンポーネントそれぞれの表示位置やサイズを変更したり、コンポーネントでどのデータを表示するかのデータバインディングが行えます。
また、BEMLで作成したプレイヤーは自動的にスマートプレイヤー対応になるため、同じレイアウトがiPhone/iPad(HTML5)でも再現できる点も重要です(ただし、BEML内で使用したタグによっては、スマートプレイヤー対応にならない場合もあります。詳細はこちら。)