YouTube公式のJavaScriptサンプルを試そうとしてうまくいかない。

YouTubeソムリエAI の作成のため、YouTube公式の「JavaScript コード サンプル」を試してみます。この記事ではうまくいっていません。。。お分かりになる方、お知恵を拝借したく。。。

（背景）「SPARKS」という「アイデアのプロトタイピング支援に特化したクラウドファンディング」にプロトアウトスタジオの卒業制作を掲載しています。2021年7月21日まで。よろしければご覧ください。拡散いただけるとうれしいです。

https://camp-fire.jp/projects/view/448374


さて、このサンプルには「API キー」とは別に「OAuth 2.0 クライアント ID」が必要なようです。


https://developers.google.com/youtube/v3/code_samples/javascript?hl=ja

>auth.js スクリプトでは、Google APIs Client Library for JavaScript を使用し、API にアクセスしてユーザー リクエストを承認する方法を示します。このページの以降のサンプルはすべて、このスクリプトを使ってリクエストを承認しています。


完成形ではAPIキーだけでいいとは思うのですが、せっかくなのでOAuthも作ってみます。

![0713-0546.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/9f2faaba-5dfa-cf06-a42e-a10969cc2ced.png)


OAuthの認証情報を入力。。。しましたが、IDが発行されません。はて？

画面の上部、「＋認証情報を作成」をクリックする必要がありました！（わかりにくい！）

無事、クライアントIDをサンプルコードに入力して、serve。

![0713-0551.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/a66f4683-e1e6-fabf-a7f3-48edf0aaa0b8.png)

あれ、「Search」ボタンがグレイアウトしてて押せない。。。

うーん。OAuthの認証情報のところで、テストユーザーを入力させる欄があったのでそれかな、と予想。

説明ページの最下段のSearchからやろうとしてたので、上から順番にサンプルコードを試してみます。




![0713-0606.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/c2d5b5d5-5ebe-64f1-fd2f-e2580c2bdf47.png)


![0713-0609-01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/9d15fe8e-8d0e-f0d1-22b5-66a401cc20c6.png)


こちらは注意書きが出てくれてますね。やっぱりログインしてねーよ、という話の模様。でもクリックしても無反応。なのでコードを見てみます。


![0713-0611.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/2d033514-6624-62e5-d4e7-5d60dd5c7e29.png)

href="#"かー。そっかー。

うーん、このブラウザでYouTubeにはログイン済なんですけどねー。手元でserveしてるからかしら、と思って「http://localhost:5000 」でアクセスしてたのを「http://192.168.1.37:5000 」に変更してみましたが特に変わらず、うーん。 

あとは思いつくのはOAuthが「テスト」だから「本番」にする、とか？

![0713-0613.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/66e0c2ed-fd08-d874-a405-91d9c1f67985.png)


![0713-0614.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1289676/25cc09d8-5452-8df0-9129-f3b11f952793.png)


やってみましたが、変わらず。


うーん。あれ、そういえば他の人のサンプルコードをぐぐってたときにはYouTube用のライブラリを落としてた気がするが、今回何もやってないぞ？
と思ってサンプルコードのページの一番上を見ると、

>次のコード サンプルは JavaScript用のGoogle APIのクライアントライブラリ を使用しており、YouTube Data API で利用できます。

あ。このライブラリが必要なんじゃね？　リンク先は以下のGitHub。


https://github.com/google/google-api-javascript-client



いまいちnpmのインストール方法がわからない。（探せない）

以下の記事を参考にインストールしてみる。

https://dev.classmethod.jp/articles/using-google-apis-node-js-client/


```

npm install googleapis --save

```

変わらず。本日はここで時間切れ。。。


（7:34 追記）
・ブラウザをChromeからEdgeに変更しても変わらず。

・「This application requires access to your YouTube account.Please <a href="#" id="login-link">authorize</a> to continue.」が怪しいかと思いましたが、認証されてない条件で表示される文章というわけではないので関係ないのかもしれません。


```my_uploads.html

<!doctype html>
<html>
  <head>
    <title>My Uploads</title>
    <link rel="stylesheet" type="text/css" href="my_uploads.css">
  </head>
  <body>
    <div id="login-container" class="pre-auth">
      This application requires access to your YouTube account.
      Please <a href="#" id="login-link">authorize</a> to continue.
    </div>
    <div id="video-container"></div>
    <div class="button-container">
      <button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button>
      <button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button>
    </div>
    <script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script>
    <script type="text/javascript" src="auth.js"></script>
    <script type="text/javascript" src="my_uploads.js"></script>
    <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
  </body>
</html>

```