本記事は広告が含まれる場合があります。

いつもブログをご覧くださり、ありがとうございます。
今回は、WordPress に YouTube のライブ配信動画を埋め込む際に発生した問題と、その解決に向けて導入した YouTube Data API v3 についてご紹介します。

YouTube のライブ配信を WordPress に埋め込む方法はいくつかありますが、ライブ配信の予約が複数存在する場合や、予約がない場合には、従来の埋め込み方法では期待どおりに表示されないことがあります。

そこで今回は、YouTube Data API v3 と WordPress の PHP を組み合わせて、ライブ配信の状況に応じて表示する動画を自動的に切り替える仕組みを構築することにしました。
この記事では、Google Cloud でのAPIキーの取得から、WordPress でAPIを利用するための設定、動作確認までを解説します。
なお、ライブ配信予約の自動選択・埋め込み処理については、検証が完了した段階で追記する予定です。

今回実現したいこと

今回の目的は、WordPress に埋め込む YouTube ライブ配信動画を、配信状況に応じて自動的に切り替えることです。具体的には、以下の動作を目指します。

YouTube の状態	WordPress での表示
ライブ配信中	現在配信中の動画を表示
ライブ配信予約が複数ある	開始予定日時が最も近い動画を表示
ライブ配信予約が1件ある	その動画を表示
ライブ配信予約がない	YouTube チャンネルへのリンクを表示

クライアントさんには、これまでどおり YouTube Studio でライブ配信を予約していただき、WordPress 側では追加の操作を必要としない構成を目指します。

従来のYouTube埋め込み方法と問題点

これまでは、以下のような iframe を使って、YouTube のライブ配信を埋め込んでいました。

<iframe
  width="640"
  height="360"
  src="https://www.youtube.com/embed/live_stream?channel=UCXXXXXXXXXXXXXXXXXXXXXX"
  frameborder="0"
  allowfullscreen>
</iframe>

この方法は、チャンネルIDを指定するだけでライブ配信を埋め込めるため、比較的簡単です。

しかし、実際の運用では次の問題が発生しました。

複数のライブ配信予約が公開されていると、動画を正常に表示できないことがある
ライブ配信予約がない場合に「この動画は再生できません」と表示される
表示する動画を細かく制御できない

そのため、複数の予約がある場合には、一部の予約動画を手動で非公開にする運用が必要になっていました。
こうした手作業をなくすため、YouTube Data API v3 を利用する方法を検討しました。

YouTube Data API v3とは？

YouTube Data API v3 は、Google が提供するAPIで、YouTube に登録されている動画やチャンネルなどの情報をプログラムから取得できる仕組みです。

例えば、以下の情報を取得できます。

YouTube チャンネルの情報
動画のタイトルや動画ID
ライブ配信中の動画
公開されているライブ配信予約
ライブ配信の開始予定日時

今回利用するのは、主に search.list と videos.list です。

search.list では、ライブ配信中や配信予定の動画を検索できます。

videos.list では、動画IDを指定して、ライブ配信の開始予定日時などの詳細情報を取得できます。

公式ドキュメント：

APIの利用に料金はかかる？

YouTube Data API v3 は、標準の利用枠内であれば、通常は追加料金なしで利用できます。
ただし、APIの呼び出し回数には上限があります。
そのため、WordPress のページが表示されるたびにAPIを呼び出すのではなく、取得結果を一定時間キャッシュするなどの対策が必要です。

APIの利用上限は変更される可能性があるため、Google Cloud Console の「割り当てとシステム上限」で最新の設定を確認してください。

STEP 1：Google Cloudでプロジェクトを作成する

まずは、Google Cloud Console にアクセスします。

https://console.cloud.google.com

Google アカウントでログインし、画面上部のプロジェクト選択メニューから「新しいプロジェクト」を選択します。

今回は、次のプロジェクト名を例として使用します。

wordpress-youtube-live

プロジェクトを作成したら、作成したプロジェクトが選択されていることを確認します。

なお、今回のように公開されているYouTube動画の情報を取得するだけであれば、YouTubeチャンネル所有者のGoogleアカウントでプロジェクトを作成する必要はありません。

開発者自身のGoogleアカウントで設定することも可能です。

STEP 2：YouTube Data API v3を有効化する

Google Cloud Console で「APIとサービス」→「ライブラリ」を開きます。

検索欄に次の文字列を入力します。

YouTube Data API v3

検索結果から「YouTube Data API v3」を選択し、「有効にする」をクリックします。

有効化が完了すると、APIの詳細画面でステータスが「有効」と表示されます。

STEP 3：APIキーを取得する

