Youtube Data APIから返されるデータの検索結果を表示したい

Question

JavaScriptWeb開発パーフェクトマスターで勉強しています。
XAMPPとnotepad++を使用して、ブラウザはfirefox,googleを使っています。

参考書にある「Youtube Data APIから返された検索結果の一部」という表示画面を表示したいのですが、やり方がわかりません。
表示したい画面は「"kind":,"etag":,"nextPageToken:"...」を表示する下にあるような画面です。

引用テキスト

「JavaScriptWeb開発パーフェクトマスター」

12.1.2キーワードに合致した動画を一覧で表示
Youtube Data APIでは、リクエストに検索キーワードを埋め込んで送信すると、検索結果をJSON形式のデータで返してきます。
"Youtube Data APIから返されるデータの構造を見てみましょう"

JavaScriptでは、JSONP(JSON　with Padding)と呼ばれる仕組みを利用して,
JSON形式のデータをオブジェクトとして扱います。この辺りのことは実際にプログラムを作るところで見ていくことにして、ここでは、Youtube Data APIを利用して動画検索を行った場合に、どんなデータが返されるのかを見ていくことにしましょう。

JSON形式のデータはキーと値がペアになったハッシュ形式ですが、様々なデータを格納することから、階層構造になっています。

次は、この後で作成するプログラムを実行したときに返されたデータの一部です。
検索キーワードは「jQuery」です。数多くの検索結果が返されたのですが、ここでは1件目の主なデータを抜粋しました。

このようなページなのですが、どうしたら表示できるでしょうか。

Answer 1

書籍がないので上記の続き等がわからないのであまり正確な回答はできません。

ただyoutube APIを利用するにあたりまずgoogleアカウントが必要となります。
その後、以下のサイトにもある様にAPIキーをプログラムに設定する必要があります。

具体的なjavascriptについては書籍に記載があるのではないでしょうか。
わからない場合は公式サイトにあるプログラム等も参考にすると解決の糸口となると思います。

公式のプログラムサンプル
APIキーについて

Comments

[退会済みユーザー]

ありがとうございます。APIキーとgoogleアカウント,projectは設定済で、YoutubeDataAPI.html、program.js,style.cssを作成し、[youtubeの検索」で「jQuery」を検索して画像がでるところまで、くりあできました。
が、実はこの前に質問の文章があり返されるデータ構造が書いてあります。2日ほどYouTube自体、Youtube Data API ｖ３、の勉強をしていました。そのとき参考書に出ているデータ構造が出てきたことがありました。もう一度調べてみます。

[yut148]

この前にも質問をしていた内容を確認しました。

searchAPI
https://developers.google.com/youtube/v3/docs/search/list?hl=ja
のページに詳しくあります。試してみるをクリックして、各項目を入力して得られる結果を見ればデータ構造がわかりやすいと思います。

[退会済みユーザー]

ありがとうございます。ここは何回も見たのですが、高速で読み進んできましたので、どうしたら使えるのかわかりまんせんでした。ここでどうすればいいか、具体的にやり方を教えて頂けませんでしょうか。

[yut148]

簡単な例として最低限の動作確認をする方法を記載します。
下の方にTry this APIという項目がありここの各項目を入力します。
その少し上に必須パラメータという項目があります。
partという項目が必須なのでsnippetを入力します。
forMine
forContentOwner
relatedToVideoId
のいずれかが必要とあるので、いずれかをプルダウンでtrueにします。
qという項目に検索したい動画へ対する検索ワードを入力します。
多分本にはjqueryとあったと思いますので、jqueryを入力します。
下の方にGoogle OAuth2.0、API Keyのチェックボックスがあるのでチェックを入れておきます。
最後にEXECUTEのボタンをクリックします。（初回はどのgoogleアカウントでAPIを利用するか尋ねられますのでAPIを使うアカウントを選択します。）
正常にAPIが動作すれば、200 OKという枠に囲まれて以下の様にAPIレスポンスが表示されます。
（長いので省略します。）後は各パラメータ、channelId等を本に合わせ入力する事で同じ結果が得られると思います。データ構造についてはこれで理解が進むと思います。
{
"kind": "youtube#searchListResponse",
"etag": "\"p4VTdlkQv3HQeTEaXgvLePAydmU/HQstZLXZ37bLyFM2eFRr44_ve70\"",
"nextPageToken": "CAUQAA",
"regionCode": "JP",
"pageInfo": {
"totalResults": 1000000,
"resultsPerPage": 5
},
"items": [

[退会済みユーザー]

ありがとうございました。自分でも教えていただいたネットを調べて何とか表示はできたので、自己解決欄に上げたいと思います。コメントいただいた文をよく読んでやってみたいと思います。770ページの長丁場やっと終わりそうです。この後はコードが実行できるので復習はスムースに行くと思います。

[退会済みユーザー]

１．ネットで「Youtube Data APIから返されるデータ構造を表示するには」を検索する
２．YouTube Data API 概要を選択します。
３．ずーと下のほうにある「パーツのリクエストのサンプル」で例の1を実行する
　　URL: https://www.googleapis.com/youtube/v3/videos?id=7lCDEYXw3mM&key=YOUR_API_KEY
&part=snippet,contentDetails,statistics,status

説明: この例では video リソースを取得し、API レスポンスに含める必要がある複数のリソース パーツを指定します。

　　注：YOUR_API_KEY=自分で取得したAPIキー
４．API レスポンス:

{
"kind": "youtube#videoListResponse",
"etag": "\"UCBpFjp2h75_b92t44sqraUcyu0/sDAlsG9NGKfr6v5AlPZKSEZdtqA\"",
"videos": [
{
"id": "7lCDEYXw3mM",
"kind": "youtube#video",
"etag": "\"UCBpFjp2h75_b92t44sqraUcyu0/iYynQR8AtacsFUwWmrVaw4Smb_Q\"",
"snippet": {
"publishedAt": "2012-06-20T22:45:24.000Z",
"channelId": "UC_x5XG1OV2P6uZZ5FSM9Ttw",
"title": "Google I/O 101: Q&A On Using Google APIs",
"description": "Antonio Fuentes speaks to us and takes questions on working with Google APIs and OAuth 2.0.",
"thumbnails": {
"default": {
"url": "https://i.ytimg.com/vi/7lCDEYXw3mM/default.jpg"
},
"medium": {
"url": "https://i.ytimg.com/vi/7lCDEYXw3mM/mqdefault.jpg"
},
"high": {
"url": "https://i.ytimg.com/vi/7lCDEYXw3mM/hqdefault.jpg"
}
},
"categoryId": "28"
},
"contentDetails": {
"duration": "PT15M51S",
"aspectRatio": "RATIO_16_9"
},
"statistics": {
"viewCount": "3057",
"likeCount": "25",
"dislikeCount": "0",
"favoriteCount": "17",
"commentCount": "12"
},
"status": {
"uploadStatus": "STATUS_PROCESSED",
"privacyStatus": "PRIVACY_PUBLIC"
}
}
]
}
となりました

[退会済みユーザー]

１．「Youtube Data APIから返されるデータ構造を表示するには」ネットで検索する
２．

[退会済みユーザー]

丁寧な回答いただきありがとうございます。やってみました。
適当だったのでエラー400がでました。やり方は理解できたので助かりました。