Ajaxで動画をポップアップ
- 公開日 : 2010年1月14日 (2011年3月22日 更新)
- カテゴリー : ユーザーインターフェース (UI) , 情報アーキテクチャ (IA)
先に公開したコラム記事「Ajaxによる画像の拡大」で、画像拡大のAjaxポップアップの例として、Highslide JSというライブラリーを使用しました。今回は、このHighslide JSを用いて、動画のポップアップ表示について触れたいと思います。
Highslide JSは個人的にオススメのライブラリーですが、数あるポップアップ用ライブラリー（いわゆる「Lightbox系」と呼ばれているもの）の中では、以下の点で秀逸だからです。
- 開いたポップアップをドラッグで自由に移動できる。
- 複数のポップアップを同時に開くことができる。
- ポップアップを開いた状態で、背景にあるコンテンツ本文側を操作できる。
- キーボード操作によって基本操作（ポップアップを開く/閉じる、など）ができる。
そこで今回はAjaxポップアップの応用例として、このHighslide JSを使って、YouTube上にある動画を扱ってみます。サムネイル画像をクリックするとポップアップが開き、動画を再生することができる、というユーザーインターフェース（UI）です。
自サイトでYouTube動画を表示する場合は、コラム記事「動画共有サービスでお手軽にユーザーエクスペリエンス向上」でお見せした例のように、YouTube画面（動画とその操作子）をWebページに直接埋め込む手法が基本になります。サムネイルをわざわざクリックしなくても「動画が視聴できる」ことがユーザーに伝わりやすいため、一般論的には、このほうがユーザビリティが優れていると言えます。
ただしWebページの内容によっては、複数の動画を同一ページ内で提示したいこともあるでしょう。その場合、YouTube画面を、そのまま動画の数だけ埋め込んで表示すると、コンテンツ領域の大きな面積を占めてしまい、情報デザインに支障が出る（情報のまとまり感が見えにくく、ページレイアウトが間延びしてしまう）恐れがあります。サムネイル画像をコンパクトに配置し、各々をクリックするとポップアップで動画が開くことができれば、こうしたページレイアウト上の問題を解消できそうですね。試しにここでは、ニューヨーク近代美術館（MoMA: The Museum of Modern Art）で開催された、「Home Delivery」展の概要紹介（walkthrough）を題材に、下記のように実装してみました。
ニューヨーク近代美術館（MoMA）: 「Home Delivery」展の概要
画像をクリックすると動画をポップアップ表示します（Internet Explorer、Firefox、Operaをお使いの場合は[Enter]キーでも表示できます）。ポップアップ表示は上部の余白部分をドラッグして移動できます。「閉じる」または×印をクリックするか、[Enter]または[Esc]キーを押すとポップアップ表示を閉じます。
実装してみてわかったことですが、静止画像（写真など）を拡大表示するのとは異なり、動画のポップアップ表示にはいくつか細かな問題があります。たとえば：
- ある動画を再生した状態でポップアップを閉じると、動画の再生は自動的には止まらない。
- ある動画を再生しながら別の動画を再生すると、音声が混ざってしまい聞き取れなくなる。
- 静止画像と異なり、再生/停止といった追加操作をポップアップ表示領域の中で行なう必要がある。動画表示領域をなんとかクリックできれば、キーボード操作による再生/停止などの制御は可能だが、基本的にマウス操作が前提となるので、アクセシビリティの面で課題が残る。
デザインは常にトレードオフなので、このようなポップアップによる動画再生のソリューションが功を奏するケースもあれば、かえってユーザー行動を妨げてしまうケースもあることでしょう。最終的には、ターゲットユーザー像とビジネスゴール（動画を見せることでユーザーにどうして欲しいのか？）の両面から充分検討した上で判断するしかありませんが、UI設計の一例として、参考になれば幸いです。
