JavaScript コードサンプル

以下のコードサンプルでは、JavaScript 用の Google API クライアント ライブラリを使用しています。このサンプルは、GitHub の YouTube API コード サンプル リポジトリの javascript フォルダからダウンロードできます。

このコードは、https://www.googleapis.com/auth/yt-analytics.readonly スコープへのアクセス権をユーザーにリクエストします。

return gapi.auth2.getAuthInstance()
    .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
    ...

アプリで他のスコープへのアクセス権をリクエストする必要がある場合もあります。たとえば、YouTube Analytics API と YouTube Data API を呼び出すアプリケーションでは、ユーザーが YouTube アカウントへのアクセス権も付与する必要がある場合があります。認可の概要では、YouTube Analytics API を呼び出すアプリケーションで一般的に使用されるスコープを説明しています。

チャンネルの毎日の統計情報を取得する

この例では、YouTube Analytics API を呼び出して、承認ユーザーのチャンネルの 2017 年の 1 日あたりの視聴回数などの指標を取得します。このサンプルでは、Google API JavaScript クライアント ライブラリを使用します。

承認認証情報を設定する

このサンプルをローカルで初めて実行する前に、プロジェクトの認可認証情報を設定する必要があります。

  1. Google API Console でプロジェクトを作成または選択します。
  2. プロジェクトで YouTube アナリティクス API を有効にします。
  3. [認証情報] ページの上部で [OAuth 同意画面] タブを選択します。メールアドレスを選択し、サービス名が設定されていない場合はサービス名を入力して、[保存] ボタンをクリックします。
  4. [認証情報] ページで、[認証情報を作成] ボタンをクリックし、[OAuth クライアント ID] を選択します。
  5. アプリケーションの種類として [ウェブ アプリケーション] を選択します。
  6. [承認済みの JavaScript 生成元] フィールドに、コードサンプルを提供する URL を入力します。たとえば、http://localhost:8000 や http://yourserver.example.com などの名前を使用できます。[承認済みのリダイレクト URI] フィールドは空欄のままでかまいません。
  7. [作成] ボタンをクリックして、認証情報の作成を完了します。
  8. ダイアログ ボックスを閉じる前に、クライアント ID をコピーします。この ID はコードサンプルに入力する必要があります。

サンプルのローカルコピーを作成する

次に、サンプルをローカル ファイルに保存します。サンプルで次の行を見つけ、YOUR_CLIENT_ID を認証情報のセットアップ時に取得したクライアント ID に置き換えます。

gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});

コードの実行

これで、実際にサンプルをテストする準備が整いました。

  1. ウェブブラウザからローカル ファイルを開き、ブラウザでデバッグ コンソールを開きます。2 つのボタンが表示されたページが表示されます。
  2. [authorize and load] ボタンをクリックして、ユーザー認証フローを開始します。アプリにチャンネル データの取得を承認すると、ブラウザのコンソールに次の行が出力されます。
    Sign-in successful
GAPI client loaded for API
  3. 上記の行ではなくエラー メッセージが表示された場合は、プロジェクト用に設定した承認済みリダイレクト URI からスクリプトを読み込んでいること、および上記の説明のとおりにクライアント ID をコードに配置していることを確認してください。
  4. [実行] ボタンをクリックして API を呼び出します。ブラウザのコンソールに response オブジェクトが出力されます。そのオブジェクトでは、result プロパティは API データを含むオブジェクトにマッピングされます。

サンプルコード

<script src="https://apis.google.com/js/api.js"></script>
<script>
  function authenticate() {
    return gapi.auth2.getAuthInstance()
        .signIn({scope: "https://www.googleapis.com/auth/yt-analytics.readonly"})
        .then(function() { console.log("Sign-in successful"); },
              function(err) { console.error("Error signing in", err); });
  }
  function loadClient() {
    return gapi.client.load("https://youtubeanalytics.googleapis.com/$discovery/rest?version=v2")
        .then(function() { console.log("GAPI client loaded for API"); },
              function(err) { console.error("Error loading GAPI client for API", err); });
  }
  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return gapi.client.youtubeAnalytics.reports.query({
      "ids": "channel==MINE",
      "startDate": "2017-01-01",
      "endDate": "2017-12-31",
      "metrics": "views,estimatedMinutesWatched,averageViewDuration,averageViewPercentage,subscribersGained",
      "dimensions": "day",
      "sort": "day"
    })
        .then(function(response) {
                // Handle the results here (response.result has the parsed body).
                console.log("Response", response);
              },
              function(err) { console.error("Execute error", err); });
  }
  gapi.load("client:auth2", function() {
    gapi.auth2.init({client_id: 'YOUR_CLIENT_ID'});
  });
</script>
<button onclick="authenticate().then(loadClient)">authorize and load</button>
<button onclick="execute()">execute</button>

yt_analytics_v2.html