# サイドパネル

## 可変型サイドパネル

可変型のサイドパネル (データファインダー)では最小幅を300px、最大幅を480pxとする。\
ユーザーが操作可能な領域は12pxとする。

<figure><img src="https://2122813178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fntjp6OxZgF8lxZ7jLd4L%2Fuploads%2Fa0K11STCwpJ4M79rueAk%2F%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88.webp?alt=media&#x26;token=1c5e717e-a6b5-4fb2-a086-d16f2e77ac42" alt=""><figcaption></figcaption></figure>

## データファインダー

* フォルダ階層が分かるように小階層にインデントを付ける。
* 親階層はアコーディオン形式で開閉できるようにする。
* データ数の表記は最大6桁を想定とし、仮に7桁以上になる場合はテキストの領域を狭め、データ数は隠さずすべて表示する。
* テキストが表示領域に収まらない場合、省略表示(...)にする (データの桁数が増えた場合は表示可能なテキスト数を減らす)

<div align="left" data-full-width="false"><figure><img src="https://2122813178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fntjp6OxZgF8lxZ7jLd4L%2Fuploads%2F4huTfZvpMl1BtC8NYksX%2F%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A1%E3%82%A4%E3%83%B3%E3%83%80%E3%83%BC.webp?alt=media&#x26;token=fb3af9f7-2477-4914-9213-63211d67abf9" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ds.photoruction.com/design-pattern/side-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.