概要
LisVir.holoを作ろうと考えた経緯や開発環境、公開までのざっくりとした流れや公開後の話のメモ。
なぜ作ろうと思ったのか
- 時間がそこそこあった
- 何か作って最近の技術に触れないと腐りそうという危機感
- 最近VTuberにハマったので関連したものを作りたい
作るにあたっての検討
-
何で作るか
仕事ではあまり触らないSPAに挑戦したい。→Node.js, express, Vue.js
DBはNoSQLに触っときたい。→MongoDB -
開発環境
OSは何でもよいがUbuntuを使う(遊びで触ったことがあった)。
ソース管理はGitHub(初めてちゃんと使う) -
公開環境
過去にさくらのレンタルサーバーでWebを公開したことがあるので今回も検討したが、折角なので従量課金のクラウド系を試したい。
→Google Cloud Platform
ざっくり設計
-
バック
YouTube Data APIでチャンネル・スケジュールを取得しMongoDBに保存
フロントからのリクエストでMongoDBのデータを返却 -
フロント
バックへのリクエストでチャンネル・スケジュール情報を取得し画面表示
開発中につまったこと
-
YouTube Data APIの利用制限
執筆時点(2020年9月15日)では1日のクォータ数(Quota)が10,000となっている。
検索リクエスト(search)が1リクエストで100なので、1日100回が限界。
直近スケジュールの収集タイミングを1日3回に制限。
(動画のスケジュール動画情報を収集する対象が32チャンネルなので、それだけで9,600)
チャンネル情報取集用のリクエスト(channels)は1クォータなので制限は気にせず実行できる。
動画単体の情報収集用リクエスト(videos)も1クォータ。
クォータ数の制限を増やす申請は行い、現在対応中(後述) -
フロントの見た目
デザイン能力の欠片もないので、見た目は誰かのテンプレートを頂戴することに。
ライセンス的に問題ないVue.jsのテンプレートのCoPilotを使用。
そのテンプレート内でJavaScript Standard Styleに触れて、いつもの記法で書いていたらコンパイルがなかなか通らない。
JavaScriptでセミコロンが不要なのを知れて良かった。
公開に向けての作業
-
ドメイン
お名前.comで取得。
Whois情報公開代行で住所は隠したけど登録者名は非公開にならないのが、少しだけ嫌だったが仕方がない。
他のドメイン登録サービスではやってる場所もあるみたいだが、これはもうこのままでGo。 -
サーバー、SSL証明書
初のGoogle Cloud Platform。ネットで調べながら作業。
最初、Compute EngineからVMインスタンスを作ったが、
後にSSLが必要(APIの利用規約にはSSLで、とあった)となるので、これは削除。
ネットワークサービスの負荷分散からロードバランサ作成、バックエンドとしてのインスタンスグループを作った。
SSL証明書を新規に取得するほどでもなかったので、GoogleマネージドSSL証明書を使うこととして、そのためにロードバランサでうんたらかんたら。
VM(Ubuntu、東京リージョン)にアプリケーションをインストールして公開。
公開後の課題と展望
-
クォータ数が足りない
前述のとおり、動画情報の収集に用いる検索クエリ(search)が1回100コストかかるので、頻繁にスケジュール情報を更新できない。
そのため、YouTube APIのクォータ数の増加申請を行い、現在審査待ち
（申請に関する詳細情報は別途書く）
直近全然足りないので、スケジュール情報の収集回数を減らし、チャンネル量を増やす。
（2020/09/16時点で増やした） -
同系の別サイトも作りたい
ホロライブだけでなく、にじさんじ、個人勢、切り抜きチャンネルに関する情報まとめも作りたい。
そのためにはクォータ数の上限を何とか増やしたい。
※APIのプロジェクト単位でクォータ数は管理されている。1つのサイトの複数のプロジェクトのキー・クォータ数を割り当てるのは規約違反なので最悪BANされる可能性あり。少なくともクォータ数上限増加の申請はできない。
詳細な環境構築手順やGoogle Cloud Platformでの作業の詳細は別途書く。