BEMLを使うべき場面とは

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

前回はBEMLを使うことで、レイアウトを自在に組めるということをご紹介しました(標準のプレイヤーもBEMLを使用してレイアウトが組まれています)。
では、BEMLを使わないとできないカスタマイズと、BEMLでなくてもできるカスタマイズを区別するにはどうしたらよいのでしょうか。

それを判断するためには、Publisingモジュールのスタイル機能でできることを把握するのが早道です。
スタイルの機能では、以下のようなことが行えます。

  • プレイヤーの背景に敷く画像の設定
  • 配色、グラデーションの変更
  • ロゴ画像の設定

例えば、下にある2つのプレイヤーのスクリーンショットは、スタイルの機能を使ってカスタマイズした例です。
 


図1. オレンジページ キッチンTV http://www.orangepage.net/op/kitchentv/
 


図2. テレビドガッチ カンブリア宮殿 http://dogatch.jp/news_info/cambria/
 

このように、配色を変えるだけでもずいぶんと違った印象を与えることができます。スタイル機能はブラウザ上の操作だけで完結し、またWYSIWYGで行えるため、まずはこの機能を使って希望のプレイヤーの見た目を実現できるかを検討すると良いでしょう。
 


図3. スタイルエディターのスクリーンショット
 

スタイル機能だけでは実現が難しい場合、例えば、プレイリストの表示位置を右から下に変更したい、テキストのサイズを大きくしたい、など、プレイヤーにコンポーネント(部品)を付け足す必要があったり、各コンポーネントのサイズ自体を変更したい場合、BEMLの出番となります。

例として、動画名を表示しているテキストの文字サイズを大きくしてみましょう。方法は以下の通りです。

  1. Publishingモジュールを開く
  2. テンプレートの項目を開く
  3. 『Video Player with Logo』テンプレートを選択し、複製ボタンをクリック
  4. テンプレートが『Video Player with Logoコピー』としてコピーされるので、テンプレート中のBEMLを一部変更。11行目のTitleLabelタグの『size="18"』を『size="24"』へ変更。
  5. プレビューを押す。『size="18"』と『size="24"』の時を比べると、後者の方が「選択した動画」という文字が大きく表示されている。

 


図4. BEMLの編集画面
 

このような作業をすると、動画名が大きく表示できていることが確認できると思います。
この際、レイアウトの修正がテキスト(BEML)を編集するだけで行えている点も重要です(他のプレイヤーのように、レイアウト反映を確認するためにFlashでSWFコンパイルし確認するという作業がありません)。

以下はBEMLでレイアウトを組んだプレイヤーの例です。BEMLでは、外部画像を読み込む機能もあるため、このプレイヤーはまるで独自にFlashで作成したような凝った見た目になっています。
 


図5. Teaching Channelのプレイヤー http://www.teachingchannel.org/videos/climate-change-in-a-bottle-overview