PFPortfolio
← Projects
個人開発

lol-overlay

LoL観戦配信をわかりやすくするためのオーバーレイ

配信UX
役割設計 / 実装 / 公開

Problem

  • LoLというゲームにおいて常に視聴者が見たい情報をオーバーレイで表示することが重要であると考えていた。
  • インゲームに入るとローカル上にAPIサーバーが立ち上がり、インゲームの情報を取得することが可能なためそれをオーバーレイで取得できるようにしたいと考えていた。

Constraints

  • 個人開発
  • インゲーム内の情報をWebに表示できるようにすること
  • 非エンジニアでも扱える操作パネルにすること

Approach

  1. 01OBSにWebソースとして設定画面で作成したURLを設定することで、オーバーレイを表示できるようにした。
  2. 02ローカル上のAPIサーバーをCloudflareを使用して一時的にWeb上に公開するバッチを作成することでWebブラウザがローカル上のAPIサーバーにアクセスできるようにした。

Related Tech

Node.js

実戦度

実戦

TypeScript

実戦度

実戦

Next.js

実戦度

準主力

React

実戦度

準主力

ESLint

実戦
熟達段階5/5

Cloudflare

準主力
熟達段階3/5

Deliverables