主に2つの使い方があります。

ゲームコントローラーの入力を配信画面に表示する（Controller/KeyLogモード）
ゲームコントローラーのボタンに動画・音声・画像・HTMLファイルを割当てる（Deckモード）

カスタマイズやDeckモードで制限はありますがダウンロードせずに動かすことは可能なので、XInput対応ゲームコントローラーを接続の上、お試し・動作確認してみてください。
初期設定は「Controller/KeyLogモード」ですが、パラメーター設定でモード変更など行えます（デバッグモードの「パラメーター設定ジェネレーター」が便利です）。

ダウンロードはGitHubページ上部にある緑色の［Code］ボタンを開き、［Download ZIP］ボタンからできます。

元々は自分用として格闘ゲーム「ストリートファイターV」のゲーム実況用に開発しました。
配信ソフトに「OBS」を使っているので、説明もOBS向けになっていますが、他の配信ソフトでもOBSと同等の機能があれば使用はできると思います。

コントローラースキンは画像の差し替えだけでもカスタマイズ可能（ベースの画像と押したボタンの差分画像で構成）にしています。
設定・カスタマイズは配信ソフト「OBS」のブラウザソースのプロパティから、URLパラメーター設定とカスタムCSSで行います。

注意・制約・制限

プレイするゲームとは別にコントローラーの入力情報を取得・処理しているため、入力内容が一致しない場合があります。

OBSのブラウザソースとして本ソフトウェアを表示する場合、一部のコントローラーが認識できない場合があります。
DualShock4（PS4純正パッド）は無線接続だと入力情報を取得できなくなる場合があり、このような時は有線接続をお試しください。

Gamepad API

入力情報の取得はGamepad API（Web API）を使用（依存）しているため、XInput未対応のゲームコントローラーやキーボードなどには対応しておりません。

パソコンに接続している最大4つまでのゲームコントローラーを識別でき、パラメーター設定「controller」で入力を取得する対象のゲームコントローラーを指定できます。
PCゲームをゲームコントローラーでプレイする場合でも、他に接続しているゲームコントローラーを指定することでDeckモードを使用することができます。

Gamepad APIの仕様上、ループ処理でゲームコントローラーの情報（どのボタンが押されているかなど）を取得しているため、ループ間隔の空白の時間にのみ押されたボタンの情報は取得できません。
ループ間隔はパラメーター設定「delay」で指定可能できます。

ストリートファイター6

ストリートファイター6の「左右同時入力はニュートラル」と「上下同時入力はニュートラル」の方向入力ルールへのプログラム的な対応は基本的に行っていません。キーログではCSSで対応しており、方向入力は余分に表示されやすく、トレモなどゲーム内との表示と相違が発生しやすいです。特に方向入力をボタンとレバーで併用して行う場合は余分に表示されやすくなります。

仕様変更

version.01.05.03以降

バージョン「01.05.03」から、コントローラースキンの表示位置が右下を起点に表示するように仕様変更になりました。

キーログは従来どおり、左上を起点に表示したままです。
ただしパラメーター設定「styles」に「KeyLog_Horizontally_DU」を指定している場合は、コントローラースキンは右上を起点に、キーログは左下を起点にして表示します。

これはキーログの横表示方向対応による仕様変更になります。

使い方

配信ソフトOBSのソースに、本ソフトウェア（index.html）を「ブラウザ」として設定することで使用できるようになります。

その際はブラウザソースのプロパティの「URL」に「http://absolute/C:/GameInputDisplay/index.html」のように設定してください（ローカルファイルパスの頭に「http://absolute/」をつける）。
「ローカルファイル」として設定するとパラメーター設定ができなくなるので注意してください。

ダウンロードせずに「https://codelelou.github.io/GameInputDisplay/index.html」と設定することでも動作はしますが、オフライン環境やサーバーが落ちている時などは使用できませんし、処理に遅延が発生しやすいかもしれません。
またDeckモードでローカルファイルを指定する場合はダウンロードして使用する必要があります（ブラウザの制約のため）。

幅と高さは配信画面と同じにすると良いと思います（OBSの初期設定は800×600と小さめ）。
DeckモードをOBSで使用する場合は「OBSを介して音声を制御する」の項目を有効にしていると、OBS側でも音声の調整ができるようになるかと思います。

OBS起動のたびにコントローラースキンの各ボタンの差分画像の読み込みに時間がかかる場合があります。配信前に全てのボタンやスティックを操作して差分画像を表示させておくことで画像がキャッシュされて遅延が改善されるかと思います。
これは標準のコントローラースキンをシンプルにしてCSS初心者でもカスタマイズに挑戦しやすいように、差分画像の自動キャッシュしない作りにしているためです。

