← Blog

clogs: ShoesのプログラムをふつうのCRubyで動かす

Shoesは、_why the lucky stiffがRubyのために作った小さなGUIツールキットです。ウィジェットのクラスやレイアウトマネージャーを組み立てる代わりに、数行のRubyでウィンドウを書けます。レイアウトにはstackとflow、テキストにはpara、クリックしたときの動作はbuttonにブロックを渡すだけです。プログラミング入門キットのHackety Hackも、このShoesの上に作られていました。

ところが、Shoesが動かなくなると、Hackety Hackも一緒に動かなくなりました。JRubyで書き直したShoes 4も、Hackety Hackを動かせるところまでは進みませんでした。もう一度Hackety Hackが動くところを見たかったので、自分のフォーク（github.com/Largo/hacketyhack）で別の道を選びました。すでに手元にあるRubyでそのまま動くShoesの実装を書いたのです。それがclogsです。READMEの言葉を借りれば「libuiの上に履いたShoes」です。

Hello, Shoes

READMEにある例です。

require "clogs"

Shoes.app(title: "Hello", width: 400, height: 200) do
  para "Hello, ", strong("Shoes"), "!", size: :title
  button("Push me") { @note.replace "Aha! Clicked." }
  @note = para "Nothing pushed so far"
end

hello.rbとして保存したら、次のように実行します。

gem install clogs
ruby hello.rb

Ruby 3.2以降が必要です。依存しているのはlacci、libui（libui-ngと、Linux・macOS・Windows向けのビルド済み共有ライブラリ）、そしてchunky_pngです。chunky_pngが必要なのは、libuiが画像ファイルを自分で読み込めないためです。コンパイラも、ブラウザエンジンも、JVMもいりません。

全体の構成

clogsはShoesのDSLを自分で実装し直してはいません。DSLの部分はScarpeの表示に依存しない半分であるLacciが担当します。LacciがDSL、描画要素（drawable）のツリー、イベントを管理し、clogsはLacciのdisplay serviceとして、レイアウト、描画、ウィジェット、入力を受け持ちます。そしてlibui-ngが、ネイティブのウィンドウとキャンバスを一つずつ提供します。

your Shoes program
        |
      Lacci          the Shoes DSL, drawable tree, events
        |
      Clogs          layout, painting, widgets, input
        |
      libui          one native window, one canvas

Lacciの仕組みに乗っているので、明示的にclogsを選ぶこともできます。同じプログラムをScarpeのwebviewバックエンドでも動かしたいときに便利です。

SCARPE_DISPLAY_SERVICE=clogs ruby my_app.rb

設計上、知っておいていただきたい点が一つあります。clogsはShoesのドキュメント全体を、ウィジェットも含めて一枚のlibuiキャンバスに描きます。libuiにはネイティブのコントロールを任意の位置に置く方法がなく、Shoesにはまさにそれが必要だからです。その代わり、ボタンやテキストフィールドはネイティブではなくShoes風の見た目になり、プラットフォームのアクセシビリティ機能やインプットメソッドのサポートは受けられません。メニュー、メッセージボックス、ファイル選択、ask/confirmのダイアログなど、合うところではlibuiのネイティブ部品を使っています。

動くもの

READMEによると、レイアウト、テキスト、リンク、図形などの描画要素、画像、ウィジェット、イベント、アニメーション、ダイアログが動きます。動画、音声、ぼかし、複数ウィンドウには対応していません。機能ごとの対応表libui_shoes_coverage.mdには、何をどの環境でテストしたかが書かれています。環境はlibui gem 0.2.4のlibui-ng、Linux、Ruby 3.3です。

gemには、clogsで描けるものをひととおり見せるexamples/kitchen_sink.rbが入っています。その一部を短くしたものがこちらです。

require "clogs"

Shoes.app(title: "Clogs kitchen sink", width: 640, height: 620) do
  stack(width: 620, height: 170) do
    background rgb(255, 255, 255)
    border rgb(200, 200, 210), strokewidth: 2

    fill rgb(220, 60, 60)
    stroke rgb(60, 0, 0)
    rect 20, 20, 120, 60

    fill rgb(60, 120, 220)
    oval 170, 20, 100, 60

    nostroke
    fill rgb(250, 200, 40)
    star 320, 20, 6, 34, 16
  end
end

二つの環境変数を使うと、Shoesアプリをスクリプトから操作できます。clogs自身のテストもこの仕組みを使っていて、CIでアプリのスクリーンショットを撮ることもできます。

CLOGS_EXIT_AFTER_MS=800 CLOGS_SCREENSHOT=shot.png ruby hello.rb

0.1.0以降の変化

RubyGemsにあるgemは、2026年8月に公開したバージョン0.1.0です。その後も、リポジトリのclogs/フォルダで開発を続けています。

Hackety Hackは？

IDEはまた動くようになりました。リポジトリでruby hacketyhack.rbを実行すると、clogsの上でHackety Hackが開きます。スプラッシュアニメーション、サイドのタブ、Homeタブが表示されます。もともとのShoesのサンプル12本のうち11本は、手を加えずに動きます。Hackety Hackに必要なShoes 3との互換性の修正は、gemではなくHackety Hack側（lib/compat/shoes3.rb）に置いています。

まだ荒削りなところもあります。エディタは文字を入力できるようになりましたが完成してはいませんし、オンライン機能は今はもう存在しないサーバーを向いたままです。

古いShoesのプログラムが手元にあれば、ぜひ試してみて、動かなかったところを教えてください。コードはMITライセンスで、github.com/Largo/hacketyhackにあります。ブラウザ版に興味を持った方は、ruby.wasmプロジェクト用の小さなヘルパーjsgについての記事もどうぞ。