29
YouTube APIの紹介 サーバサイドからフロントエンドまで #ytapijp YouTube API User Group #1, Nov 30 th 2011 +Yoshifumi YAMAGUCHI 1

YouTube APIの紹介

Embed Size (px)

DESCRIPTION

YouTube API User Group #1 Kick off

Citation preview

Page 1: YouTube APIの紹介

YouTube APIの紹介 サーバサイドからフロントエンドまで

#ytapijp

YouTube API User Group #1, Nov 30th 2011

+Yoshifumi YAMAGUCHI

1  

Page 2: YouTube APIの紹介

Agenda

•  YouTube API User Groupとは •  YouTube Overview •  YouTube API –  Overview –  Use Case –  Getting Started

•  “Create” •  information

2  

Page 3: YouTube APIの紹介

About me なまえ: 山口能迪(やまぐちよしふみ) しごと: テクニカルアカウントマネージャー しゅみ: Python Google+: +Yoshifumi YAMAGUCHI Twitter: @ymotongpoo

3  

Page 4: YouTube APIの紹介

YOUTUBE API USER GROUP

4  

Page 5: YouTube APIの紹介

YouTube API User Group 開発者のコミュニティを活性化したい

クリエーターにフォーカスされがち

でも •  YouTubeをつかったサイトってたくさんある! •  もっとよくできるはず!

これから盛り上げてこうぜ!

5  

Page 6: YouTube APIの紹介

YOUTUBE OVERVIEW

6  

Page 7: YouTube APIの紹介

Quiz* 1.  YouTubeの1日の視聴者数 30億

2.  YouTubeの1日のモバイルでの視聴者数 4億

3.  1分間にアップロードされる動画の合計時間 48時間

7  

Page 8: YouTube APIの紹介

自分だけの動画サイトが作れる それだけのコンテンツを •  誰でも自由に •  無料で •  好きな形で 使うことができます YouTube APIを使えばインフラを気にする事無く動画サイトが作れます

8  

Page 9: YouTube APIの紹介

YOUTUBE API OVERVIEW

9  

Page 10: YouTube APIの紹介

YouTube API Overview YouTube APIは幅広い

•  APIは2つ –  YouTube Data API –  YouTube Player API

•  埋め込みプレーヤー •  クロムレスプレーヤー

•  バックエンドからフロントエンドまで

10  

Page 11: YouTube APIの紹介

YouTube Data API YouTubeバックエンド側の処理に強い

•  GData APIの1つ •  各種言語用公式ライブラリ –  Java, .NET, PHP, Python, Objective-C, JavaScript

•  レスポンスはXML – リクエスト/レスポンスはここで確認! gdata.youtube.com/demo/index.html  

11  

DEMO

Page 12: YouTube APIの紹介

YouTube Player API 自分の思うようにプレーヤーを操作したいとき

•  2つのプレーヤー – 埋め込みプレーヤー – クロムレスプレーヤー

•  JavaScript, ActionScriptで制御

12  

Page 13: YouTube APIの紹介

埋め込みプレーヤー 気軽に使えるカスタムプレーヤー

GETパラメータを追加するだけである程度カスタマイズされたプレーヤーが追加可能

13  

<iframe  width="420"  height="315”      src=http://www.youtube.com/v/u1zgFlCw8Aw?rel=1&color1=0x2b405b&color2=0x6b8ab6&border=1&fs=1  frameborder="0"  allowfullscreen></iframe>  

エンベッドコード

rel : 関連動画 color1 : 境界線の色 color2 : コントローラの色 border : プレーヤーの境界線 fs : フルスクリーン化可能

Page 14: YouTube APIの紹介

埋め込みプレーヤー 気軽に使えるカスタムプレーヤー

するとこんなかんじに変更できます

14  

Page 15: YouTube APIの紹介

クロムレスプレーヤー 自分だけのプレーヤーを作成可能

•  再生ボタン、音量などの飾りがないプレーヤー •  YouTube Player APIでしか制御できない

•  クロムレスプレーヤーを用いた事例 –  picotube.tv (あとで作者よりご紹介) – 岡村靖幸公式サイト (アーティスト公式サイト) –  stagehost (MA7参加)

15  

DEMO

Page 16: YouTube APIの紹介

デモ&プレイグラウンド 試してみたくなったらここで

code.google.com/apis/youtube/youtube_player_demo.html  code.google.com/apis/ajax/playground/?exp=youtube  

16  

DEMO

Page 17: YouTube APIの紹介

YOUTUBE API USE CASE

17  

Page 18: YouTube APIの紹介

動画投稿サイト

•  アップロード部分 –  YouTube Data APIを使用

•  表示部分 – クロムレスプレーヤーで自動表示

あたかも自分のバックエンドのように使えます

18  

Page 19: YouTube APIの紹介

音楽視聴サイト バックエンドとフロントエンドを考える

•  バックエンド –  YouTube Data APIで動画データを取得

•  フロントエンド – クロムレスプレーヤー+JavaScriptライブラリで動画をキューに貯める

19  

Page 20: YouTube APIの紹介

YOUTUBE API GETTING STARTED

20  

Page 21: YouTube APIの紹介

YouTube APIを始めてみる 何を準備すればいいのか

必要なのはこれだけ 1.  クライアントライブラリ 2.  使う 3.  Developer Key(必要な場合)

手元の環境にちょっと加えるだけ!

21  

Page 22: YouTube APIの紹介

Developer Keyの取得 Googleサービスの開発者登録

•  ロギングとアプリケーションを識別 •  ダッシュボードでアプリケーションのAPIリクエスト状況を確認することが可能

22  

Page 23: YouTube APIの紹介

CREATE

23  

Page 24: YouTube APIの紹介

YouTube Create youtube.com/create

YouTubeをバックエンドとした動画作成アプリ

24  

DEMO

Page 25: YouTube APIの紹介

INFORMATION

25  

Page 26: YouTube APIの紹介

利用規約など YouTube APIを使って何かするぞという場合

•  Terms of Service (利用規約) –  code.google.com/intl/ja/apis/youtube/terms.html  

•  収益化  –  code.google.com/intl/ja/apis/youtube/

creating_monetizable_applications.html  

•  ブランド設定ガイドライン –  code.google.com/intl/ja/apis/youtube/branding.html  

26  

Page 27: YouTube APIの紹介

YouTube API情報 Developer Keyを取得してHackしよう!

•  Dashboard: code.google.com/apis/youtube/dashboard  •  Docs: code.google.com/apis/youtube  •  Blog: apiblog.youtube.com  •  Forum: code.google.com/apis/youtube/forum  •  Twitter: twitter.com/YouTubeDev  

27  

Page 28: YouTube APIの紹介

Google Groups 最新情報やwork aroundなど

•  YouTube APIs Developer Forum –  groups.google.com/group/youtube-­‐api-­‐gdata    

•  YouTube APIs Announcement Forum –  groups.google.com/group/youtube-­‐api  

•  YouTube API JP (どんどん参加して!) –  groups.google.com/group/youtube-­‐api-­‐jp  

28  

Page 29: YouTube APIの紹介

29