YoutubeDataAPIで好きな情報を取得する

#概要
YouTube見る人多いですよね！YouTubeのAPIがあると知ったとき、使えたら面白そうだと思ったので触っていこうと思います！
扱う言語はJavaScriptでVueを用いて進めて行きます。
（なのでVueの記述方法がわからないと少し読みにくいかもです、その場合はコードは気にせず、どういうことをしているのか雰囲気がわかれば大丈夫です！）
YoutubeDataAPIv3
これ↑が今回使うものの公式ドキュメントです。
#目次

• APIキー
• 特定チャンネルの動画情報を取得する
  • リクエスト内容
  • レスポンス内容を見てみる
• 任意チャンネルの情報を取得してブラウザに表示する
  • リクエスト内容
  • レスポンス内容を見てみる
  • ブラウザ上に表示
• おわり

#APIキー
Google Cloud ConsoleへアクセスしてAPIキーの発行が必用なのでまずはここからです。
この記事など情報はたくさんあるので活用していきましょう。そんなに悩むことなくできました。
#特定チャンネルの動画情報を取得する
まず、あの有名ラーメン系youtuberの動画情報を取ってきてブラウザに表示させるところを目標にします🍜
今回使うリクエスト先のURLの記述方法は基本的に以下のようになります。

"https://www.googleapis.com/youtube/v3/search?&key=[APIキー]....."

「.....」の部分に欲しい情報についてのパラメータを設定します。[APIキー]の部分はさきほど発光したAPIキーを入れます。

今回の目標は、検索して動画の情報を取得するという動きなのでリクエストで指定した検索パラメータに一致する情報を持ってきてくれる「search」を使います。検索機能は「search」ということでしょうか。詳しくはsearchリファレンスに。

このsearchリファレンスの中に使えるプロパティの説明がありました！そこに良さそうなのがあったので今回はこれ↓を使います。

###リクエスト内容
そして最初のリクエストURLは以下のようにしました！

"https://www.googleapis.com/youtube/v3/search?&key=" +
           this.myKey + // はじめに取得した自分のAPIキー
           "&channelId=" + 
           this.channelId + // ラーメンyoutuberのchannelID
          "&part=snippet&maxResults=50&order=date"

補足説明します。this.myKeyとthis.channelIDはString型変数です。パラメータは以下のようになっています。

パラメータ	値	内容説明
channelId	文字列(this.channelId)	チャンネルIDは、YouTubeチャンネルのURLに記載されています。それをコピーしてthis.channelIdに入れています。
part	snippet	オブジェクトで情報が返され、基本情報（タイトル、説明など）が格納されます。
maxResults	50	50本の動画の情報を取ってきます。
order	data	新規アップロード順に動画の情報を取ってきます。

なお、リクエスト部分のコードはこのように

methods: {
    async getYoutubeApi() {
      const res = await fetch(
        "https://www.googleapis.com/youtube/v3/search?&key=" +
          this.myKey +
          "&channelId=" +
          this.channelId +
          "&part=snippet&maxResults=50&order=date"
      )
      try {
        const value = await res.json()
        console.log(value.items)
      } catch (e) {
        console.log("error:" + e)
      }
    },
  },

ここ↓では、valueというものを設定して、そこにAPIレスポンス（取得データ）を入れています。

const value = await res.json()

###レスポンス内容を見てみる
Google Chromeの検証ツールで見てみました。コード的に言うと上のconsole.log(value.items)と書いてある部分にあたります。

メインとなる部分はitemsというオブジェクトに入っていたのでその中身を出しました。
※APIレスポンスの中にはめちゃ色々なデータがありましたが、今回使えそうなデータは、その中でもitemsというオブジェクトに入っていたということです。イメージしずらいかもですがその場合はあまり考えなくて大丈夫です。

そうすると、50本分あることが確認できました！さらにsnippetオブジェクトの中に動画のタイトル（気になったらyoutubeで検索してみてください！）や概要欄の文章がありました！これで目標達成です。上手く動作したときは気持ちいいですね！

