徹底解説！YouTube Data APIの使い方や実装方法、データを取得し動画を表示する方法

みなさんこんにちは！エンジニアの高澤です！

今回はYouTube Data APIの使い方や実装方法などについて解説していきたいと思います。

今回解説するYouTube Data APIを使いこなせれば、ご自身のWebサイトやアプリケーション、またスマホアプリなどの構築においてYouTubeのコンテンツを取得して表示したりすることができます。

当記事では、YouTube Data APIを使った実装のお仕事などに対応できるレベルで対応しておりますので、よろしければご活用いただけましたら幸いです。

YouTube Data APIとは

YouTube Data APIは、YouTubeのデータを取得、管理、および操作するためのAPIです。このAPIを使用することで、動画、プレイリスト、チャンネルなどのデータにアクセスできます。たとえば、特定のキーワードで動画を検索したり、特定のチャンネルの情報を取得したりすることが可能です。

開発者はこのYouTube Data APIを活用し、YouTubeの動画、チャンネル、プレイリストなどの情報を取得し、自分のアプリケーションやウェブサイトに統合することができます。

YouTube Data APIを使用すると、以下のような操作が可能です。

• 動画情報の取得：特定の動画の詳細情報（タイトル、説明、再生回数、評価など）を取得できます。
• 検索：キーワードを使って動画、チャンネル、プレイリストを検索できます。
• チャンネル情報の取得：特定のチャンネルの詳細情報を取得できます。
• プレイリストの管理：プレイリストを作成、更新、削除したり、プレイリスト内の動画を管理することができます。
• コメントの管理：動画やチャンネルのコメントを取得、投稿、削除することができます。

また、YouTube Data APIにはいくつかのリソースがあり、以下のようにそれぞれ異なるデータや機能にアクセスできます。

• 動画（videos）：YouTube動画の詳細情報にアクセスします。
• チャンネル（channels）：YouTubeチャンネルの情報にアクセスします。
• プレイリスト（playlists）：YouTubeプレイリストの情報にアクセスします。
• 検索（search）：YouTube内の動画、チャンネル、プレイリストを検索します。
• コメント（comments）：YouTubeのコメントにアクセスします。

上記のようにデータや機能にアクセスすることによって、YouTube Data APIを利用してアプリやサイトを実装することが可能です。

Google Cloudとは

Google Cloudとは、Googleが提供するクラウドコンピューティングサービスの総称です。

このプラットフォームには、APIサービス、データストレージ、コンピュートパワー、機械学習ツール、ビッグデータ分析ツールなど、さまざまなサービスが含まれています。

Google Cloudは、企業や開発者が高度なインフラストラクチャを利用してアプリケーションやサービスを構築、デプロイ、運用するための強力な基盤を提供します。

当記事ではYouTube Data APIについて解説しますが、Google CloudではYouTube Data APIのようにさまざまなAPIが提供されており、実際にGoogleのAPIを利用するときは、下図の管理画面からAPIを検索し、有効化させて生成したAPIキーをもとにウェブサイトやアプリケーションにAPIの機能を実装します。

生成したAPIキーは、ソースコードに記述したりWordPressなどの管理画面にある設定ページにコピー＆ペーストしたりして機能を実装する際に使用します。

Google Cloudは、その多様なサービスと強力なインフラストラクチャにより、企業や開発者が革新的なアプリケーションを迅速かつ効率的に構築するための優れたプラットフォームを提供します。

その中でも、YouTube Data APIは、Google Cloudのサービスの一つとして提供されており、YouTubeのデータをプログラムで操作するための強力なツールです。

ちなみにGoogle Cloud Platform（GCP）とほぼ同じものと捉えられており、Google Cloudは広い範囲のクラウドサービス全体を指し、その中にGCPというプラットフォームが含まれているという関係です。GCPはGoogle Cloudの中でも特にインフラストラクチャや開発者向けサービスを提供する重要な部分です。

YouTube Data APIの利用例

