app/assets/javascripts/main.js内
js
1window.addEventListener('DOMContentLoaded', function(){ 2 // Option 3 var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxx'; 4 var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"]; 5 6 var SCOPES = "https://www.googleapis.com/auth/youtube.readonly"; 7 8 var authorizeButton = document.getElementById('authorize-button'); 9 var signoutButton = document.getElementById('signout-button'); 10 var content = document.getElementById('content'); 11 var channelForm = document.getElementById('channel-form'); 12 var channelInput = document.getElementById('channel-input'); 13 var videoContainer = document.getElementById('video-container'); 14 var defaultChannel = 'techguyweb'; 15 16 // Form submit and change channel 17 channelForm.addEventListener('submit', function(e){ 18 e.preventDefault(); 19 20 var channel = channelInput.value; 21 22 getChannel(channel); 23 }); 24 25 26 // Load auth2 libraly 27 function handleClientLoad(){ 28 gapi.load('client:auth2' , initClient); 29 } 30 31 // Init API client library and set up sign in listeners 32 function initClient(){ 33 gapi.client.init({ 34 discoveryDocs: DISCOVERY_DOCS, 35 clientId: CLIENT_ID, 36 scope: SCOPES 37 }).then(() => { 38 //Listen for sign in state changes 39 gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus); 40 // Handle initial sign in state 41 updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get()); 42 authorizeButton.onclick = handleAuthClick; 43 signoutButton.onclick = handleSignoutClick; 44 }); 45 } 46 47 // Update UI sign in state changes 48 function updateSigninStatus(isSignedIn) { 49 if(isSignedIn){ 50 authorizeButton.style.display = 'none'; 51 signoutButton.style.display = 'block'; 52 content.style.display = 'block'; 53 videoContainer.style.display = 'block'; 54 getChannel(defaultChannel); 55 } else { 56 authorizeButton.style.display = 'block'; 57 signoutButton.style.display = 'none'; 58 content.style.display = 'nonek'; 59 videoContainer.style.display = 'none'; 60 } 61 } 62 63 // handle login 64 function handleAuthClick(){ 65 gapi.auth2.getAuthInstance().signIn(); 66 } 67 68 // handle logout 69 function handleSignoutClick(){ 70 gapi.auth2.getAuthInstance().signOut(); 71 } 72 73 // Display channel data 74 function showChannelData(data){ 75 var channelData = document.getElementById('channel-data'); 76 channelData.innerHTML = data; 77 } 78 79 // Add commas to number 80 function numberWithCommas(x) { 81 return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 82 } 83 84 85 86 // Get channel from API 87 function getChannel(channel){ 88 gapi.client.youtube.channels 89 .list({ 90 part: 'snippet,contentDetails,statistics', 91 forUsername: channel 92 }) 93 .then(response => { 94 console.log(response); 95 var channel = response.result.items[0]; 96 97 var output = ` 98 <ul class='collection'> 99 <li class='collection-item'>Title: ${channel.snippet.title}</li> 100 <li class='collection-item'>ID: ${channel.id}</li> 101 <li class='collection-item'> Subscribers: ${ 102 numberWithCommas(channel.statistics.subscriberCount) 103 }</li> 104 <li class='collection-item'>Views: ${ 105 numberWithCommas(channel.statistics.viewCount) 106 }</li> 107 <li class='collection-item'>Videos: ${ 108 numberWithCommas(channel.statistics.videoCount) 109 }</li> 110 </ul> 111 <p>${channel.snippet.description}</p> 112 <hr> 113 <a class='btn grey darken-2' target='_blank' href="https://youtube.com/${channel.snippet.customUrl}"> 114 Visit Channel</a> 115 `; 116 showChannelData(output); 117 118 var playlistId = channel.contentDetails.relatedPlaylists.uploads; 119 requestVideoPlaylist(playlistId); 120 }) 121 .catch(error => alert('No Channel By That Name')); 122 } 123 124 function requestVideoPlaylist(playlistId){ 125 var requestOptions = { 126 playlistId: playlistId, 127 part: 'snippet', 128 maxResults: 10 129 } 130 131 var request = gapi.client.youtube.playlistItem.list(requestOptions); 132 133 request.execute(response => { 134 console.log(reaponse); 135 var playListItems = response.result.items; 136 if(playListItems){ 137 var output = '<h4 class="align-center">Latest Videos</h4>'; 138 139 // Loop through videos and append output 140 playListItems.forEach(item => { 141 var videoId = item.snippet.resourceId.videoId; 142 143 output += ` 144 <div class="col s3"> 145 <iframe width="100%" height="auto" src="https://www.youtube.com/embed/ 146 ${videoId}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 147 </div> 148 `; 149 }); 150 151 // Output videos 152 videoContainer.innerHTML = output; 153 154 } else { 155 videoContainer.innerHTML = 'No Uploaded Videos'; 156 } 157 }); 158 } 159}); 160
大変、記述が助長になってしまい申し訳ございません。
より詳細に分析して頂きたいのでよろしくお願い致します。
Uncaught ReferenceError: handleClientLoad is not defined
at HTMLScriptElement.onload
というエラーが出ており、
function handleClientLoad(){
gapi.load('client:auth2' , initClient);
}
こちらの関数が参照できません。
youtubeのチャンネル名をフォーム内に記述するとその結果がhtmlとして表示されると言うものです。
一応、googleアカウントでログインがされると検索フォームが現れるという仕様になっております。
haml
1%section 2 .container 3 %p Log in With Google 4 %button.btn.red#authorize-button 5 Log in 6 %button.btn.red#signout-button 7 Log Out 8 %br/ 9 #content 10 .row 11 .col.s6 12 %form#channel-form 13 .input-field.col.s6 14 %input#channel-input{:placeholder => "Enter Channel Name", :type => "text"} 15 %input.btn.grey.lighten-2#submits__btn{:type => "submit", :value => "Get Channel Data"} 16 .col.s6#channel-data 17 .row#video-container 18%script{:src => "/assets/main.js"} 19 20%script{:async => "https://apis.google.com/js/api.js", :defer => " https://apis.google.com/js/api.js", :onload => "this.onload=function(){};handleClientLoad()", :onreadystatechange => "if (this.readyState === 'complete') this.onload()", :src => "https://apis.google.com/js/api.js"}
元々、DOMContentLoadedイベントをjs全体に記述する前は、channelForm.addEventListener('submit' function(e){})の部分でchannelFormのオブジェクトがnullというエラーが出ておりました。
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/31 08:33
2020/01/31 08:35
2020/01/31 08:41
2020/01/31 08:44
2020/01/31 08:47 編集
2020/01/31 08:47
2020/01/31 08:47
2020/01/31 08:47
2020/01/31 08:49
2020/01/31 09:21
2020/01/31 09:34