jQueryではじめるAjax

第5回 jQuery UIによるユーザインターフェースの改良

この記事を読むのに必要な時間:およそ 15 分

ビデオプレーヤーの実装(1)-Dialog

今までは,検索結果のサムネイルをクリックすると,Youtubeのプレーヤのページを新しく開いていました。 今回は,⁠Dialog」コンポーネントを使って,ダイアログ上でビデオを再生できるようにします。

ビデオプレーヤーの構成

図2 ビデオプレーヤーの構成

図2 ビデオプレーヤーの構成

上部にYoutubeのビデオを表示します。下部にビデオの投稿者,投稿日,再生回数,説明を表示します。

ビデオプレーヤー表示

前回作成したYoutube.jsに,ビデオプレーヤー表示のメソッドを追加しますリスト4⁠。

リスト4 ビデオプレーヤー表示

// --- プレーヤー表示 ---
showPlayer: function(options) {
    $("<div/>")
        .append('<object width="425" height="355"><param name="movie" value="'+ options.url +'"></param><param name="wmode" value="transparent"></param><embed src='+ options.url +' type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>')
        .append('<br/>')
        .append(options.info.show())
        .dialog({
            title: options.title,
            width: 465,
            height: 520,
            close: function(){$(this).parents(".ui-dialog").remove()}
        });
},

まず,コンテナとなるdiv要素を生成します。

$("<div/>")

次に,Youtubeのビデオを埋め込む要素を生成します。

.append('<object width="425" height="355"><param name="movie" value="'+ options.url +'"></param><param name="wmode" value="transparent"></param><embed src='+ options.url +' type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>')

この要素は,Youtubeのプレーヤーページの「埋め込み」にあるタグを,引数のurlプロパティを使用して生成しています。

図3 ⁠埋め込み」タグ

図3 「埋め込み」タグ

引数で渡されるビデオ説明の要素を追加します。show()メソッドを呼び出しているのは,サムネイル上では非表示にしているからです。この要素の生成については後で説明します。

.append(options.info.show())

そして,ダイアログコンポーネントを生成し,表示します。

「Dialog」を使うには,ダイアログとして表示したい要素に対して,dialogメソッドを呼び出すだけです。とても簡単ですね。dialogメソッドには様々なオプションが用意されています。

表3 dialogメソッドのオプション(抜粋)

プロパティ説明デフォルト値
autoOpen trueを指定すると,ダイアログを生成した後,自動的に表示する true
draggable trueを指定すると,タイトルバーをドラッグしてダイアログを移動できる true
height ダイアログの高さを指定する 200
modal モーダルモードでダイアログを表示するかどうかを指定する false
resizable サイズ変更可能が可能かどうかを指定する true
itle タイトルバーに表示する文字列を指定する なし
width ダイアログの横幅を指定する 300

他のオプションについては,UI/Dialog/dialog - jQuery JavaScript Libraryをご覧ください。

ダイアログ生成のコードは次のようになりますリスト5⁠。

リスト5 ダイアログ生成

.dialog({
    title: options.title,
    width: 465,
    height: 520,
    close: function(){$(this).parents(".ui-dialog").remove()}
});

タイトルに,引数から与えられたビデオのタイトルを設定します。横幅を465,高さを520としています。

closeプロパティに設定しているのは,ダイアログが閉じられたときに実行されるコールバック関数です。 ドキュメントには記述がありませんが,closeプロパティに指定することができます。ここでは,ダイアログの要素を削除しています。

ここで指定している,$(this).parents(".ui-dialog")とは何でしょうか。ダイアログは,対象となる要素をいくつかのdiv要素でwrapして構成されています図4⁠。

図4 ダイアログの構成図

図4 ダイアログの構成

まず,ダイアログは<div class="ui-dialog">という要素でwrapされています。その子要素には,<div class="ui-dialog-container">という要素があり,さらにその子要素に,タイトルバーの<div class="ui-dialog-titlebar">とdialogメソッドを呼び出した要素を格納する,<div class="ui-dialog-content">があります。

一度生成したダイアログは,dialog("open")で表示,dialog("close")で閉じることが出来ますが,このアプリケーションではダイアログに表示するコンテンツは毎回異なります。また,プレーヤーを複数表示できるようにするので,表示するたびにダイアログを生成することにします。そうすると際限なくダイアログ要素が増えてしまいますので,閉じるときにダイアログの要素を削除しています。

ドキュメントには,dialog("destroy")でダイアログの要素を削除できるとかいてありますが,エラーが出てうまく動作しません。よって,親要素の<div class="ui-dialog">を辿り,removeメソッドで削除しています。

ダイアログの構成

さらに説明すると,ダイアログのタイトルバーの要素<div class="ui-dialog-titlebar">は,タイトルの文字列を格納する要素<span class="ui-dialog-title">と,⁠x」ボタンの要素<a class="ui-dialog-titlebar-close">を子要素に持っています。

<div class="ui-dialog">
    <div class="ui-dialog-container">
        <div class="ui-dialog-titlebar">
            <span class="ui-dialog-title">{titleプロパティ}</span>
            <a class="ui-dialog-titlebar-close" href="#"><span>X</span></a>
        </div>
        <div class="ui-dialog-content">
            {dialogを呼び出した要素}
        </div>
    </div>
</div>

※dialogメソッドに指定したオプションによって,要素の構成は変わります。

この構成は,テーマを自作する際にもご参考にしてください。

ビデオプレーヤーの生成,表示部分が完成したところで,サムネイルからの呼び出し処理を実装します。

著者プロフィール

池田正一(いけだまさかず)

仕事ではもっぱらJavaを使い,たまにC/C++を書かされ,WebサービスをRubyで開発するプログラマ。ドラえもん好きでドラえもんSuperDatabaseの管理人。stacktrace.jpにて頭の中のStackを出力中。