RICOH Live Streaming Conference デザインカスタマイズガイド

はじめに

本文書では、RICOH Live Streaming Conference のデザインをカスタマイズする方法について説明します。

設定例

iframeコンポーネントの create 時に theme のパラメータでLSConfのデザインのカスタマイズが可能です。
ここではデザインのカスタマイズ方法のみの説明となるため、それ以外のパラメータについてはLSConfSDKのAPI仕様をご参照ください。

const iframe = window.LSConferenceIframe.create(
  document.getElementById('frame-container'),
  {
    defaultLayout: 'gallery',
    thetaZoomMaxRange: 8,
    toolbar: {
      isHidden: false,
      isHiddenCameraButton: false,
      isHiddenMicButton: false,
      isHiddenScreenShareButton: false,
      isHiddenDeviceSettingButton: false,
      isHiddenExitButton: false
    },
    isHiddenVideoMenuButton: false,
    isHiddenRecordingButton: false,
    theme: {
      primary: '#303030',                                     # ボタンやツールバーのデフォルトの背景色
      background: '#f7f7fa',                                  # 会議画面のデフォルトの背景色
      surface: '#fff',                                        # ダイアログやメニューのデフォルトの背景色
      onPrimary: '#fff',                                      # ボタンやツールバーのデフォルトの文字やアイコンの色
      onSurface: 'rgba(0, 0, 0, 0.87)',                       # ダイアログやメニューのデフォルトの文字色
      textSecondaryOnBackground: 'rgba(0, 0, 0, 0.54)',       # サブ情報の文字色
      components: {
        participantsVideoContainer: {
          background: 'rgba(0, 0, 0, 0.05)',                  # Presentationレイアウト時の通常表示領域の背景色
          subViewSwitchBackgroundColor : `#fff`,              # Presentationレイアウト時の通常表示領域の配置切替ボタンの背景色
          subViewSwitchIconColor : 'rgba(0, 0, 0, 0.87)',     # Presentationレイアウト時の通常表示領域の配置切替ボタンのアイコン色

        },
        toolbar: {
          background: '#303030',                              # ツールバーの背景色
          iconColor: '#fff',                                  # ツールバーのアイコン色
        },
        video: {
          background: '#000',                                 # カメラオフ時の背景色
          textColor: '#fff',                                  # ユーザ名の文字色
          textBackgroundColor: '#000',                        # ユーザ名の背景色
          iconColor: '#fff',                                  # SubView上のアイコンの文字色
          menuBackgroundColor: '#fff',                        # SubViewMenuの背景色
          menuTextColor: '#000',                              # SubViewMenuの文字色
          highlightBorderColor: '#661fff',                    # SubViewの強調表示時の枠色
          highlightShadowColor: '#661fff',                    # SubViewの強調表示時の影の色
        }
      }
    }
  }
);

デザインカスタマイズパラメータ一覧

create時に指定する properties のうち、デザインのカスタマイズを行うパラメータを説明します。
全てのパラメータが optional で未指定時は、デフォルトの値に設定されます。
指定する文字列はCSSのColor定義に準拠した値にしてください。
上記以外の文字列を指定した場合、透明となります。

