【Vue.js】Vue.jsで使う為のYouTube動画検索「YouTube Data API v3」のAPIキー取得


環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Firebase Hosting
⭐️Vue CLI v4.0.4



↓↓実際に動かしてみた動画
https://twitter.com/nonnonkapibara/status/1185956946630692864
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎬Vue.js🎬<br>YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル<br>作ってみたよぉ。<br>Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡<br>ちゃんと動いたよぉ😍<a href="https://t.co/y7hw3zHRlI">https://t.co/y7hw3zHRlI</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> <a href="https://t.co/C5zCM6n78R">pic.twitter.com/C5zCM6n78R</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185956946630692864?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



YouTubeの動画検索を行うには、Googleアカウントで「YouTube Data API v3」のAPIキーを取得します。
Googleアカウントでログイン後、下記のAPIライブラリページを開きます
https://console.developers.google.com/apis/library

<img width="1150" alt="vue001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9c234daa-a935-f26b-d8e1-3b3abe1be329.png">

「YouTube Data API v3」を選択し、有効にします。
<img width="1006" alt="vue002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dea5b4f4-46fb-42e5-d965-d44ecd3943a5.png">


<img width="947" alt="vue003.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6b70e42b-0d99-ebd9-e902-85951568e6d6.png">


ライブラリの「作成」を選択する

<img width="1131" alt="vue004.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cf6abc10-decc-b909-ebcb-47dc8d0b1387.png">


## 新しいプロジェクトを作成する

プロジェクト名を入力して「作成」ボタンを押す

<img width="599" alt="vue005.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/57497e46-251d-c8db-5ded-6b58a656d2b2.png">

## ダッシュボードが開く

ダッシュボードが開くので「認証情報を作成」ボタンを押す
https://console.developers.google.com/apis/dashboard
<img width="927" alt="vue006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e0d4b141-c648-f056-1d35-3b7e5e376c2c.png">

APIキーを選択する

<img width="762" alt="vue007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3e173507-69ce-5098-5e57-5e82feaff474.png">

## APIキーができる。

キーを制限を選択する

<img width="530" alt="vue008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/93dbc4a6-9afc-3b7d-38ef-5b882df7aa6a.png">

## APIの制限をかける

<img width="1111" alt="vue009.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dcbdf251-4c87-b9e2-3afc-847e67b8b03c.png">


<img width="619" alt="vue010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1fa8ef9b-d25f-c40d-1f14-e1d9a496c95d.png">


<img width="471" alt="vue011.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4011b695-0241-5839-3772-da5285b0c3b7.png">

YuTubeのAPIの詳細は、下記に記載しています。

YouTubeData API
https://developers.google.com/youtube/v3/docs/search/list

<img width="1179" alt="スクリーンショット 2019-10-21 0.38.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/66328d1b-e817-43ad-2e1b-20f6641b0bfb.png">