# (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 を使って 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>