PLAYDECKには、すでに2つの使いやすいリモコンが付属しています： Bitfocus Companion Stream Deck や ATEM をお持ちで、内蔵の Webリモート 単に同じWi-Fiネットワーク上のブラウザを使いたいだけなら。.
「カスタムリモート」が3つ目の方法です。ここに貼り付けます 1つのHTMLファイル, PLAYDECKはこのPC上でそのファイルを配信し、スマートフォンがQRコードを使ってそれを開きます。ChatGPT、Gemini、Claudeは、そのファイルを書き換えるだけです。PLAYDECKはAIと通信することはなく、プレイアウト機器内にチャットボットをインストールする必要もありません。.
これは、Web Remoteが対応していない用途向けです。例えば、3つの大きなボタンだけで済むフロアマネージャー、トラック1台分の大きさの残り時間表示を望むプロデューサー、標準のUIには表示されていない追加のコマンドが1つ必要な番組などです。その用途を平易な言葉で説明すると、AIがHTMLを返します。それを貼り付けるだけです。.
PLAYDECKのプログラムフォルダ内のファイルは編集しないでください。アップデートにより上書きされてしまいます。「Custom Remote」は、アップデート後もそのまま残るように分岐させたバージョンです。.
この記事の内容：
→ 内容
→ サンプルを使用する（ここから始める）
→ AIにそれを変えてもらいましょう
→ コマンドとリアルタイムステータス
→ Web Remoteをベースとして使用
→ 何かがうまくいかない場合
内容
「設定」→「リモコン」→「カスタムリモコン」。.
PLAYDECKはHTMLファイルを保存し、安定したアドレスで提供します：
http://YOUR-PC:11411/custom
新しいレイアウトを貼り付けても、URLは変わりません。ボックスの横にあるQRコードには、その同じアドレスがエンコードされています。スマートフォンとPLAYDECK PCは、同じWi-Fiネットワークに接続されている必要があります。ページが空白のままの場合は、TCPポートを許可してください。 11411 ファイアウォール内で（CompanionおよびWeb Remoteがすでに使用しているのと同じポート）。.
常にただ一つしか 1 カスタムリモコン。1つの箱、1つのファイル、1つのQRコード。これは意図的なものです。あなたはウェブサイトホストを作っているわけではありません。このショーのためのリモコンを作っているのです。.
内蔵のWeb Remoteは / （ポート 11411 のルート）。Companion は Companion のままです。Overlays と Director View はそれぞれ独自のテンプレートのままです。Custom Remote はこれらに取って代わるものではありません。.
サンプルを使用する（ここから始める）
これまでこの作業を行ったことがない場合は、空白のページから始めたり、Web Remoteから始めたりしないでください。 「Sample」から始めてください。これは「Phone-First」方式のボタンボードで、2つのチャンネル、大きなトランスポートキーを備え、Companionが使用するモード（Cue、Play、Cue+Play、Fade）と同じモードで「次のクリップ」／「次のブロック」への移動が可能です。クリップ名が表示され、, 経過時間、残り時間, 、および 残りのブロック. 無限のクリップやブロックには ∞ が表示される（場合によっては ∞ （ループ時間を含みます）。これは、PLAYDECKの進行状況バーに表示されるテキストと同じものです。偽のカウントダウンを表示することはありません。.
- 「設定」→「リモコン」→「カスタムリモコン」。.
- クリック サンプルを読み込む.
- クリック カスタムリモコンの保存と開く.
- スマートフォンのカメラでQRコードをスキャンするか、スマートフォンのブラウザでこのURLを開いてください。.
コマンド一覧を事前に確認しなくても、再生位置の指定、再生、一時停止、停止、プレイリストの先頭からの再生、クリップ単位やブロック単位での移動ができるはずです。.
そのサンプルは、AIに渡すファイルでもあります。そこには、重要な技術的な仕様がすべて盛り込まれています。具体的には、1つのスクリプトタグと、ボタンに記述されたPLAYDECKコマンドです。.
AIにそれを変えてもらいましょう
HTMLボックス内の内容をすべてコピーしてください。それをChatGPT（またはGemini／Claude）に貼り付けてください。どのJavaScriptライブラリを使うかではなく、そのリモートが何のためにあるのかを伝えてください。.
すべてのプロンプトに以下を含めてください：
回線を維持してください <script src="/playdeck-remote.js"></script>. 独自のWebSocketを開かないでください。playdeck-remote.jsを書き換えないでください。. data-cmd コマンド一覧にあるPLAYDECKコマンドです。. data-bind リアルタイムのステータスを表示します。.
次に、ジョブを追加します。例えば、次のように：
フロアマネージャー（チャンネル1のみ）
これをフロアマネージャー用のiPadとして設定してください。チャンネル1のみ。残り時間は大きく表示。ボタンは3つ：「再生」、「一時停止」、「次のクリップを再生」。背景は暗色、金色の枠線なし、タップターゲットは大きめ。.
デザインを一新し、ボタンはそのまま残す
既存のボタンやコマンドはすべてそのまま残してください。放送パネルのように見えるよう、色、間隔、フォントのみを変更してください。現在再生中のチャンネルが一目でわかるようにしてください。.
アクションを1つ追加する
サンプルはそのままにしておいてください。チャンネル 1 の下に、以下を送信するボタンを追加してください。 startoverlay|1|1. ラベルを「OVERLAY 1」と指定してください。.
AIが返したHTMLをボックスに貼り付けてください → 保存と開く → 端末を再読み込みしてください。AIがスクリプトタグを削除してしまった場合、保存するとPLAYDECKがそれを元に戻します。AIが次のようなボタン名を独自に作成した場合、 fromtop または 次へ 実際のコマンドの代わりに、それらのキーを押しても何も起こりません。コマンドリストのコマンドを再び有効にしてください。 data-cmd.
Ctrl+V を使ってボックスに貼り付けることができます。個別の「貼り付け」ボタンはありません。「サンプルの読み込み」または「Web リモートの読み込み」を選択して、ボックスを置き換え、保存してください。「保存」や「開く」を行わずにボックスに入力しても、電話機には反映されません。.
コマンドとリアルタイムステータス
ヘルパースクリプト /playdeck-remote.js WebSocketのみに対応しています。そのファイルをAIにコピーしたり、上書きしたりしないでください。会話に含まれるファイルはHTMLのみです。.
ボタンはPLAYDECKコマンドであり、Companionの「カスタムコマンド」でも使用されているものと同じカテゴリに属します：
ライブテキストは data-bind さらに データチャネル:
<div data-bind="channelName" data-channel="1"></div>
<div data-bind="clipName" data-channel="1"></div>
<div data-bind="elapsed" data-channel="1"></div>
<div data-bind="remain" data-channel="1"></div>
<div data-bind="blockRemain" data-channel="1"></div>
<div data-bind="blockName" data-channel="1"></div>
「経過時間」と「残り時間」はクリップの時間です。「ブロック残り時間」はブロックの残り時間です。「無限」は∞と表示されます。.
コマンドの一覧は、PLAYDECKの「メインメニュー」→「ドキュメント」に記載されています。Companionからカスタムコマンドとして送信できるものであれば、そこに追加することができます。 data-cmd.
ページに、属性だけでは実現できないロジック（スポットカウンターや進行表など）が必要な場合、その追加のJavaScriptは 同じHTMLファイル内で. 使用方法 PlaydeckRemote.send('play|1') そして PlaydeckRemote.onStatus(...). 依然としてファイルは1つだけで、2つ目のWebSocketは依然として存在しない。.
Web Remoteをベースとして使用
「Sample」は、AIとの相性が良いアプローチです。ボタンもコードも最小限で済みます。.
たまには本当に～したくなることがある ニックのWebリモート — クリップ一覧、進行状況バー、チャンネルタブ — ただし、灰色ではなくオレンジ色だったり、時計が大きかったり、タブが非表示になっていたりする。そして：
- カスタムリモコン → Webリモートを読み込む → 保存して開く。.
- これで、組み込みのWebリモートのコピーが以下の場所に保存されました。
/カスタム. オリジナルのWeb Remoteは/は変更されていません。. - そのHTMLを、以下の厳格なルールに従ってAIにコピーしてください：
このページは「PLAYDECK Web Remote」です。CSSとラベルのみを変更してください。プレイリスト、進行状況バー、チャンネルタブを生成するJavaScriptは書き換えないでください。 <script src="/playdeck-remote.js"></script>.
AIがそのJavaScriptを「簡略化」してしまうと、通常、クリップリストが動作しなくなります。Web Remoteを再度読み込み、より単純なリクエスト（色のみ）で再試行してください。.
「編集して」などとは決して言わないでください webremote.html ディスクに保存し、次回の再インストールに備えてバックアップをとっておきましょう。それが「Custom Remote」の役割です。.
何かがうまくいかない場合
電話の空白ページ. PLAYDECKのPCと同じWi-Fiに接続していますか？TCP 11411番ポートは許可されていますか？まずはPCで「保存」と「開く」を試してみてください。アドレスは http://IP:11411/custom — httpsでもなく、別のポートでもありません。.
ボタンは何も反応しない. scriptタグは残しておく必要があります。. data-cmd 有効なコマンドでなければなりません（再生|1, ではなく 再生). 保存および開いた後は、ページを再読み込みしてください。.
タイムズが固まる、またはリストが古くなっている. 携帯電話のページを再読み込みしてください。Web Remoteでのコピーの場合は、数秒お待ちください。そのページでは、短い間隔でプレイリストのデータが更新されます。.
時計の代わりに∞. クリップまたはブロックの再生時間は無限（ライブ、ループ、クロック）です。PLAYDECKにも同様に表示されます。.
通常のWeb Remoteを変更したかったのですが. 実行した操作：「Load Web Remote」は、そのページであり、「Custom Remote」として提供されています。そのままにしておいてください。 / 依然として標準のUIを使いたいという方すべてのために。.
コンパニオン / Stream デッキ. ハードウェアに関しては、引き続きCompanionをご利用ください。Custom Remoteはスマートフォンやタブレット上のHTMLであり、モジュールの代わりになるものではありません。.
