Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ブラウザストレージを活用した配信画面デザインツール「Alive Studio」の仕組みと設計について

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for 永田哲平 永田哲平
November 05, 2025
550
0

ブラウザストレージを活用した配信画面デザインツール「Alive Studio」の仕組みと設計について

Avatar for 永田哲平

永田哲平

November 05, 2025

More Decks by 永田哲平

See All by 永田哲平
Matter.jsでつくる「ぷにゃっ」と動く物理演算Webエフェクトとパフォーマンス改善
Avatar for 永田哲平 teppei0717
0
560
ブラウザストレージを活用した、複数アプリをまたぐ永続化とリアクティブな同期
Avatar for 永田哲平 teppei0717
5
1.7k
Claude Code VS Gemini CLI Let’s 競技Vibe Coding
Avatar for 永田哲平 teppei0717
1
250
「Devin!!! まだお前の口からまだ聞いてねェ!!! 『生きたい』と言えェ!!!!!!」
Avatar for 永田哲平 teppei0717
0
53
VibeCodingで 加速する開発と支援
Avatar for 永田哲平 teppei0717
0
900
あなたの配信ワイワイたりていますか？？　 配信を盛り上げるAI「waiwai-ai」を作った話
Avatar for 永田哲平 teppei0717
0
560

Featured

See All Featured
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
530
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
190
How to make the Groovebox
Avatar for あそなす asonas
2
2.1k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
220
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.9k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
120
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
53k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
3.2M
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k

Transcript

  1. 1 ブラウザストレージを活⽤した配信画⾯デザイン ツール「Alive Studio」の仕組みと設計について てつを。（@tetsuwo0717）

  2. 2 ⾃⼰紹介 GMOペパボ株式会社 事業開発部 Alive Projectチーム てつを。 ‧出⾝地/勤務地：⿅児島⛰ ‧X：@tetsuwo0717

  3. 3

  4. 4 はじめに

  5. 5 Alive Studio の 仕組みについて

  6. Alive Studio ・VTuberさんを始めとする配信者向けの配信画面デザインツール。 ・OBS上で動く → OBS・・・配信者がオンライン配信や録画を行うためのソフト ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について https://obsproject.com/

  7. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について

  8. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信画面 Alive Studio

  9. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について

  10. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について

  11. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について どうやっているの…？

  12. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSには配信画面にブラウザ(CEF)を表示する機能がある

  13. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSには配信画面にブラウザ(CEF)を表示する機能がある →配信画面上でブラウザを表示したい時に便利 【配信者必見】OBSで使いこなすと超便利な「ブラウザソース」の解説と具体的な使用方法4選！ 「ひとみマンのOBS学校」https://www.youtube.com/watch?v=QRTW4OjxFlc

  14. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について AliveStudioのセットアップ時に追加される「ソース」も 全てブラウザ

  15. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 画像を表示するだけのアプリ

  16. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 画像を表示するだけのアプリ

  17. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 背景を透過することで、まるで素材を追加したかのように見える

  18. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について

  19. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ？

  20. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について これもブラウザ

  21. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について これもブラウザ

  22. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSのプラグインを作っているんですね〜！

  23. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について OBSのプラグインを作っているんですね〜！ Webアプリを表示しているだけ

  24. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ブラウザ内のドキュメント間の同期について

  25. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ・「localStorage」を使って同期している　 →　同一originであるため共有される ・ブラウザドックからlocalStorageに「これをここに表示」という情報を書き込む localStorage これをここのソースに 表示するんや！ 👁 storageEventを監視

    →画像の変更など ドキュメント間の同期について

  26. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について localStorage これここのソースに 表示するんや！ 👁 StorageEventを監視 →画像の変更など ドキュメント間の同期について

  27. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について localStorage これここのソースに 表示するんや！ 👁 StorageEventを受け取って →画像の変更など ドキュメント間の同期について

  28. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ドキュメント間の同期について ドキュメント間のリアクティブな同期が可能になる

  29. 29 Alive Studioの設計思想

  30. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信をもっと 手軽に楽しくする、配信画面のデザインツール。

  31. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信者の多様なセグメント（例） ベテラン配信者 配信初心者 🔰 もっと楽したい配信者 ネタに困っている配信者

  32. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信者の多様なセグメント（例） ベテラン配信者 独自の設定 がある オリジナル素材 を持っている

  33. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信者の多様なセグメント（例） ベテラン配信者 独自の設定 がある オリジナル素材 を持っている 「Alive Studioを入れたことによって設定が壊れてしまうかも・・・」

  34. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 必要最低限の Write →ユーザーが持つ設定には関与しない

  35. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について オリジナル素材 その他の配信 ツール 必要最低限の Write →ユーザーが持つ設定には関与しない

  36. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について ソースの管理もユーザーに委ねる スクリプトを配布する形にする オリジナル素材 その他の配信 ツール 必要最低限の Write →ユーザーが持つ設定には関与しない

  37. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について 配信をもっと 手軽に楽しくする、配信画面のデザインツール。 配信者のニーズ、課題 に合わせ フレキシブルに 活用できる ※こちらは正式な文章ではなく、あくまでエンジニア視点としてのイメージ

  38. ブラウザストレージを活⽤した配信画⾯デザインツール「Alive Studio」の仕組みと設計について まとめ ・Alive StudioはlocalStorage と storage イベント等のWebアプリケーション技術を 組み合わせてOBSと連動する配信画面デザインツール。 ・多様な配信者のニーズと課題感に合わせてフレキシブルな活用ができるような設

    計思想

  39. 39 Thank you!