ローカル環境で立ち上げるStreamlitでYouTubeAnalyticsAPIを叩くために必要なOAuthクライアントを作成してみた。

# はじめに

今回は、StreamlitでYouTubeAnalyticsAPIを叩くためにAPIの有効化と、OAuth認証2.0を通すためのOAuthクライアントを作成してみます。

Streamlitとは、データに特化した Python 用ウェブアプリケーション開発フレームワークです。
StreamlitでYouTubeAnalyticsAPIを叩くことによって、HTMLやCSS、Javascriptを使用せずに自身のYouTube動画アナリティクス分析を行うダッシュボードを作成できます。

# 前提条件
Googleアカウントを持っていることを前提にしています。

# プロジェクトの作成
まずは、GCP(Google  Cloud Platform)にログインします。

https://console.cloud.google.com

下図のように、タイトルバーにあるプロジェクト欄をクリックしてください。
現在はすでに作成済みの「Youtube-analysis-app」プロジェクトが選択されています。
![3ee0846dcc8200277a505ea90efaff2a-2-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/be70f01d-624a-f576-07a7-454510ef38c5.png)



まずは新しくプロジェクトを作成するため、下図の「新しいプロジェクト」をクリックしてください。
![da07bd345b8a5e4846901a38afe66d10-1-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/c33fac0b-94d9-6eba-f30e-ac2636d75cf0.png)

「プロジェクト名」に作成するプロジェクト名を入力します。
今回はプロジェクト名を「Youtube-blog」として作成します。
「場所」は「組織なし」で大丈夫です。
作成をクリックしてください。
![8caaa3f4abf98d3042703cc9520516fd-1-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/6672456f-aaad-3452-58f2-feb0675695ba.png)

下記のようにプロジェクトが作成されていればOKです。
続いて、作成したプロジェクトをクリックしてください。
![a707b94d5b5ce5e090d19faaa70299aa-2-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/a2984cdd-1712-b038-f1bc-0caa238ba468.png)

すると、プロジェクトが切り替わります。
以上でプロジェクトの作成は終了です。
![10a807b587509f92ca5d855cd33c6d8e-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/425e5651-d368-cb5d-8cfe-b3fd2acfec58.png)

# YouTubeAnalyticsAPIを有効化

YouTubeAnalyticsAPIを有効化するために、まずはサイドバーにある「APIとサービス」→「有効なAPIとサービス」をクリックしてください。
![ff95aa38073f46e35e21a6a49a2e0e48-1-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/1c7bae2f-749b-400d-83eb-74b846467e80.png)

タイトルバーに検索ボックスがあるので、そこに「YoutubeAnalytics」と打ちこみます。
すると、「YouTubeAnalyticsAPI」と出てくるのでクリックしてください。
![a024218871d93ae30a3f17c56b77aea7-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/03b4d128-7b58-2319-04e5-e02a7c158949.png)

「有効化にする」をクリックしてください。
![e85b0e05e16bec0bb8640185be860794-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/2cf94b98-8ad1-2730-02b2-f25ab25416de.png)

下図のような画面になっていれば、大丈夫です。
以上で、「YouTubeAnalyticsAPI」を有効化することができました。
![513013220493c2ae60e01be6d0568fcb-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/29963356-a18d-b593-9951-9f4227f56021.png)

# OAuthクライアントの作成

最後に、OAuth 2.0 認証を通すためのOAuthクライアントを作成していきます。
サイドバーの「認証情報」をクリックしてください。
![a49986596a4f06e9c59c8ba0348d0243-1-1024x496.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/b522133f-e05b-a7f3-cd43-4b426279815c.png)

タイトルバーにある「認証情報を作成」をクリックしてください。
![4bba00f014039c427ade1accb957e337-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/6de3f24b-14ba-81a6-6600-4e0ccaafca44.png)

「OAuthクライアントID」とクリックしてください。
![81b2a7a28632d3d77ce6b32d98164da0-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/5c22b978-e05f-7e55-63fd-59ad4964f96f.png)

「同意画面を設定」をクリックしてください。
![f3617d50c831e5ae2f78eb76b34db543-1024x496.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/0a89ca1d-532b-52a1-a870-9c1a5a8e00b0.png)

