as-playground の構造

as-playground の構成要素や構造をチャートで表しています。ただし、わかりやすさのために一部簡略化している場合があります。

※ WebRTC は、あくまで、本人の端末間でコメントデータ (文字列) を転送するために使用しています。詳しくは、ユーザ向け FAQ もご参照ください。

基本 (ブックマークレット版)

基本的には、イベント名、コメントデータ、現在の再生位置 (各コメントのタイミングを知るため) のみ取得しています。

flowchart TB;

subgraph Host["Host (PC or タブレットなど) のブラウザ"]
  subgraph As["AS*BI STAGE を開いているタブ"]
    AsPage["AS*BI STAGE"]
    AsBridge
    
    subgraph HostAngularApp["Iframe (Angular App)"]
      HostComponent["HostComponent<br>(コメントの分析、コメントのオーバレイ表示)"]
    end
  end
  
  Bookmarklet["ブックマークレット"]
  
end

subgraph AsServer["AS*BI STAGE のサーバ"]
  AsCommentServer["コメントサーバ"]
end

Bookmarklet--"AsBridge を<br>ページ内に注入"-->AsBridge
AsPage--"DOM (コメントデータ, 再生位置)"-->AsBridge

AsBridge--"postMessage (コメントデータ, 再生位置)"-->HostComponent
HostComponent--"postMessage (制御)"-->AsBridge

AsCommentServer--"WebSocket (コメントデータ)"-->AsPage

subgraph Viewer["Viewer (本人のスマートフォン等) のブラウザ"]
  subgraph ViewerAngularApp["Angular App"]
    ViewerComponent["Viewer Component<br>(コメントの閲覧)"]
  end
end

HostComponent--"WebRTC (コメントデータ)"-->ViewerComponent

Chrome拡張機能版

ブックマークレット版の取得内容に加え、コメントを投稿するための情報を読み書きしています。

flowchart TB;

subgraph AsServer["AS*BI STAGE のサーバ"]
  AsCommentServer["コメントサーバ"]
end

subgraph Host["Host (PC or タブレットなど) のブラウザ"]
  subgraph As["AS*BI STAGE のページ"]
    AsPage["AS*BI STAGE"]
    AsBridge
    WebSocketHook
    
    subgraph HostAngularApp["Iframe (Angular App)"]
      HostComponent["HostComponent<br>(コメントの分析、コメントのオーバレイ表示)"]
    end
  end
  
  subgraph ChromeExtension["Chrome拡張機能"]
    ContentScript["ContentScript"]
  end
  
end

ChromeExtension--"AsBridge を<br>ページ内に注入"-->AsBridge
ChromeExtension--"WebSocketHook を<br>ページ内に注入"-->WebSocketHook
WebSocketHook<--"WebSocket (コメントデータ)"-->HostComponent
AsPage--"DOM (再生位置)"-->AsBridge

AsBridge--"postMessage (再生位置)"-->HostComponent
HostComponent--"postMessage (制御)"-->AsBridge

AsCommentServer<--"WebSocket (コメントデータ)"-->WebSocketHook<--"WebSocket (コメントデータ)"-->AsPage

subgraph Viewer["Viewer (本人のスマートフォン等) のブラウザ"]
  subgraph ViewerAngularApp["Angular App"]
    ViewerComponent["Viewer Component<br>(コメントの閲覧・投稿)"]
  end
end

HostComponent<--"WebRTC (コメントデータ)"-->ViewerComponent