Name Type Default 説明
theme Object LSConfのテーマ設定のオブジェクト
theme
.primary
string "#303030" LSConfのベースカラー
theme
.background
string "rgba(0, 0, 0, 0)" LSConf全体の背景色
theme
.surface
string "#fff" 手前のレイヤーに表示するオブジェクトの背景色
theme
.onPrimary
string "#fff" 背景色がprimaryの時の文字色
theme
.onSurface
string "rgba(0, 0, 0, 0.87)" 背景色がsurfaceの時の文字色
theme
.textSecondaryOnBackground
string "rgba(0, 0, 0, 0.54)" サブ情報の文字色
theme
.components
Object コンポーネントのオブジェクト
theme
.components
.participantsVideoContainer
Object Presentationレイアウト時の通常表示領域のオブジェクト
theme
.components
.participantsVideoContainer
.background
string "rgba(0, 0, 0, 0.05)" Presentationレイアウト時の通常表示領域の背景色
theme
.components
.participantsVideoContainer
.subViewSwitchBackgroundColor
string "#fff" Presentationレイアウト時の通常表示領域の配置切替ボタンの背景色
theme
.components
.participantsVideoContainer
.subViewSwitchIconColor
string "rgba(0, 0, 0, 0.87)" Presentationレイアウト時の通常表示領域の配置切替ボタンのアイコン色
theme
.components
.toolbar
Object ツールバーのオブジェクト
theme
.components
.toolbar
.background
string "#303030" ツールバーの背景色
theme
.components
.toolbar
.iconColor
string "rgba(255, 255, 255, 1)" ツールバのアイコン色
theme
.components
.video
Object SubViewのオブジェクト
theme
.components
.video
.background
string "#000" カメラオフ時の背景色
theme
.components
.video
.textColor
string "#fff" ユーザ名の文字・アイコン色
theme
.components
.video
.textBackgroundColor
string "#000" ユーザ名の背景色
theme
.components
.video
.iconColor
string "#fff" SubView上のアイコン色
theme
.components
.video
.menuBackgroundColor
string "#fff" SubViewMenuの背景色
theme
.components
.video
.menuTextColor
string "#000" SubViewMenuの文字色
theme
.components
.video
.highlightBorderColor
string "#661fff" SubViewの強調表示時の枠色
theme
.components
.video
.highlightShadowColor
string "#661fff" SubViewの強調表示時の影の色

デザインカスタマイズ詳細

Background

background

  • A. LSConf全体の背景色
    • background

Layout

layout

  • A. Presentationレイアウト時の通常表示領域の背景色
    • components.participantsVideoContainer.background
  • B. Presentationレイアウト時の通常表示領域の配置切替ボタンの背景色
    • components.participantsVideoContainer.subViewSwitchBackgroundColor
  • C. Presentationレイアウト時の通常表示領域の配置切替ボタンのアイコン色
    • components.participantsVideoContainer.subViewSwitchIconColor

SubView

subview

  • A. SubView上のアイコン色
    • components.video.iconColor
  • B. SubView上のアイコンの影の色
    • 固定値: drop-shadow(0 0 0.25rem #000)
  • C. ユーザ名の背景色
    • components.video.textBackgroundColor
  • D. ユーザ名の文字・アイコン色
    • components.video.textColor
  • E. カメラオフ時の背景色
    • components.video.background
  • F. カメラオフ時におけるSubViewの中心にあるアイコン色
    • 固定値: #fff
  • G. SubViewMenuの背景色
    • surface
    • 個別に上書きしたい場合は components.video.menuBackgroundColor で指定
  • H. SubViewMenuの文字色
    • onSurface
    • 個別に上書きしたい場合は components.video.menuTextColor で指定
  • I. SubViewMenuのマウスオーバー時の背景色
    • 固定値: rgba(0, 0, 0, 0.12)
  • J. SubViewの強調表示時の枠色
    • components.video.highlightBorderColor
  • K. SubViewの強調表示時の影の色
    • components.video.highlightShadowColor

Toolbar

toolbar

  • A. ツールバーのアイコン色
    • onPrimary
    • 個別に上書きしたい場合は components.toolbar.iconColor で指定
  • B. ツールバーの背景色
    • primary
    • 個別に上書きしたい場合は components.toolbar.background で指定

Dialog

dialog

  • A. Dialogの黒透過部分
    • 固定値: rgba(0, 0, 0, 0.32)
  • B. Dialogの背景色
    • surface
  • C. Dialogの文字色
    • textSecondaryOnBackground
  • D. Dialogのデフォルトボタンの文字色
    • primary
  • E. Dialogのデフォルトボタンの背景色
    • 固定値: primary の透過12%
  • F. Dialogの影の色
    • 固定値: box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)

Device Setting

Dialogのデザインを使用

device

  • A. Dialogの背景色
    • surface
  • B. Dialogの文字色
    • onSurface
  • C. TextFieldの選択時の色
    • 固定値: #6200ee
  • D. TextFieldの非選択時の色
    • 固定値: rgba(0, 0, 0, 0.60)
  • E. TextFieldの文字色
    • 固定値: rgba(0, 0, 0, 0.87)
  • F. Dialogのデフォルトボタンの文字色
    • primary
  • G. Dialogのデフォルトボタンの背景色
    • 固定値: primary の透過12%