待機画面 Tips Maker

【はじめに】
よふかし商店の「待機画面Tipsメーカー」は、サイト上で文章とデザインを編集し、OBSで表示するためのHTMLファイルを書き出すツールです。
メーカー本体のダウンロードやインストール、app.js・style.cssの配置は不要です。サイトのメニューからメーカーを開いて利用してください。編集・保存操作はPCのChrome・Edgeを推奨します。
編集画面を開くにはインターネット接続が必要です。書き出したOBS用HTMLは、PCに保存してOBSのローカルファイルとして使います。

【最初に覚えておくこと】
・メーカー：サイトで開く編集画面です。OBSにはこのページのURLを指定しません。
・OBS用HTML：配信で表示するファイルです。書き出してPCに保存し、OBSに指定します。
・編集データ（JSON）：後から再編集するためのバックアップです。OBS表示用ではありません。
・ブラウザ内の自動保存：同じ端末・ブラウザで続きを編集するための下書きです。HTMLの書き出しとは別です。

【使い方】
1. TipsのNoと本文を入力します。追加・複製・削除・上下移動ができます。
   編集欄の「Tips」「画面の設定」タブで切り替えます。切り替えても入力内容は保持されます。
   各Tipsの「このTipsをプレビュー」で、そのTipsだけを固定表示できます。確認中のTipsや画面設定を編集するとプレビューに反映します。「全件の再生に戻る」で通常再生に戻ります。
   この確認用の選択は、OBS用HTMLやバックアップの表示対象・表示順には影響しません。
2. 画面の設定で色、文字、表示時間を調整し、プレビューを確認します。
   プレビュー上の「出力画面サイズ」で1920×1080（横型）／1080×1920（縦型）を選べます。縦型では本文幅や各要素の基準位置も縦画面に合わせて調整します。
   サイズは自動保存・編集データ・OBS用HTMLに反映されます。OBSのブラウザソースの幅と高さも、選択したサイズに設定してください。
   プレビュー上の「確認用の背景」で黒市松／白市松を選べます。白文字には黒市松、暗い文字には白市松が便利です。市松模様の上に、設定した背景色を指定の不透明度で重ねて表示します。0で市松が完全に見え、100で背景色が市松を覆います。市松模様はOBS用HTMLには含まれません。
   設定変更はプレビューを再読み込みせず、その場で反映します。表示中のTipsは維持されますが、再生中は通常の時間経過で切り替わります。
   「一時停止」でTipsの切り替えとゲージを止めて調整でき、「再生」で続きから再開します。一時停止状態はOBS用HTMLには反映しません。
   番号・本文・ゲージ下文字の上下位置は、0が元の位置、＋が上、－が下です（選択した出力画面サイズ基準のpx）。
   本文字間・本文行間は、0が従来の間隔、＋が広く、－が狭くなります。本文サイズに応じた基準間隔への加算値です。行間の最小値は1pxです。
   これらの項目は左右の−／＋ボタン、または数値入力で調整できます。古い編集データでは追加項目は0になります。
3. 編集内容はブラウザ内に自動保存します。「編集データを保存（バックアップ）」でJSONファイルにも保存できます。「編集データを読み込む」でバックアップを復元できます。
4. 「OBS用HTMLを書き出す」でOBS表示用HTML.htmlを自分のPCに保存します。サイト上のメーカーから書き出したファイルを使ってください。
5. OBSにブラウザソースを追加し、「ローカルファイル」にチェックを入れて、保存したOBS表示用HTML.htmlを指定します。横型は幅1920・高さ1080、縦型は幅1080・高さ1920に設定してください。

【保存先のおすすめ】
PC内に「配信用素材/Tips」などの専用フォルダを作り、OBS表示用HTML.htmlを保存するのがおすすめです。サイトのファイルと同じ場所に置く必要はありません。更新時も同じ場所・同じ名前で上書き保存してください。
ブラウザが自動でダウンロードフォルダに保存した場合は、専用フォルダへ移してからOBSに指定してください。OBSで指定した後にファイルを移動した場合は、OBSの参照先も選び直してください。

【上書き保存】
Chrome・Edgeなど保存先選択に対応した環境では、初回に保存画面が開きます。既存のHTMLを更新する場合は、そのファイルを選んで上書きを確認してください。
サイトの編集画面を開いている間は「OBS用HTMLを上書き保存」で同じファイルに保存します。「別の保存先に書き出す」で保存先を変更できます。
サイトの編集画面の再読み込み・再起動後は、保存先をもう一度選んでください。非対応環境では従来のダウンロード方式になり、(1)などが付く場合があります。

