🏪

youtube配信型オンライン自習室を作った [オンライン作業部屋]

2022/01/08に公開

Firestore

こんにちは。そららいどです😊

個人開発で24時間youtubeライブ配信を利用したオンライン自習室システムを構築しました。
Youtubeのアカウントを持っている人は誰でもすぐに利用できます。

下記リンクのチャンネルに行くとライブ中の動画が見えるので、そちらから視聴できます。

チャンネル登録者数は6万人を突破しています。

配信のようす（ユーザー名は伏せています）

どんなサービス？

入室できる

Youtubeライブのチャット欄に入室コマンドを書き込むことで、配信画面内の座席表に自分の名前が表示されます。

入室コマンドを入力

画面内の408番の座席に座れました。
「オンライン…」という名前のやつが私です。

入室したようす

何を作業してるのか表示できる

座席には何を勉強しているのかを示す文字列も表示することができます。
ユーザーが自由に設定できます。

作業内容が表示される！（ユーザー名は消しています）

累計の作業時間がわかる

また、入室した時間を加算していく仕組みがあり、自分のこれまでの累計作業時間を振り返ることも可能です。

システム構成

システム構成

使用技術・ツール・言語


チャットBotプログラム	Go言語プログラムをローカルPCでずっと実行
配信画面	Next.jsのローカルサーバーを立て、ライブ配信ソフト内蔵ブラウザで表示
ライブ配信ソフト	OBS Studio
PC	Windows, Mac
IDE・エディタ	GoLand, VS Code
Gitリポジトリ管理	GitHub Desktop
データベース	Cloud Firestore
Botプログラム	Go
自動バッチ処理プログラム	Go, AWS Lambda, API Gateway, Cloud Scheduler
配信画面（WEBアプリ）	Next.js, TypeScript, Emotion
Web API	Youtube Live Streaming API, LINE Messaging API, Discord API

技術の選定理由

本格的にソフトウェアのプロジェクトを作るのは初めてだったため、とにかく作り切ることを第一として、基本的には途中で挫折しないように、慣れてない技術に手を出さないようにしました。

サーバーサイド：Go

私が扱うことができるサーバーサイドの言語として当時使用できたのは、C, Python, Goでした。JavaやPHPやNode.jsも少しは触ったことはあるのですが、まだ一つのサービスを作るためには、言語そのものに対する学習コストはできるだけ下げたかったため、Goを選択しました。
とはいえGoもそこまで経験はなかったのですが、（素人の私から見て）基本文法やアドレスのような概念がC言語と似ていたことと、高速処理に強いイメージがあり、リアルタイムにユーザーを捌くことがメインとなるオンライン自習室に向いていると判断しました。

配信画面：Next.js + Typescript

配信画面はWebページです。
Windows等のデスクトップアプリにすることもできましたが、あまりOSや環境に依存させたくはなかったことと、単純にネイティブアプリよりもWebアプリの方が元々のスキルがあったため、学習コストを抑えるためにWebアプリにしました。

開発効率と安全性を高めるという点で、JavascriptではなくTypescriptを使用しています。

JavascriptライブラリはVueとReactを検討しましたが、開発当初はReactの方がTypescriptサポートがしっかりしていたため、Next.js (React) を使用しました。

データベース：Firestore

DBとしてはRDBであるMySQLとDynamoDB・Firestoreを候補としていましたが、個人開発のサービスとしてランニングコストを抑えるという条件を考慮すると、RDBではなくDynamoDB・Firestoreの方が無料である程度利用できるため、MySQLは除外しました。
DynamoDBとFirestoreを比較したときに、ドキュメントが見やすいこと・使い慣れているという点でFirestoreに決定しました。

また、入退室システムであるため、リアルタイムのデータアクセス処理に問題がないかは確認しました。

GitHubリポジトリ

本プロジェクトのソースコードはGithubのリポジトリで公開しています。

制作の背景

大学の受験勉強をしていたときに、モチベーションを高めるためにyoutubeで「study with me」というジャンルの動画をよく見ていました。
自分が勉強しているようすをカメラで写して配信したり、穏やかなBGMと映像を流しながら作業に集中できるような動画が当時から流行りはじめていました。

コロナ禍に入り、図書館や自習室に行けず在宅での勉強・仕事の需要が増えたこともあり、study with meの動画はさらに増えたと思います。

私はそれらの動画を見て、youtube上でみんなで一緒に勉強ができる空間を作ってみたいと思いました。

当時からzoomやskypeのように複数人が参加したオンラインミーティングの様子をカメラありで配信していたライブ動画は存在していましたが、

画面に映れるのはほんの数人
配信者は配信中はずっと状況を管理し続ける必要がある

といった課題がありました。

そこで、多くの視聴者がすぐに気軽に入室できて、24時間稼働する自動自習室システムを作ろうと思い立ち2020年4月に開発をスタートしました。

ちなみに、画面の座席デザインは、ネットカフェで入店時に座席表を見ながら席を選ぶのにワクワクした経験がもとになっています。

工夫したこと

完全放置できるシステム

このオンライン自習室システムを作るうえで特に意識していたことは、私自身の日常生活にできる限り影響を与えずにサービスを開発・運用できるようにすることです。

完全自動化です。

そのためには、

Botは実行途中でエラーで止まったりしない（ずっと動き続ける）
ライブ配信中でも開発できる
ユーザーからの問い合わせを受けつけ、記録する

ようにする必要がありました。

Botは実行途中でエラーで止まったりしない

