BLOG / オンラインイベント

BrightcoveとPigeonholeの連携について

オンラインイベント 4/16/2021

この記事では、Pigeonhole Live でイベントの作成方法と、作成したイベントを Brightcove Gallery に埋め込み、利用する方法について紹介します。


1)Pigeonhole Live でイベントを作成

Pigeonhole Live ではイベントの作成に必要となるオペレーションは要素は必要最小限に設計されています。まずはBrightcove Galellyに埋め込むための、Pigeonhole Liveのイベントを作成します。ログイン後、最上部メニューで「Pigeonhole Live」が選択されていることを確認してください。画面にオレンジ色の「Add Pigeonhole」のボタンが表示されるので、クリックしてください。

1 (1)

画面に「Set Up Your Event」のポップアップが表示されます。ここでイベント名や概要、利用期間、「Passcode」を設定します。ここで入力した情報は、イベント作成後に「Event info」からも編集可能です。

2 (1)

「Passcode」は、Pigeonhole Live のイベントページに入室するために必要なパスワードです。参加者は Pigeonhole Live の Webサイトから、主催者から共有された「Passcode」を入力すると、イベントにアクセスすることができるようになります。尚、Brightcove Gallery に Pigeonhole Liveを埋め込んで利用する場合、 Pigeonhole Live は動画プレーヤーの横に埋め込んで利用するため、この「Passcode」をあまり利用することはありません。

「Set Up Your Event」の入力が完了したら、「Continue」をクリックしてください。これでイベントの作成は完了です。ここからは、イベントの情報を登録していきます。


2)「Speakers」で登壇者情報の登録

イベントの情報を入力する画面です。サイドバーにある「② Agenda」でセッションと登壇者の情報を登録していきます。遷移した直後は、「Sessions」のタブが選択されている状態です。まずは「Speakers」のタブに切り替えてください。「Sessions」を全て作成した後に「Speakers」を登録することもできますが、「Sessions」作成と同時に「Speakers」を割り当てられたほうが効率が良いため、先に「Speakers」を登録することをお勧めします。

3 (1)

「Speakers」の登録イメージです。「Change picture」で画像をアップロードして、氏名、所属/役職、紹介文といったプロフィールを入力してください。入力が完了したら「Add speaker」をクリックして登録完了です。この手順で、登壇者分作成してください。

4 (1)


3)「Sessions」でセッション情報の登録

Speakersを登録後、「Sessions」からセッションを登録していきます。「Session Type」は、「Regular」を選択してください。「Regular」は「Session Type」の中の「Non-interactive Sessions」に分類され、セッションタイトルや内容など、静的な情報を表示させるために利用します。

5 (1)

セッション名、開始・終了時刻、セッションの内容を記入してください。また、「Speaker(s)」の「+ Add moderate」もしくは「+ Add speaker」をクリックすると、「Select Moderator」というポップアップが表示されます。ここに、先ほど登録した「Speakers」の一覧が表示されるので、セッションに関連するSpeakerを選択してください。完了したら、「Save Regular」をクリックして保存します。この作業を、開催するセッション分行ってください。セッション間に休憩がある場合には「Break」を活用してください。

6 (1)

各Sessionsの登録が完了すると、セッション一覧が表示されます。次に、「Q&A」や「投票」、「チャット」といった、視聴者と双方向のコミュニケーションを行うためのインタラクティブなセッションを準備していきます。

7 (1)


4)「Q&A」「投票」「チャット」の準備と各セッションへの紐付け

各セッションの準備ができたら、次に「Q&A」や「投票」、「チャット」といった、インタラクティブな機能を追加していきます。これらの機能は、Regularと同様に独立したセッションとして設置することもできますが、Regularで準備した各セッションに紐づける形で用意することもできます。この記事では、各セッションに紐づける、「Nest Session」という手順をご紹介します。なお、用意されている Session の具体的な内容は Pigeonhole Live のもつインタラクティブ機能 記事をご参照ください。

Regularと同じように、「Interactive Sessions」から追加したい機能を選択します。選択後、「○○ Agenda Information」(○○には選択した機能名が入ります) の「+ Add optional」の「Nest Session」をクリックしてください。「Nest under」という項目が追加され、既に作成したセッションが選択できるようになるので、紐付けたいセッションをクリックしてください。