続いて、YouTube Data API v3 にアクセスするためのAPIキーを作成します。

Google Cloud Console の「APIとサービス」→「認証情報」を開きます。

認証情報の作成ウィザードでは、使用するAPIに「YouTube Data API v3」を選択します。

アクセスするデータの種類は、今回の用途では「一般公開データ」を選択します。

公開動画の情報を取得するだけであれば、OAuth認証は必要ありません。

APIキーを作成したら、分かりやすい名前を設定します。

WordPress YouTube Live

APIキーの利用制限を設定する

作成したAPIキーは、利用できるAPIを制限しておきます。

「APIの制限」で「キーを制限」を選択し、対象APIとして「YouTube Data API v3」を指定します。

今回の実装では、WordPress の PHP からAPIを呼び出すため、APIキーはサーバー側で使用します。

本番環境では、サーバーの送信元IPアドレスによる制限も検討します。

APIキーは認証情報ですので、ブログ記事やGitHubなどに公開しないよう注意してください。

STEP 4：YouTube Data APIの動作確認

APIキーを取得したら、まずはWordPressを使わず、ブラウザからAPIを呼び出してみます。

今回は、次のサンプルチャンネルIDを使用します。

UCXXXXXXXXXXXXXXXXXXXXXX

実際に試す際は、ご自身のYouTubeチャンネルIDに置き換えてください。

ライブ配信予約を取得する

以下のURLにアクセスします。

https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCXXXXXXXXXXXXXXXXXXXXXX&eventType=upcoming&type=video&maxResults=10&key=YOUR_YOUTUBE_API_KEY

YOUR_YOUTUBE_API_KEY は、Google Cloudで取得したAPIキーに置き換えます。

eventType=upcoming は、今後予定されているライブ配信を検索するためのパラメータです。

公開されているライブ配信予約が存在すれば、JSON形式で動画情報が返されます。

ライブ配信予約がない場合

公開されているライブ配信予約がない場合、次のように items が空配列になることがあります。

{
  "kind": "youtube#searchListResponse",
  "items": []
}

これは必ずしもエラーではありません。

今回の検証環境でも、公開されているライブ配信予約がなかったため、空配列が返されました。

通常動画を取得して動作確認する

APIが正常に動作しているか確認するため、次に eventType=upcoming を外して検索してみます。

https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCXXXXXXXXXXXXXXXXXXXXXX&type=video&maxResults=10&key=YOUR_YOUTUBE_API_KEY

この場合は、通常の公開動画も検索対象になります。

今回の検証では、チャンネルに登録されている動画情報を正常に取得できました。

これにより、APIキー、YouTube Data API v3、チャンネルIDの基本的な設定に問題がないことを確認できました。

STEP 5：WordPressにCode Snippetsをインストールする

次に、WordPress 側で PHP を実行できるようにします。

今回は、Code Snippets プラグインを利用しました。

Code Snippets

WordPress 管理画面から「プラグイン」→「プラグインを追加」を開き、Code Snippets を検索します。

インストールして有効化すると、管理画面に「スニペット」メニューが追加されます。

Code Snippets を使えば、テーマの functions.php を直接編集せずにPHPコードを追加できます。

STEP 6：wp-config.phpにAPIキーを設定する

APIキーをPHPコード内に直接記述することもできますが、今回は設定情報を分離するため、WordPress の wp-config.php に登録します。

サーバーのファイルマネージャーやSFTPを使って、wp-config.php を編集します。

以下のコードを追加してください。

define('YOUTUBE_DATA_API_KEY', 'YOUR_YOUTUBE_API_KEY');

実際には YOUR_YOUTUBE_API_KEY を取得したAPIキーに置き換えます。

追加する場所は、通常、以下のコメントより前です。

/* That's all, stop editing! Happy publishing. */

wp-config.php は重要な設定ファイルですので、編集前にバックアップを取得しておきましょう。

なお、今回の環境では wp-config.php のパーミッションは 600 でした。

ファイル所有者とPHPの実行ユーザーの関係によっては、この設定でも問題なく動作します。

正常にWordPressが稼働している場合、APIキーを追加するためにパーミッションを変更する必要はありません。

STEP 7：Code SnippetsでAPI取得処理を実装する

WordPress 管理画面で「スニペット」→「新規追加」を開き、PHPスニペットを作成します。

スニペット名は、次のようにしました。

YouTube Live API テスト

以下のコードを登録します。

