特定のチャンネルポイントを使用したユーザーを一覧化します。対象のチャンネルポイントは自由に指定可能です。WEBアプリなのでインストール作業は不要で簡単！

要件

  • Windowsで動作確認済み（Macで確認された方はご報告あると嬉しいです。）
  • jQuery 3.5.1
  • Bootstrap 5.0.2
  • JavaScript file I made

ディレクトリ構造

使い方

  1. OBS
    1. ブラウザソースの追加（index.html）
    2. ブラウザソースの変換の編集
  2. OAUTHトークンの取得
  3. CPRの設定
    1. 基本設定
    2. 動作確認

OBS

ブラウザソースの追加（index.html）

OBSを起動し、[ソースの追加] から[ブラウザ] をクリックします。

画像に alt 属性が指定されていません。ファイル名: image-43.png

任意の名称を入力し、[OK] をクリックします。

表示されたブラウザソースのプロパティウィンドウにて、下記の作業を実施します。

  1. [URL] に「https://84log.xii.jp/ChannelPoint-Redeemers/index.html」と入力します。
  2. [幅] に「800」と入力します。
  3. [高さ] に「700」と入力します。
  4. [カスタムCSS] に任意のCSSを追記します。（最初から記載されている内容は残しておきます。追記するCSSサンプルはこちら。）
  5. [表示されていない時にソースをシャットダウンする] にチェックを入れます。（必須ではないですが、ソースを非表示にした際に見えない状態で動作し続けることを防ぐため、おすすめの設定です。）
  6. [OK] をクリックします。

ブラウザソースの変換の編集

追加したブラウザソースを右クリックして[変換] – [変換の編集] をクリックします。

[クロップ] の[右] の項目を 「520 px」に変更して[閉じる] をクリックします。

OAUTHトークンの取得

CPRが動作するには、CPRに自身のチャンネルへのアクセス権限を付与する必要があります。そして、アクセスを許可した際に発行されるOAUTHトークンというものを使用し、動作可能となります。

後程設定する際に入力するため、先にOAUTHトークンを取得しておきましょう。

下記にアクセスします。
Twitch OAuth Token Generator

[Client ID] に下記を入力します。

[Scopes] に下記を入力します。

[Client ID] と[Scopes] の入力が終わったら、[Connect] をクリックします。

表示されたOAUTHトークンを、メモ帳等に一時的にコピペしておいてください。
悪用される恐れがあるので、このOAUTHトークンは決して共有・公開しないでください。
※OBSの仕様でたまにリセットされることがあるので、OAUTHトークンは保存しておいた方がよいかもしれません。OAUTHトークンを再発行しても問題ありません。

OBS（CPR）

基本設定

追加したブラウザソースを右クリックして[対話] をクリックします。

表示された相互作用ウィンドウにて、[基本設定] タブ内で下記の作業を実施します。

  1. [チャンネル] に、自身のユーザー名を入力します。
    （「https://www.twitch.tv/○○○」の○○○の部分）
  2. [OAUTHトークン] に、OAUTHトークンを入力します。
    （「OAUTHトークンの取得」でメモに控えていたもの）
  3. [接続] をクリックし、接続状態が「未接続」から「接続中」になることを確認します。
    （接続までに約2秒かかります）
  4. [チャンネルポイント] に任意のチャンネルポイント名を入力し、[更新] をクリックします。
    ※OBSの仕様で、ここでは日本語などの全角文字を入力することが出来ません。日本語などの全角文字を設定したい場合は、一度メモ帳等に入力したものをコピペすることで対応してください。
設定前
設定後（例）

動作確認

[チャンネルポイント] で指定したチャンネルポイント名のものを、実際に交換してみてください。交換したユーザー名が[Step1] のリストに表示されればOKです。

機能

RL-ECOはそのまま利用可能ですが、画像・CSSをカスタマイズすることで簡単にオリジナリティのあるオーバーレイへと変化させることが可能です。

カスタマイズ時の動作確認のため、時間無制限のプライベートマッチで、ボット同士の戦いを延々と見ることになるでしょう。

ユーザー一覧

指定したチャンネルポイントを交換したユーザーがリストアップされていきます。

  • ユーザー名の左クリック
    • 上位ステップに移動します。（ステップアップ）
    • 上位ステップの機能が無効の場合は、移動せずに削除されます。
    • 上位ステップのユーザー数が最大人数に達していた場合は、移動も削除もされません。
  • ユーザー名の右クリック
    • 下位ステップに移動します。（ステップダウン）
    • 最下位ステップの場合は、移動せずに削除されます。
    • 下位ステップのユーザー数が最大人数に達していた場合は、移動も削除もされません。

コントローラー

