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 Analytics 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. [execute] ボタンをクリックして API を呼び出します。ブラウザに、response オブジェクトがコンソールに表示されます。そのオブジェクトの result プロパティは、API データを含むオブジェクトにマッピングされます。

サンプルコード






yt_analytics_v2.html