Youtube Data API を使って動画を取得する

作ったもの

フォームに入力したキーワードに一致するYoutube動画を表示します。

APIキーの取得

Google Cloud PlatformからYoutube Data API v3 のキーを取得します。

参考記事

• YouTube APIキーの取得 (2020/03/25時点) - Qiita

APIキーを登録

.envファイルに取得したAPIキーを記述します。 今回はNext.jsを使っています。

# youtube api key
NEXT_PUBLIC_YOUTUBE_API_KEY=○○○○○○○○○○○

フォーム作成

検索キーワードを入力するフォームを作成します

<form onSubmit={handleSubmit}>
    <input
        type="text"
        name="keyword"
        value={keyword}
        onChange={handleInputKeyword}
    />
</form>

動画取得

APIを実行して動画のデータを取得します。今回は再生回数が多い順に30件取得しています。その他のプロパティは下記ドキュメントを参考にしてください。

developers.google.com

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault()
  await axios
    .get(
      `https://www.googleapis.com/youtube/v3/search?type=video&part=snippet&q=${keyword}&maxResults=30&order=viewCount&key=${process.env.NEXT_PUBLIC_YOUTUBE_API_KEY}`
    )
    .then((res) => {
      setVideoItems(res.data.items)
    })
    .catch((err) => {
      console.log(err)
    })
}

レスポンス内容は下記のようになります。

{
    "kind": "youtube#searchResult",
    "etag": "kDTRucohFNe7n0uBO5psgi89I0U",
    "id": {
        "kind": "youtube#video",
        "videoId": "YZia5Z-oycQ"
    },
    "snippet": {
        "publishedAt": "2014-04-16T00:43:46Z",
        "channelId": "UCS_dOTlDQhzGR2VLASzVo4g",
        "title": "お腹が空いたと鳴くマンチカン子猫！　 The Munchkin cat meowing.So cute kitten!",
        "description": "baby #猫 #meow 食事の支度を始めると、キッチンを金網越しに覗いて、ニャーニャーとご飯の要求をし続けている白い子猫と、一緒に鳴いてる他のねこたち。5匹とも ...",
        "thumbnails": {
            "default": {
                "url": "https://i.ytimg.com/vi/YZia5Z-oycQ/default.jpg",
                "width": 120,
                "height": 90
            },
            "medium": {
                "url": "https://i.ytimg.com/vi/YZia5Z-oycQ/mqdefault.jpg",
                "width": 320,
                "height": 180
            },
            "high": {
                "url": "https://i.ytimg.com/vi/YZia5Z-oycQ/hqdefault.jpg",
                "width": 480,
                "height": 360
            }
        },
        "channelTitle": "Cynthia Moon短足だってイイじゃん",
        "liveBroadcastContent": "none",
        "publishTime": "2014-04-16T00:43:46Z"
    }
}

動画を表示する

取得した動画データを元にUIを構築します。

<table>
  <tbody>
    {videoItems.map((video, i) => (
      <tr key={i}>
        <td>
          <Image
            src={video.snippet.thumbnails.medium.url}
            alt="thumbnailsUrl"
            height={video.snippet.thumbnails.medium.height}
            width={video.snippet.thumbnails.medium.width}
          />
        </td>
        <td>
          <strong>
            <a
              href={`https://www.youtube.com/watch?v=${video.id.videoId}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {video.snippet.title}
            </a>
          </strong>
          {video.snippet.channelTitle}
          <br />
          <span>
            {video.snippet.description}
          </span>
        </td>
      </tr>
    ))}
  </tbody>
</table>

おわりに

Youtube Data API を使って動画のデータを取得しました。 検索プロパティがまだたくさんあるので他にも色々できそうです。