このページは Cloud Translation API によって翻訳されました。

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 クライアントライブラリを使用します。

認証情報を設定する

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

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

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

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

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

コードの実行

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

ウェブブラウザでローカルファイルを開き、ブラウザでデバッグコンソールを開きます。2 つのボタンを含むページが表示されます。
[Authorize and load] ボタンをクリックして、ユーザー認証フローを起動します。アプリがチャンネルデータを取得することを承認すると、ブラウザのコンソールに次の行が表示されます。
```
Sign-in successful
GAPI client loaded for API
```
上記の行の代わりにエラーメッセージが表示された場合は、プロジェクト用に設定した承認済みのリダイレクト URI からスクリプトを読み込んであり、前述のとおりクライアント ID をコードに挿入していることをご確認ください。
[execute] ボタンをクリックして 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