YouTube Data APIの利用例について解説いたします。
ここで利用例をしっかり把握し、実装の際にイメージができるようになりましょう。

YouTube Data APIを活用した実装例は以下になります。

• 動画検索サイト
• 動画教材学習サイト
• YouTubeチャンネル分析ツール
• 動画プレイリスト管理アプリ
• 動画ランキングサイト

まだまだアイデアは考えられるかと思いますが、上記のようにいろんな実装が可能です。

また、YouTube Data APIは多くのプログラミング言語に組み込むことが可能で、例えばWordPressなどのCMSやReact.js、Next.js、またスマホアプリ開発のためのSwift UIにて活用することが可能です。

YouTube Data APIをセットアップする方法

それではYouTube Data APIを活用して動画コンテンツを出力する実装をしていきたいと思うのですが、その前にまずはYouTube Data APIを使えるようにセットアップしていきましょう。

まずそもそも、YouTube Data APIを利用して実装する方法の流れとしては、ざっくり以下のイメージになります。

1. APIキーの取得：Google Cloud Platformでプロジェクトを作成し、YouTube Data APIを有効にしてAPIキーを取得します。
2. APIリクエストの作成：取得したAPIキーを使用して、YouTube Data APIエンドポイントにHTTPリクエストを送信します。
3. データの解析：返されるJSONデータを解析し、必要な情報を抽出してアプリケーションに表示します。

ここではまずAPIキーの取得などの最初のセットアップ部分の流れについて解説したいと思います。

ちなみにこのセットアップの流れは、他のAPIサービスを利用する場合でも共通なので、もし以下の作業がお済みでしたら読み飛ばしていただき、管理画面左上のハンバーガーメニューにある「APIとサービス」の「ライブラリ」にてAPI（YouTube Data API）を追加してください。

まずは、ブラウザにて「Google Cloud Platform」と検索して、ページへ進んでログインしてください。

ログインしたら、下図のように画面上にご自身のこれまで作成されたプロジェクトを選択できる箇所があります。

クリックしたら、ポップアップの「新しいブロジェクト」をクリックしてください。

クリックしたら、「プロジェクト名」「請求先アカウント」「場所」をそれぞれ入力、選択してください。

「プロジェクト名」は自動で生成されてデフォルトで入力されておりますが、任意のプロジェクト名でご自身で自由に決めて入力することもできます。

「請求先アカウント」と「場所」に関してはご自身の自由に選択、入力してください。

すべての入力、選択が完了したら「作成」ボタンをクリックしてください。

そうすると、下図のように通知でプロジェクトが完了しましたという通知が表示されるので、この通知部分をクリックしてください。

クリックしていただくと、下図のような画面が表示されます。

画面の左上にあるハンバーガーメニューをクリックしていただき、「APIとサービス」をクリックしていただき、「ライブラリ」をクリックしてください。

すると検索バーが表示されているので、「YouTube Data API v3」と入力していただき、下図のように表示されている「YouTube Data API v3」をクリックしてください。

ちなみに他のAPIサービスを利用したい場合は、この検索バーにて利用したいAPIサービスの名前を入力してください。

「YouTube Data API v3」の詳細ページが表示されるので、下図の「有効にする」をクリックしてください。これで、「YouTube Data API v3」の機能をAPIとして利用することが可能となります。

「有効にする」をクリックしたら、次はAPIキーを取得します。

下図の画面右上にある「認証情報を作成」をクリックしてください。

認証情報の作成ページが表示されるので、使用するAPIは「YouTube Data API v3」を選択し、アクセスするデータの種類の「一般公開データ」を選択し、「完了」をクリックしてください。

下図のページが表示され、認証情報の作成が完了します。

そのままページを少し下にスクロールしていただくと、下図のようにAPIキーの一覧が表示されるので、「鍵を表示します」リンクをクリックしてください。

APIキーのポップアップが表示されるので、APIキーをコピーしてください。

