画像でシェアする：PNG
画面下部の「現在の状態をPNGで保存」を押します。画像と残っているパネルを一枚の画像にしてダウンロードします。達成済みパネルは写りません。
縦横比を保ち、長辺最大4096pxで保存します。SNSにはこのPNGを使ってください。QRコードや操作ボタンは入りません。
隠したい画像を選ぼう
- 操作画面の「背景画像」で、PCやスマホにある画像を選びます。PNG・JPG・WebPに対応しています。
- 「パネル数」で枚数、「列数」で横に並べる数を決めます。縦長・正方形・横長の画像に対応します。
- 配信プレビューで、画像全体がパネルに隠れていることを確認します。
画像は11MB以内、縦・横とも16000px以内。パネルを減らすと末尾の目標とカウントが削除されるので、先にJSONで保存しておくと安心です。
目標を決めて、数を増やそう
- 「チャレンジ中」の各項目で「チャレンジ内容」と「目標数値」を入力します。入力後、別の場所を押すと反映されます。
- 達成した回数を ▶ で増やし、押しすぎたら ◀ で戻します。
- 残りが0になると、パネルがふわっと消えます。目標は「達成した目標」欄へ移動します。
達成後も加算できます。途中で目標数値を引き上げると、カウントを保ったまま未達成の欄に戻り、パネルも再表示されます。
見た目を整える
配色パターンを選ぶか、パネルの色と文字の色を指定してください。画面下部の「パネルのフォント」では、見本を見ながら10種類から選べます。文字サイズと改行は自動調整です。
操作画面は白地が基本です。下部の「ダークモード」をONにすると暗い画面へ切り替わります。配信に映るパネルの配色には影響しません。
OBSのブラウザソースに追加する
- 操作画面上部の 「OBS用URLをコピー」 を押します。
- OBSの「ソース」にある「＋」から「ブラウザ」を追加します。
- 「URL」へ貼り付けます。「ローカルファイル」は選びません。
- 幅と高さを画像と同じ縦横比に設定します。横長なら1920×1080、正方形なら1080×1080、縦長なら1080×1920が目安です。
- 操作画面で▶を押し、OBSにも反映されることを確認します。
画像とソースの縦横比が違うと、切り抜かずに余白を付けて表示します。
OBSの中から操作したい場合
OBSの「ドック」から「カスタムブラウザドック」を開き、名前と操作画面のURLを登録します。操作画面は control.html、配信へ映すのは view.html です。どちらもURL末尾の # 以降を残してください。メニュー名はOBSのバージョンで異なることがあります。
スマホでQRコードを読み取る
- スマホを、ツールを動かしているPCと同じWi-Fiにつなぎます。
- PCの操作画面上部、右側の 「スマホ用QRコードを表示」 を押します。
- スマホのカメラで読み取り、表示されたページを開きます。
- スマホに現在の画像・目標・カウントが表示されるまで、PCの操作ページを開いたままにします。 引き継ぎ中はスマホ側の操作がロックされます。
- スマホで▶を押して、OBSの表示が変わることを確認します。
PCとスマホで同時に編集しないでください。操作はどちらか一方で行います。スマホへの引き継ぎが終わればPCの操作ページを閉じられますが、操作に使うスマホのページは配信中も開いておきます。
QRコードを読んでも開けない場合
QR画面の「読み取ったURLが開けないとき」を開き、PCのIPアドレスの候補を選び直してください。VPNなどのアドレスが先に選ばれる場合があります。
自動で見つからない場合、Windowsの「設定」→「ネットワークとインターネット」→接続中のネットワークのプロパティで「IPv4アドレス」を確認し、QR画面へ入力します。通常は 192.168.… や 10.… の形です。
同じWi-Fiでも、ゲスト用ネットワークや端末間通信を禁止したネットワークでは接続できません。PC側のWebサーバーが起動していること、信頼するプライベートネットワーク内で通信が許可されていることも確認してください。
QRコードと操作URLを配信やSNSに載せないでください。同じURLを知る接続可能な端末から操作できてしまいます。
PNGとJSONを使い分けよう
途中から再開する：JSON
「JSONを書き出す」で、画像・目標・カウント・配色・フォントをまとめて保存します。「JSONを読み込む」で復元できます。
別PCへの移行や大切な企画のバックアップに使います。PNGからは進行状況を復元できません。
通常は操作に使ったブラウザへ自動保存されます。ただし、サイトデータの削除やプライベートモードなどで失われる場合があります。大切な内容はJSONでも保存してください。JSONには画像が含まれます。共有先にご注意ください。
困ったときは
- OBSの表示が変わらない
- 操作と表示のURL末尾の
#以降が同じか確認してください。「OBS用URLをコピー」から設定し直すのが確実です。操作ページも開いておきます。 - スマホに「引き継いでいます」と出たまま
- 元のPCの操作ページを開いておいてください。すでに閉じた場合は、元の端末でページを開き直すか、保存済みJSONを通常の操作ページへ読み込んでからQRを開き直します。
- フォントが見本どおりにならない
- 初回の読み込みを少し待ってください。設置する方は
fontsフォルダとfonts.cssの配置を確認してください。 - やり直したい
- 数値だけなら「カウントをすべて0に」、画像や目標も含めて初期化するなら「保存データを削除」を使います。先にJSONで保存しておくと戻せます。
ツールをPCに設置する方へ
- 配布ZIPをすべて展開し、XAMPPの公開フォルダへコピーします。例：
C:\xampp\htdocs\panel-challenge。 - XAMPP Control PanelでApacheを起動します。MySQLは不要です。
http://localhost/panel-challenge/control.htmlを開きます。
隠しファイルの .htaccess と、fonts・vendor・howtoフォルダも含めて配置してください。HTMLの直接ダブルクリックでは動きません。公開フォルダやポートが違う場合はURLを合わせます。
このツールは信頼するLAN内での利用を想定しています。インターネットへポートを公開しないでください。画像・目標の保存先は操作ブラウザです。サーバーは接続中の通信を中継します。