Google Client ID 取得ガイド

← ダッシュボードに戻る

YouTube Analytics Dashboardを使用するには、Google Cloud ConsoleでOAuth 2.0のClient IDを取得する必要があります。 このガイドでは、ステップバイステップで設定方法を解説します。

⏱️ 所要時間

約10〜15分

📋 事前準備

⚠️ よくある間違い - 必ず確認してください

❌
OAuthクライアントタイプの間違い

「デスクトップ」や「その他」を選択すると Storagerelay URI is not allowed エラーが発生します。 必ず「ウェブ アプリケーション」を選択してください。

❌
承認済みJavaScriptオリジンの未設定

ローカル環境で使用する場合、http://localhost と使用するポート番号を必ず追加してください。

❌
APIの有効化忘れ

YouTube Data API v3とYouTube Analytics API v2の両方を有効化する必要があります。

1

Google Cloud Consoleにアクセス

以下のリンクからGoogle Cloud Consoleにアクセスし、Googleアカウントでログインします。

Google Cloud Consoleを開く

💡 ヒント: 初めてGoogle Cloud Consoleを使用する場合は、利用規約に同意する必要があります。

2

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

  1. 画面上部のプロジェクトセレクターをクリック
  2. 「新しいプロジェクト」をクリック
  3. プロジェクト名を入力（例: youtube-analytics-dashboard）
  4. 「作成」をクリック

プロジェクト名の例:

youtube-analytics-dashboard
3

YouTube APIを有効化

3-1. YouTube Data API v3の有効化

  1. 左側メニューから「APIとサービス」→「ライブラリ」を選択
  2. 検索バーに「YouTube Data API v3」と入力
  3. 結果から「YouTube Data API v3」をクリック
  4. 「有効にする」ボタンをクリック

3-2. YouTube Analytics API v2の有効化

  1. ライブラリページに戻る
  2. 検索バーに「YouTube Analytics API」と入力
  3. 結果から「YouTube Analytics API」をクリック
  4. 「有効にする」ボタンをクリック

✅ 確認: 両方のAPIが「有効」になっていることを確認してください。

4

OAuth同意画面の設定

  1. 左側メニューから「APIとサービス」→「OAuth同意画面」を選択
  2. ユーザータイプで「外部」を選択し、「作成」をクリック
  3. アプリ情報を入力:
    • アプリ名: YouTube Analytics Dashboard
    • ユーザーサポートメール: あなたのメールアドレス
    • デベロッパーの連絡先: あなたのメールアドレス
  4. 「保存して次へ」をクリック
  5. スコープの設定で「スコープを追加または削除」をクリック
  6. 以下のスコープを検索して追加:
    • ../auth/youtube.readonly
    • ../auth/yt-analytics.readonly
  7. 「更新」→「保存して次へ」をクリック
  8. テストユーザーは後で追加可能なので、「保存して次へ」をクリック
  9. 「ダッシュボードに戻る」をクリック
5

OAuth 2.0 Client IDの作成

⚠️ 重要: 必ず「ウェブ アプリケーション」を選択してください。 「デスクトップ」や「その他」を選択すると、Storagerelay URI is not allowed エラーが発生します。

  1. 左側メニューから「APIとサービス」→「認証情報」を選択
  2. 上部の「+ 認証情報を作成」→「OAuth クライアント ID」をクリック
  3. 重要: アプリケーションの種類で「ウェブ アプリケーション」を選択

    ❌ 「デスクトップ」を選択しないでください
    ❌ 「その他」を選択しないでください
    ✅ 「ウェブ アプリケーション」を選択してください

  4. 名前を入力（例: YouTube Dashboard Web Client）
  5. 承認済みのJavaScriptオリジンに以下を追加:
    http://localhost http://localhost:3000 http://localhost:5000 http://localhost:5173 http://localhost:8000 http://localhost:8080 http://127.0.0.1 http://127.0.0.1:3000 http://127.0.0.1:5000 http://127.0.0.1:5173 http://127.0.0.1:8000 http://127.0.0.1:8080

    ※ 使用するポート番号に合わせて追加してください
    ※ 本番環境で使用する場合は、実際のドメインも追加してください

  6. 「承認済みのリダイレクト URI」に以下を追加（念のため）:
    http://localhost http://localhost:3000 http://localhost:5000 http://localhost:5173 http://localhost:8000 http://localhost:8080 http://127.0.0.1 http://127.0.0.1:3000 http://127.0.0.1:5000 http://127.0.0.1:5173 http://127.0.0.1:8000 http://127.0.0.1:8080 https://accounts.google.com/gsi/client

    ※ 最後の行の https://accounts.google.com/gsi/client は重要です
    ※ これはGoogle Identity Servicesで使用される特別なURIです

  7. 「作成」をクリック

