GuiBlocks
GuiBlocks は、JavaScript で動的に GUI を構築するための軽量ライブラリです。HTML を直接記述することなく、JavaScript のコードで Web アプリケーションの UI を構成できます。 このライブラリは Java の Swing に影響を受けて設計しており、オブジェクト指向でコンポーネントを組み合わせて UI を構築できるようになっています。
詳しい説明は、Github Pagesで解説しています。
特長
- 部品(コンポーネント)を組み立てて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 に読み込みます。
<link rel="stylesheet" href="./build/umd/GuiBlocks.css">
ステップ3:ライブラリの読み込み
<script src="./build/umd/GuiBlocks.min.js"></script>
またはモジュール形式で
import Blocks from "./build/esm/GuiBlocks.js";
使用例
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 |
色の選択 |