質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

374閲覧

jQuery でYoutube Data APIを利用するで参考書の通りいかない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/10/03 02:53

編集2019/10/04 00:44

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

querykuma

2019/10/03 09:46

エラーの確認をされていますか?
退会済みユーザー

退会済みユーザー

2019/10/03 10:26

一度エラーが表示されましたが、Yutubeだけでも初めてなので、よくわかりません。 エラー表示のところまでは、たどり着きましたが、自分が何をやっているかもあいまいです。 Yutube DATa APIv3について、ネット検索で勉強中です。ありがとうございます。少し理解したら質問させてもらいます。
退会済みユーザー

退会済みユーザー

2019/10/04 00:30

エラーの確認のやり方はおかげさまでりかいできました。指摘していただいた箇所を修正して確かめたら エラーは出ませんでした。ありがとうございます。
guest

回答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

querykuma

総合スコア777

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/10/03 10:55

ありがとうございます。ご指摘していただいた箇所を訂正して実行してみたのですが、何も表示されません。 この章にはprogram.jsが5種類出てきてどこかでエラー表示がされていたのですが、再現できない状態です。YouTubeDataAPI.htmlも3種類ぐらい出てきていて、少しづつ変化させています。 program.jsの中のq: $('#keywd').val(),のところで「q:」が「’q’:」になっている箇所があったのですが、どちらが正解なのでしょうか。もうすこし検索した「YouTube API v3の利用」を勉強してみます。質問のコードが最初なのでこれが動かないことには先に進めないのでよろしくお願いします。 多分先に進んでみたときに、どこかでエラーコードが表示された覚えがあります。
退会済みユーザー

退会済みユーザー

2019/10/03 10:56

今日は休んで、明日の朝挑戦します。ヒント、ご指導お願いいたします。
退会済みユーザー

退会済みユーザー

2019/10/04 00:21

確認ですが、22行目は .done(function(data){ でいいのではないでしょうか、。参考書はそうなっているし、少し勉強しましたのでわたしもそう思うのですがいかがでしょうか。間違っていた箇所は修正させていただきました。ありがとうございます。
退会済みユーザー

退会済みユーザー

2019/10/04 00:22

ですが、まだうまくいきません。よろしくおねがいいたします。
thyda.eiqau

2019/10/04 00:32

横からすみません。 - .done(function(data){ + .done(function(data)){ こちらは、上下が逆ではないですか。閉じ括弧が多いほうが現状のコードで、括弧を除去したほうがあるべき姿と思います。
退会済みユーザー

退会済みユーザー

2019/10/04 00:44

はい、おしゃる通りだと思います。querykumaさんに教えていただいたエラーチェックで確認しました。 ありがとうございます。修正します。実行結果がまだうまくいきません。
退会済みユーザー

退会済みユーザー

2019/10/04 04:05

参考書を再度読み直し、YoutubeDataAPI.htmlの再チェック、program.jsの「q: $('#keywd').val(),」を 「'q': $('#keywd').val(),」に変更して実行したら、 『「Youtube検索」欄を表示して、「jQuery」と打ち込んで「jQuery」に関連した動画を表示する』ところまで実現できました。皆さんありがとうございます。
guest

0

typo があります。

#('#result')

$('#result')

投稿2019/10/03 09:42

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/10/04 00:23

ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問