Upload
yoshifumi-yamaguchi
View
2.940
Download
4
Embed Size (px)
DESCRIPTION
YouTube API User Group #1 Kick off
Citation preview
YouTube APIの紹介 サーバサイドからフロントエンドまで
#ytapijp
YouTube API User Group #1, Nov 30th 2011
+Yoshifumi YAMAGUCHI
1
Agenda
• YouTube API User Groupとは • YouTube Overview • YouTube API – Overview – Use Case – Getting Started
• “Create” • information
2
About me なまえ: 山口能迪(やまぐちよしふみ) しごと: テクニカルアカウントマネージャー しゅみ: Python Google+: +Yoshifumi YAMAGUCHI Twitter: @ymotongpoo
3
YOUTUBE API USER GROUP
4
YouTube API User Group 開発者のコミュニティを活性化したい
クリエーターにフォーカスされがち
でも • YouTubeをつかったサイトってたくさんある! • もっとよくできるはず!
これから盛り上げてこうぜ!
5
YOUTUBE OVERVIEW
6
Quiz* 1. YouTubeの1日の視聴者数 30億
2. YouTubeの1日のモバイルでの視聴者数 4億
3. 1分間にアップロードされる動画の合計時間 48時間
7
自分だけの動画サイトが作れる それだけのコンテンツを • 誰でも自由に • 無料で • 好きな形で 使うことができます YouTube APIを使えばインフラを気にする事無く動画サイトが作れます
8
YOUTUBE API OVERVIEW
9
YouTube API Overview YouTube APIは幅広い
• APIは2つ – YouTube Data API – YouTube Player API
• 埋め込みプレーヤー • クロムレスプレーヤー
• バックエンドからフロントエンドまで
10
YouTube Data API YouTubeバックエンド側の処理に強い
• GData APIの1つ • 各種言語用公式ライブラリ – Java, .NET, PHP, Python, Objective-C, JavaScript
• レスポンスはXML – リクエスト/レスポンスはここで確認! gdata.youtube.com/demo/index.html
11
DEMO
YouTube Player API 自分の思うようにプレーヤーを操作したいとき
• 2つのプレーヤー – 埋め込みプレーヤー – クロムレスプレーヤー
• JavaScript, ActionScriptで制御
12
埋め込みプレーヤー 気軽に使えるカスタムプレーヤー
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 : フルスクリーン化可能
埋め込みプレーヤー 気軽に使えるカスタムプレーヤー
するとこんなかんじに変更できます
14
クロムレスプレーヤー 自分だけのプレーヤーを作成可能
• 再生ボタン、音量などの飾りがないプレーヤー • YouTube Player APIでしか制御できない
• クロムレスプレーヤーを用いた事例 – picotube.tv (あとで作者よりご紹介) – 岡村靖幸公式サイト (アーティスト公式サイト) – stagehost (MA7参加)
15
DEMO
デモ&プレイグラウンド 試してみたくなったらここで
code.google.com/apis/youtube/youtube_player_demo.html code.google.com/apis/ajax/playground/?exp=youtube
16
DEMO
YOUTUBE API USE CASE
17
動画投稿サイト
• アップロード部分 – YouTube Data APIを使用
• 表示部分 – クロムレスプレーヤーで自動表示
あたかも自分のバックエンドのように使えます
18
音楽視聴サイト バックエンドとフロントエンドを考える
• バックエンド – YouTube Data APIで動画データを取得
• フロントエンド – クロムレスプレーヤー+JavaScriptライブラリで動画をキューに貯める
19
YOUTUBE API GETTING STARTED
20
YouTube APIを始めてみる 何を準備すればいいのか
必要なのはこれだけ 1. クライアントライブラリ 2. 使う 3. Developer Key(必要な場合)
手元の環境にちょっと加えるだけ!
21
Developer Keyの取得 Googleサービスの開発者登録
• ロギングとアプリケーションを識別 • ダッシュボードでアプリケーションのAPIリクエスト状況を確認することが可能
22
CREATE
23
YouTube Create youtube.com/create
YouTubeをバックエンドとした動画作成アプリ
24
DEMO
INFORMATION
25
利用規約など 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
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
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
29