【配信画面】Ticker

配信画面用オーバーレイ (ticker)

OBS Studioなどの配信ソフトで使用できる、HTMLベースのシンプルな配信画面用オーバーレイです。

## 利用規約

本ツールを使用した際に本規約に同意したとみなします。

- 報告不要・クレジット表記不要で個人・法人・商用問わず使用いただけます。

- 表記いただける場合には「ももちょこの素材部屋」と記載していただけると嬉しいです。

- YouTubeやTwitch等での動画・配信（収益化における制限もございません）など様々な用途でご自由に使用可能です。

- 二次配布や公序良俗に反する行為・違法行為に利用することはお控えください。

- 編集や加工は自由に行えますが加工の有無による著作権の譲渡や移動はありません。

- ※配布物の著作権は放棄しておりません。

- このツールを利用したことでトラブルが生じても一切の責任を負いません。

## 機能

- **SNSティッカー**: 画面の左右に、指定したSNSアカウント情報を無限スクロールで表示します。

- **デジタル時計**: 画面右下に現在の時刻を「HH:MM:SS」形式で表示します。

- **Twitchチャット**: 画面左下にTwitchのチャットをリアルタイムで1行表示します。スタンプ（エモート）にも対応しています。

## ファイル一覧

- `index.html`: メインファイル

- `def.png`: 背景画像（デフォルト）

- `gb.png`: 背景画像（グリーンバック用など）

- `README.md`: 説明書（このファイル）

## 使い方

### 1. 設定の変更

`index.html` ファイルをテキストエディタで開いて、以下の部分を自分の情報に合わせて編集します。

#### SNS情報の変更

表示したいSNSアイコンとアカウント名を変更します。`index.html`内の以下の2箇所を編集してください。Font Awesomeで利用可能なアイコンが使えます。

```html

<!-- 左側スライダー -->

<div class="slider slider-left">

<ul class="slide-track">

<!-- この中の<li>要素を編集・追加・削除します -->

<li class="slide"><a href="#"><i class="fab fa-twitch"></i><span>@YourTwitch</span></a></li>

<li class="slide"><a href="#"><i class="fab fa-twitter"></i><span>@YourTwitter</span></a></li>

...

</ul>

</div>

<!-- 右側スライダー -->

<div class="slider slider-right">

<ul class="slide-track">

<!-- この中の<li>要素を編集・追加・削除します -->

<li class="slide"><a href="#"><i class="fab fa-twitch"></i><span>@YourTwitch</span></a></li>

<li class="slide"><a href="#"><i class="fab fa-twitter"></i><span>@YourTwitter</span></a></li>

...

</ul>

</div>

```

#### Twitchチャンネルの変更

チャットを表示したいTwitchのチャンネル名（URLの末尾にあるID）に変更します。

```javascript

// --- tmi.js チャット接続処理 ---

// ※ここに接続したいTwitchチャンネル名を入力してください

const channelName = 'YourTwitchChannelName'; // ← 'YourTwitchChannelName' をあなたのチャンネル名に変更

```

#### 背景画像の変更

`def.png` をお好みの背景画像（1920x1080px推奨）に差し替えてください。ファイル名を変える場合は、`index.html`内の`<img src="def.png" ...>`の部分も修正が必要です。

**グリーンバックを使用する場合:**

同梱の `gb.png` を使用することで、背景をグリーンバックにできます。`index.html` の以下の部分を変更してください。

```html

<!-- 変更前 -->

<img src="def.png" class="background-image" alt="background">

<!-- 変更後 -->

<img src="gb.png" class="background-image" alt="background">

```

### 2. OBSへの追加

1. OBSの「ソース」パネルで「+」をクリックし、「ブラウザ」を選択します。

2. プロパティ画面で以下の設定を行います。

- **「ローカルファイル」にチェックを入れる**

- 「ローカルファイル」の「参照」ボタンを押し、編集した `index.html` ファイルを選択します。

- **幅**: `1920`

- **高さ**: `1080`

3. 「OK」をクリックしてソースを追加します。

## カスタマイズ

`index.html`内の`<style>`タグや`<script>`タグ内の値を変更することで、デザインや動作を細かく調整できます。

- **スクロール速度**: `<script>`内の `const speed = 100;` の数値を変更します。大きいほど速くなります。

- **色やフォントサイズ**: `<style>`内の各CSSクラス（`.clock`, `.chat-container`, `.slide a`など）のプロパティを編集します。

## 使用ライブラリ

- **Font Awesome**: アイコン表示のために使用しています。

- **tmi.js**: Twitchチャットを取得するために使用しています。(MIT License)

## お問い合わせ

ご不明な点などがありましたら、XのDMやホームページからお問い合わせください。

また、表示や配色の変更など軽微なものであれば対応致しますので、お気軽にご相談ください。

- **X**: https://x.com/momochoco_wld

- **ももちょこの素材部屋（ホームページ）**: https://momochoco.net

---

Copyright (c) 2026 momochoco