ころぽっくる: Discord

わからぬ～。

最初に言っておきます。わからん。誰ともつながってないから仕方ないですね。わかりみを得たら追記したい。2019.06

→　わかりみを得て、後半追記しました。2020.02

WEBブラウザ版でどう設定してもカメラが使えなかったので観念してアプリ版を試したら何事もなくカメラが使えました。解せぬ～。

https://discordapp.com/

設定とかメモ

入力デバイス：VSTHOSTなどでボイチェン出力している仮想オーディオデバイス
出力デバイス：Defaultでいいのかな？
入力音量：100（0～100）
出力音量：100（0～200）

入力モード：音声検出
入力感度：左いっぱい設定だと、後述の音声入力のCSSで不都合がありました。自動調整ONが無難。

カメラ：FaceRig Virtual Camera（鏡像）
自分のプレビューは鏡像になりますが、相手には正常な映像で伝わります。コラボ動画等の場合で、心配なら相手に確認を取ってみて。
WEBカメラ映像は鏡像プレビューで違和感は無いのですが、FaceRigはプレビューの動きが、ちぐはぐになってちょっと混乱します。

※OBSでFaceRig Virtual CameraをキャプチャしているとDiscordでプレビューの表示ができない。Windowsの仕様なのか、カメラは一つのアプリでしか利用できないっぽい？

エコー除去：VSTHOSTで調整済みなのでオフ
ノイズ抑制：VSTHOSTで調整済みなのでオフ
音量調整の自動化：VSTHOSTで調整するのが面倒なのでオン
サービスの品質：任意

減衰：任意
自分が話すとき：任意
他人が話すとき：任意

オーディオのサブシステム：Standardだとノイズが入るけどLegacyに設定で改善
音声機能診断：任意
デバッグログ：オフ
Use our latest technology to capture your screen：？？

参考記事

【特集】新鋭チャットツール「Discord」の使い方―コアゲーマーは乗り遅れるな！【UPDATE】
https://www.gamespark.jp/article/2016/06/22/66824.html

【2/2更新】【特集】ゲーマー向けチャットツール「Discord」応用ガイド！―サーバー開設からSkype連携まで
https://www.gamespark.jp/article/2017/04/09/72628.html

わかりみを得たぞ。（I have the high ground !）

2020.02.16 追記ぼちぼち

ちょっとわかったのでメモ。詳しいことはググってください（丸投げ）。

誰かさんの立てたサーバーに参加する

招待リンクのURLを入手して、ウィンドウ左側の[+]を押して「参加」、招待リンクURLを登録する。

ウィンドウ左側にサーバーのアイコンが表示され、クリックするとアクセスできる。

＃～～～、というのが話題ごとのチャンネル。

チャンネルには、テキストメッセージと音声チャットがあります。

自分でサーバーを立てる

左の[+]で「新規作成」。

招待リンクの期限を設定。一時的なサーバーなら一日設定でよさげ。

作成した招待リンクを相手に伝えて、自分のサーバーに参加してもらう。

サーバーの設定

通知を「@mentionsのみ」に設定するのがマナーらしい。最初からお願いします。

サーバーの削除は、確認ダイアログで、サーバー名を打ち込んで削除します。

フレンド

フレンド登録した相手とはサーバーを介さなくても直接テキストチャットや音声チャットが可能になります。

フレンドリストを表示するには、左上のDiscordアイコンをクリック。

通話（音声チャット）

音声チャット。画面共有、WEBカメラでのビデオチャットも可。

通話したい相手のアイコンを右クリック＞＞通話。

通話のメニューアイコン

画面共有をオン：後述。

カメラをオン　：ビデオチャットです。

ミュート　　　：マイクをミュートします。

ユーザー設定　：マイクやカメラの設定。先述。

ビデオチャット

画面の上の方がグラデーションで暗くなってしまいます。ウィンドウの縦横比や表示モードを変更して、上の方に余白を作れば避けられます（めんどい）。
レスポンス優先なのかパソコンの負荷か、画質が落ちて画面が乱れる事がありました。

画面共有

パソコンの画面やアプリのウィンドウを選んで映像を共有できます（多分）。

DiscordとOBSの連携で発言者の絵を動かす。

Discord Streamkit

https://streamkit.discordapp.com/overlay

こちらのWEBアプリをOBSのブラウザソースとして利用することで可能になります。

参考情報

DiscordとOBSを連携させてゲーム配信に喋ると動くイラストをつけよう
なとりのゲームブログ
https://netshoppinglove.com/broadcast-001-discord-obs/

Discordで喋ってる人を分かり易くするカスタムCSS | 萬巓堂本店
http://manten-do.net/archives/273

Discordの会話している画面をOBS Studioを使って配信画面に表示する方法

https://www.youtube.com/watch?v=BFTaTIyabsg

ざっくり手順

詳しくは上記参考記事の手順に従ってください。

Discordでサーバーを立てる