「外部」を選択して、「作成」をクリックしてください。
![92fcc223e8134007afbb311536ceae15-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/b26bb758-1015-2394-6eac-a6fed59067c2.png)

「アプリ名」を入力します。今回は「Streamlit-Youtube」として入力します。
続いて「ユーザーサポートメール」を入力してください。
![73951d7100ed6ad4dd330ff1a2df7574-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/0594b309-0011-447f-d6e3-d4a7e7045a46.png)

「デベロッパーの連絡先情報」の「メールアドレス」を入力してください。
「保存して次へ」をクリックします。
![3eef37481b955ae0e8708b023a2065f0-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/64ef1203-e67e-4934-029b-07c8a883c86d.png)

こちらは特に入力しなくても大丈夫です。
「保存して次へ」をクリックしてください。
![ea852bcf2af4f2856998664a4d1177ea-1024x496.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/dfa32ed2-032b-762d-37fd-ad51f3982cf9.png)

続いてテストユーザーを追加します。
「ADD USERS」をクリックしてください。
![cb9bc3eba0fc63c46d31b88354496b72-1024x494.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/80083e51-ea2c-4035-44a9-51cf399afd7a.png)

メールアドレスを入力して、「追加」をクリックしてください。
![700d0a62bc225ab5805d0c9bd79c5539-1024x496.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/e4851de3-72d6-3275-0b14-9f566c1c7429.png)

テストユーザーに追加されたのを確認後、「保存して次へ」をクリックしてください。
![675ae420a5f23808df4dba53158f07e5-1024x496.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/3187f4c3-d8c5-a51d-322c-7af526681e0e.png)

すると確認画面が表示されるので、内容がよろしければサイドバーの「認証情報」をクリックしてください。
![4cedb62c481f97e08361af9c3418929e-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/df1a7fd7-e08d-c977-ff76-4f8807939359.png)

タイトルバーの「認証情報を作成」をクリックし、「OAuthクライアントID」を選択してください。
![34ccc705a2fcef02093f61f82d0d569c-1024x495.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/5b9f2841-0286-8e64-a6ac-f0ec52bb9adc.png)

「アプリケーションの種類」にて「ウェブアプリケーション」をクリックしてください。
![c8af151d4187b33670ff14af227ecdd4-1536x742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/f1663d2e-78c9-1c9f-ae27-93b5b0b4f291.png)

「名前」はそのままでも大丈夫です。
「承認済みのリダイレクトURI」の「URIを追加」をクリックしてください。
![29b2b4b8c3b5e7315899371f80e14894-1536x741.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/e62a5c3d-b901-fe29-3e3d-5c6f8557e712.png)

「URI1」に「http://<foo>localhost:8501</foo>」と入力し
「作成」をクリックしてください。
![27ce8c69cd7129aaed7feab5d55bcc52-1536x742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/4d9ca71d-1c50-702a-f9cd-719a90774d51.png)

するとOAuthクライアントが作成されました。
ローカル環境で立ち上げるStreamlitにてOAuth2.0認証を通すために必要なjsonファイルをダウンロードできます。
![788da51ff224e903c7a47dec8555a1ac-1536x746.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/27e4eb60-33a9-c347-78ff-5f4fb45ad571.png)

jsonファイルはサイドバーの「認証情報」→OAuth2.0クライアントIDのダウンロードボタンからもダウンロードできます。
![84ff256ac225662828ea0631ddfe83b7-1-1536x742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2820434/feeb424d-2e9a-a45d-d36f-40df3dc6106c.png)

# 終わりに

無事にYouTubeAnalyticsAPIの有効化とOAuthクライアントを作成し、認証情報であるjsonファイルを作成することができました。

ローカル環境で立ち上げるYouTube動画分析ダッシュボードをStreamlitを使って作成しました。
下記にGitHubのリンクを載せるので参考にしてみてください。

https://github.com/RYOUNAGAMINE/Youtube_analysis_app

こちらのアプリを起動するには、今回作成したOAuthクライアントファイルとは別に
YoutubeDataAPIの有効化とAPIキーを取得する必要があります。
詳細は下記をご覧ください。

https://qiita.com/ryou110216/items/181296d7eaf83d405754

参考

https://developers.google.com/youtube/reporting/guides/authorization?hl=ja

https://www.isoroot.jp/blog/5447