WordPressで作る世界遺産サイト｜Youtube Data API を使って動画取得 編
8 likes3,874 views
2015-02-08（日）14:00 「WordPressもくもく勉強会 at コエド第４回」 ショートセッションでのスライドです。 世界遺産サイトを制作しながら、キーワードからYouTube動画を取得して、プレイヤーを表示して、再生できるようにしました。 キーワードで除外も設定できるので、より柔軟に動画が取得できます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 「WordPressもくもく勉強会 at コエド」は、WordPressを学びたい人たちが集まって発表したり、自主学習する勉強会です。定期開催しています。 開催の連絡は以下の方法で受け取ることができます。 ## DoorKeeperグループ イベント申し込みを受け付けている、DoorKeeper でのグループです。 https://wp-moku.doorkeeper.jp/ ## Facebookグループ: イベント告知や技術情報をお互いにシェアしています。 https://www.facebook.com/groups/194782003975961/ ## Twitterハッシュタグ ハッシュタグは、 #wpmoku です。 Twitterにもイベント、勉強会の情報を流しています。
![13
Step2.YouTube APIを使えるようにする。
https://developers.google.com/youtube/registering_an_application?hl=ja
プロジェクト作成後に、
[Google Developers Console]→[プロジェクトを選択]→[APIと認証] →[認証情報]
で APIキーを取得する。
プロジェクトを作成して API サービスを選択する](https://image.slidesharecdn.com/150206-wp-moku-youtube-api-150207120008-conversion-gate01/85/WordPress-Youtube-Data-API-13-320.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）がある。](https://image.slidesharecdn.com/150206-wp-moku-youtube-api-150207120008-conversion-gate01/85/WordPress-Youtube-Data-API-16-320.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_qu
ery_parameters?hl=ja
デベロッパー ガイド: Data API プロトコル - API クエリ パラメータ](https://image.slidesharecdn.com/150206-wp-moku-youtube-api-150207120008-conversion-gate01/85/WordPress-Youtube-Data-API-18-320.jpg)
![20
TubePress Plugin
投稿時にショートコードで動画を表示できる。
PHPでWordPressテーマへの組み込みを行う、さらにカスタマイズする、には
上位版の購入が必要。⇒TubePress Pro 版 $39.99
TubePress Pro 4.0.7 購入サイト
[tubepress mode="tag" tagValue="モン・サン＝ミシェル"]
細かなオプションも多く、非常に高機能。
ギャラリーを作るときに有効。
訪問ユーザーに動画検索させることもできる。
投稿画面で以下のようなショートコード書くだけでよい](https://image.slidesharecdn.com/150206-wp-moku-youtube-api-150207120008-conversion-gate01/85/WordPress-Youtube-Data-API-20-320.jpg)
WordPressで作る世界遺産サイト｜Youtube Data API を使って動画取得 編
- 1. WordPressで作る世界遺産サイト TickleCode. Yoshinori Kobayashi 1 WordPressもくもく勉強会 at コエド第４回 15.02.08 Youtube Data API を使って動画取得 編
- 2. 生まれは 奈良県 です。 2 小林由憲（こばやしよしのり） Twitter: @AsbyuKobayashi ブログ: In Advance Only
- 5. 5 YouTube（ユーチューブ） の利用者 毎月 10 億人以上のユニーク ユーザー（訪問人数） https://www.youtube.com/yt/press/ja/statistics.html 1 分あたり約 100 時間分の動画が、YouTube にアップロードされている。 統計情報 2006年10月からGoogleに買収される。
- 6. 6 WordPress4.0 Benny から Embedsコードの対応が追加された。 従来まではプラグインがなければ、 Youtube動画の埋め込みは簡単にできなかった・・・ WordPressでのYoutube動画コンテンツへの対応 Embedsコードは動画URLを投稿するとプレイヤーまで表示してくれる。 オプションでプレイヤーのサイズ変更もできる。 https://codex.wordpress.org/Embeds WordPress Codex Embeds YouTube以外にもたくさんの動画コンテンツに対応している。
- 10. 10 YouTube Data API YouTube Player API 検索したい キーワード YouTube API でのキーワード検索から動画再生までの流れ キーワードで検索 videoidを取得 videoidを指定 videoid 動画
- 13. 13 Step2.YouTube APIを使えるようにする。 https://developers.google.com/youtube/registering_an_application?hl=ja プロジェクト作成後に、 [Google Developers Console]→[プロジェクトを選択]→[APIと認証] →[認証情報] で APIキーを取得する。 プロジェクトを作成して API サービスを選択する
- 14. 14 Step3.テーマファイルにYouTube Data APIと YouTube Player API を組み込む https://gist.github.com/YoshinoriKobayashi/4f9961bbe87db37865be 【WordPressテーマファイル用】キーワード検索でのYoutube Data API V3、YouTube Player API の使い方 Gistにサンプルソースをアップしています。 次のページから主要な箇所を説明していきます。
- 15. 15 $en_name = get_field('youtube'); http://www.advancedcustomfields.com/resources/get_field/ Advanced Custom Fields の場合は、get_field() で取得 カスタムフィールドからの取得 投稿時のテキストをそのまま取得できる。 Documentation
- 16. 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. 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. 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. 19 補足. TubePress Plugin での実装
- 20. 20 TubePress Plugin 投稿時にショートコードで動画を表示できる。 PHPでWordPressテーマへの組み込みを行う、さらにカスタマイズする、には 上位版の購入が必要。⇒TubePress Pro 版 $39.99 TubePress Pro 4.0.7 購入サイト [tubepress mode="tag" tagValue="モン・サン＝ミシェル"] 細かなオプションも多く、非常に高機能。 ギャラリーを作るときに有効。 訪問ユーザーに動画検索させることもできる。 投稿画面で以下のようなショートコード書くだけでよい
- 21. 21 <?php echo apply_filters('the_content', get_post_meta($post->ID, 'TubePress', true)); ?> カスタムフィールドでショートコードを有効にする。 WordPressテーマファイルに、以下のコードを埋め込むと ショートコードを有効化できる。 カスタムフィールドの場合は、ショートコードを入力しても そのままでは使えない！ ‘TubePress‘ はカスタムフィールド名です。
- 22. 22 シンプルなショートコードのみで動画ギャラリーを作成出来るWPプラグイ ン・TubePressが凄い！ TubePress YouTube Options WordPressのカスタムフィールドでショートコードを使う TubePress Plugin 参考サイト 関数リファレンス/apply filters WordPressで簡単に動画ギャラリーを作成する TubePress Video Galleries
- 23. ご清聴ありがとうございました。