このAPIキーは、YouTube Data APIの機能を利用して何かアプリやサイトを実装する際に必要になります。

ここでコピーしたAPIキーはこの後解説するサンプルコードで使用するので、必ず控えておいてください。もしなくしてしまっても、Google Cloud Platformの管理画面にていつでもAPIキーをコピーすることができるのでご安心ください。

APIキーはユーザーごとにランダムな半角英数字で自動生成されるのでご注意ください。

これでYouTube Data APIのセットアップは完了しました！あとはソースコードにてコピーしたAPIキーをペーストして利用し、機能を実装するだけです。

次は、この機能を実装する部分を解説いたします。

YouTube Data APIを利用して実装する方法

それでは早速、YouTube Data APIを利用して動画コンテンツを表示する実装方法について解説したいと思います。

まずは以下のソースコードをHTMLファイルに丸々コピー＆ペーストしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YouTube動画詳細ページ</title>
  <style>
    .comment {
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
    }

    .comment-author {
      font-weight: bold;
    }

    .comment-text {
      margin-top: 5px;
    }
  </style>
</head>
<body>
<div class="video-container">
	<img class="video-thumbnail" src="PLACEHOLDER_THUMBNAIL_URL" alt="動画サムネイル">
	<iframe class="video-player" src="https://www.youtube.com/embed/【動画ID】" allowfullscreen></iframe>
</div>

<div class="video-info">
	<h2 class="video-title">VIDEO_TITLE</h2>
	<p class="video-description">VIDEO_DESCRIPTION</p>
	<p class="channel-info">
	<a href="https://www.youtube.com/channel/CHANNEL_ID">CHANNEL_TITLE</a>
	</p>
	<p class="video-meta">
	公開日: <span class="published-at">VIDEO_PUBLISHED_AT</span>
	<br>再生時間: <span class="duration">VIDEO_DURATION</span>
	<br>いいね: <span class="like-count"></span>
	<br>再生回数: <span class="view-count"></span>
    <br>コメント数: <span class="comment-count"></span>
    <br>タグ: <span class="tags"></span>
	</p>
</div>


<div class="comments">
<h3>コメント</h3>
<div class="comment-list"></div>
</div>

<script>
const apiKey = '【ご自身のAPIキー】';
const videoId = '【動画ID】';

// いいね数の初期値を0に設定
let likeCount = 0;


fetch(`https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics,contentDetails&id=${videoId}&key=${apiKey}`)
	.then(response => response.json())
	.then(data => {
		const video = data.items[0];

		document.querySelector('.video-title').textContent = video.snippet.title;
		document.querySelector('.video-description').textContent = video.snippet.description;
		document.querySelector('.channel-info').innerHTML = `
		<a href="https://www.youtube.com/channel/${video.snippet.channelId}">${video.snippet.channelTitle}</a>
		`;
		document.querySelector('.video-thumbnail').src = video.snippet.thumbnails.high.url;
		document.querySelector('.published-at').textContent = new Date(video.snippet.publishedAt).toLocaleDateString();
		document.querySelector('.duration').textContent = formatDuration(video.contentDetails.duration);
		    
		document.querySelector('.view-count').textContent = video.statistics.viewCount;
		document.querySelector('.comment-count').textContent = video.statistics.commentCount;

		if (video.snippet.tags) {
		document.querySelector('.tags').textContent = video.snippet.tags.join(', ');
		} else {
		document.querySelector('.tags').textContent = 'なし';
		}


		function formatDuration(duration) {
			const match = duration.match(/PT(\d+H)?(\d+M)?(\d+S)?/);
			const hours = (parseInt(match[1]) || 0);
			const minutes = (parseInt(match[2]) || 0);
			const seconds = (parseInt(match[3]) || 0);
			return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
		}


		// いいね数の取得
		likeCount = video.statistics.likeCount;
		// いいね数の表示
		const likeCountElement = document.querySelector('.like-count');
		likeCountElement.textContent = likeCount;
	})
	.catch(error => {
		console.error('エラーが発生しました:', error);
	});


