GaroonのポータルでMicrosoft 365のStreamのチャネルを表示する

こんにちは、Garoonマーケティングチームです。

今回は、GaroonのポータルにMicrosoft Streamのチャネル一覧を埋め込む方法をご紹介します。

※ご紹介する内容の動作を保証するものではございません。ご注意ください。

サイボウズ社内で運用されている「社内動画ポータル」

サイボウズでは、従業員向けの動画の多くがMicrosoft 365のStreamにアップロードされます。社内向けの動画も、アップしただけでは見てもらえるとは限りません。サイボウズでは、社員が利用するGaroonに「社内動画ポータル」が設置されています。Streamのチャネルが複数埋め込まれており、動画のサムネイルをクリックすると拡大、再生されます。

見たい動画のサムネイルをクリックすると...

garoon-stream-portal-01.png

拡大されて再生が始まります。

garoon-stream-portal-02.png

社内動画ポータルはGaroonの「HTMLポートレット」を用いて作成されています。StreamではチャネルごとにHTMLの埋め込みパーツが取得可能です。これをポートレットに設定すれば、簡単に設定ができます。

GaroonのポータルからStreamの動画を見るために、ユーザーはGaroonとStreamの両方にログインが必要です。シングルサインオンしていればログインの手間を省けます。Garoonと他システムとのシングルサインオンやAD連携については、製品サイトをご覧ください。

社内動画ポータルの作り方

社内動画ポータルを作るためのステップは以下の3つです。

  1. Streamのチャネル埋め込み用HTMLタグをコピー
  2. Garoonで動画表示用HTMLポートレットを作成
  3. Garoonで動画一覧のポータルを作成

HTMLタグを用意し、タグをGaroonでパーツ化し、パーツをポータルに組み込むという流れです。

1. Streamのチャネル埋め込み用HTMLタグをコピー

  1. Streamでポータルに設置したいチャネルを表示します
  2. チャネル名横の[...]をクリックし、[共有]をクリックします
    garoon-stream-portal-03.png
  3. 共有用の画面がポップアップされるので[埋め込み]タブをクリックします
    garoon-stream-portal-04.png
  4. [チャネルのサイズ][並び替えの基準][レスポンシブ]のオンオフを設定します
    (サイボウズでは[チャネルのサイズ]を853 x 480に設定しています)
  5. 埋め込みコードをコピーして、テキストエディタ等にメモしておきます

2. Garoonで動画表示用HTMLポートレットを作成

  1. ポータルの設定画面で[HTMLポートレット]メニューを開きます
    garoon-stream-portal-05.png
  2. [HTMLポートレットを追加する]をクリックします
  3. ポートレット名には後からわかるように「動画一覧」などの名前を入力します
  4. ポートレットの内容に、先程Streamでコピーした埋め込みタグを貼り付けます
    (埋め込みタグを複数並べて設置することも可能です)
    garoon-stream-portal-06.png
  5. [追加する]ボタンを押します
  6. 表示を確認します
  7. チャネルが表示され、動画が再生できたらHTMLポートレットの準備は完了です
    garoon-stream-portal-07.png

3. Garoonで動画一覧のポータルを作成

  1. ポータルの設定画面で「ポータルの一覧」メニューを開きます
    garoon-stream-portal-09.png
  2. ポータルを追加する、をクリックします
  3. ポータル名には動画ポータルと分かる名前を入力し、追加するボタンを押します
    garoon-stream-portal-08.png
  4. ポータル一覧画面で「3」で追加したポータルをクリックし編集画面に入ります
  5. 左側のポートレットリストから、HTMLポートレット準備の手順で作成したポートレットを選びドラッグ&ドロップで配置します
    garoon-stream-portal-10.png
  6. プレビューで表示を確認します
  7. ポートレットとポータルを公開します
  8. Garoonのトップページへ戻り「3」で追加した動画ポータルを表示します
  9. Streamの動画が表示され、再生できたら設定完了です
    garoon-stream-portal-11.png

おわりに

今回はStreamのチャネル一覧をGaroonのポータルに設置する方法をご紹介しました。例えばYouTubeでも埋め込み用HTMLタグを取得できるので、同様の手順で動画が設置可能です。

最近は動画を使って社内で情報共有している企業様も多いのではないでしょうか。
Garoonのポータルなら、手軽に動画ポータルを作れちゃいますので、是非お試しください!

Garoon マーケティングチーム