JavaScript クイックスタート

このクイックスタート ガイドでは、YouTube Data API にリクエストを行うシンプルなページを設定する方法について説明します。このクイックスタートでは、実際には 2 つの API リクエストを行う方法について説明します。

  1. アプリケーションを識別する API キーを使用して、GoogleDevelopers YouTube チャンネルに関する情報を取得します。
  2. OAuth 2.0 クライアント ID を使用して、自分の YouTube チャンネルに関する情報を取得する承認済みリクエストを送信します。

前提条件

このクイックスタートを実行するには、次のものが必要です。

  • Python 2.4 以降(ウェブサーバーを提供する)
  • インターネット アクセスとウェブブラウザ。
  • Google アカウント

ステップ 1: プロジェクトと認証情報を設定する

API Console でプロジェクトを作成または選択します。プロジェクトの API Console で次のタスクを完了します。

  1. ライブラリ パネルで、YouTube Data API v3 を検索します。その API のリストをクリックし、プロジェクトで API が有効になっていることを確認します。

  2. 認証情報パネルで、次の 2 つの認証情報を作成します。

    1. API キーを作成する API キーは、ユーザー認証を必要としない API リクエストを行うために使用します。たとえば、公開 YouTube チャンネルに関する情報を取得する場合、ユーザーの承認は必要ありません。

    2. OAuth 2.0 クライアント ID を作成する アプリケーション タイプを [ウェブ アプリケーション] に設定します。ユーザー認証が必要なリクエストには、OAuth 2.0 認証情報を使用する必要があります。たとえば、現在認証されているユーザーの YouTube チャンネルに関する情報を取得するには、ユーザーの承認が必要です。

      [承認済みの JavaScript 生成元] フィールドに、URL「http://localhost:8000」を入力します。[Authorized redirect URIs] フィールドは空欄のままでかまいません。

ステップ 2: サンプルを設定して実行する

サイドパネルの API Explorer ウィジェットを使用して、GoogleDevelopers YouTube チャンネルに関する情報を取得するためのサンプルコードを取得します。このリクエストでは、API キーを使用してアプリケーションを識別します。ユーザー認証や、サンプルを実行するユーザーからの特別な権限は必要ありません。

  1. API の channels.list メソッドのドキュメントを開きます。
  2. このページの「一般的なユースケース」セクションには、このメソッドの一般的な使用方法を説明する表があります。表の最初のリストは、チャンネル ID で結果を一覧表示するためのものです。

    最初の一覧のコード記号をクリックして、全画面表示の API Explorer を開いて入力します。

    channels.list ドキュメントのユースケースを一覧表示する表で、コードシンボル リンクの場所を示す画像。その画像の代替テキストは、画像をコード記号として識別し、そのリンクに関連付けられているユースケースを指定します。

  3. 全画面表示の API Explorer の左側には、次のものが表示されます。

    1. [リクエスト パラメータ] ヘッダーの下に、メソッドがサポートするパラメータのリストが表示されます。part パラメータと id パラメータの値を設定する必要があります。id パラメータ値 UC_x5XG1OV2P6uZZ5FSM9Ttw は、GoogleDevelopers YouTube チャンネルの ID です。

    2. パラメータの下に、[認証情報] というセクションがあります。このセクションのプルダウン メニューには、[API キー] という値が表示されます。API Explorer では、デフォルトでデモ認証情報を使用して、簡単に始めることができます。ただし、サンプルをローカルで実行するには、独自の API キーを使用します。

      全画面表示の API エクスプローラで [Credentials] が表示され、[API key] オプションが選択されたプルダウン メニューが表示されている画像。

  4. 全画面表示 API Explorer の右側には、さまざまな言語のコードサンプルを含むタブが表示されています。[JavaScript] タブを選択します。

  5. コードサンプルをコピーして、example.html という名前のファイルに保存します。

  6. ダウンロードしたサンプルで YOUR_API_KEY 文字列を見つけ、このクイックスタートのステップ 1 で作成した API キーに置き換えます。

  7. 次のコマンドを使用して、作業ディレクトリからウェブサーバーを起動します。

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python -m http.server 8000
    
  8. ブラウザで example.html ファイルを開きます。また、Chrome ブラウザの [デベロッパー ツール] など、ブラウザのデベロッパー ツールも開きます。

    1. ページで [読み込む] ボタンをクリックして、Google APIs Client Library for JavaScript を読み込みます。ボタンをクリックすると、デベロッパー コンソールに GAPI クライアントが読み込まれたことを示すメモが表示されます。

    2. [実行] ボタンをクリックして、API リクエストを送信します。デベロッパー コンソールに API レスポンスが表示されます。

ステップ 3: 承認済みリクエストを実行する

このステップでは、コードサンプルを変更して、GoogleDevelopers YouTube チャンネルの情報ではなく、自分の YouTube チャンネルの情報を取得するようにします。このリクエストにはユーザー認証が必要です。

  1. API の channels.list メソッドのドキュメントに戻ります。

  2. [一般的なユースケース] セクションで、表の 3 番目のリストのコード記号をクリックします。このユースケースでは、「マイチャンネル」の list メソッドを呼び出します。

  3. 全画面表示の API Explorer の左側には、パラメータのリストと [認証情報] セクションが表示されます。ただし、GoogleDevelopers チャンネルに関する情報を取得した例とは 2 つの変更点があります。

    1. パラメータ セクションで、id パラメータ値が設定される代わりに、mine パラメータ値が true に設定される必要があります。これにより、API サーバーは現在認証されているユーザーのチャンネルに関する情報を取得します。

    2. [認証情報] セクションのプルダウン メニューで、[Google OAuth 2.0] オプションが選択されていることを確認します。

      また、[スコープを表示] リンクをクリックすると、https://www.googleapis.com/auth/youtube.readonly スコープがオンになっているはずです。

      全画面表示の APIs Explorer でスコープが表示され、[Google OAuth 2.0] 認証情報を使用するオプションが選択されている画像。

  4. 前の例と同様に、[JavaScript] タブを選択し、コードサンプルをコピーして example.html に保存します。

    コードで YOUR_CLIENT_ID 文字列を見つけ、このクイックスタートのステップ 1 で作成したクライアント ID に置き換えます。

  5. 次のコマンドを使用して、作業ディレクトリからウェブサーバーを起動します。

    Python 2.x

    python -m SimpleHTTPServer 8000
    

    Python 3.x

    python -m http.server 8000
    
  6. ブラウザで http://localhost:8000/example.html ファイルに移動します。Chrome ブラウザの [デベロッパー ツール] など、ブラウザのデベロッパー ツールを開きます。

  7. ページで [authorize and load] ボタンをクリックして、JavaScript 用 Google APIs クライアント ライブラリを読み込み、認証フローを開始します。YouTube アカウントからデータを読み取る権限をアプリケーションに付与するよう求めるメッセージが表示されます。

    権限を付与すると、デベロッパー コンソールに、ログインが成功し、API クライアントが読み込まれたことを示すメッセージが表示されます。

  8. [実行] ボタンをクリックして、API リクエストを送信します。デベロッパー コンソールに API レスポンスが表示されます。

関連情報