jQueryでYoutubeの指定したチャンネルの最新動画を表示する方法（お手軽版）

Posted: 2015.11.05 / Category: javascript, PHP / Tag: API, jQuery

YoutubeAPI v2が廃止になりまして過去に書いた方法が使えなくなったので、とりあえずお手軽に表示する方法をご紹介します。

チャンネルIDを調べる

チャンネルのFeedを取得するには、そのチャンネルIDをあらかじめ調べる必要があります。
Youtubeのチャンネルページを表示すると下記のようなURLになっていると思います。

https://www.youtube.com/channel/xxxxxxxxxxxx

「channel/」に続く文字列がチャンネルIDになります。

他にもログインした状態で「アカウントの詳細設定」を開くことでも確認できます。
詳細は下記をご覧ください。

YouTube ユーザー ID とチャンネル ID – YouTube ヘルプ

Feed情報を取得する

チャンネルのFeedを取得するURLは下記になります。

https://www.youtube.com/feeds/videos.xml?channel_id=xxxxxxxxxxxx

channel_id= の部分に先ほど調べたチャンネルIDを入れてください。

jQueryで表示する（サムネイル＋リンク）

Feed（XML）で表示できたしあとは楽勝じゃんと思いきやそうでもありません。
JSは基本的にhttpsだと（？）取得できない仕組みになっているようです。
そこで Google Feed API の出番です。
とはいってもそれもあまり難しいことではありません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
    $.getJSON(
        'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
        {
            //xxxxxxxを表示したいチャンネルidに置き換えてください。
            q: 'https://www.youtube.com/feeds/videos.xml?channel_id=xxxxxxxxxxxxxxxx',
            v: '1.0',
            num: 10 //取得数
        },
        function (data) {
            $.each(data.responseData.feed.entries, function(i, item){
                $('#youtube ul').append('<li><a href="'+ item.link + '">' +
                        item.title + '<br><img src="' +
                        item.mediaGroups[0].contents[0].thumbnails[0].url + '"></a></li>');
            });
        }
    );
});
</script>

あとはHTMLで入れ物を作りましょう。

<div id="youtube"><ul></ul></div>

jQueryで表示する（動画埋め込みバージョン）

動画を埋め込んで再生させたい場合はこうです。

function (data) {
    $.each(data.responseData.feed.entries, function(i, item){
        $('#youtube ul').append('<li><iframe width="'+ item.mediaGroups[0].contents[0].width +'" height="'+ item.mediaGroups[0].contents[0].height +'" src="'+
            item.mediaGroups[0].contents[0].url + '" frameborder="0" allowfullscreen></iframe></li>');
    });
}

PHPで表示

PHPみたいなサーバースクリプトならGoogle Feed通さなくても大丈夫なようです。

<?php
$url = "https://www.youtube.com/feeds/videos.xml?channel_id=xxxxxxxxxxxxxxxxxxxxxxx";
$rss = file_get_contents($url);
$rss = preg_replace("/<([^>]+?):(.+?)>/", "<$1_$2>", $rss);
$rss = simplexml_load_string($rss,'SimpleXMLElement',LIBXML_NOCDATA);

foreach($rss->entry as $value): ?>
    <iframe width="480" height="360" src="https://www.youtube.com/embed/<?php echo htmlspecialchars($value->yt_videoId, ENT_QUOTES, 'UTF-8') ?>" frameborder="0" allowfullscreen></iframe>
<?php endforeach; ?>

参考：RSS（XML）の名前空間やCDATAの値を取得する方法

以上です。
いろいろ細かいことしたいときはAPIのバージョン3をちゃんとに使ったほうがいいと思います。