ガチゃ～る

ツールについて

このツールは、ガチャの抽選履歴と排出物の記録をするツールで、カスタムブラウザドックの入力欄を操作して、ブラウザソースで結果を表示します。

仕組み

• 入力用HTML（input.html）をカスタムブラウザドックに読み込み、表示用HTML（view.html）をブラウザソースに読み込み、表示します。
• ブラウザソースの対話機能を利用して、右クリックすると、フォントと色を変更することができます。
• !importantを追加すればカスタムCSSでも指定を制御できます。

設定方法

1. カスタムブラウザドックを表示する

   

   OBSのメニューからドックの中の「カスタムブラウザドック」を選択します。

   

   カスタムブラウザドックは左のようになります。

2. 入力用HTMLを追加する

   • カスタムブラウザドックの「URL」欄に下記のURLを入力
   • ドック名はわかりやすく「ガチゃ～る 入力」等にしてください。
     わかりやすければ何でも構いません。
   • 入力したURLが必ず、http://127.0.0.1:11180/から始まっていることを確認してください。

3. 初期設定を行う

   

   カスタムブラウザドックに追加すると、ガチャタイプの登録が表示されます。

   ガチャ名を入力して「追加」ボタンをクリックしてください。
   例：特別募集／〇〇〇ガチャ等

4. 表示画面をソースへ追加する

   

   ガチャ結果の項目にあるへマウスを合わせると表示が変わります。

   「このボタンをソースにドラッグ＆ドロップ」をOBSのソースにドラッグ＆ドロップしてください。

   

   上記の表示がされるので、「はい」をクリックしてください。

   

   ガチャ結果が表示される項目が表示されます。

入力画面の使い方

ガチャ記録エリア

ガチャタイプと回数の選択
記録したいガチャタイプを選択後、実行する回数を選択してください。

目的の排出物が出た場合
排出物欄に項目名を入力し、「排出物名と抽選履歴を記録」のボタンをクリックしてください。

目的の排出物が出なかった場合
排出物欄には何も入れず、「抽選履歴を記録」のボタンをクリックしてください。

記録に問題がない場合
「次のガチャを記録」のボタンを押してください。次のガチャの記録画面に遷移します。

記録が間違えている場合
「記録を取り消し」のボタンを押してください。直前の記録が無効化されます。

結果表示エリア

ガチャタイプ別の結果表示
ガチャタイプごとに抽選回数と排出物名と目的排出物数が表示されます。

排出物名の変更機能
排出物の後ろにある鉛筆マークをクリックすると排出物の名称を変更できます。

排出物名の変更
変更したい名称を入力してから「実行する」ボタンを押してください。

ガチャタイプの管理エリア

ガチャタイプの追加機能
ガチャタイプ名を入れて「追加」ボタンを押すと、新しいガチャタイプが追加されます。

ガチャタイプ名の変更機能
変更したいガチャタイプの名前を変更して青いボタンを押してください。変更が反映されます。
※即時反映されます。

ガチャタイプの削除機能
削除したいガチャタイプの赤いボタンを押してください。ガチャタイプが削除されます。
※すべてのガチャタイプを削除すると初期状態に戻ります。

表記設定エリア

単位の変更
SSSではなく星6や、回を連にするなど、お好みの単位に変更できます。

データ管理エリア

データリセット
排出物と排出回数のデータを削除します。

ガチャ結果をコピー
排出物と排出回数のデータをクリップボードにコピーします。

出力画面の使い方

対話画面の表示方法

ソースを右クリック
ソースを右クリックすると「対話」が表示されるのでクリックしてください。

ソースを選択後の上部
ソースを選択すると、上部に「対話」が表示されるのでクリックしてください。

カスタマイズメニューの表示

対話画面を右クリック
対話画面を表示して、画面を右クリックするとメニューが表示されます。

表示のカスタマイズ

タイトルの背景色の変更
タイトルの背景色を変更できます。

タイトルの文字色の変更
タイトルの文字色を変更できます。

フォントの変更
フォントを変更できます。

リストの位置の変更
リストの位置を変更できます。

よくある質問

「そのページを読み込めませんでした！」が表示されてしまいます。

• わんコメを利用しているため、わんコメが起動されていない状態では表示されません。
• わんコメを起動してから「クリックして再試行」をクリックしてください。
  わんコメを利用したアプリなので、わんコメは必須です。

仕様

梱包ファイル

• index.html　説明ファイル（このファイルです）
• input.txt　入力用HTMLファイル
• view.html　OBS読み込みファイル

カスタムCSS

下記のCSSをコピーしてOBSのカスタムCSSに設定すると反映できます。※!importantがない場合、反映されないことがあります。

:root {
	/* タイトルの背景色 */
	--ktx-card-title-color: #666!important;

	/* タイトルの文字色 */
	--ktx-card-title-text-color: #fff!important;

	/* 結果部分の背景色 */
	--ktx-card-content-color: #fff!important;

	/* 結果部分の文字色 */
	--ktx-card--content-text-color: #666!important;
}