ユーザー一覧エリアをコントロールします。

  • エントリー
    • [受付中] の場合、指定したチャンネルポイントを使ったユーザーをユーザー一覧に追加します。
    • [拒否]の場合、指定したチャンネルポイントを使われてもユーザー一覧には追加されません。
  • ユーザー一覧のクリア
    • ユーザー一覧のユーザーが削除されます。
  • ユーザー名
    • 任意のユーザー名を入力して[追加] をクリックすることで、手動でユーザーを追加できます。
    • Step1のユーザー数が最大人数に達していた場合は、[追加] をクリックしても追加されません。
    • [クリア] をクリックすると、入力中のユーザー名がクリアされます。

基本設定

ツールとTwitchチャンネルとの連携設定を行ないます。手動でユーザーを追加することもできるので、連携しなくても使用できますし、チャンネルポイントを使用しない場合は設定不要です。

  • 接続状態
    • [接続中] はTwitchチャンネルとツールが接続されている状態です。一度正常に接続されると、次回起動時からは自動接続されます。
    • [未接続] はTwitchチャンネルとツールが接続されていない状態です。この状態ではチャンネルポイントを使われてもユーザー一覧に追加されません。
    • [接続] は[チャンネル] と[OAUTHトークン] に入力されていると押すことができます。[チャンネル] と[OAUTHトークン] を更新した際は、[接続] を押すようにしてください。
  • チャンネル
    • 配信者のユーザーIDを入力する箇所です。表示名ではなく、英数字で構成されるものとなります。
  • OAUTHトークン
    • 本ツールのOAUTHトークンを入力する箇所です。取得方法はこちらをご覧ください。
  • チャンネルポイント
    • ユーザー一覧への追加対象となるチャンネルポイント名を入力してください。
      ※OBSの仕様で、ここでは日本語などの全角文字を入力することが出来ません。日本語などの全角文字を設定したい場合は、一度メモ帳等に入力したものをコピペすることで対応してください。

各ステップ設定

ユーザー一覧のステップ設定を行います。

  • 機能の有効化
    • [有効] は、ステップ機能が有効となり、ユーザーの移動先対象となります。
    • [無効] は、ステップ機能が無効となります。
      • Step1は無効にすることができません。
      • Step2を無効にすると、Step3も連動して無効になります。
  • タイトル
    • 各ステップのタイトルを変更することができます。入力・変更後に[更新] をクリックすることで反映・保存されます。
      ※OBSの仕様で、ここでは日本語などの全角文字を入力することが出来ません。日本語などの全角文字を設定したい場合は、一度メモ帳等に入力したものをコピペすることで対応してください。
  • 常に表示
    • [表示する] は、ステップにユーザーが存在しない場合でも、ステップエリアを表示します。
    • [表示しない] は、ステップにユーザーが存在しない場合に、ステップエリアが非表示になります。
  • スペース固定表示
    • [表示する] は、ステップに存在するユーザーが[最大人数] 以下の場合でも、[最大人数] 分の領域が表示されます。
    • [表示しない] は、ステップに存在するユーザー数分の領域で表示されます。
    • ステップにユーザーが存在する時に設定変更した際は、表示が崩れたり動作がおかしくなる可能性があります。その際はリロードしてください。
  • 最大人数
    • ステップに所属可能なユーザーの最大数を指定します。ステップのユーザー数が、ここで指定した最大数に達している場合、ステップに新たにユーザーが追加されません。
    • OBSの仕様で選択肢が出てこないので、最大人数欄をクリックして上下矢印キーを押して選択肢を変更してください。
    • ステップにユーザーが存在する時に設定変更した際は、表示が崩れたり動作がおかしくなる可能性があります。その際はリロードしてください。

CSSカスタマイズ

OBSのブラウザソースのプロパティで追記するCSSによって、ユーザー一覧のデザインを変更することができます。是非オリジナルなカスタマイズをしてください！

様々なリストデザインのサンプルを掲載されている、みっぴーさんの記事を紹介します。
リストのデザインを装飾するCSSサンプル！HTMLの書き方も

みっぴーさんの記事内容の場合、下記のように対応すれば簡単にCPRで使えそうです。
・「.list○○」→「.step-area」
・「.list○○-title」→「.headerTitle」

その中から一つ、カスタマイズサンプルをご用意しておきますので、初めてCPR利用する際は使ってみてください。

参考

ライセンス

MITライセンスです。使用報告不要ですが、いただけると嬉しいです。

また、使用された場合は、こちらのツールやブログをご紹介いただけますと、同じように使ってみたい方に広がっていって、配信がより盛り上がっていくと思うので、気が向いたらプロフィール欄等でご紹介ください。一応バナーも作成してみました。

さいごに

チャンネルポイントを活用して、配信を盛り上げていきましょう！
（よければフォローもして、コメントもいただければ嬉しいです^^）