【変更をOBSに反映するには】
サイトの編集画面の変更はOBSには自動反映されません。
変更後は再びOBS用HTMLを書き出してください。
使用中のHTMLに上書きした場合は、OBSのブラウザソースを再読み込みしてください。
別名・別の場所に保存した場合は、OBSのローカルファイルで新しいHTMLを指定してください。
ブラウザによってはダウンロード時にファイル名に(1)などが付くため、保存先と名前を確認してください。

【データについて】
Tipsや有効な設定の変更はブラウザ内に自動保存し、次回起動時に復元します。入力途中の無効な数値は保存せず、最後の有効な設定を使います。
同じ端末・同じブラウザ・同じプロファイルで、同じサイトを開いてください。別端末・別ブラウザへの切り替えやサイトのURL（ドメイン）の変更では、下書きは自動で引き継がれません。移行時はJSONバックアップを書き出し、新しい環境で読み込んでください。
「キャッシュされた画像とファイル」だけの削除では通常残りますが、「Cookieとその他のサイトデータ」など保存データも削除すると、自動保存した内容が消える場合があります。
プライベート／シークレットモードでは終了時に保存内容が失われます。ブラウザの設定や保存容量によって自動保存できない場合もあります。画面の保存状況を確認してください。
大切なデータは「編集データを保存（バックアップ）」でJSONファイルにも保存してください。ブラウザ内のデータが消えても、保存したJSONから復元できます。
自動保存は運営者のサーバーやPC内のフォルダへのファイル保存ではなく、利用者のブラウザ内への保存です。同じ編集画面を複数タブで編集すると、最後に保存した内容が優先されます。
OBS用HTMLは表示専用です。再編集するにはJSONの編集データを保存してください。
出力したHTMLは単独で動作するため、OBSでサイトの編集画面を開き続ける必要はありません。
空の本文は書き出しから除外します。1件のときは本文を保持してゲージのみ繰り返します。
複数件は全件をランダムに一巡し、一巡の境目でも同じ項目が連続しません。
「Tipsの表示順」で「一覧の順番通り」に変更できます。一覧の上から表示し、最後まで進むと最初に戻ります。番号順ではありません。
表示順はプレビュー・OBS用HTML・編集データに反映されます。以前の編集データではランダムが初期値です。
同じ本文を別の項目に登録した場合は、連続することがあります。
本文が長い場合は文字サイズ・改行・文章量を調整してください。警告は目安で、プレビューで実際の表示を確認してください。
フォントは利用端末にある明朝体／ゴシック体を使用します。端末によって見た目が変わります。
Chrome・Edgeなど、PCフォントの取得機能に対応した環境では「PCのフォントを読み込む」ボタンが表示されます。アクセスを許可するとPC内のフォントを選択できます。
ブラウザの対応状況や許可設定によって取得できない場合、また取得機能がない環境では、基本の明朝体／ゴシック体をご利用ください。
フォント本体は同梱・埋め込みしません。出力したHTMLを別のPCで使う場合は、同じフォントのインストールが必要です。ない場合や日本語非対応の場合は代替フォントで表示します。
PCフォントを含む編集データを取得機能がない環境で読み込むと、フォント設定は明朝体に戻ります。画面の案内を確認してください。
背景を透過する場合は背景の不透明度を0にします。
見た目の初期化では表示時間も初期値に戻りますが、Tipsは保持します。

【初期化】
「編集データを読み込む」の横の「初期化」で、Tipsをすべて削除し、設定を初期値に戻します。実行前に必ず確認が表示されます。キャンセルすると変更しません。
事前に「編集データを保存（バックアップ）」で保存することをおすすめします。ブラウザ内の自動保存も初期化後の内容に更新します。書き出し済みのHTMLやバックアップファイルは削除しません。
フェードイン・フェードアウトは各0〜10秒で設定できます（初期値0.7秒）。1件の表示はフェードイン→指定の表示時間→フェードアウトの順です。0秒は瞬時に切り替えます。Tipsが1件の場合と個別プレビューでは文字を固定表示します。

【ゲージサイズ】
ゲージ幅は100〜1600px、高さは8〜100pxで調整できます（初期値530×22px）。中央揃えを維持し、幅は画面の左右40pxの余白に収まる範囲に制限されます。
【入力・保存】
Tipsは最大1000件、番号40文字、本文20000文字です（絵文字などは複数文字分として数える場合があります）。表示範囲内に収まる文章量でご利用ください。HTMLの保存画面でエラーになる場合は「通常ダウンロードで保存」も利用できます。
OBS用HTMLは配信用、JSONは再編集・バックアップ用です。「編集データを保存」でOBS用HTMLは更新されません。