検索機能を搭載できず困っています。

・動画をキーワードから検索して表示させるappの途中過程です。検索窓#searchに入力されたワードから候補動画を10個表示させたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>You-Tube-Juke-Box</title>
6  <style>
7    body {
8      text-align: center;
9    }
10    #player {
11      height: 640px;
12      width: 396px;
13    }
14  </style>
15</head>
16<body>
17  <h1 style="font-family:optima;font-style:italic;">You-Tube-Juke-Box</h1>
18  <hr>
19  <div id="player"></div>
20  <hr>
21  <input type="text" id="q">
22  <input type="button" id="search" value="Seach!">
23  <hr>
24  <input type="button" id="prev" value=" << Preview ">
25  <input type="button" id="play" value=" Play ▶︎ ">
26  <input type="button" id="pause" value=" Pause ⬛︎ ">
27  <input type="button" id="Next" value=" Next >> ">
28  <hr>
29  <ul id="list">
30  </ul>
31  <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
32  <script src="myscript.js"></script>
33</body>
34</html>

・[Search!]を押下することによって、ConsoleにObjectが返ってきてほしいのですが、
jquery-1.7.2.min.js:4 ▶︎GET https://gdata.youtube.com/feeds/api/videos?q=%25E6%2584%259B&alt=json&max-results=10&v=2 410 ()（「愛」をSearch）
jquery-1.7.2.min.js:4 ▶︎GET https://gdata.youtube.com/feeds/api/videos?q=love&alt=json&max-results=10&v=2 410 ()（「love」をSearch）
と返ります。

javascript
1$(function(){
2  $('#search').click(function() {
3    var url = "https://gdata.youtube.com/feeds/api/videos";
4    var options = {
5      q: encodeURIComponent($('#q').val()),
6      alt: "json",
7      "max-results": 10,
8      v: 2
9    };
10
11    //(2) $.ajax({
12    //     url: url,
13    //     data: options,
14    //     dataType: 'jsonp',
15    //     success: function(rs) {
16    //     console.log(rs);
17    //     },
18    // });
19    $.get(url, options, function(rs){ //(1)
20      console.log(rs);
21    }, "json");
22  });
23});

・上記「"max-results"」のダブルクォーテーションを外すと、ページ更新時にこの行が
myscript.js:8 Uncaught SyntaxError: Unexpected tokenとなるのでつけました。また、コメントアウト（2）も試しましたが変わりありませんでした。
・教材はhttp://dotinstall.com/lessons/youtube_jukebox_js/7605で、スペルチェックしながらgoogle apiのページを見ましたが、解消には至っておりません。お力添えいただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

教材のURL(https://gdata.youtube.com/feeds/api/videos)はYoutube Data API v2で使用されていたURLのようです。
このAPIは既に廃止されているためエラーコード410が返却されています。

新しくYoutube Data API v3が出ています。こちらのAPIを利用すると良いと思います。ただし、APIバージョンの違いにより教材のサンプルコードそのままでは動かない箇所がでてくると思われますのでV2→V3への適宜読み替えが必要になります。
例）max-results → maxResultsだったり

余談ですが、max-resultsのダブルクォーテーションを外すとエラーとなるのは、ハイフン（-）が使われているからです。

投稿2017/04/19 13:52