[Astro #12] 完全自動化！YouTube Data APIで動画リストを取得し、Astroでギャラリーを自動生成する

はじめに

「YouTubeに新しいショート動画をアップするたびに、サイトのギャラリーも手動で更新する」なんて、エンジニアとしては絶対にやりたくない作業ですよね。

今回は、YouTube Data API v3を利用して最新の動画リストを自動で取得し、Astroのサイト上に（面倒な更新作業ゼロで）綺麗なギャラリーを生成する仕組みを作ったので、備忘録として残しておきます。

一度組んでしまえば、npm run dev やビルドのタイミングで勝手にJSONが更新される、完全な自動運用が可能です。

HUMAN x AI / TOOLS_ARCHIVE

PROTOCOL.LAIN // Archive

lain-lab.com

前回の記事：

[Astro #11] 自作ダッシュボードへの道：Search Console APIの鍵取得とデータ取得テスト // PROTOCOL.LAIN

Google Search Console APIをAstroから叩くための準備（GCPプロジェクト作成、サービスアカウント発行、GSC連携）と、googleapisを使った最小構成のテストページ実装方法を初心者向けに解説します。

lain-lab.com

1. 全体像とアーキテクチャ

今回の自動化の仕組みは非常にシンプルです。

1. データ取得用スクリプトの作成: Node.jsでYouTube APIを叩き、最新動画の情報を取得。
2. JSONとして保存: 取得したデータを整形し、Astroから読み込みやすい src/data/youtube.json に書き出す。
3. Astroで描画: Astro側でそのJSONをインポートし、コンポーネント内でループしてカード型のギャラリーを描画する。
4. コマンドの連携: package.json を書き換え、ビルドや開発サーバー起動前に自動でスクリプトが走るようにする。

2. YouTube Data API v3 の準備

まずはGoogle Cloud ConsoleでAPIキーを発行します。

1. 新しいプロジェクトを作成（または既存のプロジェクトを利用）。
2. 「APIとサービス」から 「YouTube Data API v3」 を有効化。
3. 「認証情報」から 「APIキー」 を作成し、環境変数としてメモしておきます。 (※APIキーは不正利用を防ぐため、必ず「HTTPリファラー」や「APIの制限」をかけておきましょう)

3. データ取得スクリプトの実装（Node.js）

プロジェクトのルート（または scripts/ ディレクトリなど）に fetch-youtube.js を作成します。 標準の fetch を使って、特定のプレイリスト（またはチャンネルのアップロード一覧）からデータを取得します。

// fetch-youtube.js
import fs from 'fs';
import path from 'path';

const API_KEY = process.env.YOUTUBE_API_KEY;
const PLAYLIST_ID = 'あなたのプレイリストID'; // 例: アップロード動画一覧のID
const MAX_RESULTS = 20;

async function fetchYouTubeData() {
  const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=${MAX_RESULTS}&playlistId=${PLAYLIST_ID}&key=${API_KEY}`;

  try {
    const response = await fetch(url);
    const data = await response.json();

    // Astro側で使いやすいように必要なデータだけを抽出
    const videos = data.items.map(item => ({
      id: item.snippet.resourceId.videoId,
      title: item.snippet.title,
      thumbnail: item.snippet.thumbnails.high.url,
      publishedAt: item.snippet.publishedAt,
    }));

    // JSONファイルとして書き出し
    const outputPath = path.join(process.cwd(), 'src', 'data', 'youtube.json');
    fs.writeFileSync(outputPath, JSON.stringify(videos, null, 2));

    console.log('✅ YouTube data successfully generated!');
  } catch (error) {
    console.error('❌ Error fetching YouTube data:', error);
  }
}

fetchYouTubeData();

4. コマンドの自動化設定

毎回手動でスクリプトを叩くのは手間なので、package.json の scripts を修正します。

"scripts": {
  "dev": "node fetch-youtube.js && astro dev",
  "build": "node fetch-youtube.js && astro build",
  // ...
}

これで、開発サーバーを立ち上げる時も、本番にデプロイする時も、必ず最新のYouTubeデータを引っ張ってきてからAstroのビルドが走るようになります。

5. Astro側での表示実装

最後に、自動生成されたJSONを使ってコンポーネントを作ります。

---
// src/pages/shorts.astro
import youtubeData from '../data/youtube.json';
---

<div class="video-grid">
  {youtubeData.map((video) => (
    <a href={`https://www.youtube.com/watch?v=${video.id}`} target="_blank" class="video-card">
      <img src={video.thumbnail} alt={video.title} loading="lazy" />
      <div class="info">
        <h3>{video.title}</h3>
      </div>
    </a>
  ))}
</div>

<style>
/* サイトのテーマに合わせたCSSグリッド設定 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
/* ... */
</style>

これで、あとはYouTubeに動画をアップするだけで、サイト側には常に最新のサイバーパンク・ギャラリーが自動反映される仕組みの完成です。

まとめ

APIをクライアント側（ブラウザ）で叩くと、APIキーの露出や通信遅延が気になります。しかし、この「ビルド時にAPIを叩いてJSON化し、Astroで静的ページとして生成する」アプローチは、セキュリティ的にも表示速度的にもAstroの強みを最大限に活かせる素晴らしい構成です。