TEXT CHANNELS ＞＞ #general に、立ち絵の画像を必要な分、投稿する。
VOICE CHANNELS ＞＞ General へ入り、通話状態にする。
Discordを開発者モードにする。

※日本語表記では、テキストチャンネル＞＞＃一般、ボイスチャンネル＞＞一般

ブラウザでDiscord Streamkitへアクセス

Install for OBS ＞＞ VOICE WIDGET

Server 　　　　：立てたサーバーを選択
Voice Channel ： General（入室中のボイスチャンネルを選択）

Show Speaking Users Only ：オフ
Small Avatars　　　　　　：オフ
HideNames　　　　　　　：オン

名前を非表示にすれば、それ以下（TEXT SETTINGS、BACKGROUND SETTEINGS）の設定は不要。

ブラウザ右側に生成されているURLをOBSのブラウザソースにコピペ。

OBSでブラウザソースを追加

URL ：先のURLをコピペする。
幅　：使う画像より少し大き目で
高さ：使う画像より少し大き目で
FPS ： 30（とりあえず）
CSS ：後述のCSSの必要項目を修正しコピペ

人数分のブラウザソースを用意する。
絵を表示するには、DiscordのVoice Channelで通話中状態の必要があります。
通話を切断するとOBSブラウザソースの立ち絵の画像は消えます。

補足・要綱

Discord Streamkit の Voice Widget 設定は、HideNames をONにしておいて、OBSで名前テロップを付けたほうが無難。（名前位置の左右調整の方法が分からないので…）

ユーザーIDを取得するには、Discordを開発者モードにする。

設定＞＞テーマ＞＞開発者モード

対象者のアイコンを右クリック＞＞ IDをコピー

パラパラアニメで使用する画像のピクセル数は揃える。

揃っていないと、小さい画像は引き伸ばされる。
画像の左上に少し余白が生じてしまうので、ソースの設定には画像より少し大きめのサイズを設定すると良さげ。（わからん）

事前にDiscordのチャンネルへ、使用する画像をアップロードしておく必要がある。

アップロードした画像を右クリック、「リンクをコピー」でURLを取得して、CSSにコピペする。

発言者人数分の「ブラウザソース」を用意する必要がある。

URLは共通でCSS（ID、画像URL）の差分、という感じ。

音声の検出は「音声・ビデオ」設定の「入力感度」で判定しているらしく、ここを左いっぱいに設定していると話しっぱなし状態になってしまう。自動調整ON設定が無難。

分からなくてはまった（おこ）。

参考サイトを基にした改変CSS

何も分からん素人が見様見真似でやってみたアレなので、間違ってる可能性高いです。コピペは自己責任でお願いします。

画像1枚が上下するだけのCSS

brightnessを100％から50%等に変更すると無言の時に画像が暗くなります。

speak 0.4s を0.2s等に変更すると上下運動が速くなります。

20pxが上下幅の設定値です。お好みで10px等、増減してください。

25%、75%など行を追加で動きをカスタマイズできます。

li.voice-state:not([data-reactid*="ユーザーID"]) { display:none; }

.avatar {
  content:url(画像のリンクURL);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(100%);
}

.speaking {
  animation: speak 0.4s
  linear 0s infinite normal;
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
  position:relative;
}

@keyframes speak {

  0% { bottom:0px; }
  50% { bottom:20px; }
  100% { bottom:0px; }

}

li.voice-state{ position: static; }
div.user{ position: absolute; left40%; bottom:5%; }
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

画像3枚でパラパラアニメーションが上下するCSS

差分を用意するのが手間なので、コラボ配信などで使うのはおすすめしません。
簡易的な2Dイラストアバターとして利用など出来るかも？
50％等、行を追加して差分画像を用意すれば、アニメの中割りを増やせます（多分）。

li.voice-state:not([data-reactid*="ユーザーID"]) { display:none; }

.avatar {
  content:url(画像のリンクURL・無言時);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(80%);
}

.speaking {
  animation: speak 1s
  linear 0s infinite normal;
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
  position:relative;
}

@keyframes speak {

  0% { content:url(画像のリンクURL・発言時A);}
  100% { content:url(画像のリンクURL・発言時B);}

  0% { bottom:0px;  }
  25% { bottom:20px;  }
  50% { bottom:0px;  }
  75% { bottom:20px;  }
  100% { bottom:0px;  }

}

li.voice-state{ position: static; }
div.user{ position: absolute; left40%; bottom:5%; }
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

画像3枚でくちぱくアニメーションする改良版CSS

口閉じ（立ち絵デフォルト）、半開き、口開き、の3枚の画像を使って、発言時に上下動しながら、いい感じに口パクアニメーションするCSSです。

Discordコラボ用というよりは、立ち絵素材を使った2Dアバターとして使う感じです。
VOICEROID立ち絵素材のような、口パク、表情差分が既に用意されているものを使うと手間がかかりません。
喜怒哀楽の差分を用意してOBSのシーンやソースで切り替えれば、凝った演出が出来るかも。

