wordpressで作る世界遺産サイト｜youtube data api を使って動画取得 編
TRANSCRIPT
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 での実装
4
１．YouTubeとWordPress
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_query_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
ご清聴ありがとうございました。