Controller/KeyLogモードのサイズ・表示位置などの調整

配信ソフトOBSを使用する場合の解説になりますが、他の配信ソフトでも似たような機能や項目があれば同じように設定できるかと思います。
他のソースと同じような感覚で配信ソフトのシーン・ソース管理機能でサイズや表示位置、不透明度の設定する手順になります（カスタムCSSの設定が不要）。

まずは本ソフトウェア専用シーンとして、新規「シーン」を追加します。
このシーンのソースにはブラウザソースとして本ソフトウェアを追加します。

URLは「http://absolute/C:/GameInputDisplay/index.html」のように設定（ご自身の環境に合わせて「http://absolute/」以降を変更してください）し、幅と高さは配信画面と同じにします。
本ソフトウェアを表示しない時に無駄なプログラムは走らないように「表示されてないときにソースをシャットダウン」の項目も有効にします（チェックを入れる）。

次にゲームコントローラー用とキーログ用として2つのシーンを作成します。
これらのシーンのソースには、シーンソースとして先程追加した本ソフトウェア専用シーンを追加します（シーンを分けることで個別に不透明度の設定などができるようになります）。

ゲームコントローラー用シーンにはゲームコントローラーのみが、キーログ用シーンにはキーログのみが表示されるようにクロップ（切り取り）します。
拡大縮小するような感じでサイズ調整をaltキーを押しっぱなしですることでクロップの調整ができます。
キーログはゲームコントローラーの入力がないと表示されないので、パソコンに使用するコントローラーを接続し、いくつか入力を行ってキーログを表示してください（ゲームの起動は不要です）。

サイズ調整をリセットしたい場合は、リセットしたいソースを右クリックし「変換」メニューの「変換をリセット」を実行してください（そのソースがロック状態の場合はロックを解除してください）。

あとは他のソースと同じように、お好みのシーンのソースにゲームコントローラー用シーンやキーログ用シーンをシーンソースとして追加し、サイズや表示位置の調整をするだけです。
そのシーンソースのフィルタに「カラーキー」を追加することで、「不透明度」の調整もできます。

なおコントローラースキンの縦横の比率はスキンによって異なりますし、キーログも表示するボタン数もキーログ用カスタムCSS（キーコンフィグ）で異なります。コントローラースキンとキーログの切替はパラメーター設定「styles」で行います（初期設定はPS4純正パッド向けになってますが、標準でアケコンやHitBox風のコントローラースキンや、ストリートファイターV使用のキーログを用意しています）。

コントローラースキンのカスタマイズなどは最初に作成したシーンのブラウザソースの「カスタムCSS」で設定してください。
複数のコントローラースキンをカスタムCSSに別スタイル名で設定しておけば、そのブラウザソースのURLのstylesパラメーターを変更することでスキンを切替えれます。

シーンソースの切替えでスキンを切り替えたい場合は、スキン別にシーンを作成し、それぞれにブラウザソースとして本ソフトウェアを設定し、さらにそれらのシーンを元にスキン毎にゲームコントローラー用とキーログ用のシーンを作る必要があります。
ゲームによってコントローラーが違うなど頻繁にスキンを切替える場合は、スキン別にシーンを作成する方法が向いているかもしれません。

後はお好みに応じてパラメーター設定を行ってください。
例えばアケコンでストリートファイターVをプレイする場合は、URLを「http://absolute/C:/GameInputDisplay/index.html?styles=ArcadeController,KeyLog_StreetFighterV」のようにしてパラメーター設定を行います。

パラメーター設定

本ソフトウェアの各種設定は、「index.html?delay=4&log=20&excludes=8,9,11&styles=ButtonBox,KeyLog_SFV_B0LK_B1MK_B2LP_B3MP_B4Throw_B5HP_B6VTrigger_B7HK」のようにパラメーターから指定できます。
スペースや全角などが含まれているような場合は、正常に本ソフトウェアが動作しない場合があります。

パラメーター設定「modes」に「Debug」を指定（「index.html?modes=Debug」）することで、デバッグモードから「パラメーター設定ジェネレーター」を使用できます。

modes

既定値：Controller,KeyLog

Controller
KeyLog
Deck
Debug

以上のモードがあり、「Controller」と「KeyLog」は併用できます。

コントローラーかキーログのどちらか一方のみを表示したい場合は「index.html?modes=Controller」のように指定します。

デバッグモード（「index.html?modes=Debug」）が有効の場合は、コントローラーもキーログも両方表示されます。
デバッグモードでは本ソフトウェアのバージョンや各パラメーター設定内容の確認、パソコンに繋いでいるコントローラーの情報（接続Indexやボタン番号など）を確認できます。

