Youtube動画更新で、ホームページに自動連動させる

らら
らら

はじめに

最近、Youtube DATA APIやったことある?とか、筆者は見る専門で、動画配信とかやったことないので、質問が多いので調べてみた。

Twitterから始まって、facebook,Google mapなどいろいろなAPIやったけど、数年すると使えなくなったり・・するのでほんとは嫌いです・・笑

まぁ。あらかじめ、クライアントさんには、そういう説明付きで、設置するかですね。

要件

Youtubeで更新したら、自社ホームページなどで、HTMLを修正しなくても連動してくれる。

方法として、Youtubeのfeed機能を使う方法、Youtube DATA APIを使用する方法かな、まぁ1つの方法だと数年すると使えなくなるといけないので代替えも準備する

必要があるのでとりあえず2つとも検証することにする。

方法

Youtubeのfeed機能を使う方法は、

Google Feed APIの下記が使用できなくなったので

http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q='

下記を採用する

https://api.rss2json.com/v1/api.json?rss_url="

さらに代替えでphp版も準備する。

これらは、javascript(jquery)から外部サイトを参照することがCORS policyに制約によってアクセスできないため、外部側が設定されていれば、参照できます。

youtube feedでは、XMLもあってjavascript(jquery)から外部にアクセスできません。

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

アクセスすると、下記のエラーになるはず。。

Access to XMLHttpRequest at 'https://remoteserver' from origin 'http://callserver' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

なので無料の外部サービス、Google Feed API、rss2jsonを利用するのだか、Google Feed APIはサービスが終了しているため、rss2jsonを使うものと

自サーバーにphpを置いて、そちら経由でアクセスする方法を試します。phpなどのプログラムからはCORS policy関係なのでアクセスできます。

方法1

rss2jsonサービスを使う方法。こちらのサービスが終了してしまうと使えません。

また、Youtube Feed APIも同様です。

YoutubeのチャンネルIDを閲覧したい、チャンネルのものをセットすればOK

チャンネルIDは閲覧中のURLにあるのでわかるかと・・

https://www.youtube.com/watch?v=ここの部分です。

iframeの引数はお好みで・・


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>rss2json</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
	id = 'YoutubeのチャンネルID';
	url = 'http://www.youtube.com/feeds/videos.xml?channel_id='+id;
	$.ajax({
		url: 'https://api.rss2json.com/v1/api.json?rss_url=' + encodeURIComponent(url),
		dataType: 'json',
		success: function(data) {
			if(data.status == 'ok') {
				$.each(data.items, function(i, item){
					var id = item.guid;
					id = id.replace("yt:video:","");
					$('#youtubelist ul').append('<li><iframe width="560" height="315" src="https://youtube.com/embed/'+id + '?controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>'+item.title+'</li>');
				});
			}
		}
	});
});
</script>
</head>
<body id="pagetop">
<div id="youtubelist"><ul></ul></div>
</body>
</html>

方法2

PHP介して、Youtube Feed APIを使う方法

iframeの引数はお好みで・・


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>php </title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
	id = 'YoutubeのチャンネルID';
	url = 'http://www.youtube.com/feeds/videos.xml?channel_id='+id;
	$.ajax({
		url: 'あなたのサイトURL/ajax.php?url=' + encodeURIComponent(url),
		dataType: 'json',
		success: function(data) {
			$.each(data.entry, function(i, item){
				var id = item.id;
				id = id.replace("yt:video:","");
				$('#youtubelist ul').append('<li><iframe width="560" height="315" src="https://youtube.com/embed/'+id + '?controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>'+item.title+'</li>');
			});
		}
	});
});
</script>
</head>
<body id="pagetop">
<div id="youtubelist"><ul></ul></div>
</body>
</html>

ajax.phpの中身

サンプルです。実際はエラーチェックその他処理してあげましょう。


<?php
if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
	$xml = file_get_contents($_GET["url"]); 
	$xml = str_replace(array("\n", "\r", "\t"), '', $xml);
	$xml = trim(str_replace('"', "'", $xml));
	$simpleXml = simplexml_load_string($xml,'SimpleXMLElement',LIBXML_NOWARNING | LIBXML_NOERROR | LIBXML_NOCDATA);
	header('Content-Type: application/json; charset=UTF-8');
	header('X-Content-Type-Options: nosniff');
	echo json_encode($simpleXml);
} else {
	echo "error";
}

方法3

Youtube DATA API v3を使う方法

iframeの引数はお好みで・・

Youtube DATA API v3を使用しても、今までの経験上、使えなくなる場合があります。


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Youtube DATA API v3</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
	<meta name="format-detection" content="telephone=no">
	<meta name="keywords" content=",,,,">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="google-site-verification" content="">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
	var api_key		= 'Youtube DATA API v3API KEY';
	var channelid	= 'YoutubeのチャンネルID'
	$.ajax({
		type: 'GET',
		url: 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId='+channelid+'&maxResults=5&order=date&type=video&key='+api_key,
		datatype: 'json',
		success: function(json){
			$.each(json.items, function(i, item){
				var id = item.id.videoId;
				$("#youtubelist").append('<li><iframe width="560" height="315" src="https://www.youtube.com/embed/' + id + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></li>');
			});
		},
		error: function(){
			alert('error');
		}
	});
});
</script>
</head>
<body id="pagetop">
<div id="youtubelist"><ul></ul></div>
</body>
</html>

Youtube DATA API v3を使うにあたって

Youtube配信しているgoogleアカウントが必要です。

そのアカウントでコンソールサイトでAPIの有効、APIKEYの発行を行います。

これが面倒ですよね・・・・

そのアカウントから下記にアクセスします。

https://console.cloud.google.com/

上記からログインして上部メニューのプロジェクト選択をクリックします。

googlecloud

POPUPで下記が表示されるので、新しいプロジェクトをクリックします。

googlecloud

プロジェクト名をお好みで入力して作成ボタンをクリックします。

googlecloud

下記のようにプロジェクトが作成されたので、上部バーガメニューをクリックします。

googlecloud

メニューから、APIサービスのライブラリを選択します。

googlecloud

下記画面が表示するので画面スクロールしてYoutube DATA API v3をクリックします。

googlecloud

下記画面が表示するので有効にするをクリックします。

googlecloud

有効後、下記の画面に移動するので認証情報を作成をクリックします。

googlecloud

API選択でYoutube DATA API v3を選択して次へ

googlecloud

APIキーが表示されるので、コピーしておきます。 RESTRICT KEYを押すと詳細設定できます。

googlecloud

RESTRICT KEY設定画面 お好みで

googlecloud

完了後は下記が表示され完了です。!マークは放置で問題ありません。今回は、Oauthは必要ないので

googlecloud

さいごに

自分が使う時のメモです・・

では・・・

関連記事