• Chat Subscriber(複数の配信チャットを表示): こちら
• Discord Connector(Discord のいろいろ): こちら
  ※ このソフトはDiscord の Beta APIを利用しています

Youtube や Twitch などの複数を同時に表示 Emoji/Emote や投げ銭にも対応

• User like : Open URL in Browser
• Streamer like : Browser Source in OBS (Recommended CSS is written below)

Example URL:

• https://live.aatomu.work/?youtube=<Youtube Channel ID>
• https://live.aatomu.work/?twitch=<Twitch Channel ID>
• https://live.aatomu.work/?youtube=<Youtube Channel ID>&twitch=<Twitch Channel ID>&limit=10
• https://live.aatomu.work/?youtube=<Youtube Channel ID>&limit=10?cleanup=120

OBS Custom CSS:

body {
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}

• Normal Chat

<div class="contents">
  <div class="content {Site}">
    <span class="time">00:00:00</span>
    <div class="icon">
      <img src="..." />
    </div>
    <span class="name">...</span>
    <div class="message-root">
      <span class="message">...</span>
      <span class="channel">...</span>
    </div>
  </div>
</div>

• Tip Chat

<div class="contents">
  <div class="content {Site}">
    <span class="time">00:00:00</span>
    <div class="icon">
      <img src="..." />
    </div>
    <span class="name">...</span>
    <div class="message-root">
      <span class="message">
        <span class="money" style="color: #000000;background-color: #000000;">$0.00</span>
        ...
      </span>
      <span class="channel">...</span>
    </div>
  </div>
</div>

• Youtube * Twitch cross chat
  
• Twitch multi chat
  

※ クレジット表記をしていただけると開発者が喜びます。
例: Chat Subscriber(https://github.com/aatomu/chat_subscriber/#chat_subscriber) を利用しています

• Discord の VC を移動しても自動で追いかけるように
• VC の名前を表示する,Discord ニトロの装飾を表示
• Advanced: Discord の Text を表示する
• Advanced: Discord のプロフィールをカスタマイズする

1. DiscordConnector-Win64.exe を開く
   Raw の 2 つ右のアイコン 📥 をクリックしダウンロード(以下DiscordConnector)
   
   デスクトップ等にDiscordConnectorをファイルを移動する
   DiscordConnectorをダブルクリックし起動する(この際 ファイアウォールを許可する)
2. Discord Develop Applications を開く
3. New Applicationsをクリックする
   
   NameにConnectorと入力する
   利用規約に同意しCreateする
   
   
4. https://live.aatomu.work/discord/?id=➀&secret=➁
   上記をコピーし メモ帳などに貼り付ける
5. サイドバーのOauth2をクリックする
   
   
6. Client IDをCopyを押し ➀ を書き換える
7. Client SecretのところのReset Secretを押し
   (※この際 2FA が入る場合があります)
   表示されたCopyを押し ➁ を書き換える
8. RedirectsのAdd Redirectsを押し
   https://live.aatomu.workを入力した後
   Save Changesする
9. 書き換え終わった URL をOBSのブラウザソースの URL に設定する
   (※配信をしない人は飛ばしてください)
10. Discord に表示される認証で認証を押す

1. 上記で作成したリンクのあとに&channel=<ChannelID>を追加し開くだけ

1. サイドバーのRich Presenceを開き
   Add Image(s)で画像を追加,名前を設定し
   Save Changesする
   
   
2. activity.json をダウンロード
   DiscordConnector と同じところに置く
   中身を好きなように書き換える
3. ブラウザーでリンクを開きなおす
   ※毎回 開きっぱなしにする必要があります

1. Discord-Connector の exe を実行する
2. OBS を起動する
   Discord に認証画面が表示されるので、認証を押す

1. Discord-Connector の exe へのショートカットを作成する。
2. Windows+R を押し、出てきた画面に shell:startup と入力する
3. 開いた場所に、ショートカットを移動する。 PC 起動時に自動的に exe が実行されるため、起動忘れがなくなります！

OBS Custom CSS:
※ さらにカスタムするときはこちら Discord CSS Generator

body {
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
}
.channel {
  display: none;
}

<div id="errors" class="error">...</div>
<div id="root" class="root">
  <div id="channel" class="channel">XXXXXX</div>
  <div id="users" class="users">
    <div id="0000000" class="user me">
      <img class="icon" src="https://cdn.discordapp.com/avatars/...." />
      <span class="nick">....</span>
      <span class="name">....</span>
    </div>
    <div id="111111111" class="user">
      <img class="icon" src="https://cdn.discordapp.com/avatars/...." />
      <img class="decoration" src="https://cdn.discordapp.com/...." />
      <span class="nick">....</span>
      <span class="name">....</span>
    </div>
  </div>
  <div id="messages" class="messages">
    <div class="message">
      <img class="icon" src="https://cdn.discordapp.com/avatars/...." />
      <span class="nick" style="color: rgb(153, 255, 102);">....</span>
      <span class="name" style="color: rgb(153, 255, 102);">....</span>
      <time class="timestamp" datetime="2024-00-00T00:00:00.000Z">00:00</time>
      <span class="content">....</span>
    </div>
  </div>
</div>

※ クレジット表記をしていただけると開発者が喜びます。
例: DiscordConnector(https://github.com/aatomu/chat_subscriber/#discord_connector) を利用しています