テンプレート仕様一覧

Current built-in templates reference

現在同梱されている built-in 14 テンプレートの用途、設定項目、背景画像対応をまとめた一覧です。テンプレートを選ぶときの早見表として使えます。

このページは現行実装ベースの built-in テンプレート一覧です。ここに書かれている内容は、各テンプレートの manifest.json と script.js / style.css の挙動を要約したものです。

注意: 色分けテンプレートでは、通常時の既定色とは別に、スパチャ・モデレーター・オーナー・メンバーシップなどの状態別色が CSS で上書きされることがあります。

custom template の作成方法や TemplateKit / renderless / HTML-first の詳細は、このページではなく docs 側が正本です。

作者向けの入口（GitHub）: Docs (GitHub) / Template Authoring Guide / Template Runtime / OneComme Migration

早見表

テンプレート	主な用途 / 見た目	背景画像	代表的な設定	特記事項
standard-renderless	2ライン標準	あり	名前/本文色、メンバー色分け、背景画像、余白、行間/間隔	基準テンプレート（renderless）
chat-cute	かわいい配色	あり	標準系と同等	M PLUS Rounded
chat-wafuu	和風トーン	あり	標準系と同等	Kiwi Maru
chat-manga-bubble	マンガ風ふきだし	あり	ふきだし形状/しっぽ、リソ風アクセント、配色プリセット	吹き出し表示
browser-card-renderless	ブラウザカード風	なし	カード幅/角丸、メタレール、テーマ、タイピング	renderless
framed-list-renderless	枠付き縦リスト	なし	フレーム幅/高さ、ヘッダ/ステータス/フッタ、タイピング、アニメ	renderless 恒久サンプル
frame-crt-terminal	CRT/ターミナル風	なし	配色プリセット、スキャンライン、ヘッダ、フレーム透過	フレーム系（renderless）
frame-neon-cyber	ネオン/サイバー	なし	アクセント/セカンダリ色、ヘッダ/フッタ、アニメ	フレーム系（renderless）
frame-scifi-hud	SF HUD	なし	配色プリセット、ハイライト、ヘッダ/フッタ	フレーム系（renderless）
game-compact	ゲーム HUD 風	なし	名前色、本文色、表示要素切替	高コントラスト
game-fps	FPS 風	なし	名前色、本文色、方向	無駄を削った表示
game-rainbow	名前色レインボー	なし	7色パレット、本文色	視聴者名ハッシュで色分け
ticker-renderless	横流れティッカー	なし	発光色/強度、速度、縦位置、名前位置	横スクロール（singing-glow の後継）
singing-text	本文中心の流し	なし	本文色、方向	名前・アバター控えめ

チャット・リスト系テンプレート

standard-renderless / 2ラインスタンダード

id: com.comment-hub.template.standard-renderless 背景画像あり基準テンプレート

2 ライン標準表示に、背景画像・メンバー色分け・余白・行間まで揃えた基準テンプレートです。テンプレート設定を比較する基準にしやすい構成で、renderless ランタイムで動きます。

主な設定: `maxComments`, `fontSize`, `nameSize`, `lineHeight`, `commentGap`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `direction`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`, `backgroundImage`, `paddingTop/Bottom/Left/Right`, `customCss`
モデレーター・オーナー・メンバーシップ・スパチャは状態別色で上書きされます

chat-cute / 2ラインかわいい

id: com.comment-hub.template.chat-cute 背景画像あり M PLUS Rounded 1c

くすみピンクと濃色本文で、柔らかいかわいいトーンを作るテンプレートです。設定は標準系と同等です。

主な設定: `maxComments`, `fontSize`, `nameSize`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `direction`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`, `backgroundImage`, `paddingTop/Bottom/Left/Right`

chat-wafuu / 2ライン和風

id: com.comment-hub.template.chat-wafuu 背景画像あり Kiwi Maru

和紙や木目に合う落ち着いた茶系配色のテンプレートです。和風配信や朗読系に向きます。設定は標準系と同等です。

主な設定: chat-cute と同等（背景画像・余白・メンバー色分けあり）

chat-manga-bubble / マンガ風ふきだし

id: com.comment-hub.template.chat-manga-bubble 背景画像ありふきだし表示

コメントを吹き出し（ふきだし）で表示するマンガ風テンプレートです。しっぽの有無や、リソグラフ／ポスター調のアクセント色で奥行きを出せます。配色はプリセットから選べます。

