jQueryを使ってyoutubeの特定ユーザーのチャンネルをリスト化してみる

先日、サイトにyoutubeのチャンネルのリストを埋め込みたいという要望がありました。
YouTubeのAPIを調べてみるとウィジェットがないようなので、サクっと作ることにしました。
調べて触ってみるとなかなか面白かったので、サンプルの一つとしてデモを作ってみました。

特定ユーザーのフィードを取得するには

ひとまずYouTube Data APIのドキュメントを見てみます。
すると、特定のユーザーがアップロードした動画にはこのように書いてあります。

http://gdata.youtube.com/feeds/api/users/username/uploads

「username」を変えてねとのことなので、ここではAppleのチャンネルを取得することにしましょうか。

http://gdata.youtube.com/feeds/api/users/Apple/uploads

JSON形式でフィードを取得

JavaScriptではJSON形式でしかフィードを取得できないようなので、jQueryのgetJSONを使って取得します。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7.1");</script>
<script type="text/javascript">
$(document).ready(function() {
	var url = "http://gdata.youtube.com/feeds/api/users/Apple/uploads";
	$.getJSON(url, { alt:'json' }, function(json) {
		//処理を書く
	});
});
</script>

logを見てみるとデータはこんな感じになってる。

entryに動画の情報があるようなので、ここから必要な項目のみ取り出していきます。

必要な項目を抜き出してみる

今回使いたいデータはこんなところ。

  • 動画の投稿者
  • サムネイル画像
  • リンク先
  • タイトル
  • 動画の時間
  • 再生回数

それぞれに該当するのが

  • entry.author[0].name.$t
  • entry.media$group.media$thumbnail[2].url
  • entry.media$group.media$player[0].url
  • entry.media$group.media$title.$t
  • entry.media$group.yt$duration.seconds
  • entry.yt$statistics.viewCount

なのでループして1件ずつ抜き出していきます。

$(document).ready(function() {
	var url = "http://gdata.youtube.com/feeds/api/users/Apple/uploads";
	$.getJSON(url, { alt:'json' }, function(json) {
		var entry = json.feed.entry; //entryにアクセスしやすく
		var str = '';
		
		for (var i = 0; i < entry.length; i++) {
			var media = entry[i].media$group; //media$groupにアクセスしやすく
			
			var author = entry[i].author[0].name.$t; //動画投稿者
			var src = media.media$thumbnail[2].url; //小さいサムネイル画像
			var href = media.media$player[0].url; //リンク先
			var title = media.media$title.$t; //タイトル
			var duration = media.yt$duration.seconds; //動画の時間
			var viewCount = entry[i].yt$statistics.viewCount; //再生回数
			
			//liタグ作成
			str += '<li><a href="' + href + '">';
			str += '<div class="left"><img class="thumb" src="' + src + '"><span class="duration">' + duration + '</span></div>';
			str += '<div class="right"><span class="title">' + title + '</span><span class="author">' + author + '</span><span class="viewCount">再生回数:' + viewCount + '回</span></div>';
			str += '</a></li>';
		}
		
		$('ul#playList').append(str);
	});
});

html

<body>
<ul id="playList">
</ul>
</body>

見た目を整える-JavaScript

ひとまず抜き出したけど、時間が秒になってたり再生回数にコンマがなかったりなので、この辺を整えるために関数を作ったり。
説明は省略。

$(document).ready(function() {
	var url = "http://gdata.youtube.com/feeds/api/users/Apple/uploads";
	$.getJSON(url, { alt:'json' }, function(json) {
		var entry = json.feed.entry; //entryにアクセスしやすく
		var str = '';
		
		for (var i = 0; i < entry.length; i++) {
			var media = entry[i].media$group; //media$groupにアクセスしやすく
			
			var author = entry[i].author[0].name.$t; //動画投稿者
			var src = media.media$thumbnail[2].url; //120×90の小さいサムネイル画像
			var href = media.media$player[0].url; //リンク先
			var title = media.media$title.$t; //タイトル
			var duration = formatDuration(media.yt$duration.seconds); //動画の時間
			var viewCount = comma(entry[i].yt$statistics.viewCount); //再生回数
			
			//liタグ作成
			str += '<li><a href="' + href + '">';
			str += '<div class="left"><img class="thumb" src="' + src + '"><span class="duration">' + duration + '</span></div>';
			str += '<div class="right"><span class="title">' + title + '</span><span class="author">' + author + '</span><span class="viewCount">再生回数:' + viewCount + '回</span></div>';
			str += '</a></li>';
		}
		
		$('ul#playList').append(str);
	});
});

//時間の表記
function formatDuration(duration) {
	var hour = Math.floor(duration / 3600); //時
	var minute = Math.floor(duration / 60) % 60; //分
	var second = duration % 60; //秒
	
	if (hour) {
		return hour.toString() + ':' + zero(minute) + ':' + zero(second);
	} else {
		return minute.toString() + ':' + zero(second);
	}
}

//10未満なら先頭に0をつける
function zero(num) {
	if (num < 10) {
		return '0' + num.toString();
	} else {
		return num.toString();
	}
}

//3桁ごとにカンマをつける
function comma(num) {
	var str = new String(num).replace(/,/g, "");
	while(str != (str = str.replace(/^(-?\d+)(\d{3})/, "$1,$2")))
	return str;
}

見た目を整える-CSS

あとはCSSで見た目を整えるだけです。
気をつけるところといえば、サムネイル画像が4:3になっており、16:9の動画には上下に黒みが追加されているので、この黒い部分をoverflow:hiddenで隠してやることです。

画像の幅が120pxなので、これを基準に16:9の高さを算出します。
120を16で割ってやると120px / 16 = 7.5なので、黒みを除いた画像の高さは9 × 7.5 = 67.5px(切り上げて68pxとする)になります。
ひとまずdiv.leftのheightが68pxに決まりました。

div.left {
	width: 120px; height: 68px;
	overflow: hidden;
}

あとは画像を黒み分だけ上に持ちあげてやるだけ。
元の画像の高さが90pxなので、(90px - 68px) / 2 = 11pxが黒み分の高さになります。
なので11pxほどネガティブマージンで持ちあげてやります。

img.thumb  {
	margin-top: -11px;
}

あとはお好きなように。

* {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

ul {
	width: 320px;
	list-style: none;
}

li {
	position: relative;
	padding: 3px;
	border-bottom: 1px solid #EAEAEA;
}

a {text-decoration: none;}

div.left {
	position: relative;
	width: 120px; height: 68px;
	overflow: hidden;
}

img.thumb  {
	margin-top: -11px;
	vertical-align: bottom;
}

.duration {
	position: absolute;
	right: 3px; bottom: 3px;
	padding: 3px 5px;
	background: rgba(0,0,0,.5);
	color: #FFF;
	font-size: 10px;
	font-weight: bold;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

div.right {
	position: absolute;
	width: 188px;
	right: 0; top: 0;
	color: #242424;
	font-size: 12px;
}

div.right span {display: block;}

span.author,
span.viewCount {
	text-align: right;
}

youtubeデモ - jsdo.it - share JavaScript, HTML5 and CSS

今回のデモはAPIのほんの一部でドキュメントを見てみると色々とおもしろそうなことができそうな気がします。
機会があれば、見て・触って・楽しいものを作ってみてください。



この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