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

by 永田哲平

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 はじめに

Slide 5

Slide 5 text

5 Alive Studio の仕組みについて

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

29 Alive Studioの設計思想

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

39 Thank you!