主な設定: `maxComments`, `fontSize`, `nameSize`, `commentGap`, `showTail`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `bubbleStyle`, `risoAccentPreset`, `risoAccent`, `colorPreset`, `bubbleColor`, `borderColor`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`, `backgroundImage`, `paddingBottom/Left/Right`, `customCss`
`bubbleStyle` で吹き出しの形、`risoAccent` で背面アクセント色を調整します

browser-card-renderless / ブラウザカード風

id: com.comment-hub.template.browser-card-renderless 背景画像なし renderless

ブラウザの通知カードのような角丸カードでコメントを表示するテンプレートです。メタ情報レールやライト／ダークのテーマ切替、タイピング演出に対応します。

主な設定: `maxComments`, `width`, `fontSize`, `nameSize`, `cardGap`, `cornerRadius`, `accentColor`, `showAvatar`, `showMetaRail`, `compactMode`, `typingEnabled`, `themeMode`, `customCss`

framed-list-renderless / 枠付きリスト

id: com.comment-hub.template.framed-list-renderless renderless ヘッダ/フッタ付き

ヘッダー／ステータス／フッター付きの固定フレームにコメントを積む、HTML-first / renderless の恒久サンプルです。タイピング演出やアニメーションも設定できます。

主な設定: `maxComments`, `width`, `frameHeight`, `fontSize`, `commentGap`, `colorPreset`, `accentColor`, `textColor`, `bgColor`, `highlightColor`, `borderColor`, `frameOpacity`, `showAvatar`, `showBadge`, `showHeader`, `kickerText`, `headerText`, `showStatus`, `statusText`, `showFooter`, `footerText`, `dense`, `typingEnabled`, `typingSpeed`, `animationStyle`, `customCss`
実装の参考: テンプレートのサンプル集 (GitHub)

フレーム系テンプレート

枠（フレーム）付きで世界観を作る renderless テンプレート群です。配色プリセット・ヘッダ／フッタ・フレーム透過などを共通で持ちます。

frame-crt-terminal / CRT・ターミナル風

id: com.comment-hub.template.frame-crt-terminal 背景画像なし renderless

CRT モニタ／ターミナルを思わせるフレームテンプレートです。スキャンライン表現の ON/OFF を持ちます。

主な設定: `maxComments`, `width`, `frameHeight`, `fontSize`, `colorPreset`, `accentColor`, `textColor`, `bgColor`, `highlightColor`, `borderColor`, `frameOpacity`, `showAvatar`, `showBadge`, `memberColor`, `memberColorValue`, `showScanlines`, `showHeader`, `kickerText`, `headerText`, `showFooter`, `dense`, `animationStyle`, `customCss`

frame-neon-cyber / ネオン・サイバー

id: com.comment-hub.template.frame-neon-cyber 背景画像なし renderless

ネオン／サイバーパンク調のフレームテンプレートです。アクセント色とセカンダリ色で発光感を作ります。

主な設定: `maxComments`, `width`, `frameHeight`, `fontSize`, `colorPreset`, `accentColor`, `secondaryColor`, `textColor`, `bgColor`, `highlightColor`, `borderColor`, `frameOpacity`, `showAvatar`, `showBadge`, `memberColor`, `memberColorValue`, `showHeader`, `kickerText`, `headerText`, `showFooter`, `footerText`, `dense`, `animationStyle`, `customCss`

frame-scifi-hud / SF HUD

id: com.comment-hub.template.frame-scifi-hud 背景画像なし renderless

SF 映画の HUD（ヘッドアップディスプレイ）のようなフレームテンプレートです。ハイライト色でメリハリを付けます。

主な設定: `maxComments`, `width`, `frameHeight`, `fontSize`, `colorPreset`, `accentColor`, `highlightColor`, `textColor`, `bgColor`, `borderColor`, `frameOpacity`, `showAvatar`, `showBadge`, `memberColor`, `memberColorValue`, `showHeader`, `kickerText`, `headerText`, `showFooter`, `footerText`, `dense`, `animationStyle`, `customCss`

ゲーム系テンプレート

game-compact / コンパクト

id: com.comment-hub.template.game-compact 背景画像なし高コントラスト

ゲーム HUD に馴染みやすい高コントラストの 2 ライン系テンプレートです。背景画像項目はありません。

主な設定: `maxComments`, `fontSize`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `direction`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`
スパチャ・メンバーシップは状態別色で強調されます

game-fps / FPS

id: com.comment-hub.template.game-fps 背景画像なし BIZ UDGothic

FPS 配信向けの無駄を削った表示です。アバターやバッジは設定で切り替えられます。

主な設定: `maxComments`, `fontSize`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `direction`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`

game-rainbow / レインボー

id: com.comment-hub.template.game-rainbow 背景画像なし 7色パレット編集可

一般視聴者の名前色を 7 色パレットから自動割り当てするテンプレートです。本文色は個別に変更できます。

主な設定: `maxComments`, `fontSize`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `direction`, `nameColor`, `color1` 〜 `color7`, `textColor`, `memberColor`, `memberColorValue`
一般視聴者の名前色は名前文字列のハッシュで `color1`〜`color7` から割り当てられます
モデレーター、オーナー、スパチャなどは状態別色が優先されます

横流れ・歌枠系テンプレート

ticker-renderless / 横流れティッカー

id: com.comment-hub.template.ticker-renderless 背景画像なし横スクロール

縦積みではなく、右から左へ流れるティッカー型テンプレートです（旧 singing-glow の後継）。発光（グロー）・スクロール速度・縦位置を調整できます。歌枠や下段テロップに向きます。

主な設定: `maxComments`, `positionY`, `fontSize`, `showName`, `showBadge`, `namePosition`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`, `glowIntensity`, `glowColor`, `glowCustomColor`, `animSpeed`, `customCss`
`positionY` で画面内の縦位置、`animSpeed` で流れる速度を調整します
スパチャやメンバーシップは状態別色で強調されます

singing-text / 本文中心の流し

id: com.comment-hub.template.singing-text 背景画像なし本文を大きく

本文を大きく見せたいときのシンプルなテンプレートです。名前・アバター・バッジの表示は設定で切り替えられます。

主な設定: `maxComments`, `fontSize`, `showName`, `nameInline`, `showAvatar`, `showBadge`, `direction`, `nameColor`, `textColor`, `memberColor`, `memberColorValue`

読み方の補足

「背景画像あり」は設定 UI で背景画像や背景 URL を扱えることを意味します
「通常時の既定色」は、状態別色分けが発生していない通常コメントの初期色です
モデレーター、オーナー、メンバーシップ、スパチャなどは、テンプレートによって状態別色が優先されます
このページは built-in の公開一覧です。custom template authoring の正本は docs 側にあります