#任意チャンネルの情報を取得してブラウザに表示する
さっきは動画についてでしたが、次はチャンネルについてやりたいと思います。また、任意のチャンネルを検索して情報を取得できるようにしたいと思います！さらにその情報をブラウザに表示するまでが目標です！
###リクエスト内容
欲しいものが違うので、リクエストするURLも違ってきます。今回のリクエスト先のURLの記述は以下のようになりました。

"https://www.googleapis.com/youtube/v3/search?&key=" +
          this.myKey +
          "&part=snippet&type=channel&q=" +
          this.q

先ほどのURLとの違いは、channelIDがないことです。任意のチャンネルを持ってくるので特定のIDは不必要ですね。また、qという変数が現れました。ここにチャンネル名が入ることでそのチャンネル情報を持ってこれます。

パラメータの設定はこのようにしてます。

パラメータ	値	内容説明
part	snippet	さっきのと同じ
type	channel	チャンネルに対して検索することを指示します。
q	任意の文字列(this.q)	this.qは自分で設定した変数でブラウザ上で入力します。中身は任意の文字列です。この文字列にヒットするチャンネルが対象になります。
コードは基本的にさきほどと同じですが、ブラウザに表示させる必用があるため、とってきたデータを自分で設定した配列に格納する必用があります。なので次の一文を追加しています。
（valueはレスポンス内容で、その中でitemsというオブジェクトが今回のメインデータでしたね！）

this.infos = value.items

###レスポンス内容を見てみる
検証ツールをつかって内容を見てみます。なお、qは今回「釣り」としました。

どうやら1回のリクエストで5つのチャンネルまで持ってこれることがわかりました（もうちょっと欲しかった、、）。データとしてチャンネル名、チャンネルの説明文、チャンネルアイコンの画像データなどがありました！
このデータをブラウザに表示していきます。
###ブラウザ上に表示
取得したデータはinfosという変数に入れました。このinfosの中から表示したい情報を選びます。snippetにある以下の3つを今回は使います。

• title(チャンネル名)
• thumbnails(チャンネルのアイコン情報、さらにこの中から画像urlを使います)
• description(チャンネルの説明文)

表示させる部分のコードはこのようになりました。

template>
  <div id="youtube">
    <h1>YoutubeAPIをつかってみる</h1>
    <div>
      <input type="text" v-model="q" />
      <button v-on:click="getYoutubeApi">チャンネル検索</button>
      <div v-for="info in infos" :key="info.id">
        <img v-bind:src="info.snippet.thumbnails.default.url" />
        <h3>
          {{ info.snippet.title }}
        </h3>
        {{ info.snippet.description }}
        <div>------</div>
      </div>
    </div>
  </div>
</template>

簡単に説明すると、5つのチャンネルの情報を上から順番に「------」という区切りをつけながら並べて表示させています。こんなかんじに表示されています！

タイトルの下に入力欄と検索ボタンがあり、ボタンが押されるとチャンネルの情報がばばばっと出てきます。これで目標達成です！

入力はなんでも大丈夫なので、全然知らないチャンネルも出てくるので面白いと思いました。表示させる情報を工夫したらオリジナルの面白い検索機能がつくれちゃいます！

※ここで一つ気がついたのですが、動画の概要欄や説明文を見ると文字数に限界があるみたいですね、、、このAPIはそういった制約が多そうだと思いました。

#おわり
YouTubeってかなり人気なコンテンツですよね！そのAPIを触ってみたかったのでこのような内容になりました。

また、この記事は大学生限定クリエイティブコミュニティGeekSalon Advent Calendar 2021の企画の一部として投稿させていただきました！

GeekSalonは大学生限定のプログラミングスクールです、私もメンターとして所属しています。下のリンクからご覧になってください！

私の所属するコースの特設サイトはこちら！