# クラスリストスクリーン

クラスリスト画面は特定のカテゴリ内のすべてのクラスを表示するために使用されます。この画面は、ユーザーがカテゴリリスト画面でカテゴリアイテムをクリックしたときに見つかります。クラスリスト画面には、サイドナビゲーションコンポーネント、シェイプコンポーネント、パンくずリストグループ、テキストコンポーネント、リストコンポーネントなどが含まれています。

## コンポーネント

### **サイドナビゲーション**

サイドナビゲーションは、ユーザーがナビゲートする画面ごとに表示されるべきです。ユーザーが探している情報を見つけるのに役立つ重要な要素です。この機能テンプレートでは、この画面では何もハイライトされていないことに気づくでしょう（「カテゴリリスト」画面のサイドナビゲーションコンポーネントと比較して）。ユーザーがこの画面にアクセスすると、サイドナビゲーションを介してのナビゲーションは行われなくなります。

<figure><img src="/files/XAfawvleQa9Q0TbVLJrc" alt="" width="196"><figcaption></figcaption></figure>

{% hint style="info" %}
サイドナビゲーションコンポーネントの1つの画面で何かを変更した場合、他の画面のサイドナビゲーションのすべてのインスタンスを変更する必要があります。これは、Mac上でCMD + C（コピー）およびCMD + V（貼り付け）を使用して行うことができます。
{% endhint %}

### **シェイプコンポーネント — 戻るボタン**

このコンポーネントは、ユーザーが前のページに戻るのを助けるボタンとして機能します。

<figure><img src="/files/3D3CXvAveleJWZIpj9oz" alt="" width="126"><figcaption></figcaption></figure>

⚡ **シェイプアクション**

このシェイプには、「戻る」に移動するリンクアクションが含まれています。

### **グループ — パンくずリスト**

グループは複数のコンポーネントからなり、1つのユニットとして機能します。このグループには、いくつかのアイコンコンポーネントとテキストコンポーネントが含まれています。Magic Textを介してデータベースに接続されているものは何もないため、データベースで行われた変更はこのグループに影響を与えません。

<figure><img src="/files/1uUX46LYKCHUHDloOI4z" alt=""><figcaption></figcaption></figure>

ハイライトされた緑の領域はユーザーがいる画面を示し、薄い灰色のテキストはユーザーにさらに行動をとることができることを示しています。

⚡ **パンくずリストアクション**

テキスト「すべてのクリニック」には、「カテゴリリスト」画面に移動するリンクアクションが含まれています。

### テキストコンポーネント — 2つのコンポーネント

<figure><img src="/files/KZ5X50fIlZtnHpwocQIg" alt="" width="335"><figcaption></figcaption></figure>

各コンポーネントはデータベースに接続されており、「現在のカテゴリ」から「名前」を表示し、「現在のカテゴリ」から「長い説明」を表示します。これはMagic Textとして知られています。

ユーザーが「カテゴリリスト」画面からカテゴリを選択すると、Adaloはこれを「現在のカテゴリ」と定義し、その後、選択したカテゴリに関連する情報を表示するためにMagic Textを介して選択できます。

<figure><img src="/files/80ccQvtmjxZzaaCbZTqz" alt="" width="353"><figcaption></figcaption></figure>

### リストコンポーネント — デスクトップ＆タブレットリストおよびモバイルリスト

リストコンポーネントはデータベースに接続されており、Classes Collectionから情報を表示します。

<figure><img src="/files/N8xeY6y7oxbQB4IifPVV" alt="" width="375"><figcaption></figcaption></figure>

このリストはフィルターを含んでいるため、選択したカテゴリのClassesのみが表示され、各Classが利用可能であることが保証されます。

<figure><img src="/files/WtagOlPm1w5HwofqNUNz" alt="" width="354"><figcaption></figcaption></figure>

このフィルターがないと、コレクション内のすべてのクラスが、利用可能性やカテゴリに関係なく表示されます。

⚡ **リストアクション**

リストカード内の「詳細を見る」ボタンには、「Class Details」画面へのリンクアクションがあります。

{% hint style="warning" %}
モバイルビューに切り替えると、2列から1列にレイアウトが変更される「Mobile List」という追加のリストコンポーネントがあります。その他の機能は変わりません。

リストの1つのバージョンに変更を加え、他のビューにもその変更が反映されるようにしたい場合は、両方のバージョンを変更する必要があります。
{% endhint %}


---

# 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://help.adalo.com/ja/feature-templates/browse-classes/classes-list-screen.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.