個人開発
lol-overlay
LoL観戦配信をわかりやすくするためのオーバーレイ
配信UX
役割設計 / 実装 / 公開
Problem
- LoLというゲームにおいて常に視聴者が見たい情報をオーバーレイで表示することが重要であると考えていた。
- インゲームに入るとローカル上にAPIサーバーが立ち上がり、インゲームの情報を取得することが可能なためそれをオーバーレイで取得できるようにしたいと考えていた。
Constraints
- 個人開発
- インゲーム内の情報をWebに表示できるようにすること
- 非エンジニアでも扱える操作パネルにすること
Approach
- 01OBSにWebソースとして設定画面で作成したURLを設定することで、オーバーレイを表示できるようにした。
- 02ローカル上のAPIサーバーをCloudflareを使用して一時的にWeb上に公開するバッチを作成することでWebブラウザがローカル上のAPIサーバーにアクセスできるようにした。
Related Tech
Node.js
実戦度
実戦
TypeScript
実戦度
実戦
Next.js
実戦度
準主力
React
実戦度
準主力
ESLint
熟達段階5/5
Cloudflare
熟達段階3/5