JavaScript クイックスタート

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

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

前提条件

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

• Node.js と npm（ローカル ウェブサーバーを実行するため）
• インターネット アクセスとウェブブラウザ。
• Google アカウント

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

Cloud コンソールでプロジェクトを作成または選択します。プロジェクトの Cloud コンソールで次のタスクを行います。

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 を開いて入力します。

   

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

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

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

      

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

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

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

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

   npx http-server -p 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 スコープがオンになります。

      

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

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

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

   npx http-server -p 8000
   

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

7. ページ上の [承認して読み込む] ボタンをクリックして、Google APIs Client Library for JavaScript を読み込み、認可フローを開始します。 YouTube アカウントからデータを読み取る権限をアプリケーションに付与するように求められます。

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

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

関連情報

• Google Developers Console のヘルプ ドキュメント
• Google API クライアント ライブラリ for JavaScript のドキュメント
• YouTube Data API リファレンス ドキュメント