【WordPress】YouTube Data APIでチャンネルの最新動画を自動表示する方法

YOUTUBE_DATA_API=ここに取得したAPIキーを貼り付け

// .envファイルの読み込み
function load_env() {

  $path = dirname(ABSPATH) . '/.env';

  if (!file_exists($path)) {
      return null;
  }

  $lines = file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
  foreach ($lines as $line) {
      if (strpos(trim($line), '#') === 0) {
          continue; // コメントをスキップ
      }

      list($name, $value) = explode('=', $line, 2);
      $name = trim($name);
      $value = trim($value);

      if (!array_key_exists($name, $_SERVER) && !array_key_exists($name, $_ENV)) {
          putenv(sprintf('%s=%s', $name, $value));
          $_ENV[$name] = $value;
          $_ENV[$name] = $value;
      }
  }
}
load_env();

wp_enqueue_script( 'modal-video', get_theme_file_uri('/js/modal-video/js/jquery-modal-video.min.js'), ['jquery'], 0, true);
wp_enqueue_style( 'modal-video', get_theme_file_uri('/js/modal-video/css/modal-video.min.css'));
wp_enqueue_script( 'handlebars', get_theme_file_uri('/js/handlebars/handlebars.js'), [], 0, true);
wp_enqueue_script( 'youtube-list', get_theme_file_uri('/js/youtube-list.js'), ['handlebars','modal-video', 'jquery'], 0, true);

// ajaxDataをyoutube-list.jsスクリプトに渡す。
// nonceを生成し、値をcheck_ajax_referer()に渡して認証させる。
wp_localize_script(
  'youtube-list',
  'ajaxData',
  [
    'nonce' => wp_create_nonce('ajax_nonce'),
    'ajaxurl' => admin_url('admin-ajax.php')
  ]
);

<script id="youtube_list_item" type="text/x-handlebars-template">
{{#each items}}
  <li><a href="#" class="js-modal-video" data-video-id="{{video_id}}">
    <img style="border:1px solid #ccc;" src="{{thumb_src}}" alt="{{title}}">
    <p>{{date}} : {{title}}</p>
    <p class="channel">{{channelTitle}}</p>
  </a></li>
{{/each}}
</script>

(function ($) {
  /**
   * youtubeのデータを取得してリストに追加
   */
  $.ajax({
    type: 'POST',
    url: ajaxData.ajaxurl, // WordPress AjaxのURL
    data: {
        nonce: ajaxData.nonce,             // CSRF対策用のnonce値を送信
        action: 'get_youtube_list'       // サーバー側で実行するWordPress Ajaxアクション
    },
    success: function(response) {
        // レスポンスが不正な場合やエラーの場合
        if (typeof response.success === 'undefined' || response.success !== true) {
            console.error('Ajax Error:', response);
            return;
        }

        // 成功の場合、youtubeデータを表示
        append_youtube_list(response);
    },
    error: function(xhr, status, error) {
        // Ajax通信自体でエラーが発生した場合
        console.error('Ajax通信エラー:', error);
    }
  });

  /**
  * YouTubeのデータを追加
  * @param {object} response YouTube APIのレスポンス
  */
  function append_youtube_list(response) {
    const $youtube_list = $('[data-youtube-list]');             // 動画リストを挿入する要素
    const $youtube_list_item_template = $('#youtube_list_item'); // Handlebarsテンプレート

    // 該当要素が存在しない場合は処理を終了
    if ($youtube_list.length === 0 || $youtube_list_item_template.length === 0) {
        return;
    }

    console.log('YouTube API Response:', response);

    // レスポンスからYouTube動画データを取得。データがない場合は空の配列を設定
    const youtube_list_items = response.data && response.data.items ? response.data.items : [];

    // YouTube APIのデータ構造に合わせてアイテムを変換
    const items = youtube_list_items.map(item => ({
        video_id: item.id.videoId,
        title: item.snippet.title,
        thumb_src: item.snippet.thumbnails.medium.url, // mediumサイズのサムネイルを使用
        date: new Date(item.snippet.publishedAt).toLocaleDateString('ja-JP'),
        description: item.snippet.description,
        channelTitle: item.snippet.channelTitle
    }));

    // Handlebarsテンプレートをコンパイルし、HTMLを生成
    const template = Handlebars.compile($youtube_list_item_template.html());
    const html = template({
        items: items
    });

    // 生成したHTMLをリスト要素に挿入
    $youtube_list.html(html);

    // jQuery Modal Videoライブラリを初期化
    initializeModalVideo();
  }

  /**
   * jQuery Modal Videoライブラリを初期化
   */
  function initializeModalVideo() {
    // 新しく追加されたYouTube動画リンクにモーダル機能を適用
    $('.js-modal-video').modalVideo();
  }
})(jQuery);

// Ajaxリクエストのハンドラーを登録
// `wp_ajax_`はログインユーザー向け、`wp_ajax_nopriv_`は未ログインユーザー向け
add_action('wp_ajax_get_youtube_list', 'handle_get_youtube_list');
add_action('wp_ajax_nopriv_get_youtube_list', 'handle_get_youtube_list');

function handle_get_youtube_list() {
    // nonceチェック（CSRF対策）。クライアントサイドから送られたnonce値を検証
    check_ajax_referer('ajax_nonce', 'nonce');

    // youtube APIからデータを取得する関数を呼び出す
    $response = get_youtube_list_from_api();

    // APIリクエストの成否に応じてJSONレスポンスを返す
    if ($response === null) {
        wp_send_json_error('APIリクエストに失敗しました'); // 失敗時はエラーレスポンス
    } else {
        wp_send_json_success($response); // 成功時はデータをJSONで返す
    }
}

/**
 * youtube APIからデータを取得する
 * @return object|null 成功時はデコードされたJSONデータ（stdClassオブジェクト）、失敗時はnull
 */
function get_youtube_list_from_api() {
    // キャッシュキーを設定（1日 = 24時間 = 86400秒）
    $cache_key = 'youtube_list_cache';
    $cache_duration = 24 * HOUR_IN_SECONDS; // 1日

    // キャッシュからデータを取得
    $cached_data = get_transient($cache_key);

    // キャッシュが存在する場合はそれを返す
    if ($cached_data !== false) {
        return $cached_data;
    }

    $youtube_data_api = getenv('YOUTUBE_DATA_API');
    $youtube_channel = 'UCOvyMBPp9M7KNZACW7QPtrA';// 東京都のチャンネルID
    $url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId='.$youtube_channel.'&maxResults=6&order=date&type=video&key='.$youtube_data_api;

    // cURLを使ってAPIリクエストを送信
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET');
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    // 参照元を設定
    curl_setopt($curl, CURLOPT_REFERER, 'http://localhost:8080');
    curl_setopt($curl, CURLOPT_HTTPHEADER, array(
        'Accept: application/json',
        'Content-Type: application/json'
    ));
    $response = curl_exec($curl);
    curl_close($curl);

    // cURLが失敗した場合
    if ($response === false) {
        return null;
    }

    // JSONレスポンスをデコード
    $decoded_response = json_decode($response);

    // 成功した場合のみキャッシュに保存
    if ($decoded_response !== null) {
        set_transient($cache_key, $decoded_response, $cache_duration);
    }

    return $decoded_response;
}