基本的なことですが、これはつい２，３か月前までは達成できていませんでした。
少なくとも２，３日に1回はエラーが出てBotプログラムが止まってしまい、LINEでエラーが出た旨の通知を見て急いで復旧する、という作業を常に繰り返していました。

エラー処理や反復処理を徹底するようにプログラムを見直したことで、今では何週間たってもBotが勝手に止まることはありません。
（ただ、たま～～～～～に止まります）

ライブ配信中でも開発できる

最大の肝のひとつとして、Gitによるブランチ管理があると思います。
ブランチを本番用・開発用メイン・単機能開発用、といったふうに分けて適切に使用します。

本番配信では必ず本番用ブランチを使用します。
（開発中の機能が完成しかけると、ついついその開発ブランチのまま本番配信を試したくなるんですが、あとあと何かトラブルが起こったときに苦労します^^）

GitでけでなくGCPやAWSでも、本番環境と開発テスト環境を用意して、完全に独立した２つのシステムを構築できるようにしています。

GCPにはプロジェクトの概念があるので本番用と開発用のプロジェクトを２つ作成するだけですが、AWSにはプロジェクトというものがないため、リージョンを別にして本番用（東京リージョン）・開発用（北米）の環境として使い分けています。

ユーザーからの問い合わせを受けつけ、記録する

Googleフォームで問い合わせフォームを設置しています。

問い合わせが来たらすぐにメールで通知することもできますし、アンケートを取ってグラフで集計したり、スプレッドシートにデータを出力することも可能です。

背景画像のランダム切替

少しでも単調でない映像にするために、ルームの背景画像は一定周期でランダムに切り替わるようにしています。
画像は https://unsplash.com/ から取得しています。

配信事故の防止

ライブ配信は自宅のデスクトップPCから行っています。

このPCはWEB企業のインターン（フルリモート勤務）でも使用するため、zoom用にカメラもつけているのですが、過去に一度操作ミスでライブ配信に自分の横顔を写してしまったことがあります。
これから得た教訓は、OBS Studioではライブ配信用以外のシーンは絶対に作成しないことです。
カメラを使用して配信や録画をしたい場合は、別の配信ソフトをインストールすることです。

ちなみに現在はさらに安全マージンを取って、Windowsで配信用のローカルアカウントを作成して、そちらで配信・Botプログラムの実行・配信画面サーバーの実行をしています。
そのため、日常で使用する際にはどれだけ大きな間違いを犯しても、自分の部屋の映像や音声がライブ配信に流れることはありません。（たぶん）

課題と今後の展望

ランニングコスト

24時間のライブ配信をするために、Botプログラムや画面配信ソフトによる配信を常時実行する必要があります。
できる限りコストを抑えるため、自分のデスクトップPCを使っています。

デスクトップPCのスペックは次のとおりです。自作PCです。


CPU	Ryzen 7 (第3世代)
メモリ	32GB
OS	Windows 10 Home
GPU	GeForce GTX 1660 SUPER
モニター	4K, フルHD
ストレージ	SSD 512GB

メモリは当初16GBでしたが、同じPCで開発しながら常時ライブ配信をするとなると、16GBだと数日たつと画面がカクカクしてくるので、思い切って32GBに増設しました。

今は数週間連続で起動しており、日常のPC使用とライブ配信に耐えています。
PCを動かす電気代はあまり気にしません。

さて、ではコストはどこで発生するかというと、AWSとGCPです。

最近利用者数が急激に増えて、2021年12月のコストは
AWSで870円、
GCPで1700円
でした。

AWSでは主にAPI Gateway、GCPでは主にFirestoreでコストがかかっています。

Youtubeでは収益化できていませんので、赤字です。

今のシステムではFirestoreにログが一方的にたまっていくので、firestoreの使用容量は単調に増加していきます。
そして毎日とっているバックアップのために読み取り・転送料金がかかるはずなので（未確認）、コストも増え続ける一方です。

これに対しては、定期的にfirestoreにあるログデータをbigquery等の外部のデータベースに保存していくようにして、コストをできるだけ減らしたいです。

データの解析もしやすいですし。

サービスの運営

一応不特定多数の人間が集まって利用するサービスなので、ある程度の秩序を維持する必要があります。
ライブチャットに迷惑な書き込みをする人も以前からよく出現しています。

人気を維持するためには、モデレーターの人員を確保し、本格的に対応していく必要があります。

サービス開発の外注・委託

コアとなるシステム部分の開発は今後も私一人で進めていけるのですが、

座席レイアウトの作成・実装
BGM素材の追加作業

などの時間がかかる、比較的単純な作業は誰か自分以外の人に任せて、効率よく進めていく仕組みを整えていきたいです。

多数の要望も頂いてるので、私は既存システムの改修や新機能の開発に集中したいです😂

収益化

このオンライン自習室は、もともとはポートフォリオのために作ったシステムです。

前述のランニングコストの問題もあり、当初は考えていなかった収益化もそろそろ必要だと思っています。

しかしそのためにはまず動画の合計再生時間4000時間を達成する必要がありますが、ライブ配信はカウント対象外のため、ライブ配信がメインのオンライン作業部屋チャンネルはまだ数パーセントしか進んでいません。

動画をアップロードして収益化を早めに有効化するか、寄附金を募るなどしたいです。

さいごに

このプロジェクトは1年以上前に始まり、長い間利用者は少ない状態で進めてきたのですが、最近なかなかいい感じに盛り上がってきたので、この調子でさらによりよいサービスにしていきたいです。

オンライン作業部屋の開発もしくは運営にご協力いただける有志の方がいらっしゃいましたらお気軽に私のTwitter (@sorarideblog) にDMにてご連絡ください😊

GitHubで編集を提案