# スクリーンパネル

***

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

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

***

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

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

1. ヘッダーのナビゲーションから<img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSXGf4T2g-QE8BKAR_-%2F-MSX_DQKWXlzmgICAD2i%2Flayers-24px.svg?alt=media&#x26;token=6d776fe8-cfef-48d1-8f3c-df47dd17a51f" alt="" data-size="original">**スクリーンパネル一覧**をクリックする

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2F2LxBKg5y6MPTqB9zEEag%2F03-4_forGM_screenpanel_03_header_modify.png?alt=media&#x26;token=9f702281-ae0b-458e-8259-ff7443cdd2ba" alt="" width="343"><figcaption></figcaption></figure>

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

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FVLdoeVAXE7jRrldo6sg3%2F03-4_forGM_screenpanel_04_screenpanel_list_modify.png?alt=media&#x26;token=a2c99bac-1061-4a51-9611-d3dfee9a1423" alt="" width="365"><figcaption></figcaption></figure>

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

![](https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FuNGRbkRqjjXUnNKUgNyT%2F03-4_forGM_screenpanel_01_imageselect.png?alt=media\&token=0615528b-b326-460f-b9ac-862fc06a2a54)

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

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FLvOlPXG8HoRZhxOHbvJA%2F03-4_forGM_screenpanel_02_addscreenpanel.png?alt=media&#x26;token=86fb55bd-4de5-4cf5-a546-103d970c70e3" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}

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

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

* 盤面の右クリックメニュー>**スクリーンパネルボタン**>画像選択
* 画面右下の<img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MS3qZejjAVC3bZL49Zq%2F-MS3tKWmR_SDBSURNkz-%2Fedit-24px.svg?alt=media&#x26;token=b9ed9dc8-a63e-4f04-970a-24dbc721cf73" alt="" data-size="original"> **ボタン>\[**<img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSXd1_OkkVpulzznWFK%2F-MSYJu1evayEzNBirL6r%2Fadd_photo_alternate-24px.svg?alt=media&#x26;token=2cc43f25-d55d-4772-8bc3-7997be9fc9f8" 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="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSYKA28k3SkNifMfRtx%2F-MSYOZi64FEHLOYq4qjG%2Fopen_with-24px%20(1).svg?alt=media&#x26;token=ed80fc52-4796-4ef2-a6d5-630c2f8c3bb4" alt="" data-size="original"> 移動カーソル</td><td>ドラッグでスクリーンパネルの配置を変更</td></tr><tr><td><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSYKA28k3SkNifMfRtx%2F-MSYTGlDRByESWWIepY-%2Fopen_in_full-24px.svg?alt=media&#x26;token=63f5533e-2f8b-480e-9c2e-e46377d3301f" alt="" data-size="line"><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSYKA28k3SkNifMfRtx%2F-MSYTBXkVQoc7MLexXyJ%2Fcompress-24px.svg?alt=media&#x26;token=97ead5b4-d868-4b9a-982d-6b998a30948c" alt="" data-size="original">拡大/縮小カーソル</td><td>配置したスクリーンパネルの大きさを変更</td></tr></tbody></table>

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FaHsxbyjvsbbCFax0Rwsp%2F03-4_forGM_screenpanel_05_screenpanel_view.png?alt=media&#x26;token=fa273d6b-d150-45d5-b663-4545774ac8fc" alt="" width="563"><figcaption></figcaption></figure>

***

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

スクリーンパネル一覧の **\[**<img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSYhs-KAxcsN-dRe2zI%2F-MSYiM4etqnfxC7AjoT7%2Fvisibility-24px.svg?alt=media&#x26;token=b2849174-4e4b-4420-bf9a-d2522b449499" alt="" data-size="original">**パネルの非表示 ]** ボタンで表示 / 非表示が切り替わります。\
例えば、スクリーンパネル一覧で「スクリーンパネル」と書かれた画像の<img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M9lYsmTykUgy7jyYWCy%2F-MSYhs-KAxcsN-dRe2zI%2F-MSYiM4etqnfxC7AjoT7%2Fvisibility-24px.svg?alt=media&#x26;token=b2849174-4e4b-4420-bf9a-d2522b449499" alt="" data-size="original">ボタンをクリックすると、下のように非表示となります。

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FY4BS9GgdUGWqkZ6bWRNl%2F03-4_forGM_screenpanel_06_screenpanel_hide_modify.png?alt=media&#x26;token=8f8642c9-73fb-4d94-87d2-49837a1f1dc2" alt="" width="563"><figcaption></figcaption></figure>

***

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

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

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

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2F61RJZpeo48OJg9HUBmib%2F03-4_forGM_screenpanel_07_screenpanel_setting_modify.png?alt=media&#x26;token=1da55517-cb2d-437a-a115-b73967480e41" 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="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FDmaXMfPfR1aP5FcriTvv%2F03-4_forGM_screenpanel_08_screenpanel_clickaction.png?alt=media&#x26;token=8540d800-0359-4608-8002-15f5ee77a364" alt="" width="491"><figcaption></figcaption></figure>

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

<figure><img src="https://2319285159-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M9lYsmTykUgy7jyYWCy%2Fuploads%2FddWYiun9uNJyLsecdI64%2F03-4_forGM_screenpanel_09_screenpanel_clickaction_send.png?alt=media&#x26;token=74701eb8-8932-4770-9fcb-1c324713b7df" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}

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

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

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