Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザストレージを活用した配信画面デザインツール「Alive Studio」の仕組みと設計について
Search
永田哲平
November 05, 2025
0
340
ブラウザストレージを活用した配信画面デザインツール「Alive Studio」の仕組みと設計について
永田哲平
November 05, 2025
Tweet
Share
More Decks by 永田哲平
See All by 永田哲平
Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
teppei0717
0
210
ブラウザストレージを活用した、複数アプリをまたぐ永続化とリアクティブな同期
teppei0717
5
1.3k
Claude Code VS Gemini CLI Let’s 競技Vibe Coding
teppei0717
1
230
「Devin!!! まだお前の口からまだ聞いてねェ!!! 『生きたい』と言えェ!!!!!!」
teppei0717
0
45
VibeCodingで 加速する開発と支援
teppei0717
0
850
あなたの配信ワイワイたりていますか?? 配信を盛り上げるAI「waiwai-ai」を作った話
teppei0717
0
420
Featured
See All Featured
Digital Ethics as a Driver of Design Innovation
axbom
PRO
0
130
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
77
My Coaching Mixtape
mlcsv
0
7
Building an army of robots
kneath
306
46k
Un-Boring Meetings
codingconduct
0
160
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
KATA
mclloyd
PRO
33
15k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.9k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
64
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
HDC tutorial
michielstock
0
260
Transcript
1 ブラウザストレージを活⽤した配信画⾯デザイン ツール「Alive Studio」の仕組みと設計について てつを。(@tetsuwo0717)
2 ⾃⼰紹介 GMOペパボ株式会社 事業開発部 Alive Projectチーム てつを。 ‧出⾝地/勤務地:⿅児島⛰ ‧X:@tetsuwo0717
3
4 はじめに
5 Alive Studio の 仕組みについて
Alive Studio ・VTuberさんを始めとする配信者向けの配信画面デザインツール。 ・OBS上で動く → OBS・・・配信者がオンライン配信や録画を行うためのソフト ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について https://obsproject.com/
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信画面 Alive Studio
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について どうやっているの…?
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSには配信画面にブラウザ(CEF)を表示する機能がある
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSには配信画面にブラウザ(CEF)を表示する機能がある →配信画面上でブラウザを表示したい時に便利 【配信者必見】OBSで使いこなすと超便利な「ブラウザソース」の解説と具体的な使用方法4選! 「ひとみマンのOBS学校」https://www.youtube.com/watch?v=QRTW4OjxFlc
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について AliveStudioのセットアップ時に追加される「ソース」も 全てブラウザ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 画像を表示するだけのアプリ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 画像を表示するだけのアプリ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 背景を透過することで、まるで素材を追加したかのように見える
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ?
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について これもブラウザ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について これもブラウザ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSのプラグインを作っているんですね〜!
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSのプラグインを作っているんですね〜! Webアプリを表示しているだけ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ブラウザ内のドキュメント間の同期について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ・「localStorage」を使って同期している → 同一originであるため共有される ・ブラウザドックからlocalStorageに「これをここに表示」という情報を書き込む localStorage これをここのソースに 表示するんや! 👁 storageEventを監視
→画像の変更など ドキュメント間の同期について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について localStorage これここのソースに 表示するんや! 👁 StorageEventを監視 →画像の変更など ドキュメント間の同期について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について localStorage これここのソースに 表示するんや! 👁 StorageEventを受け取って →画像の変更など ドキュメント間の同期について
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ドキュメント間の同期について ドキュメント間のリアクティブな同期が可能になる
29 Alive Studioの設計思想
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信をもっと 手軽に楽しくする、配信画面のデザインツール。
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信者の多様なセグメント(例) ベテラン配信者 配信初心者 🔰 もっと楽したい配信者 ネタに困っている配信者
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信者の多様なセグメント(例) ベテラン配信者 独自の設定 がある オリジナル素材 を持っている
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信者の多様なセグメント(例) ベテラン配信者 独自の設定 がある オリジナル素材 を持っている 「Alive Studioを入れたことによって設定が壊れてしまうかも・・・」
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 必要最低限の Write →ユーザーが持つ設定には関与しない
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について オリジナル素材 その他の配信 ツール 必要最低限の Write →ユーザーが持つ設定には関与しない
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ソースの管理もユーザーに委ねる スクリプトを配布する形にする オリジナル素材 その他の配信 ツール 必要最低限の Write →ユーザーが持つ設定には関与しない
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信をもっと 手軽に楽しくする、配信画面のデザインツール。 配信者のニーズ、課題 に合わせ フレキシブルに 活用できる ※こちらは正式な文章ではなく、あくまでエンジニア視点としてのイメージ
ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について まとめ ・Alive StudioはlocalStorage と storage イベント等のWebアプリケーション技術を 組み合わせてOBSと連動する配信画面デザインツール。 ・多様な配信者のニーズと課題感に合わせてフレキシブルな活用ができるような設
計思想
39 Thank you!