Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザストレージを活用した配信画面デザインツール「Alive Studio」の仕組みと設計について
Search
永田哲平
November 05, 2025
0
1
ブラウザストレージを活用した配信画面デザインツール「Alive Studio」の仕組みと設計について
永田哲平
November 05, 2025
Tweet
Share
More Decks by 永田哲平
See All by 永田哲平
ブラウザストレージを活用した、複数アプリをまたぐ永続化とリアクティブな同期
teppei0717
5
1.1k
Claude Code VS Gemini CLI Let’s 競技Vibe Coding
teppei0717
1
220
「Devin!!! まだお前の口からまだ聞いてねェ!!! 『生きたい』と言えェ!!!!!!」
teppei0717
0
44
VibeCodingで 加速する開発と支援
teppei0717
0
830
あなたの配信ワイワイたりていますか?? 配信を盛り上げるAI「waiwai-ai」を作った話
teppei0717
0
370
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Rails Girls Zürich Keynote
gr2m
95
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.8k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Leading Effective Engineering Teams in the AI Era
addyosmani
8
770
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
RailsConf 2023
tenderlove
30
1.3k
It's Worth the Effort
3n
187
28k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
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!