fetch(`https://www.googleapis.com/youtube/v3/commentThreads?part=snippet&videoId=${videoId}&key=${apiKey}&maxResults=100`)
	.then(response => response.json())
	.then(data => {
	const commentList = document.querySelector('.comment-list');
	data.items.forEach(item => {
		const comment = document.createElement('div');
		comment.classList.add('comment');
		comment.innerHTML = `
		<p class="comment-author">${item.snippet.topLevelComment.snippet.authorDisplayName}</p>
		<p class="comment-text">${item.snippet.topLevelComment.snippet.textDisplay}</p>
		`;
		commentList.appendChild(comment);
	});
	})
	.catch(error => {
	console.error('エラーが発生しました:', error);
	});

</script>
</body>
</html>

ペーストしていただきましたら、まだ下図のようにこのままでは何も表示されずエラーのような状態になっているかと思います。

一旦エラー状態の確認ができたら、ソースコード中の【ご自身のAPIキー】と【動画ID】の2点があることを確認してください。

この2点の部分を以下のようにそれぞれ変換してください。

まずはconstで定数を定義している部分と。

// APIキーと動画IDのプレースホルダー
const apiKey = '【ご自身のAPIキー】';
const videoId = '【動画ID】';

↓【ご自身のAPIキー】と【動画ID】を変換してください。

const apiKey = 'AIzaSyA1234567890abcdefGHIJKLMNOPQR';
const videoId = 'dFlDRhvM4L0';

iframeで動画を表示するためのURLの末尾の部分です。

// URLの末尾の動画ID
<iframe class="video-player" src="https://www.youtube.com/embed/【動画ID】" allowfullscreen></iframe>

↓【動画ID】を変換してください。

// URLの末尾の動画ID
<iframe class="video-player" src="https://www.youtube.com/embed/dFlDRhvM4L0" allowfullscreen></iframe>

【ご自身のAPIキー】とは、Google Cloudの管理画面にて生成したAPIキーのことで、【動画ID】とは、YouTube動画の再生ボタンを押した後の動画ページのURLにあるIDのことをいいます。

それぞれ変換していただき、ページを更新していただきますと下図のように動画コンテンツ情報が反映されて、ページが正しく表示されているのが確認できたかと思います。

上図のように動画サムネイル画像とその横に動画データが再生できるように組み込まれており、ページを下にスクロールすると下図のように公開日や再生時間、いいね数、コメントなどが表示されているかと思います。

これでページにYouTube動画コンテンツを取得して表示することができました。お疲れ様でした！

まだCSSでレイアウトを調整していないため、HTMLのデフォルトの見た目の状態になっているかと思いますが、ソースコードのHTMLタグを追加したり、HTMLのタグにID属性やclass属性を追加したりして見た目をカスタマイズしてください。

また、上記ソースコードを使って、例えばWordPressでカスタム投稿タイプの記事データと連携して、例えば、【ご自身のAPIキー】はオプションデータとして保存して処理し、【動画ID】の部分はカスタムフィールドとして記事データごとに保存して処理することで、動的に動画コンテンツページを表示することが可能です。

他にもSwift UIやReact.js、Next.jsなどでも動的に出力することができるので、お仕事の状況に合わせて実装してみましょう。

まとめ

YouTube Data APIの使い方や実装方法などについて解説は以上になります。

今回解説したYouTube Data APIを使いこなせれば、ご自身のWebサイトやアプリケーション、またスマホアプリなどの構築においてYouTubeのコンテンツを取得して表示したりすることが可能となるので、一気に可能性が広がります。

また、YouTubeコンテンツを扱う実装はお仕事であったりするため、エンジニアにとってはおさえておきたい内容となっております。

当記事では、このYouTube Data APIを使った実装のお仕事などに対応できるレベルで対応しておりますので、よろしければぜひご活用いただけましたら幸いです。