😎

YouTube Data APIを用いてYouTubeの動画を自身のサイトに表示する。

2023/04/28に公開

Astro

tech

はじめに

今回はタイトルの通り、YouTubeDataAPIを用いてYouTubeの動画を自身のサイトに表示する方法を紹介します。

本編

使用するフレームワーク、APIの紹介

YouTubeDataAPIを用いてYouTubeの動画を自身のサイトに表示するために、使用するフレームワーク、APIについて、紹介します。

Astro

Astroはウェブサイトを構築するためのウェブフレームワークのひとつです。
Asrroを利用するメリットのひとつに、高速なウェブサイトを構築できることがあります。なぜ、高速なウェブサイトを構築できるかというと、「Astro Islands」というアーキテクチャパターンに基づいて構築されているためです。

「Astro Islands」とは、2つのことを意味します。
1つ目は、「islands architecture」という考え方に基づいたwebアーキテクチャのパターンであることです。「islands architecture」とは、サーバーサイドレンダリングされたページにインタラクティブなコンポーネントを設置する設計手法のことです。

2つ目は、Astroで構築したウェブサイト上に存在するインタラクティブなコンポーネントのことです。

web API

ウェブ上では、アプリケーションの開発者（公開側）がアプリケーションの一部を誰でも利用できるように公開してくれています。そのため、アプリケーションの開発者（利用側）は、開発者（公開側）のアプリケーションの機能を自身のアプリケーションに実装することができます。このやりとりを可能にしているアプリケーションとアプリケーションの接続部分をwebAPIといいます。

YouTube　Data　API

googleが提供しているYouTubeの動画のデータを利用するためのAPIです。

Fetch

Fetchは、WebAPI（今回の場合、YouTube Data API）のデータを自身のアプリケーションで使用するために用いるAPIです。
Astroでは、すべてのAstroコンポーネントでfetchメソッドを用いてHTTPリクエストを送ることが可能です。

手順

それでは、ここから、上記で紹介したフレームワーク・APIを用いて、サイト上にYouTubeの動画を表示する手順を紹介します。

APIKeyを取得する
まず、YouTubeDataAPIのAPIKeyを取得します。取得方法はgoogleの公式ページで解説されています。
https://developers.google.com/youtube/v3/getting-started
Astroをインストール・環境構築する
次に、Astroをインストールしたプロジェクトを構築します。

npm create astro@latest

ここらへんは、公式ページのチュートリアル通りに進めていけば実装できます。

YouTubeのデータをfetchし、サイトに表示する
YouTubeDataAPIのAPIKeyを取得し、プロジェクトの環境構築ができたら、いよいよサイトにYouTubeの動画を表示します。今回は下記のように実装しました。

---
import Layout from '../layouts/Layout.astro';

type YouTube = {
  items: {
    id: { videoId: string };
  }[];
};

const youtubeData = await fetch(
  `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${
    import.meta.env.YOUTUBE_CHANNEL_ID
  }&order=date&maxResults=4&key=${import.meta.env.YOUTUBE_API}`,
).then((response) => response.json());
---

<Layout>
  {
    youtubeData.items.map((item) => {
      return (
        <div>
          <iframe
            width="100%"
            height="100%"
            src={`https://www.youtube.com/embed/${item.id.videoId}`}
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          />
        </div>
      );
    })
  }
</Layout>

今回のテーマに関する部分のコードについて、解説します。

const youtubeData = await fetch(
  `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${
    import.meta.env.YOUTUBE_CHANNEL_ID
  }&order=date&maxResults=4&key=${import.meta.env.YOUTUBE_API}`,
).then((response) => response.json());

fetchメソッドを用いて、HTTPリクエストを送っています。
?part=snippet以降で、取得するデータのプロパティを指定しています。

key=${import.meta.env.YOUTUBE_API}にAPIKeyを記述します。APIKeyは環境変数で管理しています。理由は、src/index.astroに表示すると、第三者に利用される可能性があるためです。（今回はyoutubeのchannelDも環境変数で管理しています。）

import.meta.envは、Viteの環境変数にアクセスするオブジェクトです。Astroは環境変数に関して、Viteの組み込みのサポートを利用しているため、環境変数にアクセスするのにimport.meta.envオブジェクトを利用しています。

おわりに

今回は、Astro、web API、YouTube Data API、Fetch APIの紹介とYouTube Data APIを用いたYouTube動画をサイト上に表示する方法を紹介しました。

最後までご覧いただきありがとうございました。

YouTube Data APIを用いてYouTubeの動画を自身のサイトに表示する。

はじめに

目次

本編

使用するフレームワーク、APIの紹介

Astro

web API

YouTube　Data　API

Fetch

手順

おわりに

Discussion