メインコンテンツまでスキップ
Version: 8.0

テンプレート用 SDK

テンプレート開発用のJavaScript SDK

利用上の注意

注意

本SDKはわんコメテンプレート専用のSDKです
テンプレート・プラグインなどわんコメで使用するものに限り利用できます
わんコメに関係のない使用や公開APIとして使用許可されているAPI以外はご利用頂けません

利用規約を再度ご確認ください

連携アプリケーション・サービスにもわんコメの利用規約が適用されます

クレジットの表記について

HTTP APIを利用したアプリケーション・サービスを使用する際にも無料利用の場合はクレジット表示が必要となります

アプリケーションを配布する際はクレジット表記に関する注釈を必ず記入してください

外部IPやドメインからの参照について

わんコメのAPIは安全上の理由からローカルIP以外でのアクセスに制限があります

外部IPやドメインからAPIへアクセスするためには「設定 > APIタブ」(設定ページ)にてアクセス許可するホスト名の登録が必要です

注意

APIドキュメントは一部不完全です
Discrodサーバーの開発者専用チャンネルにて追加や最新情報をやり取りしています
開発者の方はぜひDiscordに参加して開発者であることをお知らせください

使い方

テンプレートフォルダにあるpreset/__origin/js/onesdk.jsを使用します
http://localhost:11180/templates/preset/__origin/js/onesdk.js でも参照できます)

注意

サーバーへのアップロードやテンプレートフォルダから複製などする場合はご相談ください

API

ready():Promise< void >

ページの読み込みが完了した際にPromiseをresolveします
既に完了している場合は即座にresolveします

setup(config: Partial< OneSDKConfig >): void

SDKの初期設定を行います
この関数の呼び出しは必須です

configPartial< OneSDKConfig >
export type Protocol = 'ws' | 'local'  
export interface OneSDKConfig {
protocol: Protocol // 接続プロトコル(Default: 'local')
port: number // ポート番号 (Default: 11180)
host: string // ホスト名(Default: 'localhost')
pathname: string // API pathname (Default: '')
mode: 'all' | 'diff' // コメント取得モード (Default: 'all') all=直近取得しているコメントを毎回全て取得(削除されたもの除く) diff=常に最新のみ取得
disabledDelay: boolean // コメント取得遅延を0にする (Default: false)
intervalTime: number // コメント更新間隔 (Default: 5000)
maxQueueInterval: number // 連続したコメントがあった時の間隔 (Default: 150)
reconnectInterval: number // 切断された際の再接続間隔 (Default: 5000)
commentLimit: number // SDK上に保持する最大コメント数 (Default: 100)
includes: string[] | null // 取得する配信サービス (Default: null)
excludes: string[] | null // 除外する配信サービス (Default: null)
includeIds: string[] | null // 受信するユーザーID (Default: null)
excludeIds: string[] | null // 除外するユーザーID (Default: null)
includeNames: string[] | null // 取得する枠名 (Default: null)
excludeNames: string[] | null // 取得する枠名 (Default: null)
lifeTime: number // コメント保持時間 (Default: Infinity)
permissions: SendType[] | null // API Permission
}

subscribe(subscriber: Subscriber): number

わんコメで変更があった際のイベントを購読します
解除に必要な購読IDが返却されます

subscriberSubscriber
export type Subscriber = {  
action: T // permissionsで指定したアクション名
callback: (response: PublishActions[T]) => void
}

unsubscribe(subscriberId: number): void

購読IDをもとにイベントの購読を停止します

subscriberIdnumber

reset():void

取得したコメント等のデータを初期化します

getStyleVariable< T = any >(name: string, defaultValue: T, parser: (val:string) => T): T

CSSの:rootに定義されたCSS変数の値を取得する関数です

namestring
defaultValueT
parser(val: string) ⇒ T

getCommentStyle(comment: Comment): {[key: string]: string}

YouTube等のスパチャやメンバーシップの色情報をコメントをもとに返却します

commentComment
export interface Comment {  
id: string
service: ServiceType // 受信した配信サイト識別子
name: string
url: string
color: RGBColor // 枠設定した色情報{r,g,b}
meta?: BaseCommentMeta
data: CommentData
}
export interface BaseCommentMeta {
no?: number // コメント番号
tc?: number // 累計コメント数
lc?: number // コメント数
interval?: number // コメント間隔
free?: boolean // フリーギフトかどうか
}
export interface CommentData {
id: string
userId: string
liveId: string
name: string
screenName?: string
isOwner: boolean
isSupporter?: boolean
displayName?: string
nickname?: string
hasGift: boolean
autoModerated?: boolean
profileImage: string
originalProfileImage?: string
badges: BaseBadge[]
timestamp: string
comment: string
speechText?: string
isFirstTime?: boolean
isRepeater?: boolean
commentVisible?: boolean
meta?: CommentMeta
}
export interface BaseBadge {
url: string
label: string
type?: string
}
export interface CommentMeta {
hasNickname?: boolean
hasMemo?: boolean
anonymity?: boolean
label?: string
type?: 'system'
}

checkLicensed(): Promise< boolean >

PRO版を利用しているかどうかのフラグを返却します

connect(): Promise< void >

わんコメAPIサーバーに接続します
この関数の呼び出しは必須です

getInfo(): Promise< AppInfo >

わんコメアプリの基本情報を返却します

AppInfoAppInfo
export interface AppInfo {  
platform: 'win' | 'mac'
version: string
port: number
licensed: boolean
templatePath: string
templateUrl: string
}

getOrders(): Promise< OrderItem[] >

参加型の順番待ち情報一覧を返却します

OrderItem[]OrderItem[]
export interface OrderItem {  
id: string // userid
commentId: string
service: ServiceType
serviceName: string
username: string
profileImage: string
timestamp: string
comment: string
count: number
completed: boolean
playing: boolean
anonymity: boolean
userData?: UserNameData
totalCount?: number
lastCompletedAt?: string
}

cancelOrder(orderId: string): Promise< OrderItem[] >

参加IDをもとに順番待ちをキャンセルします

キャンセル後の最新の順番待ちリストが返却されます

OrderItem[]OrderItem[]

completeOrder(orderId: string): Promise< OrderItem[] >

参加IDをもとに順番待ちを完了します

完了後の最新の順番待ちリストが返却されます

OrderItem[]OrderItem[]

getSetList(): Promise< SetListAPIResponse >

【仮実装】セットリスト一覧を返却します

SetListAPIResponseSetListAPIResponse
export interface SetListAPIResponse {  
id: number
name: string
items: MusicData[]
completed: MusicData[]
}
export interface MusicData {
id: number
box: number
name: string
link: string
tags: string[]
memo: string
}

Permission

SDKから各種データを受信するために受信するデータを明示する必要があります

configのpermissionsに配列で複数指定が可能です

permissionsに指定したものがsubscribeでイベントタイプとして受信可能となります

connected接続が正常に行われたとき
comments通常のコメントを受信したとき
systemCommentシステムコメントを受信したとき
clearコメントクリアを実行したとき
deletedコメントが削除されたとき
meta配信情報が更新されたとき
meta.clear配信情報がクリアされたとき
notification通知を受信したとき
pinnedコメントのピン留めが変化したとき
waitingList参加待ちリストが変化したとき
setListセットリストが変化したとき
setList.requestリクエストが変化したとき