https://github.com/natade-jp/js-guiblocks
HTML を直接記述することなく、JavaScript のコードで Web アプリケーションの UI を構成できるライブラリ
https://github.com/natade-jp/js-guiblocks
components framework gui javascript javascript-framework javascript-library library widgets
Last synced: 22 days ago
JSON representation
HTML を直接記述することなく、JavaScript のコードで Web アプリケーションの UI を構成できるライブラリ
- Host: GitHub
- URL: https://github.com/natade-jp/js-guiblocks
- Owner: natade-jp
- License: mit
- Created: 2025-05-17T08:17:21.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-05-31T08:34:16.000Z (10 months ago)
- Last Synced: 2026-02-04T22:59:50.075Z (about 2 months ago)
- Topics: components, framework, gui, javascript, javascript-framework, javascript-library, library, widgets
- Language: JavaScript
- Homepage: https://natade-jp.github.io/js-guiblocks/
- Size: 1.16 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GuiBlocks
[](https://badge.fury.io/js/guiblocks)
[](https://opensource.org/licenses/MIT)
**GuiBlocks** は、JavaScript で動的に GUI を構築するための軽量ライブラリです。HTML を直接記述することなく、JavaScript のコードで Web アプリケーションの UI を構成できます。
このライブラリは Java の Swing に影響を受けて設計しており、オブジェクト指向でコンポーネントを組み合わせて UI を構築できるようになっています。
詳しい説明は、[Github Pages](https://natade-jp.github.io/js-guiblocks/)で解説しています。
## 特長
* 部品（コンポーネント）を組み立ててGUIを構築
* PC、スマホのようなレスポンシブデザインに対応
* Canvas、ファイル操作、カラーピッカーなど豊富な部品
* 独自のレイアウト制御：IN / RIGHT / NEWLINE
## 利用方法
### ステップ1：ライブラリの選択と読み込み
* `cjs/` – CommonJS（Node.js等向け）
* `esm/` – ES Modules（モダンブラウザ向け）
* `umd/` – UMD（HTMLスクリプトタグ向け）
いずれかの中にある `GuiBlocks.js` または `GuiBlocks.min.js` を利用してください。
### ステップ2：CSSの適用
GUI の外観を整えるために、`GuiBlocks.css` を HTML に読み込みます。
```html
```
### ステップ3：ライブラリの読み込み
```html
```
またはモジュール形式で
```javascript
import Blocks from "./build/esm/GuiBlocks.js";
```
## 使用例
```javascript
const panel = new Blocks.Panel("デモパネル");
panel.putMe("container_id", Blocks.PUT_TYPE.IN);
const label = new Blocks.Label("こんにちは");
const button = new Blocks.Button("クリック");
panel.put(label, Blocks.PUT_TYPE.IN);
label.put(button, Blocks.PUT_TYPE.RIGHT);
button.addListener(() => {
alert("クリックされました！");
});
```
## 主なコンポーネント一覧
クラス名は `SLabel` ですが `GuiBlocks.Label` のようにアクセスできます。
| コンポーネント名 | 説明 |
| ---------------------------------- | -------------- |
| `SPanel`, `SGroupBox` | 枠付きコンテナ |
| `SSlidePanel` | 開閉式のスライドパネル |
| `SLabel`, `SButton` | テキスト表示・クリック操作 |
| `SCheckBox`, `SComboBox` | 入力選択用UI |
| `SSlider`, `SProgressBar` | 数値入力・進捗表示 |
| `SFileLoadButton`, `SFileSaveButton` | ファイル読み込み・保存操作 |
| `SCanvas`, `SCanvasGL` | 2D描画およびWebGL描画 |
| `SImagePanel` | 画像表示 |
| `SColorPicker` | 色の選択 |