PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプルのソース

<!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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <div id="table"><!-- テーブル --></div>
</body>
</html>