初回動作時に画像の読み込みで点滅してしまうので、本番前に一度動作させて画像を読み込ませると良いです。

li.voice-state:not([data-reactid*="ユーザーID"]) { display:none; }

.avatar {
  content:url(画像のリンクURL・口閉じ);
  height:auto !important;
  width:auto !important;
  border-radius:0% !important;
  filter: brightness(100%);
}

.speaking {
  animation: speak 0.8s
  linear 0s infinite normal;
  border-color:rgba(0,0,0,0) !important;
  filter: brightness(100%);
  position:relative;
}

@keyframes speak {

  20% { content:url(画像のリンクURL・口開き);}
  30% { content:url(画像のリンクURL・半開き);}
  50% { content:url(画像のリンクURL・口閉じ);}
  70% { content:url(画像のリンクURL・半開き);}
  100% { content:url(画像のリンクURL・口開き);}

  0% { bottom:0px;  }
  25% { bottom:20px;  }
  50% { bottom:0px;  }
  75% { bottom:10px;  }
  100% { bottom:0px;  }

}

li.voice-state{ position: static; }
div.user{ position: absolute; left40%; bottom:5%; }
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }

使用例

Discord Streamkit…CSS…なるほど…。 pic.twitter.com/Tx0dscyFKs
— ころぽっくる (@koropoya) February 17, 2020

これでコラボ配信もどんと来い、ですね。

発言と投稿の許可や制限

凸待ち配信などで、Discordサーバの招待リンクを公開しても、音声通話やテキスト投稿は許可したメンバーのみに制限したい。荒らし対策。

参考情報

Discord のチャンネルに鍵を付ける、プライベートチャンネルの利用方法 | Lonely Mobiler
https://loumo.jp/archives/17107

ロールを作成

サーバアイコンを右クリック＞＞サーバ設定＞＞ロール＞＞ロール　[+]

@everyone　というものがデフォルトで設定されていますが、新しくロール（役割）を追加します。

ロールの名称は「凸許可」とか「確認済み」とかわかりやすいものにしておくと良いです。

このロール（役割）を割り当てたメンバーだけがアクセスできるチャンネルを作成します。

プライベートチャンネルを作成

チャンネル横の「+」でテキストか音声のチャンネルを新規で作成します。

その際に、プライベート、先ほど作成したロールを許可、と設定すると、ロールを割り当てられたメンバーしかアクセスできないチャンネルになります。

ロールを割り当てる

「＃一般」など、誰でも見れるチャンネルにアクセスしているユーザーのアイコンを

右クリック＞＞ロール＞＞割り当てたいロール名をチェック

として、ロールを割り当てます。そのメンバーは先ほど作成したプライベートチャンネルへアクセスできるようになります。

ロールの解除は同様の操作でチェックを外すだけです。

注意

「誰でも見れるチャンネル」が一つもない状態では、誰かがサーバにアクセスしてもチャンネルに入れないため、その人のアイコンが表示されません。そのためロールを割り当てることが出来ませんでした。

誰でも見れるテキストチャンネル

許可メンバー用のテキストと音声チャンネル

という感じの凸待ち用Discordサーバを立てるのが良いかなと思います。

番外編

Google ChromeでDiscordを翻訳する

普通に表示しても、右クリックが封印されていて、コンテキストメニューが表示できないのですが、投稿メッセージにマウスカーソルを乗せたときに出現する、「リアクションを付ける」、「その他」のアイコンの上では右クリックでメニューが出せちゃいます。

なので、Google翻訳が出来てしまいます。

これで英語など、外国語のサーバでも日本語で翻訳して読むことが出来ますね。

ただし、メッセージログをスクロールして読み込むと、そこは翻訳されていないので翻訳操作をやり直す必要があります。ちょっとめんどい。

※2020.08.25時点

ころぽっくる

ページ

2019年6月23日日曜日

Discord

わからぬ～。

設定とかメモ

参考記事

わかりみを得たぞ。（I have the high ground !）

誰かさんの立てたサーバーに参加する

自分でサーバーを立てる

サーバーの設定

フレンド

通話（音声チャット）

通話のメニューアイコン

ビデオチャット

画面共有

DiscordとOBSの連携で発言者の絵を動かす。

参考情報

ざっくり手順

Discordでサーバーを立てる

ブラウザでDiscord Streamkitへアクセス

OBSでブラウザソースを追加

補足・要綱

参考サイトを基にした改変CSS

画像1枚が上下するだけのCSS

画像3枚でパラパラアニメーションが上下するCSS

画像3枚でくちぱくアニメーションする改良版CSS

使用例

発言と投稿の許可や制限

参考情報

ロールを作成

プライベートチャンネルを作成

ロールを割り当てる

注意

番外編

Google ChromeでDiscordを翻訳する

所詮、人生ソロプレイ。

0 件のコメント:

コメントを投稿