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

Transcript

1. 1 ブラウザストレージを活⽤した配信画⾯デザイン ツール「Alive Studio」の仕組みと設計について てつを。（@tetsuwo0717）
2. 2 ⾃⼰紹介 GMOペパボ株式会社 事業開発部 Alive Projectチーム てつを。 ‧出⾝地/勤務地：⿅児島⛰ ‧X：@tetsuwo0717
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!