はじめに
その昔、Vueの勉強のついでに当時興味があったTwitch APIを利用してみようと思って触った遺産があったのですが、最近また勉強しようと思って掘り出しました。
本記事は、VueでTwitch APIを活用して検索機能をいじくるアプリケーションの雛形を紹介するていで次掘り返すときにすぐ再開できるようにする備忘録です。
実装
StreamsList.vueにTwitch APIを使って、ゲームタイトルを検索するとそのゲームを配信してるリストが表示されて、そこからさらにタイトルで検索できる非常に簡素な画面が実装してあります。
Twitch APIの利用準備
Twitch APIを利用するにはTwitch API | Twitch Developersにアクセスして、登録し、クライアントIDなるものを取得した上でOAuth認証のアクセストークンの用意が必要です。
取得した情報をtwitch_config.jsonに入れるとそれをaxiosのヘッダに入れてAPIを利用するように実装してます。
Twitch APIで何ができるか
基本は以下のリファレンスに各APIとその結果が書いてあるので、やりたいことを実現できるAPI探して利用すればOKです。現状のリポジトリで使っているAPIを紹介します。
ゲームタイトルを検索する
AxiosInstance.get('https://api.twitch.tv/helix/search/categories?query='+searchkey)
searchkeyにはテキストボックスで入力した内容が入り、検索に一致するゲームのカテゴリ一覧を返してくれます。
Twitch APIで配信を検索する
AxiosInstance.get('https://api.twitch.tv/helix/streams?game_id=' + this.selectCategory + '&type=live&first=100&language=ja')
this.selectCategoryには、先に検索しておいたゲームカテゴリ内で選択したカテゴリが入り、他にもオプションで配信中(type=live)、先頭から100件(first=100)、言語は日本語(language=ja)と指定しています。
this.channelLists = streams.filter(s => (s.title.indexOf(serchkey) != -1));
その結果をテキストボックスの内容でフィルタして検索しているのが、リポジトリのコードです。
他のAPI
大体画面で見えている情報は取れますが、気になっているのだとクリップも取れるので、気になったゲームのクリップなんかもタイトルで検索したりできそうです。