![Page 1: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/1.jpg)
WordPressで作る世界遺産サイト
TickleCode. Yoshinori Kobayashi
1
WordPressもくもく勉強会 at コエド第4回 15.02.08
Youtube Data API を使って動画取得 編
![Page 2: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/2.jpg)
生まれは 奈良県 です。
2
小林由憲(こばやしよしのり)
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
![Page 3: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/3.jpg)
アジェンダ
1.YouTubeとWordPress
2.デモサイトとYouTube APIの概要
3.WordPressへの実装
3
補足. TubePress Plugin での実装
![Page 4: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/4.jpg)
4
1.YouTubeとWordPress
![Page 5: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/5.jpg)
5
YouTube(ユーチューブ) の利用者
毎月 10 億人以上のユニーク ユーザー(訪問人数)
https://www.youtube.com/yt/press/ja/statistics.html
1 分あたり約 100 時間分の動画が、YouTube にアップロードされている。
統計情報
2006年10月からGoogleに買収される。
![Page 6: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/6.jpg)
6
WordPress4.0 Benny から Embedsコードの対応が追加された。
従来まではプラグインがなければ、 Youtube動画の埋め込みは簡単にできなかった・・・
WordPressでのYoutube動画コンテンツへの対応
Embedsコードは動画URLを投稿するとプレイヤーまで表示してくれる。 オプションでプレイヤーのサイズ変更もできる。
https://codex.wordpress.org/Embeds WordPress Codex Embeds YouTube以外にもたくさんの動画コンテンツに対応している。
![Page 7: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/7.jpg)
7
投稿したいYouTube動画のURLがわかっているときはEmbedコードで対応できる。
でも、特定キーワードに合致するYouTube動画を自動的に掲載するには・・・
でも、不必要な動画を除外して、よりキーワードに近い動画を掲載するには・・・
![Page 8: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/8.jpg)
8
2.デモサイトとYouTube APIの概要
![Page 9: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/9.jpg)
9
デモで全体的にご説明。
http://www.world-ht.net/archives/worldheritage/mont-saint-michel
![Page 10: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/10.jpg)
10
YouTube Data API
YouTube Player API
検索したい キーワード
YouTube API でのキーワード検索から動画再生までの流れ
キーワードで検索
videoidを取得
videoidを指定
videoid
動画
![Page 11: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/11.jpg)
11
3.WordPressへの実装
![Page 12: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/12.jpg)
12
Step1.カスタムフィールド作成
カスタムフィールドで検索したいキーワードが指定できる場所を作る。
![Page 13: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/13.jpg)
13
Step2.YouTube APIを使えるようにする。
https://developers.google.com/youtube/registering_an_application?hl=ja
プロジェクト作成後に、 [Google Developers Console]→[プロジェクトを選択]→[APIと認証] →[認証情報] で APIキーを取得する。
プロジェクトを作成して API サービスを選択する
![Page 14: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/14.jpg)
14
Step3.テーマファイルにYouTube Data APIと YouTube Player API を組み込む
https://gist.github.com/YoshinoriKobayashi/4f9961bbe87db37865be
【WordPressテーマファイル用】キーワード検索でのYoutube Data API V3、YouTube Player API の使い方
Gistにサンプルソースをアップしています。
次のページから主要な箇所を説明していきます。
![Page 15: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/15.jpg)
15
$en_name = get_field('youtube');
http://www.advancedcustomfields.com/resources/get_field/
Advanced Custom Fields の場合は、get_field() で取得
カスタムフィールドからの取得
投稿時のテキストをそのまま取得できる。
Documentation
![Page 16: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/16.jpg)
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)がある。
![Page 17: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/17.jpg)
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 の使い方
今回のコードは以下の場所にあります。
![Page 18: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/18.jpg)
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 クエリ パラメータ
![Page 19: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/19.jpg)
19
補足. TubePress Plugin での実装
![Page 20: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/20.jpg)
20
TubePress Plugin
投稿時にショートコードで動画を表示できる。
PHPでWordPressテーマへの組み込みを行う、さらにカスタマイズする、には 上位版の購入が必要。⇒TubePress Pro 版 $39.99
TubePress Pro 4.0.7 購入サイト
[tubepress mode="tag" tagValue="モン・サン=ミシェル"]
細かなオプションも多く、非常に高機能。
ギャラリーを作るときに有効。
訪問ユーザーに動画検索させることもできる。
投稿画面で以下のようなショートコード書くだけでよい
![Page 21: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/21.jpg)
21
<?php echo apply_filters('the_content', get_post_meta($post->ID, 'TubePress', true)); ?>
カスタムフィールドでショートコードを有効にする。
WordPressテーマファイルに、以下のコードを埋め込むとショートコードを有効化できる。
カスタムフィールドの場合は、ショートコードを入力しても そのままでは使えない!
‘TubePress‘ はカスタムフィールド名です。
![Page 22: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/22.jpg)
22
シンプルなショートコードのみで動画ギャラリーを作成出来るWPプラグイン・TubePressが凄い!
TubePress YouTube Options
WordPressのカスタムフィールドでショートコードを使う
TubePress Plugin 参考サイト
関数リファレンス/apply filters
WordPressで簡単に動画ギャラリーを作成する
TubePress Video Galleries
![Page 23: WordPressで作る世界遺産サイト|Youtube Data API を使って動画取得 編](https://reader034.vdocuments.pub/reader034/viewer/2022042602/55a789e51a28ab86548b46c4/html5/thumbnails/23.jpg)
ご清聴ありがとうございました。