🎉 完了! ポップアップウィンドウにClient IDが表示されます。

🔄 既存のClient IDがエラーになる場合の修正方法

すでにClient IDを作成済みで、「Storagerelay URI is not allowed」エラーが出る場合：

  1. Google Cloud Consoleの「APIとサービス」→「認証情報」を開く
  2. OAuth 2.0 クライアント IDの一覧から、作成済みのクライアントをクリック
  3. 「アプリケーションの種類」を確認:
    • 「デスクトップ」になっている場合 → 削除して新規作成が必要
    • 「ウェブ アプリケーション」の場合 → JavaScriptオリジンを確認・追加
  4. 削除する場合: ゴミ箱アイコンをクリック → 確認 → ステップ5から再作成

💡 ヒント: クライアントタイプは作成後に変更できないため、 間違えた場合は削除して作り直す必要があります。

6

Client IDをコピー

作成完了後に表示されるポップアップから、Client IDをコピーします。

Client IDの形式例:

123456789012-abcdefghijklmnopqrstuvwxyz123456.apps.googleusercontent.com

このClient IDを、YouTube Analytics Dashboardのログイン画面で入力します。

⚠️ 重要: Client IDは後からでも「APIとサービス」→「認証情報」から確認できます。 Client Secretは今回のアプリケーションでは使用しません。

7

(オプション) API Keyの作成

API Keyは必須ではありませんが、一部の公開データへのアクセスを高速化できます。

  1. 「APIとサービス」→「認証情報」ページで
  2. 「+ 認証情報を作成」→「API キー」をクリック
  3. 作成されたAPI Keyをコピー
  4. セキュリティのため、「キーを制限」をクリックして制限を設定することを推奨

🔧 トラブルシューティング

「Storagerelay URI is not allowed for 'NATIVE_DESKTOP' client type」エラー

原因: OAuth クライアントが「デスクトップ」タイプで作成されています。
解決方法:

  1. Google Cloud Consoleの「認証情報」ページに戻る
  2. 既存のクライアントIDを削除
  3. 新しくOAuth クライアント IDを作成
  4. 必ず「ウェブ アプリケーション」を選択
  5. 承認済みのJavaScriptオリジンを正しく設定

「このアプリはGoogleで確認されていません」と表示される

開発中のアプリケーションでは正常な表示です。「詳細」→「安全でないページに移動」をクリックして進めてください。 本番環境では、Googleの審査を受けることで、この警告を非表示にできます。

「redirect_uri_mismatch」エラーが表示される

原因: JavaScriptオリジンまたはリダイレクトURIが正しく設定されていません。
解決方法:

  1. Google Cloud Consoleの「認証情報」でOAuthクライアントを開く
  2. 「承認済みのJavaScriptオリジン」に現在のURLを追加
    • 例: http://localhost:8080
    • ポート番号も含めて正確に一致させる必要があります
  3. 「承認済みのリダイレクトURI」に以下を追加:
    • 現在のURL（例: http://localhost:8080）
    • https://accounts.google.com/gsi/client（重要）
  4. 設定を保存して、5分ほど待ってから再試行

💡 Google側の設定反映には数分かかることがあります

「Quota exceeded」エラーが表示される

YouTube APIには日次のクォータ制限があります。24時間待つか、Google Cloud Consoleでクォータの引き上げをリクエストしてください。

📚 参考リンク

質問やサポートが必要な場合は、 ダッシュボード のヘルプセクションをご確認ください。