0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-07-12

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

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

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

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

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

0713-0546.PNG

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

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

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

0713-0551.PNG

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

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

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

0713-0606.PNG

0713-0609-01.PNG

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

0713-0611.PNG

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

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

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

0713-0613.PNG

0713-0614.PNG

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

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

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

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

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

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


npm install googleapis --save

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

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

・「This application requires access to your YouTube account.Please authorize 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>

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?