(3) プレビルド UI の利用

このチュートリアルは、ビデオチャットを設置するチュートリアル の続きです。まだ前のチュートリアルを終えていない場合は、先にそちらに取り組んでください。

1. Komi UI SDK をインストールする

HTML に以下のコードを記述します。

<script src="https://some.cdn.domain/js/komi-ui.js"></script>

ヒント

NPM または Yarn でインストールすることもできます。

2. FullpageUI インスタンスを初期化する

プレビルド UI は3種類あります。

• FullpageUI
• MultiRoomUI
• OverlayUI

今回は FullpageUI を使って UI を構築します。以下のコードを記述します。

const uiOptions = {
  roomId: 'some-room',
  brandColor: '#ff0000',
  enableVideo: true,
  // etc.
}
const ui = new KomiUI.FullpageUI(komi, uiOptions)

3. UI を DOM にマウントする

ui.mount() に ID もしくは DOM 要素を渡すと、その要素の部分にチャットをレンダリングします。以下のコードを記述します。

ui.mount('#chat')

イベントリスナなども Komi UI 側でセットアップされるため、ここまで作成してきたコードは不要になります。不要なコードを削除したコード全文は GitHub にあります。

4. 動作を確認する

作成したページを2つのタブ（もしくは2つのブラウザ）で開きます。

// TODO: スクショ等を貼る

ボーナス: Vue.js との統合

new Vue({
  template: `
    <div ref="chat"></div>
  `,
  props: {
    apiKey: {
      type: String,
      required: true,
    },
    roomName: {
      type: String,
      required: true,
    },
    brandColor: {
      type: String,
      default: '#ff0000',
    },
    enableVideo: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      uiOptions: {
        roomName: this.roomName,
        brandColor: this.brandColor,
        enableVideo: this.enableVideo,
      },
    },
  },
  mounted() {
    const komi = new Komi(this.apiKey)
    this.ui = new KomiUI.FullpageUI(komi, this.uiOptions)
    this.ui.mount(this.$refs.chat)
  },
})

<template>
  <fullpage-chat api-key="pk_test_********" room-name="some-room" enable-video />
</template>