Q&A
エラーの確認をされていますか？
JavaScriptWeb開発パーフェクトマスターで勉強しています。
XAMPPとnotepad++を使用して、ブラウザはfirefox,googleを使っています。
以下のコードを使って
Youtube Data APIを利用してjQueryを検索して動画データを検索しているのですがうまくいきません。
Googleアカウント、APIキーは取得しています。
プロジェクト:sanchu-projでAPIは有効ですとなっています。
ネットを見ながらやってみたのですが
http://localhost/chap12/sec1/YouTubeDataAPI.htmlを実行すると
](6a34e7676696c49eb84f1245870977a3.png
となってクリックしても動画が検索されません。
//現在の状況は
私がやりたいことは以下のコードを実行してjQueryでYoutube Data APIを利用することです。そのために、「Youtube検索」欄を表示して、「jQuery」と打ち込んで「jQuery」に関連した動画を表示することです。とりあえずここまでやりたいです。今の状況は「Youtube検索」欄の表示まではできています。
「jQuery」と打ち込んでも、何も表示されないです。
これから何をどうすればいいかわからない状況です。
コードのどこが悪いのか教えてください。
ちなみにYouTubeは利用したことがありませんでしたので、動画サイトだというぐらいしかをわかりませんが、お願いいたします。
JavaScript
1 2//program.js 3jQuery(function($){ 4 5 //取得済のAPIキー 6 var apikey = 'AIzaSyA3AttlN3PkFPGCI8xnpPMYe7zbxbitvcQ'; 7 8 //タブをクリックして切り替えた際に、コンテンツの内容を変更します。 9 function getResult(e){ 10 11 $.getJSON( 12 'https://www.googleapis.com/youtube/v3/search?', 13 { 14 15 key:apikey, 16 q: $('#keywd').val(), 17 part:'snippet', 18 maxResults:20, 19 type:'video', 20 } 21 ) 22 23 .done(function(data){ 24 25 //div要素の内容をからにする 26 $('#result').empty(); 27 28 $.each(data.items,function(){ 29 30 $('#result').append( 31 $('<a></a>') 32 .attr({ 33 href:'https://youtube.com/watch?v='+this.id.videoID, 34 target:'blink' 35 }) 36 37 .append( 38 39 $('<img>') 40 .addClass('thumbnail') 41 42 .attr({ 43 src:this.snippet.thumbnails.medium.url, 44 title:this.snippet.title 45 }) 46 ) 47 ); 48 49 }); 50 51 }); 52 53 }; 54 55 //ボタンのイベントリスナー 56 $('#send').click(getResult); 57 58});
stylesheet
1//style.css 2 3img.thumbnail { 4 width: 250px; 5 height: 150px; 6 margin: 20px; 7} 8
HTML
1//YouTubeDataAPI.html 2<!DOCTYPE html> 3<html> 4<head> 5 <meta charset='UTF-8' /> 6 <title>sample</title> 7 <link type="text/css" rel="stylesheet" href="style.css" /> 8 <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> 9 <script src="program.js"></script> 10</head> 11<body> 12 <hr> 13 <form> 14 <input type="text" id="keywd" size="50" /> 15 <input type="button" id="send" value="Youtube検索" /> 16 </form> 17 <hr> 18 <div id="result"></div> 19</body> 20</html>
一度エラーが表示されましたが、Yutubeだけでも初めてなので、よくわかりません。
エラー表示のところまでは、たどり着きましたが、自分が何をやっているかもあいまいです。
Yutube DATa APIｖ３について、ネット検索で勉強中です。ありがとうございます。少し理解したら質問させてもらいます。
エラーの確認のやり方はおかげさまでりかいできました。指摘していただいた箇所を修正して確かめたら
エラーは出ませんでした。ありがとうございます。
回答2件
0
ベストアンサー
こちらを試してください。
JavaScriptの実行時に発生したエラー内容を確認することができると思います。
こちらをやってみると
Uncaught SyntaxError: Unexpected token ')' file.js:22
というエラーが22行目に出ています。
diff
1- .done(function(data){ 2+ .done(function(data)){
と直しましょう。
Uncaught SyntaxError: Invalid or unexpected token
は
diff
1- #('#result').append( 2+ $('#result').append(
と直しましょう。
Uncaught TypeError: $(...).addClass(...).atrr is not a function
は
diff
1- .atrr({ 2+ .attr({
と直しましょう。
投稿2019/10/03 09:44
総合スコア777
ありがとうございます。ご指摘していただいた箇所を訂正して実行してみたのですが、何も表示されません。
この章にはprogram.jsが５種類出てきてどこかでエラー表示がされていたのですが、再現できない状態です。YouTubeDataAPI.htmlも3種類ぐらい出てきていて、少しづつ変化させています。
program.jsの中のq: $('#keywd').val(),のところで「ｑ：」が「’ｑ’：」になっている箇所があったのですが、どちらが正解なのでしょうか。もうすこし検索した「YouTube API v3の利用」を勉強してみます。質問のコードが最初なのでこれが動かないことには先に進めないのでよろしくお願いします。
多分先に進んでみたときに、どこかでエラーコードが表示された覚えがあります。
今日は休んで、明日の朝挑戦します。ヒント、ご指導お願いいたします。
確認ですが、22行目は
.done(function(data){
でいいのではないでしょうか、。参考書はそうなっているし、少し勉強しましたのでわたしもそう思うのですがいかがでしょうか。間違っていた箇所は修正させていただきました。ありがとうございます。
ですが、まだうまくいきません。よろしくおねがいいたします。
横からすみません。
- .done(function(data){
+ .done(function(data)){
こちらは、上下が逆ではないですか。閉じ括弧が多いほうが現状のコードで、括弧を除去したほうがあるべき姿と思います。
はい、おしゃる通りだと思います。querykumaさんに教えていただいたエラーチェックで確認しました。
ありがとうございます。修正します。実行結果がまだうまくいきません。
参考書を再度読み直し、YoutubeDataAPI.htmlの再チェック、program.jsの「q: $('#keywd').val(),」を
「'q': $('#keywd').val(),」に変更して実行したら、
『「Youtube検索」欄を表示して、「jQuery」と打ち込んで「jQuery」に関連した動画を表示する』ところまで実現できました。皆さんありがとうございます。
0
typo があります。
#('#result')
↓
$('#result')
投稿2019/10/03 09:42
総合スコア36946
ご指摘ありがとうございます。
あなたの回答
tips
プレビュー
