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

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

ただいまの
回答率

87.35%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 654
退会済みユーザー

退会済みユーザー

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は利用したことがありませんでしたので、動画サイトだというぐらいしかをわかりませんが、お願いいたします。

//program.js
jQuery(function($){

    //取得済のAPIキー
    var apikey = 'AIzaSyA3AttlN3PkFPGCI8xnpPMYe7zbxbitvcQ';

  //タブをクリックして切り替えた際に、コンテンツの内容を変更します。
    function getResult(e){

        $.getJSON(
            'https://www.googleapis.com/youtube/v3/search?',
            {

                key:apikey,
                q: $('#keywd').val(),
                part:'snippet',
                maxResults:20,
                type:'video',
            }
        )

        .done(function(data){

                //div要素の内容をからにする
                $('#result').empty();

                $.each(data.items,function(){

                    $('#result').append(
                        $('<a></a>')
                            .attr({
                                href:'https://youtube.com/watch?v='+this.id.videoID,
                                target:'blink'
                            })

                            .append(

                                $('<img>')
                                    .addClass('thumbnail')

                                    .attr({
                                            src:this.snippet.thumbnails.medium.url,
                                            title:this.snippet.title
                                    })
                            )
                    );

                });

        });

  };

    //ボタンのイベントリスナー
    $('#send').click(getResult);

});
//style.css

img.thumbnail {
  width: 250px;
  height: 150px;
  margin: 20px;
}
//YouTubeDataAPI.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <title>sample</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="program.js"></script>
</head>
<body>
  <hr>
  <form>
    <input type="text" id="keywd" size="50" />
    <input type="button" id="send" value="Youtube検索" />
  </form>
  <hr>
  <div id="result"></div>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • querykuma

    2019/10/03 18:46

    エラーの確認をされていますか?

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/10/03 19:26

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/10/04 09:30

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

    キャンセル

回答 2

checkベストアンサー

+3

こちらを試してください。

JavaScriptの実行時に発生したエラー内容を確認することができると思います。

こちらをやってみると

Uncaught SyntaxError: Unexpected token ')' file.js:22

というエラーが22行目に出ています。

-        .done(function(data){
+        .done(function(data)){

と直しましょう。

Uncaught SyntaxError: Invalid or unexpected token

-                   #('#result').append(
+                   $('#result').append(

と直しましょう。

Uncaught TypeError: $(...).addClass(...).atrr is not a function

-                                   .atrr({
+                                   .attr({

と直しましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/04 09:32

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

    キャンセル

  • 2019/10/04 09:44

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

    キャンセル

  • 2019/10/04 13:05

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

    キャンセル

+2

typo があります。

#('#result')

$('#result')

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/04 09:23

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

    キャンセル

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

  • ただいまの回答率 87.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る