その1からの続き。
第2部：コードラボ： YouTube APIs を体験してみよう - Jeremy Walkerさん
こちらのセッションは実際に参加者も手を動かして YouTube API を使ってみようという内容でした。
ここではそこで教わった作業手順をメモしておきます。
資料
スライド
Public Mastering the New YouTube API Codelab (Japan)
https://docs.google.com/presentation/d/1co5PYk70yjJWGbHH1MVYWl07d2KlqR904aKMuBV54nU/pub?start=false&loop=false&delayms=3000#slide=id.p18
(2013/02/23 追記)
公開して良いのかどうか分からないので最初は書いてなかったのですが公式ページにてリンクが貼られていたのでCodeLab(ハンズオン)用の資料のリンクを追記。このページの「Test Account」に記載されているGoogleアカウントでログインするとここで解説するサンプルを正しく動作出来ます。ここに記載されているアカウントがいつまで有効かは不明なので使えなくなっている様で有れば自身のGoogleアカウントでYouTubeへ動画を3件以上アップロードしてからサンプルを実行すると正しく動作確認出来ます。
Public YouTube API Codelab: Web Application Example (Japan)
https://docs.google.com/document/d/1QLF1Nrg8xBCOfZrC8yVICKi53OWwY4FPky7iZdk9NdI/pub
(追記ここまで)
YouTube Data APIを使ったプログラム制作
Google API Console にアクセスして ID を取得
以下のページにGoogleのアカウントでログイン。
https://code.google.com/apis/console
プロジェクトの作成
画面右上の「API Project」→「Create...」とクリック。
プロジェクト名を「Cool Demo」にして作成。
するとこの様などのサービスのAPIを有効にするかを選択する画面が表示されます。
今回は下までスクロールした所にある、「YouTube Analytics API」と「YouTube Data API v3」を有効(ON)にします。
↓
この様な画面が表示されるので「Creat an OAuth 2.0 client ID...」をクリック。
Product name: の欄に「Cool Demo Japan」と入力し、「Next」ボタンをクリック。
「more options」のリンクをクリック。
切り替わった画面の上の入力欄の内容は削除、下の欄にはこれからテストする環境のURL(HTMLを置くURL)を入力します。レンタルサーバのURLやローカルで動作させる場合はローカルのURLを記述します。
自分の場合はMac上のPythonを利用してサーバを立てたのでここの指定は http://0.0.0.0:8000 と入力しました。
※(筆者注)ここでは Origin の設定を記述します。 Origin については気になる方はこちらの記事を参照下さい。
HTMLでオリジン(Origin)とは何を意味しているのか - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110113/1294937964
※(筆者注)Pythonでローカルにサーバを立てる方法はこちらを参照下さい。
Pythonで簡易Webサーバを立てる - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110925/1316966331
「Create client ID」ボタンを押し、この様な画面が表示されたらIDの作成は完了です。後で利用するので Cleint ID: の項目に記述されている文字列をメモして置いて下さい。
コードに Client ID を設定
こちらのサンプルコードに実際に組み込みます。
ここでは lesson3 のフォルダのサンプルを元に Client ID の設定方法を説明します。
lesson3 フォルダの中の index.js の先頭の OAUTH2_CLIENT_ID の値に先ほどメモした Client ID の値を設定します。
これで実行するとこの様な画面が表示されます。
リンクに成っている authorize の部分をクリックするとこの様なポップアップが表示されます。右側にProduct name(プロダクト名)として入力した「Cool Demo Japan」の文字が確認出来ます。
Twitter のOAuthと同様にGoogleのサイトにてユーザに対して、"「Cool Demo Japan」がこの様なデータへのアクセスを要求していますが許可しますか？"と提示されます。
ここでユーザが「アクセスを許可」を押すとユーザのデータにアクセス出来るように成ります。
(補足)
ここでアクセス許可したプロダクト(サービス)を後で削除(許可を取り消す)はこちらの記事に記載して有る手順で行えます。
Google のサービスで許可した OAuth を削除する方法 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20130221/1361470381
コードの解説
ここでは lesson3 フォルダの index.js のコードの内容を解説します。
ポップアップを遅らせて表示
ユーザにOAuthの許可を求めるポップアップを表示する処理行なっている関数で有る checkAuth をタイマーを使ってちょっと遅らせて表示している理由 → ページを開いた直後にポップアップを表示するとブロックしてしまうブラウザが有るため、ブロックされない様にする対策。
window.onJSClientLoad = function() {
gapi.auth.init(function() {
window.setTimeout(checkAuth, 1);
});
};
gapi.auth.authorize関数の処理
gapi.auth.authorize ではユーザにアクセス許可を求める内容を設定。
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
}, handleAuthResult);ユーザの処理が終わったら handleAuthResult が呼ばれる。
handleAuthResult の引数 authResult にはユーザが許可した(true)かしなかった(false)かが返される。
function handleAuthResult(authResult) {ユーザが NO を選択したら再度、許可を求めるダイアログを表示。
} else {
// Auth was unsuccessful; show the things related to prompting for auth and hide the things
// that should be visible after auth succeeds.
$('.post-auth').hide();
$('.pre-auth').show();
// Make the #login-link clickable, and attempt a non-immediate OAuth 2 client flow.
// The current function will be called when that flow is complete.
$('#login-link').click(function() {
gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: false
}, handleAuthResult);
});
}HTMLの id="message" には各種メッセージやエラー文などを表示。
loadAPIClientInterfaces関数の処理
YouTubeの動画にはそれぞれにChannel IDが存在する(※)。YouTubeからのレスポンスの中でJSONの場合、 "id" として返される値。
※(筆者注)URLの v= の後に記載されている文字列が Channel ID みたいです。
YouTube Data APIとAnalytics APIをロード。v3,v1はバージョンの指定。
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
gapi.client.load('youtubeAnalytics', 'v1', function() {
// Once both the client interfaces are loaded, use the Data API to request information
// about the authenticated user's channel.
getUserChannel();
});
});
}
getUserChannel関数の処理
リクエストの作成。 mine: true → OAuthで許可したユーザのチャンネル情報を取得する(OAuthのポップアップが表示される)。
var request = gapi.client.youtube.channels.list({
// mine: true indicates that we want to retrieve the channel for the authenticated user.
mine: true,
part: 'id,contentDetails'
});
execute関数の処理
executeで実際にYouTubeのサーバへ投げる。
request.execute(function(response) {最新3件の upload ID (※)を取得する処理の記述。
※YouTubeにアップした動画のうち最新の3件のID。OAuthで認可(アクセス許可)を行ったGoogleアカウントがYouTubeに動画を3件以上アップしていない場合にはアップしているだけしか取得できません。
var uploadsListId = response.items[0].contentDetails.relatedPlaylists.uploads;
getUploadsList関数の処理
playlistItems →ビデオリストIDを取得する時に必要。
var request = gapi.client.youtube.playlistItems.list({ビデオIDを取得。
var videoIds = $.map(response.items, function(item) {
return item.snippet.resourceId.videoId;
});
getMetadataForVideos関数の処理
詳しい情報を取得する関数。タイトル名などを取得。
Video IDは , (カンマ)区切りで複数のidについて情報をまとめてリクエスト可能。
var request = gapi.client.youtube.videos.list({
// 'id' takes a comma-separated string of video ids.
id: videoIds.join(','),
part: 'id,snippet,statistics'
});
Analytics APIについて
プログラムの記述について
ここでは lesson5 の index.js を例に解説。
- metrics には取得したい項目を指定
「今日〜1ヶ月前」のデータを取得したい場合の記述例。
var today = new Date();
var lastMonth = new Date(today.getTime() - ONE_MONTH_IN_MILLISECONDS);ONE_MONTH_IN_MILLISECONDS は先頭の方に以下の様に記述して有ります。
var ONE_MONTH_IN_MILLISECONDS = 1000 * 60 * 60 * 24 * 30;
QA
Q : YouTube Data API v3のローンチはいつくらい？
A : 出てから結構経っているので今四半期くらい。アナリティクスの方も今四半期くらい。
Q : 将来的には生の動画ファイルにアクセスしたいがその様な機能はこれから載せられる予定は有るのか。
A : 恐らくONでしょう。クリエイター側がゆるしてくれないでしょう。その代わり動画がアップされると出来る限りの様々なフォーマットに変換しています。
Q : CSSを使った加工などもしたいけどどうしてもPlayer APIを使わないと実行出来ない？
A : 答えはYESですが現在、その様な要望に対応出来るように開発を進めている。とは言え出来ない事も有るのでその様な場合にはFlashを活用して欲しい。
Q : YouTube APIを使っている為、モバイルの差を吸収してくれているのですがiOSとAndroidで使える、使えないの(ボリュームの変更が出来る、出来ない)など一覧(マトリクス)は公式で準備して有る？
A : 無い。ドキュメントの記述と実際の動作が異なる場合はバクなのでバクレポートをお願いします。
Q : これからvideoタグのsrc属性にYouTubeの動画を指定する事が可能になる可能性は有る？
A : ポリシー的に不可能。
Q : Analytics APIは開発者向けに作られている。別途、開発者向けでは無いもの(Webサービス版)も有るけどあえてAPIを使う利点は？
A : 大掛かりにデータを分析する時、自分の持っているデータと組み合わせて使う時。
