実行結果
設置サンプルのソース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8" />
<title>Google Visualization API Sample</title>
<style>
@import url(http://reset5.googlecode.com/hg/reset.min.css);
td { word-break:break-all; }
td.google-visualization-table-td { vertical-align:top; }
td.google-visualization-table-th { white-space:nowrap; }
ul { margin-left:2em; list-style-position:inside; }
li { margin-left:2em; }
p { margin:5px 0 0 0!important; padding:0; }
.bsbox { height:200px; overflow:auto; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['table']});</script>
<script type="text/javascript">
// 開発キー
//var APIKEY="AIzaSyBWqa3wGl7b8DKxpepR6acqdvgn54_H-DA";
var APIKEY="AIzaSyC3VBRnfUU9_qO1Gr1ARBO8BZLT-Sp6vFc";
// Google APIのJSクライアントロード後にコールされる
window.onJSClientLoad=function(){
dbg("★onJSClientLoad");
gapi.client.setApiKey(APIKEY);
gapi.client.load('youtube', 'v3', getUserChannel);
};
function getUserChannel(){
dbg("getUserChannel");
// GET https://www.googleapis.com/youtube/v3/channels
// https://developers.google.com/youtube/v3/docs/channels/list
var request=gapi.client.request({
mine:"",
path:"/youtube/v3/channels",
params :{
//チャンネルIDをカンマ区切りで複数指定(ex. yt.setConfig('CHANNEL_ID', "UCWuGWqlTp0_To1eJuSBvLMg");)
/*
UCWuGWqlTp0_To1eJuSBvLMg http://www.youtube.com/user/cocoism
UCosXctaTYxN4YPIvI5Fpcrw http://www.youtube.com/user/cocacola
UC8sOGe37TbeZhlQLMGQCqBw http://www.youtube.com/user/mercedesbenzjapan
UC1MZ9XvYFOU8s9ORxWoZ8Gw http://www.youtube.com/user/docomoOfficial
UCG-5D9k_fL4FnMeNuraeAtA http://www.youtube.com/user/SKE48
UC1oPBUWifc0QOOY8DEKhLuQ http://www.youtube.com/user/avexnetwork
UC_x5XG1OV2P6uZZ5FSM9Ttw http://www.youtube.com/user/GoogleDevelopers
UCBR8-60-B28hp2BmDPdntcQ http://www.youtube.com/user/YouTube
UCNL1ZadSjHpjm4q9j2sVtOA http://www.youtube.com/user/ladygagaofficial
*/
id:"UCWuGWqlTp0_To1eJuSBvLMg,UCosXctaTYxN4YPIvI5Fpcrw,UC8sOGe37TbeZhlQLMGQCqBw,UC1MZ9XvYFOU8s9ORxWoZ8Gw,UCG-5D9k_fL4FnMeNuraeAtA,UC1oPBUWifc0QOOY8DEKhLuQ,UC_x5XG1OV2P6uZZ5FSM9Ttw,UCBR8-60-B28hp2BmDPdntcQ,UCNL1ZadSjHpjm4q9j2sVtOA",
//part:"id,snippet,brandingSettings,contentDetails,invideoPromotion,statistics,topicDetails"
part:"id,snippet,brandingSettings,contentDetails,invideoPromotion,statistics,topicDetails"
/*
id チャンネルID
snippet 紹介文、登録日、サムネイル(default/medium/high)、タイトル
brandingSettings
contentDetails googlePlusUserId,relatedPlaylists
invideoPromotion はいってない
statistics コメント数、登録者数、動画数、再生回数
topicDetails topicIDの配列
*/
}
});
request.execute(function(resp,rawResp) {
dbg(resp);
dbg(rawResp);
drawVisualization(resp);
});
}
// テーブル描画
function drawVisualization(resp) {
dbg("★drawVisualization");
dbg(resp);
// Create and populate the data table.
var JSONObject={};
JSONObject.rows=[];
JSONObject.cols=[
{id: 'channelId', label: 'チャンネルID', type: 'string'},
{id: 'title', label: 'チャンネル名', type: 'string'},
{id: 'thumbnail', label: 'サムネイル', type: 'string'},
{id: 'description', label: '紹介文', type: 'string'},
{id: 'publishedAt', label: '登録日', type: 'string'},
{id: 'commentCount', label: 'コメント数', type: 'number'},
{id: 'subscriberCount', label: '登録者数', type: 'number'},
{id: 'videoCount', label: '動画数', type: 'number'},
{id: 'viewCount', label: '再生回数', type: 'number'},
{id: 'googlePlusUserId', label: 'google+', type: 'string'},
{id: 'relatedPlaylists', label: 'relatedPlaylists', type: 'string'},
{id: 'brandingSettings', label: 'brandingSettings', type: 'string'}
];
$.each(resp.items, function(i, item){
var html_relatedplaylists="";
for(var x in item.contentDetails.relatedPlaylists){
if(x=="likes") xs="評価の高い動画";
else if(x=="favorites") xs="お気に入りの動画";
else if(x=="uploads") xs="アップロード動画";
html_relatedplaylists+="<a href='http://www.youtube.com/playlist?list="+item.contentDetails.relatedPlaylists[x]+"'>"+xs+"</a><br>";
}
var html_brandingsettings="<div class='bsbox'>";
for(var x in item.brandingSettings){
html_brandingsettings+="<p><b>"+x+"</b></p><ul>";
for(xx in item.brandingSettings[x]){
if(item.brandingSettings[x].length>0){
html_brandingsettings+="<li>";
for(xxx in item.brandingSettings[x][xx]){
html_brandingsettings+=""+xxx+":"+item.brandingSettings[x][xx][xxx];
}
html_brandingsettings+="</li>";
}else{
html_brandingsettings+="<li>"+xx+":"+item.brandingSettings[x][xx]+"</li>";
}
}
html_brandingsettings+="</ul>";
}
html_brandingsettings+="</div>";
JSONObject.rows[i]={
c:[
{v: item.id},
{v: item.snippet.title},
{v: item.snippet.thumbnails.default.url},
{v: item.snippet.description},
{v: (item.snippet.publishedAt)?item.snippet.publishedAt.split("T")[0]:"-"},
{v: item.statistics.commentCount},
{v: item.statistics.subscriberCount},
{v: item.statistics.videoCount},
{v: item.statistics.viewCount},
{v: item.contentDetails.googlePlusUserId},
{v: html_relatedplaylists},
{v: html_brandingsettings}
]
};
});
var data=new google.visualization.DataTable(JSONObject);
// Create and draw the visualization.
table=new google.visualization.Table(document.getElementById('table'));
//フォーマット
//{v: "<a href='http://www.youtube.com/channel/"+item.id+"' title='http://www.youtube.com/channel/"+item.id+"' rel='external'>"+item.snippet.title+"</a>"},
var formatter=new google.visualization.PatternFormat('{0}<p><a href="http://www.youtube.com/channel/{0}" target="_blank">http://www.youtube.com/channel/{0}</a></p>');
formatter.format(data, [0]);
//{v: "<img src='"+item.snippet.thumbnails.default.url+"' />"},
var formatter=new google.visualization.PatternFormat('{1}<p><img src="{1}" alt="{0}" /></p>');
formatter.format(data, [2,2]);
/*
var formatter=new google.visualization.NumberFormat({
fractionDigits:0, //小数点以下なし
groupingSymbol: ',' //3ケタ区切り
});
formatter.format(data, 5);
formatter.format(data, 6);
formatter.format(data, 7);
formatter.format(data, 8);
*/
//カラム表示調整
//data.removeColumn(2);
//テーブル描画
table.draw(data, {'allowHtml': true, "showRowNumber":true});
}
google.setOnLoadCallback(drawVisualization);
function dbg(str){
console.log(str);
}
</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onJSClientLoad"></script>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="table"><!-- テーブル --></div>
</body>
</html>