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 | 色の選択 |