WordPressで作る世界遺産サイト｜Youtube Data API を使って動画取得編

WordPressで作る世界遺産サイト
TickleCode.
Yoshinori Kobayashi
1
WordPressもくもく勉強会 at コエド第４回 15.02.08
Youtube Data API を使って動画取得編

生まれは奈良県です。
2
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only

アジェンダ
１．YouTubeとWordPress
２．デモサイトとYouTube APIの概要
３．WordPressへの実装
3
補足. TubePress Plugin での実装

5
YouTube（ユーチューブ）の利用者
毎月 10 億人以上のユニークユーザー（訪問人数）
https://www.youtube.com/yt/press/ja/statistics.html
1 分あたり約 100 時間分の動画が、YouTube にアップロードされている。
統計情報
2006年10月からGoogleに買収される。

6
WordPress4.0 Benny から
Embedsコードの対応が追加された。
従来まではプラグインがなければ、
Youtube動画の埋め込みは簡単にできなかった・・・
WordPressでのYoutube動画コンテンツへの対応
Embedsコードは動画URLを投稿するとプレイヤーまで表示してくれる。
オプションでプレイヤーのサイズ変更もできる。
https://codex.wordpress.org/Embeds
WordPress Codex Embeds
YouTube以外にもたくさんの動画コンテンツに対応している。

7
投稿したいYouTube動画のURL
がわかっているときはEmbed
コードで対応できる。
でも、特定キーワードに合致
するYouTube動画を自動的に
掲載するには・・・
でも、不必要な動画を除外して、
よりキーワードに近い動画を掲
載するには・・・

8
２．デモサイトとYouTube APIの概要

9
デモで全体的にご説明。
http://www.world-ht.net/archives/worldheritage/mont-saint-michel

10
YouTube Data API
YouTube Player API
検索したい
キーワード
YouTube API でのキーワード検索から動画再生までの流れ
キーワードで検索
videoidを取得
videoidを指定
videoid
動画

11
３．WordPressへの実装

12
Step1.カスタムフィールド作成
カスタムフィールドで検索したいキーワードが指定できる場所を作る。

13
Step2.YouTube APIを使えるようにする。
https://developers.google.com/youtube/registering_an_application?hl=ja
プロジェクト作成後に、
[Google Developers Console]→[プロジェクトを選択]→[APIと認証] →[認証情報]
で APIキーを取得する。
プロジェクトを作成して API サービスを選択する

14
Step3.テーマファイルにYouTube Data APIと
YouTube Player API を組み込む
https://gist.github.com/YoshinoriKobayashi/4f9961bbe87db37865be
【WordPressテーマファイル用】キーワード検索でのYoutube Data API V3、YouTube Player API の使い方
Gistにサンプルソースをアップしています。
次のページから主要な箇所を説明していきます。

15
$en_name = get_field('youtube');
http://www.advancedcustomfields.com/resources/get_field/
Advanced Custom Fields の場合は、get_field() で取得
カスタムフィールドからの取得
投稿時のテキストをそのまま取得できる。
Documentation

16
http://codex.wordpress.org/Function_Reference/wp_remote_get
リクエストからの取得
Function Reference/wp remote get
https://codeiq.jp/magazine/2014/01/5271/
WordPressと外部APIの連携に役立つ「wp_remote_post関数」簡単マニュアル
// リクエストして、jsonを取得。
$json = file_get_contents($url);
// JSONをPHPオブジェクトに格納
$youtube = json_decode($json);
// wp_remote_get で取得する。
$response = wp_remote_get( $url );
// bodyのjsonをデコード
$youtube = json_decode($response["body"]);
WordPressにはリクエスト用の
関数（wp_remote_get）がある。

17
https://developers.google.com/youtube/iframe_api_reference
YouTube Player API
iframe 組み込みの YouTube Player API リファレンス
基本は以下のページのサンプルコードを流用する。
https://gist.github.com/YoshinoriKobayashi/4f9961bbe87db37865be
【WordPressテーマファイル用】キーワード検索でのYoutube Data API V3、YouTube Player API の使い方
今回のコードは以下の場所にあります。

18
参考リンク集
[JS] Youtubeをサイト内で再生させるYoutube APIの使い方。スマホにも対応させる
http://www.yoheim.net/blog.php?q=20130816
https://developers.google.com/youtube/v3/?hl=ja
YouTube Data API (v3)
https://developers.google.com/youtube/v3/getting-started?hl=ja#intro
YouTube Data API の概要
https://developers.google.com/youtube/iframe_api_reference
iframe 組み込みの YouTube Player API リファレンス
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_qu
ery_parameters?hl=ja
デベロッパーガイド: Data API プロトコル - API クエリパラメータ

19
補足. TubePress Plugin での実装

20
TubePress Plugin
投稿時にショートコードで動画を表示できる。
PHPでWordPressテーマへの組み込みを行う、さらにカスタマイズする、には
上位版の購入が必要。⇒TubePress Pro 版 $39.99
TubePress Pro 4.0.7 購入サイト
[tubepress mode="tag" tagValue="モン・サン＝ミシェル"]
細かなオプションも多く、非常に高機能。
ギャラリーを作るときに有効。
訪問ユーザーに動画検索させることもできる。
投稿画面で以下のようなショートコード書くだけでよい

21
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'TubePress', true)); ?>
カスタムフィールドでショートコードを有効にする。
WordPressテーマファイルに、以下のコードを埋め込むと
ショートコードを有効化できる。
カスタムフィールドの場合は、ショートコードを入力しても
そのままでは使えない！
‘TubePress‘ はカスタムフィールド名です。

22
シンプルなショートコードのみで動画ギャラリーを作成出来るWPプラグイ
ン・TubePressが凄い！
TubePress YouTube Options
WordPressのカスタムフィールドでショートコードを使う
TubePress Plugin 参考サイト
関数リファレンス/apply filters
WordPressで簡単に動画ギャラリーを作成する
TubePress Video Galleries

ご清聴ありがとうございました。

WordPressで作る世界遺産サイト｜Youtube Data API を使って動画取得編

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

More from Yoshinori Kobayashi

More from Yoshinori Kobayashi (20)