はじめに
Twitchの配信で長期的な大会やイベントを見ている時に，同じチームや対戦相手について，どんな配信をしていたか，どんな面白いクリップがあるのかといったことが一目で確認できればいいなと考えて，このアプリケーションを開発しました．
成果物
- リポジトリ
-
公開URL- 現在vercelのエラーに対応中
使用技術
- バックエンド
python-
FastAPI-
Flaskと比較して，型の認証やswaggerを容易に表示可能などAPIに特化しており，今回はAPIのみの利用であるためこちらを選択． -
FirebaseのJWT認証 - データベースの操作，モデルの作成，APIの作成
-
sqlalchemy
- フロントエンド
-
Next.js,tailwind,Typescript- 今回は
Next.jsとTypescriptの勉強も兼ねて選択
- 今回は
-
shadcn-ui- モーダル，ドロップダウンメニューの作成に利用
-
- 認証
-
FireBase- Googleアカウントユーザの管理，ログイン処理
- JWTトークンによる認証は
pythonを利用
-
- データベース
-
PlanetScale- ストリーマーの情報（ビデオ，クリップなど）を保存
- 時系列データの保存
-
-
サーバvercel
実装・機能
Twitch APIによるデータ取得
- Twtich APIでは，ユーザ，クリップ，ビデオなどのデータが提供されています．ストリーマーとそれに関連するビデオなどの情報が欲しかったため，公式リファレンスを参考にデータを取得しました．
- 今回は事前に決めたストリーマー100名のデータを呼び出し，取得したユーザIDからビデオ，クリップのデータを呼び出しました．
データの更新
- ビデオやクリップは，新たに追加され，再生数等も変化するため定期的な更新が必要です．そのため，一日に一度アクセストークンを取得し，登録されているストリーマーのビデオとクリップのデータを取得し，データベースに登録しています．
- なお，ビデオとクリップには一度に呼び出し可能な個数が100個までという制限があります．APIの呼び出し回数を考慮し，今回は直近100件のデータのみを更新対象としています．
アプリケーションの操作手順
- 時系列の作成
ログイン後，以下の画面が表示されます．このページのサイドバーか本ページにあるプラスボタンをクリックすることで，時系列作成モーダルが表示されます．
時系列の名前とその日付の範囲を選択することで，時系列を作成できます．
- ストリーマーの追加
時系列作成後，以下の様な画面が表示されます．時系列の名前をクリックすると，時系列に関する操作を行えるので，ストリーマーの追加を選択します．
ストリーマーの一覧が表示されるので，いずれかのストリーマーを選択します．
追加を行うと選択した範囲内におけるビデオの時系列データが作成されます．
また，時系列上のデータをクリックすると，そのデータに応じたビデオが表示されます．
上のラジオボタンを押すことで，クリップの時系列を表示することも可能です．細かい機能についてはビデオと同様です．
今後実装予定・実装の課題
ストリーマー検索機能
- 現在は事前に選んだストリーマーのみが利用可能です．新たにストリーマーを追加できるように，APIを発行し検索する機能を実装予定です．
時系列検索機能
- 他者の作成した時系列を検索，評価できる機能を実装予定です．
Twitch APIの制限
- Twitch APIではビデオにゲーム情報が無い，ビデオとクリップの一度取得個数に限度があるなどの制限が存在します．
- ビデオに関してゲーム情報を取得する方法を現在模索しています．
FastAPIとNext.jsの連携
-
FastAPIのAPIによってデータの登録を行う際，Next.js側でリロードを行わないと登録されたデータが表示されないなど，連携の上での知識がまだまだ不足しています．これらの問題について調査していく必要があります．