deg84's blog
サバゲー

YouTubeのサバゲー動画をフィールドごと見れるサービスを作った

#個人開発

#サバゲー

#React

#Next

#GraphQL

#DDD

#サーバーサイドJS

以前からサバゲーにハマっていることは書いてきましたが、1つサービスを作りました。

サバゲ動画まとめ

airsoft-videos.com

はじめてのサバゲーフィールドに行く際に、よくYouTubeでそのフィールドで撮影されたサバゲー動画を見ていたんですが、フィールド名の表記がバラバラだったり、フィールド名が一般名詞で見つけにくかったりしたので、そのあたりを解決するサービスがほしいなーということで、今回作りました。

合わせて、2つチャレンジをしました。

  1. 最近までミノ駆動本を読んでいたこともあり、DDDを実践したいなということで、それっぽいこともやってみました
  2. サーバーサイドJSに興味があったので、サーバーサイドはTSを使って実装しました

結局のところ、DDDでやるほどの規模ではなかったかなっていうのと、サーバーサイドJSは結局フロントエンドとは別物なのでメリット薄いかなという印象になりましたが…このあたりはまた別の機会に。

今回はサービスの裏側をお伝えしたいなーと思います。

どんなサービスなのか

概要は前述の通り、YouTubeにアップされているサバゲー動画をフィールドごとにまとめて表示するというものです。

今の所それだけのサービスになっています。(開発期間1ヶ月と定めたので機能を絞りました)

技術スタック

フロントエンド

  • ベース:Next.js
  • 型生成:GraphQL Code Gen

バックエンド

  • サーバー:fastify
  • GraphQLサーバー:GraphQL Yoga
  • ORM:Prisma
  • DB:PlanetScale
  • YouTube API

GraphQLを使わずにやった方がスッキリするんですが、DDDをやりたかったり、ISG, SG(SSG)を使いたかったりしたり、短期間で実装したかったりという理由によりこの構成になりました。

もしかしたらGraphQLを使わなくてもいい感じにできたかもしれないです。

難しかったところ

YouTubeの動画情報をどうやって取得するか

クォータ制限の話

YouTubeの動画情報を取得する方法はかんたんで、APIを使えば取得出来るんですが、10,000クォータ/日の利用制限があります。

クオータが若干分かりにくいなと思ったんですが、動画の詳細を取得するのに1クォータ消費され、動画アップロードするのに1600クォータ消費されます。1

ここで問題になるのが検索です。

動画検索APIがもちろん用意されているんですが、このコストが1回100クォータと割と多めです。100回検索すると1日APIが使えなくなる計算です。

例えば、APIで検索した結果から登録したい動画を選択するみたいなUIを作ったとすると、1検索で100クォータ消費、登録したい動画を選択して詳細情報を取得するので1クォータ消費という感じになります。

フィールド名が一般名詞だったりすることもあり、検索APIを使う実装の場合、すぐにクォータを消費しきってしまいそうだなと考え、検索APIを使わない方法で楽に動画を登録する方法を検討することにしました。

クォータ制限を回避しつつ楽に登録できる方法を考える

結論からいうと、YouTubeの再生リストを使うことにしました。

再生リストに登録されている動画一覧を取得するのに消費されるコストは破格の1クォータ!

動画詳細の取得に1クォータ使うので、1+n(動画件数)のコストで動画情報を取得できます。検索だと100+n(動画件数)だったコストが1+nになるのは大きいですね。

また、再生リストをフィールドごとに作ることで、フィールド情報との紐付けも自動的に出来るようにしました。

動画を再生リストに追加する部分はYouTube側で用意されているものを使っています。

まとめると、以下のようなフローで動画を登録しています。

  1. YouTubeで良さそうな動画を見つける
  2. フィールドの再生リストにその動画を追加する
  3. 取り込みスクリプトを実行する

ちなみに取り込みスクリプトはCronで毎日実行しているので放っておいても翌日には登録されるようになっています。

おわりに

現在のところ、サバゲーの動画をフィールドごとに見れるという単機能なサービスですが、反響があれば色々やっていきたいと思っています。

サバゲープレイヤーの方、是非使ってみて、フィードバックいただければ幸いです。

それでは、良いサバゲーライフを!

deg84

フリーランスでWeb系のエンジニアとスクラムマスターをやっています。

© 2020 deg84