Controller（コントローラースキン）

ゲームコントローラーを模した画像（スキン）が表示され、視覚的に押しているボタンなどを表示します。

KeyLog（キーログ）

どのボタンを押したかなど、入力履歴を表示します。

Deck（デッキ）

ゲームコントローラーの各ボタンに動画・音声・画像・HTMLファイルを割り当てることができます。
ファイルの割り当てはパラメーター設定「deck」で指定します。

OBS（Windows10）でバックグラウンド操作できることを確認していますが、使用するハード・ソフトや使用環境・状況などによってブラウザや配信ソフトでバックグラウンドで動作できない場合があります。

動画・音声ファイルはループ再生されますが、同じボタンを押すことで再生・一時停止を切り替えることができます。

配信の待機用ファイルやBGMをボタン操作で切り替えるといった使い方ができます。
Stream Deckのような配信ソフトのシーンを切り替えたり、アプリケーションを起動したり、マクロを登録したりする機能はありません。

知識・技術があればHTMLファイルに特殊なプログラムを行わせることができるかもしれません。

Clear（クリアボタン）

既定値（ボタン番号）：0

クリアボタンを押すと表示・再生中のファイルを非表示・停止します。
表示したファイルを非表示にする時はこのクリアボタンを押してください。

止めたい音声ファイルのボタンがわからなくなったような時にも、このクリアボタンを押すことで停止することができます（クリアボタンは「一時停止」ではなく「停止」になります）。

非表示をクリアボタンで行う仕様は、ライブ配信中に咄嗟に画像で配信画面を隠したいような時に、ボタンを2回押したせいで画像が非表示になってしまい隠せていないようなトラブルを避けるためです。

HTMLファイル内の動画や音声はそのHTMLファイルの処理に依存しており、クリアボタンを押しても一時停止・停止の処理は行いません（HTMLファイル自体は非表示になります）。
このような場合はリセットボタンでメモリ上の読み込んだファイルを削除することで停止できると思います（ファイル自体は削除されません）。

Reset（リセットボタン）

既定値（ボタン番号）：11

メモリ上の読み込んだファイルを削除します（ファイル自体は削除されません）。
音量はリセットされません。

通常はリセットボタンではなくクリアボタンを使います。
ファイルを再読み込みしたいような場合にリセットボタンを使います。

音量調整

既定値：（十字キーボタン・左スティックの上下）

十字キーボタン・左スティックの上下入力で動画・音声ファイルの音量の上げ下げを行えます（HTMLファイル内の動画・音声はHTMLファイル側で処理が必要です）。
既定音量は「50」で、ミュートから最大まで（0～100）を10間隔で調整できます。

音量は全ファイル共有で、ミュート状態で別ファイルを再生してもミュートのまま再生され、最大状態では音量最大で再生されます。
特に最大音量に差があるファイルを使用するような場合は注意してください（配信ソフトで音量に制限をかけれる場合があります）。

十字キーボタンはパラメーター設定「directionals」で割り当てるボタン番号を変更できるので、存在しないボタン番号に割り当てることで、十字キーボタンにもファイルを割り当てることができます。
十字キーボタンとは別に左スティックがあるコントローラーを使用する場合は割り当てれるボタンを増やすことができます。

スキップ

既定値：（十字キーボタン・左スティックの左右）

十字キーボタン・左スティックの左右入力で動画・音声ファイルのスキップ（前後5秒）できます（HTMLファイル内の動画・音声はHTMLファイル側で処理が必要です）。

複数の動画・音声ファイルを再生している場合は、それらの再生中のファイルのみスキップされます。
音声ファイルを再生しながら動画をスキップすると、音声ファイルも同じようにスキップします（一時停止中の動画は表示中でもスキップはできません）。

controller

既定値：0

複数のコントローラーを繋いでいる場合は、入力を表示したいコントローラーのIndexを指定してください。
最大4台までのコントローラーを認識できます（0～3）。

デバッグモードで接続中のゲームコントローラーのIndexを確認することができます。

delay

既定値：8

ゲームコントローラーの入力状態はループ処理でチェックしており、そのループの最短の間隔をミリ秒で指定することができます。
この仕様はGamepad APIによるものです（ボタンが押された時にのみ処理を行うことができないため、ループ処理でゲームコントローラーの情報を取得しています）。

そのため再取得するまでの空白の時間（delay）の入力情報は取得できませんし、複数同時押しの場合でもミリ秒単位のズレがあると同時押しとして表示されない場合があります。
これは本ソフトウェアでの表示であり、プレイ中のゲーム内の処理とは関係ありません。