add_shortcode('youtube_live_test', function () {

    if (!defined('YOUTUBE_DATA_API_KEY')) {
        return '<p>APIキーが設定されていません。</p>';
    }

    $url = add_query_arg([
        'part'       => 'snippet',
        'channelId'  => 'UCXXXXXXXXXXXXXXXXXXXXXX',
        'eventType'  => 'upcoming',
        'type'       => 'video',
        'maxResults' => 10,
        'key'        => YOUTUBE_DATA_API_KEY,
    ], 'https://www.googleapis.com/youtube/v3/search');

    $response = wp_remote_get($url, [
        'timeout' => 15,
    ]);

    if (is_wp_error($response)) {
        return '<p>API通信エラーが発生しました。</p>';
    }

    $status = wp_remote_retrieve_response_code($response);

    if ($status !== 200) {
        return '<p>APIエラー（HTTP '
            . esc_html((string) $status) . '）</p>';
    }

    $data = json_decode(
        wp_remote_retrieve_body($response),
        true
    );

    if (!is_array($data)) {
        return '<p>JSONの解析に失敗しました。</p>';
    }

    $items = $data['items'] ?? [];

    if (empty($items)) {
        return '<p>現在、公開されているライブ配信予約はありません。</p>';
    }

    $output = '<ul>';

    foreach ($items as $item) {
        $title = $item['snippet']['title'] ?? '';
        $video_id = $item['id']['videoId'] ?? '';

        $output .= '<li>'
            . esc_html($title)
            . '（動画ID：' . esc_html($video_id) . '）'
            . '</li>';
    }

    $output .= '</ul>';

    return $output;
});

channelId には、実際に取得したいYouTubeチャンネルのIDを指定します。

このコードでは、公開されているライブ配信予約を取得し、動画のタイトルと動画IDを一覧表示します。

現時点では、動画の埋め込みや開始予定日時による並び替えは行っていません。

なお、このコードは動作確認用です。本番運用では、APIの呼び出し回数を抑えるキャッシュ処理や、訪問者向けのエラー表示の改善が必要です。

STEP 8：ショートコードで表示する

PHPコードを保存・有効化したら、WordPress でテスト用の固定ページを作成します。

ブロックエディターで「ショートコード」ブロックを追加し、以下を入力します。

[youtube_live_test]

ページをプレビューして、結果を確認します。

今回の検証環境では、公開されているライブ配信予約がなかったため、次のメッセージが表示されました。

現在、公開されているライブ配信予約はありません。

これで、WordPress の PHP から YouTube Data API v3 を呼び出し、取得した結果をショートコードで表示できることを確認できました。

今後の改修予定

ここまでで、YouTube Data API v3 の初期設定と、WordPress からAPIを呼び出す基本的な仕組みが完成しました。

次の段階では、以下の機能を実装する予定です。

ライブ配信中の動画を優先的に表示する
複数のライブ配信予約から、開始予定日時が最も近い動画を選択する
選択した動画を iframe で埋め込む
ライブ配信予約がない場合は、YouTube チャンネルへのリンクを表示する
APIの取得結果をキャッシュして、呼び出し回数を削減する

これらを実装することで、クライアントさんがYouTube Studioでライブ配信を予約するだけで、WordPress側の表示が自動的に更新される仕組みを目指します。

まとめ

今回は、WordPress から YouTube Data API v3 を利用するための設定方法と、Code Snippets を使った基本的な動作確認について紹介しました。
従来の iframe による埋め込みは手軽ですが、ライブ配信予約が複数ある場合や、予約がない場合には、表示を細かく制御できないことがあります。
YouTube Data API v3 を利用すれば、公開されているライブ配信の情報を取得し、WordPress 側で表示する動画を選択する仕組みを構築できます。

今回の段階では、APIによる情報取得まで確認できました。
今後は、ライブ配信予約の自動選択と動画の埋め込み処理について、引き続き検証していきたいと思います。

今回も最後までご覧くださり、ありがとうございました。

お問い合わせはこちらから

南大阪を中心に活動しているシステムエンジニアです。これまでの経験から、ビジネス課題について一緒になって考え、課題解決のためにサポートさせていただきます。些細なご相談でも構いません。当方に期待することやご相談内容についてお聞かせください。

お問い合わせはこちらから

ブログ一覧

WordPressでYouTubeライブ配信の予約動画を自動表示する方法｜YouTube Data API v3 の活用

MacのPhpStormからUbuntuへSSH接続してリモート開発する方法

【Mac】Mission ControlとRectangleで複数プロジェクトの作業環境を快適にする方法

MacのVS CodeからUbuntuへRemote SSH接続して開発する方法

Ubuntuにtreeコマンドをインストールしてディレクトリ構成を見やすく表示する方法