YouTube Data APIで動画を検索する（YouTubeの音楽プレーヤーサイトを作ろう！その３）

YouTube Data APIで動画を検索する

動画を検索するには、YouTube Data API v3を使用します。まずは、https://console.developers.google.comからAPIキーを入手します。

https://www.googleapis.com/youtube/v3/search?type=video&part=snippet&q=KEYWORD&key=API_KEY

上記のURLを叩くと検索結果がJSONで得られます。

PHPで実装

YouTubeの動画検索をjavascriptで実装すると、APIキーが流出する恐れがあるので、今回はPHPで実装することにします。まず、javascriptで検索キーワードの入力を行い、ajaxによって入力されたキーワードをPHPに渡してAPIを実行します。HTMLとjavascriptはこんなかんじ。

HTML

YouTube:<input id="YouTube" type="text"/><button id="ajax_YouTube">検索</button>
<div class="result"></div>

テキストボックスに検索ワードを入力し、検索ボタンをクリックすると、resultの部分に検索結果を表示します。

javascript(ajax)

$(function(){
    // Ajax button click
    $('#ajax_YouTube').on('click',function(){
        $.ajax({
            url:'PHPファイルURL.php',
            type:'POST',
            data:{
                'search_str':$('#YouTube').val()
            }
        })
        // Ajaxリクエストが成功した時発動
        .done( (data) => {
            $('.result').html(data);
        })
        // Ajaxリクエストが失敗した時発動
        .fail( (data) => {
            $('.result').html(data);
        })
        // Ajaxリクエストが成功・失敗どちらでも発動
        .always( (data) => {

        });
    });
});

検索ボタンを押すと、PHPを実行し、結果をresultの部分に表示します。

PHP

PHPではAPIから実際に情報を取得します。ここでは、APIから取得した情報の中から、タイトル、サムネイル、アップロード日付、チャンネル名、動画の説明の情報を表示しています。また、タイトルとサムネイルにはYouTubeの動画ページへのリンク、チャンネル名にはチャンネルのページへのリンクを追加しています。

<?php
    header('Content-type: text/plain; charset= UTF-8');
    if(isset($_POST['search_str'])){
        $search_str = $_POST['search_str'];//検索ワードの取得
        $disp_str = htmlEntities($_POST['search_str']);//検索ワード（表示用）
    }else{
        $search_str = "";
    }

    if($search_str != "" ){
        $apiKey = APIキー;
        $apiAddress_y = "https://www.googleapis.com/youtube/v3/search?type=video&q=";
        $fragment_y = "&part=snippet";
        $order = ""; //再生回数順：&order=viewCount 日付順：&order=date 
        $maxResults = 10; //検索結果数

        $address = $apiAddress_y . str_replace (" " , "%20" ,$search_str) . $fragment_y . "&key=" . $apiKey . "&maxResults=" . $maxResults . $order ;
	    $json = cuGet_contents( $address ); //詳細データ取得（下のfunction）
        $getData = json_decode( $json , true);

        $videos = "<h5>" . $disp_str . " : 検索結果</h5>";
        $video = "";
        foreach ($getData["items"] as $searchResult) {
            //動画タイトル（クリックでYouTubeの動画ページへ移動）
            $title = sprintf('<a href="https://www.youtube.com/watch?v=%s" target="_blank">%s</a>',
                $searchResult["id"]["videoId"] ,$searchResult["snippet"]["title"]
                );
            //サムネイル（クリックでYouTubeの動画ページへ移動）
            $thumbnails = sprintf('<a href="https://www.youtube.com/watch?v=%s" target="_blank"><img src="%s"></a>',
                $searchResult["id"]["videoId"],$searchResult["snippet"]["thumbnails"]["medium"]["url"]
                );
            //動画のチャンネル（クリックでYouTubeのチャンネルページへ移動）
            $channel = sprintf('<a href="https://www.youtube.com/channel/%s" target="_blank">%s</a>',
                $searchResult["snippet"]["channelId"],$searchResult["snippet"]["channelTitle"]
                );
            $video = sprintf('%s<BR>%s<BR>%s<BR>%s<BR>%s<hr>',
                $title,
                $thumbnails,                                      
                "アップロード日付:" . date("Y/m/d",strtotime($searchResult["snippet"]["publishedAt"])), 
                "チャンネル:" . $channel, 
                $searchResult["snippet"]["description"] //動画の説明
                );
            $videos .= $video;
        }

        $result = nl2br($videos);
        echo $result;

    }else{
        echo "検索ワードを入力してください。";
    }

    function cuGet_contents( $url_address, $timeout = 15 ){
            $ch = curl_init();
            curl_setopt( $ch, CURLOPT_URL, $url_address );
            curl_setopt( $ch, CURLOPT_HEADER, false );
            curl_setopt( $ch, CURLOPT_RETURNTRANSFER, true );
            curl_setopt( $ch, CURLOPT_TIMEOUT, $timeout );
            $result = curl_exec( $ch );
            curl_close( $ch );
         
            return $result;
    }

?>

ソースコードはこんなかんじ。