ライブ配信時のチャット機能について(前編)

ライブ配信時のチャット機能について(前編)
こんにちは、ブライトコーブ株式会社 Business Development Managerの大野です。
今回は、ライブ配信時に最も問い合わせの多いチャット機能について紹介します。


YouTubeやFacebookのLive配信機能にチャット機能が含まれていることから、ブライトコーブの製品でも同様の機能を実装できないか質問いただくことが多々あります。

残念ながら、ブライトコーブの製品にチャット機能は含まれていません。また、2019年11月現在、今後もチャット機能の実装は予定されていません。
 ただし、チャット機能の実現を希望される場合、ブライトコーブはカナダのトロントに本社を構えるChatroll社の製品『Chatroll』の利用(併用)を推奨しています。Chatroll社はチャット機能のみならず、チャットに関わる会員管理や分析機能をSaaSで提供する会社となり、ウイジェット(iframeタグ)としてチャット機能(Chatroll)をWebサイトに埋め込むことが可能です。今回は、このChatrollを利用してライブ配信時にチャット機能を実装する方法を説明します。

※本投稿では最低限の利用・設定方法をご紹介しています。Chatrollの機能に関するお問い合わせは、弊社では受けかねますので予めご了承ください。


目次

 

①Chatrollでアカウントを作成する

②イベントを作成する

③ダッシュボード

④動作確認

 

①Chatrollでアカウントを作成する


まずはこちらから同社のWebサイトにアクセスし、「Sign Up Free」を押下してChatrollのアカウントを作成します。

メールアドレス、Chatroll上のユーザーネームとパスワードを入力することで、簡単にアカウントを作成可能です(クレジットの登録はなく無料)。

 

②イベントを作成する


無事アカウントが作成されると、以下のような画面に遷移します。

「+ Create New Live Event」を押下してください。すると以下のような画面に遷移しますので、イベントの名前を入力ください。この例では、ブライトコーブテストと入力しています。入力後、「Next Step」を押下ください。

すると、入力したイベント名が左上に反映されたチャット画面と、ウイジェットの埋め込みタグ(iframeタグ)が以下のように表示されます。

ここでは、iframeの幅(width)や高さ(height)などを変更することも可能です。設定完了後、「Next Step」を押下ください。遷移後、「Go To Chat Dashboard」を押下すると、様々な設定が可能なダッシュボードに遷移します。

 

③ダッシュボード


このダッシュボードでは、どの程度のチャット投稿があったか/ユーザーがアクセスしたかなどのアナリティクスや、チャット画面の言語やデザインをカスタマイズのほか、アクセス制限などの設定が可能です。

左の「Settings」タブにある「General」を押下してください。「Language」で日本語を選択可能です。選択後に「Save Settings」を押下ください。この操作で、チャット画面のみならず、ダッシュボードも日本語化されます。

上記の操作で、「Setting」の表記が「設定」へと変更になったはずです。「外観」(英語では「Appearance」)を押下ください。外観では、チャット画面の色を変更することや、サウンド通知の有無、メッセージの順序など、細かな設定が可能です。今回の例では、色をマゼンタに変更します。

次に「アクセス」(英語では「Access」)について紹介します。Chatrollの無料版では、最大10名までの同時アクセスが可能です。大抵の場合、10名以上のアクセスが予想されるされると思いますので、必要に応じて有償のプランへアップグレードしてください。

また、Chatrollではチャットにアクセスする方法として、「ゲスト」、「チャットロール」、「フェイスブック」、「ツイッター」、「シングルサインオン」の5種類が用意されています。FacebookやTwitterのアカウントでソーシャルログインが可能となるのが、「フェイスブック」、「ツイッター」になります。「チャットロール」はChatrollのアカウントがあればログイン可能な機能ですが、日本国内の利用において2019年11月時点では現実的ではないため(利用者が少ないため)、今回の例ではチェックを外しています。「ゲスト」は上記いずれのアカウントがなく、特にサインインせずともログインできる機能です。

同じ設定タブにある「ユーザー」(英語では「Users」)や「アクセス許可」(英語では「Permissions」)でも様々なセキュリティ設定が可能ですが、本投稿での説明は割愛します。貴社のセキュリティポリシーに準じた設定をして下さい。
 

最後に「モデレーション」(英語では「Moderation」)について説明します。

「状況メッセージ」(英語では「Status Message」)を押下ください。「ウェルカムメッセージ」の横にある 「Welcome to my new Chatroll!」を、好みのメッセージに変更ください。本例では、「コメントを入力」と変更しました。変更後、「ウェルカムメッセージを更新する」を押下してください。

他にも「手動承認をオンにする」(英語では「Manual Approval」)という機能があります。これをオンにすると、投稿を都度承認することで、チャット画面に表示することが可能です。

 

④動作確認


これで、概ねの設定が完了しました。「埋め込みコード」(英語では「Embed Code」)に表示されているiframeをWebサイトに埋め込んでみてください。上手くいけば、以下のように表示されるはずです。

Facebook、Twitter、そしてゲストアカウントでサインインできるのが確認できます。
今回はゲストを利用してサインインします。

ゲスト名を入力(上記ではBrighcove Guestと入力しています)して、サインインをしてください。以下のようにチャットを入力をいただけます。

コメントが不適切な場合は、ダッシュボードの「履歴」(英語では「History」)で削除することも可能です。

ChatrollはBrightcove Galleryと簡単に組み合わせて利用いただくことが可能です。後編では、Brightcove GalleryのLive配信用テンプレートとの併用方法をご紹介します。お楽しみに〜!