Next.jsで作られたサイトでYouTube Data API V3をブラウザからぶっ叩きたい
この記事は最終更新日から1年以上が経過しています。
弊社のプロジェクトでYouTube Data API V3を使用するタスクが発生したのでメモしました。
YouTube Data APIをNext.jsで使用します。
GCPでプロジェクトを作成し、YouTube Data API V3を有効にしAPIのkey(認証情報)を取得しておきます
参考ドキュメント
まずはAPI keyをNext.js側に登録します。
.envにAPI keyを記述します。
YOUTUBE_DATA_API_V3_KEY = "XXXXXXXXXXXXXXXX_YOU_NO_API_KEY_XXXXXXX"
next.config.jsにも追記します。
module.exports = {
env: {
YOUTUBE_DATA_API_V3_KEY: process.env.YOUTUBE_DATA_API_V3_KEY
}
}ではAPIを叩いていきます。
こちらのサンプルを参考に実装しました。
まずは、「JavaScript用のGoogle APIのクライアントライブラリ」を読み込みます。
こちらのドキュメントを参考に実装しました。
注意点は「JavaScript用のGoogle APIのクライアントライブラリ」はnpmにありません。
npmにはnode.js用のライブラリがあるので誤ってinstallしない用にします。（私は、誤ってinstallしてしまい、エラーが出まくってしまいました。）
CDNのパスをpages/_document.tsxを作成し追記します。
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyApp extends Document {
render() {
return (
<Html lang="ja">
<Head>
</Head>
<body>
<Main />
<NextScript />
<script src="https://apis.google.com/js/api.js"></script> // JavaScript用のGoogle APIのクライアントライブラリ用のCDN
</body>
</Html>
)
}
}
export default MyApp「JavaScript用のGoogle APIのクライアントライブラリ」を使用する準備ができました。
APIを叩く処理をpages/index.tsx上に実装していきます。
APIをloadするために下記を追記します。
const start = () => {
gapi.client.init({
apiKey: process.env.YOUTUBE_DATA_API_V3_KEY,
}).then(result => {
// こちらでYouTube APIをイニシャライズします。
gapi.client.load('youtube', 'v3', () => {
console.log('OK');
});
}).then(response => {
// console.log(response.result);
}, reason => {
console.log('Error: ' + reason.result.error.message);
});
}
gapi.load('client', start);
しかしながら、YouTube APIをイニシャライズするところまでできたのですが、この先がどうして良いかわからなくなってしまいました。
困っていたところ英語版のGoogleで下記のサンプルサイトを発見しました！
サンプルを参考に、検索関数を作成しました。
/**
* YouTube検索関数
* @param {String} query 検索したい文字列
*/
const search = (query) => {
console.log(gapi.client.youtube)
gapi.client.youtube.search.list({
q: query,
part: 'snippet'
}).then(data => {
console.log(data)
}).catch(error => {
console.log(error)
})
}作った関数を追記します。
const start = () => {
gapi.client.init({
apiKey: process.env.YOUTUBE_DATA_API_V3_KEY,
}).then(result => {
// こちらでYouTube APIをイニシャライズします。
gapi.client.load('youtube', 'v3', () => {
search('Test'); // こちらに追記しました。
});
}).then(response => {
// console.log(response.result);
}, reason => {
console.log('Error: ' + reason.result.error.message);
});
}ではブラウザを更新します。おお無事にデータが返ってきました。
ひと安心しました。
これからAPIを活用していきたいです。
お読みいただきありがとうございました。