---
title: UI イベント
slug: world-sdk-guide-ja/9kEc-ui
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

ZEPETOScriptはUnity UIシステムの統合サポートを提供しています。

パネル、ボタン、テキスト入力ボックス、トグルメニューなどの異なるGUIコンポーネントを使用して、あなたの世界のユーザーインターフェースを作成できます。

ZEPETOScriptでUnity UI要素を使用するには、まずそれらをインポートする必要があります。

:::CodeblockTabs
UnityEngine.UI

```typescript
import { Slider, Button } from 'UnityEngine.UI';
```
:::

次に、追加したいUnity UI要素をプロパティとして宣言します。

:::CodeblockTabs
TypeScript

```typescript
public sliderUI: Slider;
public btnUI: Button;
```
:::

宣言されたプロパティは、現在ZEPETOScriptインスペクタウィンドウで表示およびアクセス可能です。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VWOAydIB2wgX2H3zwu205-20240904-102415.png)

階層ウィンドウを開き、Unity UIコンポーネントをZEPETOScriptインスペクタウィンドウの各プロパティフィールドにドラッグアンドドロップします。プロパティ値が割り当てられると、スクリプト内からそれらにアクセスして操作できます。これを使用して、コントロールのイベントのハンドラーを追加します。

:::CodeblockTabs
EventListener

```typescript
Start() {
    this.btnUI.onClick.AddListener(() => {
        // ボタンクリックイベントを追加
        console.log('btnUI onClick');
    });

    this.sliderUI.onValueChanged.AddListener(v => {
        // スライダーイベントを追加
        console.log(`[${v}] sliderUI onValueChanged`);
    });
}
```
:::



UIイベントが正しく処理されているか確認するためにプレイしてください。

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Y-ZOugt_AGkg0u4-auNQt-20240904-102415.png)

サンプルコード全体を確認してください。

:::CodeblockTabs
UI\_Event

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Slider, Button } from 'UnityEngine.UI';

export default class UIEvent extends ZepetoScriptBehaviour {

    public sliderUI: Slider;
    public btnUI: Button;

    Start() {
        this.btnUI.onClick.AddListener(() => {
            // ボタンクリックイベントを追加
            console.log('btnUI onClick');
        });
        
        this.sliderUI.onValueChanged.AddListener(v => {
            // スライダーイベントを追加
            console.log(`[${v}] sliderUI onValueChanged`);
        });
    }
}
```
:::



ZEPETOScriptが提供するUnity UIについては、以下のリンクをクリックして詳しく学ぶことができます。

:::hint{type="info"}
**📘 Unity UI**
[https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html](https://docs.unity3d.com/kr/current/Manual/com.unity.ugui.html)
:::

:::hint{type="info"}
**📘 インタラクションコンポーネント**
[https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html](https://docs.unity3d.com/kr/current/Manual/comp-UIInteraction.html)
:::