8 (1)

「Save」してセッション一覧に戻ると、「Nest Session」で設定した機能が、既存のセッションの配下に配置されていることが確認できます。

9 (1)

ここまでで、「Agenda」の基本的な設定は終了です。次に、サイドバーにある「More settings」で、Brightcove Galleryに埋め込むiframeタグを取得します。

10


「More settings」のメニューから「Integrations」を選択してください。連携可能なサービス一覧の中に、「Brightcove Gallery Embed」というメニューがあるので、「Integrate」をクリックします。

11

クリックすると、Brightcove Galleryに埋め込むためのEmbed code(埋め込み用のiframeタグ)が取得できるので、「Get embed code」をクリックして、作成したイベントのコードをコピーします。Pigeonhole Liveで行う設定は、これで完了です。

image3


6)Brightcove Galleryに作成したPigeonholeの埋め込み

Video Cloudにログインして、メニューから「Gallery」を選択してください。Brightcove Galleryの画面に遷移します。

12

Brightcove Galleryの画面に移動したら、「新規エクスペリエンス」をクリックしてください。Brightcove Galleryの新規作成ページに遷移します。

13

テンプレートを選択できるので、5つのタブの中から「イベント」を選択してください。今回はライブ配信での利用が前提となるため、「Live Event Portal」を選択してください。

「Live Event In-Page」の埋め込み方法は次の章で説明します。「ポータル」と「インページ」の差についてはこちらのドキュメント を参照ください。

14


7)Live Event PortalにPigeonholeを埋め込む手順

Brightcove Gallery の設定画面に遷移後、左側のメニューから「①外観および動作」をクリックします。「テンプレート設定」「ヘッダーおよびフッター」「カスタム」と3つのメニューが表示されるので、「②テンプレート設定」を選択してください。画面が切り替わると、「イベント前」「ライブ」「イベント後」のタブが表示されるので、「③ライブ」を選びます。

15

画面をスクロールすると、一番下に「Twitter フィード」という項目があります。その下に空欄があるので、赤枠のようにPigeonholeのタブを貼り付けてください。下の保存ボタンを押すと、Brightcove GalleryへのPigeonholeの設定は完了です。

16

最後に、画面右上の「公開」から、Brightcove Galleryを公開すると全ての設定が反映されます。「Live Event Portal」へのPigeonholeの設定は以上で完了です。「イベント前」「イベント後」の画面にもPigeonholeを設置したい場合は、それぞれタブを切り替え、同じ手順で設置することができます。

17


8)Live Event In-PageにPigeonholeを埋め込む手順

Live Event In-Page への埋め込み方法は、Live Event Portal よりもシンプルです。設定画面を開くと、「①ライブ」を選択してください。動画プレーヤーの上下左右に「+」ボタンが設置されています。Pigeonholeを設定したい場所の「+」をクリックしてください。クリックすると、③の要素を追加するためのポップアップが表示されます。

18

カスタムをクリックすると、HTMLを埋め込むための画面が表示されます。「カスタムHTMLコード」の下の欄に、Pigeonholeでコピーしたコードを貼り付けてください。「イベント前」「イベント後」もPigeonholeを表示させたい場合は、この画面でクリックして保存をしてください。以降の公開の手順は、Live Event Portalと同様です。

19

ここまでで、オンラインイベントで利用する Pigionhole Live の設定は完了です。埋め込んだ後に内容が変更が必要な場合でも、Pigionhole Live の管理画面から修正するだけで、Brightcove Galleryにも自動的に反映されますのでご安心ください。

20


9)使い方はオンラインイベントの最初に参加者に説明

Pigeonhole Liveを利用することで、双方向のコミュニケーションを実現することはできますが、イベント参加者が利用を躊躇したり、使い方がわからないと十分に効果を発揮することができません。オンラインイベントの開始前に、司会者や登壇者が積極的に投稿を促したり、実際に利用方法を実演することで、利用のハードルを下げることを心がけましょう。


ブライトコーブは、この『Pigeonhole Live』を『Event Based Interactivity』としてOEM販売しています。Brightcove Video Cloudまたは、それを含むパッケージ製品をご利用の方にのみ、ブライトコーブを通じて販売が可能となっております。詳しい情報をご希望の方はこちらからお問い合わせください。