seigo2016 Blog

にじさんじのユニットについてのサイトを作った話

2021-11-30T15:00:00.000Z

はじめに

この記事はN・S高等学校 Advent Calendar 1日目です。
ANYCOLOR株式会社のVTuberのグループである「にじさんじ」内のユニットやCPの最新情報をお届けするサイトを構築した話です。
一応サイトのコンテンツ的にライバーのCPやユニットなどの情報が含まれる場合があります。ご注意ください。
サイトURL https://2434units.com

動機

　VTuberの事務所単位で推している方は，それぞれライバーののソロ活動はもちろん，ユニットやグループでの活動や二次創作などが盛んなCPについての動向も気になるものなのではないでしょうか？
例えば，にじさんじ非公式wikiではライバーやユニットのエピソードや配信履歴など様々な情報がデータベース的にまとめられています。しかし，wikiの性質，目的上YouTubeの切り抜きやツイートなどの最近の状況や，二次創作などについての情報は少ないと感じます。(多分)
そこで，その沼カテゴリの近況がなんとなくわかるサイトがあれば，布教もしやすいだろう！と考え構築することにしました。

注意事項

　ユニットやCPは非常に繊細な内容ですので，取得してきた情報のチェックなどについては最新の注意を払っています。
また，本記事でも，できるだけ内容は伏せています。

実際のサイト

トップページ

ユニット個別トップページ

ユニット個別の最新ツイート

①にはユニットのキーワードを含むツイートが，②にはユニットのメンバーのツイートが表示されています。

構成

まず，この図で雰囲気だけでも感じていただければいいなと思います。

開発言語・フレームワーク・環境

簡単に言うとSPAです。
フロント部分をVue.jsで，APIサーバーをPythonで構築しています。

フロント

  • Vue.js (v3) Reactと悩みましたが，v3に興味があったので選択
  • TypeScript JSが嫌いなので…
  • Tailwind CSS

バックエンド

言語はPythonです。(Goと悩んだのですが，筆者の慣れの問題でPythonにしました)

主要フレームワーク

  • FastAPI
  • SQLAlchemy
  • Requests (Twitter APIとの通信)

FastAPIについて

FastAPIは，Webの部分にStarlette(軽量なASGI，フレームワーク，ツールキット)を使用し，データの部分に，PydanticやSwagger UIを用いています。
またuvicorn(のuvloop)を使用することから，高速な非同期処理が可能であり，Pythonの中でも特に高速なフレームワークです。
更に，Flaskに類似した記述であったり，ドキュメント生成が簡単であることなど，非常に使いやすいです。

データベース

MariaDBを使用しています。正規化に苦労しました。
こんな感じの構造になっていますが，ツッコミどころは多いかもしれません。


ホスティング

フロントエンド

Cloudflare Pagesにデプロイしています。

バックエンド

全て自宅のProxmox上ののDocker鯖(4CPU/8GiBメモリ)に立っています。
また，他のサービスとの関係でNginxProxyを通しています。

登録フォーム

Google Formsでデータの登録を受け付けています。スプレッドシートに集められたそれらのデータを運営によってチェックした後に，Google App Scriptを使用してAPIサーバーに送信し，データベースに登録しています。
公開後にGoogle Forms APIが公開されたので，そのうち切り替えるつもりです。

感想

制作全体

時間が限られていたため，2週間半ちょっとで企画→設計→実装→公開まですすめました。
きちんとリーダブルコードも心がけたつもりで，成長している気がします。

Twitter API

Filtered streamを使用して，特定のキーワードの含まれるツイートを取得し，Collection APIでコレクションに追加しています。
特にラッパーは使用しておらず，requestsで処理しています。
Streamで取得できるツイート数の残りの容量が，Webのダッシュボードでしか見れないのはとても使い勝手が悪いです。(2021/10月確認時)
V2リリース当初からフォーラムでも上がっているようですが，未だに改善されていません。

Cloudflareが最高な話

Cloudflare Registrar

ドメインの登録に利用しました。ドメイン登録料のみ(レジストラの上乗せなし)なので余計なコストがかかりません。(.comが$8.57)

DNS / Cacheの設定

Cloudflareを利用する上で，最も使用頻度の高い機能だと思います。無料プランでも十分な機能があります。

Cloudflare Pages

今回のデプロイ先です。GitHub Pagesでもよいのですが，DNS/Cache等の関係でこちらにしました。

Vue.js+TypeScript

まだVueでTypeScriptを使うのはちょっと障壁があるかなと感じました。
使用したいモジュールの型定義ファイルが不足していたり，文献が少なかったりしますが，使えないわけではない，という感じです

FastAPIのDocs生成はとても便利

データClassを書いてレスポンス形式渡せばDocsがきちんと生成されます。楽しく書いていたが今の所そこまで必要じゃなかった気がする

RestAPIの設計とデータベースの設計

全体的に命名に困ったので，下記の記事を参考にして設計しました。
参考1
参考

今後

まだいくつかのタスクがToDoリストに残っているのですが，受験が終わってから考えます。
本当はコードも記事も書いているる場合ではないかもしれない

  • コンテンツの拡充 (ユニット自体の追加や，Pixivとかその他の情報の追加)
  • デザインの改善
  • Google Forms API