JavaScript クイックスタート

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

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

Prerequisites

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

  • 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 を入力します。[承認済みのリダイレクト URI] フィールドは、空白のままでもかまいません。

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

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

  1. API の channels.list メソッドのドキュメントを開きます。
  2. そのページの「一般的なユースケース」セクションには、メソッドの一般的ないくつかの使用方法が説明されている表があります。表の最初のリストは、チャネル ID による結果のリスティングです。

    最初のリスティングのコード記号をクリックして、API Explorer を全画面表示し、データを入力します。

    Channels.list ドキュメントのユースケースを示すテーブル内のコード シンボル リンクの位置を識別する画像。その画像の代替テキストは、画像をコードシンボルとして識別し、そのリンクに関連するユースケースを指定します。

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

    1. Request パラメータ ヘッダーの下に、メソッドがサポートするパラメータのリストがあります。partid のパラメータ値を設定する必要があります。id パラメータ値 UC_x5XG1OV2P6uZZ5FSM9Ttw は、GoogleDevelopers YouTube チャンネルの ID です。

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

      全画面表示の API Explorer の [認証情報] と、[API キー] オプションが選択されたプルダウン メニューを示す画像。

  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. ページの [読み込み] ボタンをクリックして、JavaScript 用の Google API クライアント ライブラリを読み込みます。ボタンをクリックすると、GAPI クライアントが読み込まれたことを示すメモがデベロッパー コンソールに表示されます。

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

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

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

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

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

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

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

    2. [認証情報] セクションのプルダウン メニューで [Google OAuth 2.0] を選択します。

      さらに、[スコープを表示] リンクをクリックすると、https://www.googleapis.com/auth/youtube.readonly のスコープがオンになります。

      全画面表示の API 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. ページの [承認と読み込み] ボタンをクリックして、JavaScript の Google API クライアント ライブラリを読み込み、認証フローを開始します。YouTube アカウントのデータを読み取る権限をアプリケーションに付与するよう求められます。

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

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

参考資料