イントロダクション
ここではYoutube Data APIを使用するためのサンプルコードが動かなかったので、それを動かすための調査を行いました。
まずは、下のコードでエラーが出ていなので根本的なところを見直します。
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet'
});このコードでは、「gapi.client」以降のプロパティ(youtube以降)が参照できないのでそれを解決するっための調査を行いました。まずは使用している「クライアントライブラリ」に関して調べてみました。
すると、「youtube」というプロパティがなくなったのか。。。まぁ、ありませんでした。詳細は以下に記載します。
クライアントライブラリ
JavaScriptでのGoogle Client libraryを使用して各種Google APIを使用したいと考えています。
※githubを参考にしています。
概要
JavaScript用のGoogleAPIクライアントライブラリは、JavaScriptクライアントアプリケーション開発者向けに設計されています。多くのGoogleAPIへのシンプルで柔軟なアクセスを提供します。
JavaScriptクライアントライブラリを使用して、WebアプリケーションからPeople、Calendar、DriveなどのGoogleAPIを操作できます。開始するには、このページの指示に従ってください。
入門
JavaScriptクライアントライブラリを使用してAPIリクエストを作成する方法はいくつかありますが、それらはすべて同じ基本パターンに従います。
- アプリケーションはJavaScriptクライアントライブラリをロードします。
- アプリケーションは、APIキー、OAuthクライアントID、およびAPIディスカバリドキュメントを使用してライブラリを初期化します。
- アプリケーションは要求を送信し、応答を処理します。
APIリクエストを行う方法
Step1: ライブラリをロードする
サンプルコードです。
<script src="https://apis.google.com/js/api.js"></script>
<script>
function start() {
// 2. Initialize the JavaScript client library.
gapi.client.init({
'apiKey': 'YOUR_API_KEY',
// Your API key will be automatically added to the Discovery Document URLs.
'discoveryDocs': ['https://people.googleapis.com/$discovery/rest'],
// clientId and scope are optional if auth is not required.
'clientId': 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
'scope': 'profile',
}).then(function() {
// 3. Initialize and make the API request.
return gapi.client.people.people.get({
'resourceName': 'people/me',
'requestMask.includeField': 'person.names'
});
}).then(function(response) {
console.log(response.result);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
};
// 1. Load the JavaScript client library.
gapi.load('client', start);
</script>サンプルコードの「'YOUR_API_KEY'」と「'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com'」の部分にそれぞれの値を入力する。
各API(今回はYoutube Data API)の認証情報ページからAPIキーとクライアントIDを設定、取得ができます。
しかし、エラーが。。。
参考サイトのコードでは下のようになっていましたが。。。
}).then(function(response) {
console.log(response.result);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});それを修正して、次のようにしたら、原因がわかりました。
}).then(function(response) {
console.log(response.result);
}, function(reason) {
console.log('Error: ' + reason);
});
};【出力結果】
{error: 'idpiframe_initialization_failed', details: "Not a valid origin for the client: https://zenryok…egister this origin for your project's client ID."}
details: "Not a valid origin for the client: https://zenryokuservice.com has not been registered for client ID XXXXXXXX.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."
error: "idpiframe_initialization_failed"
つまりは実行するURLが登録されていないということでした。
調べてみるとOAUTH2.0の設定ができていないのが原因であろうということでした。
OAUTH2.0の設定
googleのページを参考にします。
認証情報を設定してやると結局は、クライアントIDが作成されるので、初めに作成したクライアントIDで問題はなさそうです。
改めてエラーメッセージを見てみるとJSONで、返却されていました。その内容は下のようになっていました。
{
"error": {
"code": 403,
"message": "People API has not been used in project XXXX before or it is disabled.
Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=XXX then retry.
If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
"status": "PERMISSION_DENIED",
"details": [
{
"@type": "type.googleapis.com/google.rpc.Help",
"links": [
{
"description": "Google developers console API activation",
"url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=XXX"
}
]
},
{
"@type": "type.googleapis.com/google.rpc.ErrorInfo",
"reason": "SERVICE_DISABLED",
"domain": "googleapis.com",
"metadata": {
"consumer": "projects/XXXX",
"service": "people.googleapis.com"
}
}
]
}
}
調べてみると「Google People API」を使用するようです。そしたら、そのままリクエストを送信したほうが良いので、Googleクライアントライブラリを使用しない形で実装することにします。
普通にGETリクエスト
こちらの動画を参考に検索リクエストを送信してみました。
すると、クォータが超過したようで、テストできなくなりました。
error:
code: 403
errors: [{…}]
message: "The request cannot be completed because you have exceeded ...
これは日を改めて実行すれば、大丈夫なので、今日はここまでにしようと思います。
このアイコンをクリックします。拡張機能ボタンのようです。