ループ間隔が短すぎるとパソコンに過度の負荷が掛かったり、ブラウザの制約などにより指定した間隔で動作しない場合があります。
4ミリ秒未満を指定した場合は、ブラウザの内部処理で強制的に4ミリ秒を基準として処理が行われることが多いようです。

Windowsであればタスクマネージャーの「プロセス」から配信ソフトのCPU使用率などをチェックできます（ゲーム未起動・未配信状態で、本ソフトウェアの専用ソースのみ表示してチェックする方が負荷の切り分けがしやすいかと思います）。
ゲームコントローラー入力中の方が多くの処理が行われるため、ボタン等を色々押しながらチェックしてください。

excludes

既定値はありません。

入力を無視したいボタンの番号を「index.html?excludes=8,9,11」のように、半角カンマ区切りで指定します。

これは本ソフトウェア用の設定のため、プレイ中のゲームなどには影響しません。

converts

既定値はありません。

ボタン番号を変換したい場合に「index.html?converts=10-4,10-1,11-12,11-14,11-15,9-0」のように、半角カンマ区切りで指定します。
「x-y」と「x」には変換元の番号（押されたボタン）を、「y」には変換先の番号を指定し、それらを「-」（半角ハイフン）で繋ぎます。
1つのボタン番号に複数のボタン番号を割当てたい場合は「14-2,14-3,14-4」のように指定し、変換元のボタンも押されたままにしたい場合は「14-2,14-3,14-4,14-14」のように変換元と変換先のボタン番号のセットも指定してください。

これは本ソフトウェア用の設定のため、プレイ中のゲームなどには影響しません。

パラメーター「excludes」が優先されるため、「excludes」で指定したボタン番号を「converts」で変換元に指定していしても入力そのものが無視されます。
ただし「excludes」で指定したボタン番号を「converts」の変換先に指定することは可能です。

directionals

既定値：12-13-14-15

バージョン「01.03.00」から追加したパラメーター設定になります。

上 = ボタン番号12
下 = ボタン番号13
左 = ボタン番号14
右 = ボタン番号15

十字キーボタンの上下左右のボタン番号を指定します。

ボタン番号（半角数字）を半角ハイフン（「-」）で左から順に「上」「下」「左」「右」と繋ぎます。
複数のボタン番号を指定する場合は「index.html?directionals=10,12-11,13-14-15」のように、半角カンマ（「,」）で区切ります。

パラメーター「excludes」が優先されるため、「excludes」で指定したボタン番号を指定しても入力そのものが無視されます。

log

既定値：30

キーログの最大表示件数を指定します。
1～100の整数に対応しています（ログ数が多いほど負荷が高くなります）。

入力内容によってはキーログのCSS（キーコンフィグ）により非表示になるログもあるため、指定件数より実際に表示されるのは少ない可能性があります。

items

既定値：40

キーログのアイテム数を1以上の整数で指定します。
主にカスタムキーコンフィグ（カスタムCSS）用で、キーログに多種類のアイコンを表示する場合に設定するパラメーターとして用意しています。

キーログの最大件数（行数）はパラメーター設定「log」で行います。

deck

Deckモードでゲームコントローラーのボタンに割り当てるファイルを指定します。
対応ファイルは次の通りです。

ビデオ（*.mp4 *.webm）
オーディオ（*.wav *.wave *.mp3 *.ogg *.aac *.flac）
画像（*.png *.jpeg *.jpg *.gif *.bmp）
Webページ（*.html *.htm）

一部のファイルは正常に表示・再生できない場合はあります。
ブラウザに依存しているため、H.265/HEVCの動画ファイルなどはOSやブラウザなどが対応しないと正常に表示・再生できません。

ファイルの種類は拡張子（「.mp4」や「.png」など）でファイルの種類を識別しており、いずれにも当てはまらない場合はWebページとして扱います。
Webページはiframe（仮想ブラウザフレーム）として表示するのですが、Webサイト側でフレーム表示を禁止しているような場合は、Webページのアドレスを指定しても正常に表示されません。

１つのボタン番号に複数のファイルパスを指定した場合、そのボタンで複数のファイルの表示・再生を切り替えます。
複数のボタン番号に同じファイルパスを指定した場合、そのファイルを複数のボタンで共有するため複数表示・再生にはなりません（同じファイルをコピー・リネームする必要があります）。

ファイルパスは絶対パス・フルパスか相対パスで、「{ボタン番号}-{ファイルパス}」のようにボタン番号とファイルパスを半角ハイフン（「-」）で繋ぎます。
複数指定する場合は半角カンマ（「,」）で区切ります。

**ファイルパスはURLエンコードが2回必要（「{ボタン番号}-`encodeURIComponent

GameInputDisplay

Install / Use

README