# クラス詳細スクリーン

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-4e23422852433f768aa24baf165330e2098fe3ee%2Fclassdetails.png?alt=media" alt="" width="371"><figcaption></figcaption></figure>

クラス詳細画面は、カテゴリ内の選択したクラスに関するすべての情報を表示します。このページには、Magic Textを介してデータベースから情報を取得するいくつかのコンポーネントがあります。クラスコレクション内のプロパティに情報が含まれていない場合、この画面では正しく表示されません。

いくつかのコンポーネントは、「カテゴリリスト」および「クラスリスト」画面のドキュメントで説明されたコンポーネントと同様に機能するため、以下で新しいコンポーネントについて説明します。

## コンポーネント

### **ボタンコンポーネント — Rectangle 38**

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-755a09e5694e64d918d0f36e437be576e82ac730%2Fpurchasebutton.png?alt=media" alt="" width="302"><figcaption></figcaption></figure>

この長方形コンポーネントは、この画面上でボタンのように機能します。表示されるかどうかを制御する可視性ルールが含まれています。この場合、現在のクラス > 利用可能な空きスポットが0より大きい場合にボタンが表示されます。つまり、クラスに空きがある場合はボタンが表示されます。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-54c9a8ede15a086b40874ff13b5c45af50085a07%2Fvisibility.png?alt=media" alt="" width="357"><figcaption></figcaption></figure>

⚡ **ボタンアクション**

ボタンには、「購入」画面に移動するリンクアクションが含まれています。

### マップコンポーネント

マップコンポーネントは、コンポーネントマーケットプレースにあるか、「インストール済みのチーム」セクションに表示されます。

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-b24ddaf3f6bfd9170be97e0f0cfd32c29bb9349c%2Flocation.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

このコンポーネントには[Google Maps APIキー](https://help.adalo.com/component-basics/marketplace-components/maps?_gl=1*x54t8i*_ga*MTExMTM3MTY4NC4xNTg1NTk0NDU1*_ga_SWT45DV35L*MTY5MzQyNDMwNS44Ni4wLjE2OTM0MjQzMDUuNjAuMC4w#1-setup-your-google-api-key)が必要で、クラスの場所を表示します。Google Mapコンポーネントにはいくつかのカスタマイズが可能です。

地図上に表示される場所は、クラスコレクション内の場所プロパティに基づいています。

{% hint style="info" %}
マップコンポーネントを利用するには、Google Maps APIキーが必要です
{% endhint %}

### 条件付き表示要素

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-9fd1dcb20372c5527576c596af9f321163269cc1%2Fconditional.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

ユーザーにとって、要素のうちの1つだけが表示されます — どちらか一方が表示されるかは、「利用可能な空きスポット」プロパティからの可視性ルールに関連しています。

{% hint style="info" %}
見た目では、1つのグループが間違った場所に表示されるように見えるかもしれませんが — 可視性ルールが使用されると、消えるコンポーネントは、元々表示されていたグループが占めていた領域を埋めるように移動します。
{% endhint %}

グレーアウトされた要素に対する可視性ルールは以下のようになります:

<figure><img src="https://797861279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4EFNSNZLMs5AZ70x2P33%2Fuploads%2Fgit-blob-00707a81faf8d82a624ded2a9dca96b5474e3570%2Fmorevisibility.png?alt=media" alt="" width="354"><figcaption></figcaption></figure>


---

# 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-purchase-and-manage-classes/class-details-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.