> For the complete documentation index, see [llms.txt](https://docs.ccfolia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ccfolia.com/gm-tutorial/screen-panel.md).

# スクリーンパネル

***

## スクリーンパネル <a href="#add-screen-panel" id="add-screen-panel"></a>

マップなどの資料をプレイヤーに共有したい時、スクリーンパネルが便利です！\
スクリーンパネルを用いると、盤面に複数の画像を配置できます。

***

### スクリーンパネルの追加

スクリーンパネルは、「ルームメンバーの権限」でサブルームマスター以上に設定されている人のみ、以下の手順で追加できます。

1. ヘッダーのナビゲーションから<img src="/files/-MSX_DQKWXlzmgICAD2i" alt="" data-size="original">**スクリーンパネル一覧**をクリックする

<figure><img src="/files/9N5nTPyN4GdvV9EYum3u" alt="" width="343"><figcaption></figcaption></figure>

2. **スクリーンパネル一覧**が表示されるので、**＋ ボタン**をクリックする

<figure><img src="/files/F68dig6LL9LpC2rzfIFJ" alt="" width="365"><figcaption></figcaption></figure>

3. 画像選択画面が表示されるので、スクリーンパネルにしたい画像を選択する

<img src="/files/nXIkaoArX0WJ1Ptyxd36" alt="" width="563">

4. 以下のようにスクリーンパネルが追加されるので、[サイズを調整する](#set-screen-panel)

<figure><img src="/files/1GFKSuvV7iCaMmuBEsR1" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}

#### スクリーンパネルを追加する他の方法

「ルームメンバーの権限」でプレイヤー以上に指定されている人は、下記の方法でスクリーンパネルを追加することができます。

* 盤面の右クリックメニュー>**スクリーンパネルボタン**>画像選択
* 画面右下の<img src="/files/-MS3tKWmR_SDBSURNkz-" alt="" data-size="original"> **ボタン>\[**<img src="/files/-MSYJu1evayEzNBirL6r" alt="" data-size="original">**スクリーンパネルを追加] ボタン**>画像選択
* 画像を直接ドラッグ＆ドロップ
  {% endhint %}

{% hint style="info" %}

#### スクリーンパネル一覧ウィンドウの仕様

スクリーンパネル一覧ウィンドウには様々な操作を行なえます。

* 画像の表示順をドラッグ＆ドロップで並び替えることができます。
* ウィンドウを開くと画面中央に表示されますが、ウィンドウ上部をドラッグ＆ドラップすることで、位置を調整することができます。
* ウィンドウ左右や下部をドラッグすると、ウィンドウの幅や長さが変わります。
  {% endhint %}

***

### スクリーンパネルの配置 <a href="#set-screen-panel" id="set-screen-panel"></a>

盤面に追加されたスクリーンパネルの配置やサイズは、マウス操作で変更できます。追加したスクリーンパネルにカーソルを合わせ、移動や変形を試してみましょう。

<table><thead><tr><th width="271">形状・名称</th><th>説明</th></tr></thead><tbody><tr><td><img src="/files/-MSYOZi64FEHLOYq4qjG" alt="" data-size="original"> 移動カーソル</td><td>ドラッグでスクリーンパネルの配置を変更</td></tr><tr><td><img src="/files/-MSYTGlDRByESWWIepY-" alt="" data-size="line"><img src="/files/-MSYTBXkVQoc7MLexXyJ" alt="" data-size="original">拡大/縮小カーソル</td><td>配置したスクリーンパネルの大きさを変更</td></tr></tbody></table>

<figure><img src="/files/kpKaFZhVAkLhxJYVM6v5" alt="" width="563"><figcaption></figcaption></figure>

***

### スクリーンパネルの表示 / 非表示 <a href="#hide-screen-panel" id="hide-screen-panel"></a>

スクリーンパネル一覧の **\[**<img src="/files/-MSYiM4etqnfxC7AjoT7" alt="" data-size="original">**パネルの非表示 ]** ボタンで表示 / 非表示が切り替わります。\
例えば、スクリーンパネル一覧で「スクリーンパネル」と書かれた画像の<img src="/files/-MSYiM4etqnfxC7AjoT7" alt="" data-size="original">ボタンをクリックすると、下のように非表示となります。

<figure><img src="/files/WDSah3cbkMnXy3mVqGmU" alt="" width="563"><figcaption></figcaption></figure>

***

### スクリーンパネルのカスタム <a href="#panel-setting" id="panel-setting"></a>

以下の操作でスクリーンパネル設定ウィンドウを開くことができます。

* スクリーンパネルを右クリック→編集
* スクリーンパネルをダブルクリック(背面画像が設定されていない場合)

<figure><img src="/files/bWpL0vfrlJK4Iap2gInj" alt="" width="494"><figcaption></figcaption></figure>

各項目の概要は以下の通りです。

<table><thead><tr><th width="226">機能</th><th>説明</th></tr></thead><tbody><tr><td>①横幅・縦幅</td><td>設定されるスクリーンパネルの大きさ（横・縦）<br><code>幅「1」は24pxです。</code></td></tr><tr><td>②重なり優先度</td><td><p>表示の優先度</p><p>この値が大きいスクリーンパネルほど手前側に表示される</p></td></tr><tr><td>③メモ</td><td>パネルにマウスカーソルを合わせると表示されるテキストが設定できる<br><code>パネルが非公開になっている間は、カーソルを合わせてもテキストが表示されません。</code></td></tr><tr><td>④配置固定</td><td>パネルの位置とサイズを固定できる</td></tr><tr><td>⑤サイズ固定</td><td>パネルのサイズのみ固定できる</td></tr><tr><td>⑥地形パネルとして扱う</td><td>ショートカットキーによる操作を無効化できる</td></tr><tr><td>⑦画像選択</td><td>パネルに設定する画像が変更できる</td></tr><tr><td>⑧背面画像選択</td><td>パネル裏側の画像を設定し、表裏のあるカードを作れる</td></tr><tr><td>⑨高度な設定</td><td><a href="#clickaction"><strong>クリックアクション</strong></a>が設定できる</td></tr><tr><td>⑩削除</td><td>パネルを削除する</td></tr><tr><td>⑪保存</td><td>パネル設定を保存する</td></tr></tbody></table>

{% hint style="info" %}

#### 重なり優先度

重なり優先度の仕様は以下のようになっています。

* パネルを新しく追加すると、ルーム上存在する一番大きい値と同じ値に設定される
* 同じ値のスクリーンパネルだと、最後に操作したものが手前側に表示される
* 値をマイナスにすることで、前景よりも奥にパネルを配置できる
  {% endhint %}

***

### クリックアクション <a href="#clickaction" id="clickaction"></a>

パネルをクリックしたらチャットにメッセージが送信されるように設定することができます。

#### クリックアクションの設定

クリックアクションは、以下の手順で設定することができます。

1. **高度な設定**をクリック
2. **クリックアクション**をクリックし、**チャットに送信**を選択
3. **送信するテキスト**欄に送信したいテキストを記入

下の画像のようになっていたら設定完了です！

<figure><img src="/files/qqPw3IZxvvbLzsjFxWVv" alt="" width="491"><figcaption></figcaption></figure>

この状態で設定したスクリーンパネルをクリックすると、開いているチャットタブへ設定したテキストが送信されます。

<figure><img src="/files/jUEDckyIQ6eZlrJa2Hhz" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}

#### クリックアクションの活用例

クリックアクションを活用することで、よりスムーズにセッションを進めることができます！

* 送信するテキストにダイスコマンドを設定しておくと、クリックしたらダイスを振れるボタンになります。
* 送信するテキストに`/scene`コマンドを設定しておくと、シーンウィンドウを使用せずとも別な盤面へ進むことができます。
* 送信するテキストに`/pdf`コマンドを設定しておくと、クリックするだけでもココフォリア上でpdfを表示させることができます。
  {% endhint %}