CODEraze使い方紹介 - GUIノード編

---

ここでは主に画面作成に使用するノードについて紹介していきます。

![スクリーンショット 2025-02-06 111520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/153022bc-2727-4541-2664-cc9e1039da5c.png)


#### 箱

背景などに使用できます。

![スクリーンショット 2025-02-06 111749.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/c9f98aa0-a161-e7a9-fa33-ec41d61b568e.png)

箱のプロパティ欄が基本となっており
ほかのノードではこれらの設定以外の独自のプロパティを紹介していきます。
ここでは基本的なプロパティを紹介します。

**名前**は部品の名前を指定できます。

**座標**X(横軸)とY（縦軸)、Z（奥行）に数値を入力することで指定できます。

**回転**は部品の角度を指定できます。

**透明度**は部品の透明度を変更できます。

以下の画像は透明度を50、大きさを2、色を水色、横幅を100にしたものです。

![スクリーンショット 2025-02-06 140312.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/41d3f084-9edd-43b7-7264-125cf962bb97.png)



**大きさ**は部品の大きさを指定できます。

**背景**は部品の背景色を指定できます。

**横幅**は部品の横の幅を指定できます。

**高さ**は部品の縦の幅を指定できます。

#### ボタン

画面にボタンの配置が行え、
プロパティ欄ではボタンの色や中の文字色やサイズを指定できます。

![スクリーンショット 2025-02-06 112845.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/fbda9a63-a7d8-f48c-9f2c-a2a635b4e2bd.png)



#### テキストボックス

画面にテキストボックスを配置できます。
![スクリーンショット 2025-02-06 113355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/0fd351e9-14f3-a485-ce4d-9bf8528cf27d.png)
プロパティ欄ではボタンの色や中の文字色、サイズや背景文字を指定できます。



#### 画像
表示したい画像のリンクを指定することで画像を表示できます。
![スクリーンショット 2025-02-06 113307.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/879b2781-c703-fb81-22bf-8de003c4365e.png)
プロパティ欄でリンクを指定できます




#### ラベル

任意の文字を画面に表示できます。
プロパティ欄では文字の色や横幅、高さとサイズを指定できます。
![スクリーンショット 2025-02-06 113704.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/709e534b-bf34-ab00-590d-41e837c7c4d5.png)

---

#### 使用例

#### 箱

以下の画像のように複数の箱を配置することで背景や模様を作成できます。
![スクリーンショット 2025-02-06 115607.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/1e32d1dc-9788-fd45-614f-63dc5982b9af.png)
![スクリーンショット 2025-02-06 115538.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/c149dd62-205d-5170-44eb-92810c11e947.png)


#### ボタン

以下の画像のようにボタンを配置し、
実行時の処理とボタン押下時の処理を作成できます。
![スクリーンショット 2025-02-06 120031.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/6d3064bf-befb-bdef-bb87-6f613a81355b.png)

![スクリーンショット 2025-02-06 120406.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/4d08363c-5977-bfc3-91d0-0ceb4f4ed0e2.png)

![スクリーンショット 2025-02-06 120242.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/c0b9b965-94aa-ccd9-e9e7-67adefcf47a8.png)



#### テキストボックス

以下の画像のようにテキストボックスとボタンを配置し、
実行時の処理とボタン押下時の処理を作成することで入力値を取得や表示ができます。
![スクリーンショット 2025-02-06 121131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/d862a1c5-962d-ad7f-72d5-31c42bb085ee.png)
![スクリーンショット 2025-02-06 121116.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/1abf83b1-df9f-823d-03be-1408d4f64825.png)

![スクリーンショット 2025-02-06 121024.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/a3a63908-bda9-fb68-0cc6-1924693dd06e.png)


#### 画像

以下の画像のようにリンク化した画像のurlを指定することで任意の画像を表示できます。
![スクリーンショット 2025-02-06 122723.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/e17f9c81-38be-548b-8ab4-1985a5f7cc44.png)

#### ラベル

以下の画像のように画面に文字を配置できます。

![スクリーンショット 2025-02-06 133631.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4001647/ceb24065-2a63-7ae3-16a4-530a6c7a8f47.png)