jQueryではじめるAjax

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

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

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

ビデオプレーヤーの起動

前回までの実装では,サムネイルのクリックイベントハンドラは次のように記述されていました。

.click(function(){window.open(group.media$player[0].url, null)})

この部分を削除し,ビデオプレーヤーを表示するように修正しますリスト6⁠。

リスト6 サムネイル クリックイベントハンドラ

// クリックしたらプレーヤーを表示
.click(function(){
    if (video_url == '') {
        // プレーヤーページ(Youtube)
        window.open(group.media$player[0].url, null)
    } else {
        // プレーヤー(ダイアログ)
        yt.showPlayer({
            url  : video_url,
            title: item.title.$t,
            info : video_info
        });
    }
})

showPlayerメソッドのurlプロパティに指定しているvideo_urlは,YoutubeビデオのURLです。feed.entry[n].media$group[n].media$content[0].urlで取得することができます。

なお,Youtubeにはリクエストによる埋め込み無効なビデオ(Youtubeのプレーヤページでのみ表示が可能なビデオ)が存在します。その場合はmedia$contentプロパティが存在しません。よって,video_urlは次のように定義しましたリスト7⁠。

リスト7 埋め込み用ビデオのURLの取得

// 埋め込み用ビデオのURL
var video_url = group.media$content == null ? '' : group.media$content[0].url;

もし,video_urlが空の場合は,今までどおりYoutubeのプレーヤページを表示するように処理を振り分けています。

showPlayerメソッドのtitleプロパティに指定しているのは,Youtubeビデオのタイトルです。feed.entry[n].title.$tで取得することができます。

showPlayerメソッドのinfoプロパティに指定しているのは,プレーヤの下部に表示するビデオの詳細情報を格納した要素です。次のように定義しましたリスト8⁠。

リスト8 ビデオ詳細情報

// プレーヤーの下に表示する詳細項目
var video_info = $("<div/>").addClass("video_info")
    .append($("<span/>").addClass("title").text("投稿者 :")).append(item.author[0].name.$t).append('<br/>')
    .append($("<span/>").addClass("title").text("投稿日 :")).append(item.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, "$1年$2月$3日")).append('<br/>')
    .append($("<span/>").addClass("title").text("再生回数:")).append(((item.yt$statistics == null) ? "0" : item.yt$statistics.viewCount)).append('<br/>')
    .append($("<span/>").addClass("title").text("説明  :")).append(item.content.$t).append('<br/>')

まず,class="video_info"で定義されるdiv要素を作成します。

子要素に投稿者,投稿日,再生回数,説明を格納したspan要素を追加します。

なお,Youtube APIが返す投稿日などの日時データは,RFC 3339フォーマットです。

  • 例⁠⁠ "2007-12-09T23:58:53.000-08:00"

この文字列からreplaceメソッドを使用して年月日を抜き出しています。

replace(/^(\d{4})-(\d{2})-(\d{2}).*/, "$1年$2月$3日")

お気に入り機能のための情報の保持

この後実装するお気に入り機能のために,ビデオのURL,YoutubeのプレーヤページのURL,ビデオの詳細情報を非表示にして保持しておきましょうリスト9⁠。

リスト9 お気に入り機能のための情報の保持

.append($("<span/>").addClass("video_url").text(video_url).hide())                  // お気に入りのための非表示要素(video_url)
.append($("<span/>").addClass("player_url").text(group.media$player[0].url).hide()) // お気に入りのための非表示要素(player_url)
.append(video_info.hide())

以上で,ビデオプレーヤーの実装は終了です。今回修正したサムネイル生成部分のソースは次のようになりましたリスト10⁠。

リスト10 サムネイル生成

// プレーヤーの下に表示する詳細項目
var video_info = $("<div/>").addClass("video_info")
    .append($("<span/>").addClass("title").text("投稿者 :")).append(item.author[0].name.$t).append('<br/>')
    .append($("<span/>").addClass("title").text("投稿日 :")).append(item.published.$t.replace(/^(\d{4})-(\d{2})-(\d{2}).*/, "$1年$2月$3日")).append('<br/>')
    .append($("<span/>").addClass("title").text("再生回数:")).append(((item.yt$statistics == null) ? "0" : item.yt$statistics.viewCount)).append('<br/>')
    .append($("<span/>").addClass("title").text("説明  :")).append(item.content.$t).append('<br/>')

// 埋め込み用ビデオのURL
var video_url = group.media$content == null ? '' : group.media$content[0].url;

// サムネイルを生成
$("<div/>").addClass("thumbnail")
    .append($("<img/>").attr("src", group.media$thumbnail[0].url)).append("<br/>")
    .append($("<span/>").addClass("title").text(item.title.$t)).append("<br/>")
    .append($("<span/>").addClass("info").text("再生回数:" + ((item.yt$statistics == null) ? "0" : item.yt$statistics.viewCount)))
    .append($("<span/>").addClass("video_url").text(video_url).hide())                  // お気に入りのための非表示要素(video_url)
    .append($("<span/>").addClass("player_url").text(group.media$player[0].url).hide()) // お気に入りのための非表示要素(player_url)
    .append(video_info.hide())                                                          // お気に入りのための非表示要素(video_info)
    // クリックしたらプレーヤーを表示
    .click(function(){
        if (video_url == '') {
            // プレーヤーページ(Youtube)
            window.open(group.media$player[0].url, null)
        } else {
            // プレーヤー(ダイアログ)
            yt.showPlayer({
                url  : video_url,
                title: item.title.$t,
                info : video_info
            });
        }
    })
    .appendTo("#videos");

著者プロフィール

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

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