In the previous post (https://www.brightcove.com/ja/resources/blog/live_stream_chat_1/ “previous”), we introduced how to set up <a href=“https://chatroll.com/” target=“_blank” title=“Chatroll”>Chatroll</a>. This time, we will introduce the integration between our products [Brightcove Gallery](https://www.brightcove.com/ja/products/gallery/ “Brightcove Gallery”) (video portal site construction function) and [Brightcove Live](https://www.brightcove.com/ja/solutions/live-streaming/ “Brightcove Live”).
目次__
- 1.ブライトコーブギャラリーについて](#1-brightcove-gallery)
- [2.ブライトコーブギャラリーの設定方法](#2-brightcove-gallery)
- [3.ビデオIDの設定方法](#3-video-id)
- [4.設定の反映](#4-)
## 1.ブライトコーブ ギャラリーについて
Brightcove Gallery は、動画ポータルサイトを簡単に構築できる機能です。以下のテンプレートから、企業のブランド イメージに合った動画ポータル サイトを構築できます。
この「ポータル」テンプレートに加え、2017年には既存のウェブサイトに動画プレイリストを埋め込むことができる「インページ」テンプレートも新たにリリースされました。(詳しくは[こちら](https://www.brightcove.com/ja/resources/blog/gallery-inpage-part1/ "こちら"))
Chatrollは'ポータル'または'ページ内'機能で使用できます。この例では、'ページ内' 機能を使用してライブ放送時にチャット機能を実装する方法を紹介します。
*ブライトコーブギャラリーには様々な設定がありますが、今回は最低限の設定をご紹介します。ブライトコーブギャラリーの仕様や設定方法については、[こちら](https://ja.gallery.support.brightcove.com/get-started/getting-started-brightcove-gallery.html "こちら")をご参照ください。ご不明な点がございましたら、ご契約のサポート条件に基づき、弊社テクニカルサポートまでお問い合わせください。
## 2.Brightcove Gallery のセットアップ方法
Video Cloud にログインし、Gallery モジュールを選択してください。移行後、Galleryモジュールのトップ画面左上に表示される「New Experience」をクリックしてください。
)
遷移後、左から3番目のタブ「インページ」をクリックしてください。各種テンプレートが表示されますので、「ライブイベントインページ」を選択してください。
体験タイトル」「体験内容」などを入力し、「体験言語」を日本語に設定してください。設定完了後、「体験を作成」をクリックしてください。(これらの設定は後で変更することができます。）
この例では、前編で設定したチャトロールのチャット画面が、ライブ映像を配信している動画プレーヤーの右側に表示されるように設定します。右側に表示されている「＋」ボタンをクリックすると、「コンポーネントの選択」という画面が表示されますので、「チャット」をクリックしてください。
すると、以下のポップアップが表示されます。チャットHTMLコード」にChatrollの埋め込みタグ（iframeタグ）を入力してください。この時、"width"(幅)を100%に、"height"(高さ)を500pxに変更することをお勧めします。
この例では、ライブイベント前からイベント後までチャットウィンドウを表示するように設定します。このチャットをいつ表示しますか "の下に表示されている、"イベント前"、"ライブ"、"イベント後 "の全てのボックスにチェックを入れ、保存ボタンをクリックしてください。
遷移後、右上の「プレビュー」をクリックすると、前項で設定したチャット画面が以下のように表示されます。(以下では、プレビューの右上に表示される「再生状況」を「ライブ」にしています。
## 3.ビデオIDの設定方法
次に、ライブ配信したい動画のビデオIDを取得する方法を説明します。
今回は、ライブ配信の方法（ライブイベントの作り方）そのものは取り上げません。詳しくは[こちら](https://ja.live.support.brightcove.com/live-module/creating-and-managing-live-events-using-live-module.html "こちら")をご確認ください。Liveモジュールでイベントを作成したら、そのイベントの "コントロールルーム "に表示される "ビデオID "をコピーしてください。
コピー後、ギャラリー・モジュールに戻り、左側の「ビデオ」タブをクリックします。クリックすると、"Before Event"、"Live"、"After Event "と表示されますので、"Live "をクリックします。すると、右側に「ビデオを選択」という画面が表示されますので、「ビデオID」のラジオボタンが選択されていることを確認し、先ほどコピーしたビデオIDを貼り付けます。
## 4.設定の反映
最後に、Galleryで行った設定を適用するには、Galleryモジュールの右上にある「Publish and Embed」をクリックすると、以下の画面がポップアップ表示されます。
しばらくすると、「公開状況」に「このエクスペリエンスは最新です」と表示されます。推奨」に表示されているJavaScriptをウェブサイトにインストールしてください。すると、以下のようにビデオプレーヤーが表示されなくなり、右側にチャットウィンドウだけが表示されるようになります。
これはバグではなく、Galleryモジュールの設定がライブ放送開始前（イベント前）の状態に設定されているためです。Liveモジュールでライブ放送が開始されたことを確認後、Galleryモジュール左上の "Before the event "横の "Change "をクリックすると、"Change what viewers see "ポップアップが表示されます。ライブ "ラジオボタンを選択した後、"続行 "をクリックしてください。
これですべての設定が完了しました。ライブ ストリームの動画プレーヤーが Web サイトに表示され、右側にチャット ウィンドウが表示されるはずです。前項と同様に、チャット ウィンドウの「ゲスト」フィールドにゲスト名（ここでは「Brightcove Guest」と入力）を入力し、サインインしてください。
以下のように、ライブ配信を見ながらチャットメッセージを入力できるようになりました。
In this case, we have used Chatroll and Brightcove Gallery to enable chat during live streaming. In addition to this, there are also other ways to implement chat and surveys, such as using <a href=“https://sendbird.com/” target=“_blank” title=“Sendbird”>Sendbird</a> in the US and <a href=“https://pigeonholelive.com/” target=“_blank” title=“Pigeonhole”>Pigeonhole</a> in Singapore. Please feel free to use these services according to your company’s needs.
