glimmer-dsl-libui の話

## GUIへのあこがれ

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/fe85fe51-029e-d3d4-948f-1022c4064d24.png" width=80 height=80>

こんにちは。

今日は [glimmer-dsl-libui](https://github.com/AndyObtiva/glimmer-dsl-libui) という[GUI](https://ja.wikipedia.org/wiki/%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%82%AB%E3%83%AB%E3%83%A6%E3%83%BC%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%95%E3%82%A7%E3%83%BC%E3%82%B9)を操作するライブラリの紹介をします。

https://github.com/AndyObtiva/glimmer-dsl-libui

GUIっていうのは、パソコンの画面に「ウィンドウ」とか「ボタン」とか出すやつです。

はじめてコンピュータを触れたころ、コンピュータにウィンドウやボタンを表示してオリジナルなソフトを作りたいって思ってませんでしたか？　

でも現実はきびしくて、[猫でもわかるプログラミング](http://www.kumei.ne.jp/c_lang/)のサイトを見て、猫にはわかっても自分にはわからん、と思って諦めていました。

それからずっとプログラミングと縁のない生活を送ってましたが、なぜかRubyに触れたりして [Ruby/Tk](https://www.tutorialspoint.com/ruby/ruby_tk_guide.htm) を使ってウィンドウを出せるようになりました。

けれどもTkには問題がありました。一つは、Ruby本体からTkが切り離されてしまったことです。これで、RubyをインストールすればTkが動くという前提がなくなりました。もう一つは、Tkの表示があまり美しくないことです。特にUbuntuでは20年前のアプリか？と思うほど表示が古臭いです。

## Glimmer-dsl-libui

そしたら、最近 [glimmer-dsl-libui](https://github.com/AndyObtiva/glimmer-dsl-libui) というのがでてきました。

[Glimmer](https://github.com/AndyObtiva/glimmer)は、 [Andy Maleh](https://github.com/AndyObtiva) さんという方が制作しているGUIライブラリーのシリーズです。

### glimmer-dsl-libui の３つのレイヤー

glimmer-dsl-libuiは３つのレイヤーで構築されています。

[libui](https://github.com/andlabs/libui)は、 [andlabs](https://github.com/andlabs) さんという方が作っている小型のC言語のGUIライブラリです。WindowsであればWINAPI、macOSであればCocoa、LinuxであればGTKのAPIを呼び出します。

[LibUI](https://github.com/kojix2/LibUI)は、[kojix2](https://github.com/kojix2/libui)っていうやつが作っている簡素なlibuiのRubyバインディングです。[Fiddle](https://github.com/ruby/fiddle)を利用してC言語の関数を呼び出しています。

[glimmer-dsl-libui](https://github.com/AndyObtiva/glimmer-dsl-libui)は、[Andy Maleh](https://github.com/AndyObtiva) さんという方が作っているLibUIのラッパーで、Ruby言語らしい記述を可能にします。

つまり `Rubyのコード` → `glimmer-dsl-libui` → `glimmer` → `LibUI` → `fiddle` → `libui` → `各OSのAPI` みたいな順番で動作します。（たぶん）

## 動かし方

普通にインストールできます。`gem install glimmer-dsl-libui`
Exampleを動かしてみます。

```sh
https://github.com/AndyObtiva/glimmer-dsl-libui/
cd example

ruby meta_example.rb
```

**ジャーン！！！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/d8de2263-787a-6173-7ced-6dbfe35da447.png)

ウィンドウが表示されたではないか！！

以下スクショがひたすら貼り付けられていきます。（そういう記事なのです）

## Basic編

 Launchボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/819c4639-4299-6422-62b9-30bf9cbffd95.png)

なんにもないすみれ色の画面！！

ボタン！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/d31f6b3e-1de0-9dad-7f93-f81b37a67362.png)

ネバーエンディングストーリー！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/3fa5bf39-52c8-a939-d9a2-719429e7b2bd.png)

ポンタヌティウス！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/4c5ee90e-fdd0-b8e1-02ca-0050ae646e9b.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/2ce08b04-fff3-268e-71c6-8b8a7f7d6242.png)

画像表示！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/5c501d90-d310-ea2b-3d91-7745194aa887.png)

（注：画像はlibuiの弱点です。libuiには画像を表示する機能はなくて、[glimmer-dsl-libui側で無理して画像を"描画"しています。なので遅いです。](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/6#issuecomment-978228344)リアルタイムでの描画が必要な場合はRuby/TkやGTKを使う方が幸せになれるかも）

スクロール可能なエリア！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/cce6d5ee-399d-dde3-f279-31fc7add8ed4.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/ba5ba2d1-964a-c888-775b-fdefdbda5814.png)

テーブル！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/efb6e0bf-6383-e375-21cf-3bbf9bbad47d.png)

ボタン付きテーブル！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/ca75c397-5295-5372-d00f-3ab9cdd05d9f.png)

チェックボックス付きテーブル！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/5f02a1a8-c16b-e222-8615-2e5e52a6b3d2.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/61b9d7e5-6bff-3d7a-15a1-d00cc2e345af.png)

カラフルなテーブル！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/837b4429-b008-9d11-cb44-9bc017041446.png)

レッドタートル！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/505dcdc1-252f-7c05-6ec2-b335289993aa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/f4c4def4-5ef8-9c1b-dd4d-98c2595f2c31.png)

（注：さっき画像の表示が苦手だといいましたが、例外があって、Linux環境でのみ、大きな画像をテーブル上に表示することができます。これはUbuntuでスクリーンショットをとっているのでこんな感じですが、WindowsやmacOSだとすごく小さなアイコンになってしまうので注意してね）

テーブルプログレスバー！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/81bade07-dcb4-c1a5-6eff-141c88490783.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/fb3523bd-a373-2eca-f776-2757f780408b.png)

南国の植物を想起させる模様！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/296fd2ed-bd10-a8a4-f0a5-55a50f8fbf5c.png)

カラー選択ボタン！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/e3e3bb88-d2a5-883f-4e3d-f3aa4ea87b56.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/3f505d2a-3ee2-b023-1748-627259aad5b6.png)

日時と時間の選択ダイアログ！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/269570df-f65c-d832-3ce8-43a9c1e04627.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/67c282dd-e711-cdd8-a26c-9b993be04dc1.png)

フォント選択ダイアログ！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/8d277ad3-8c6a-e39d-3a0a-b6828e318122.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/026f78db-30e8-4781-e3ef-89e3d38fa4e8.png)

入力フォーム的なの！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/185b1931-f4da-37d0-b118-63803fe4e35f.png)

メモ帳！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/f15f649d-e7c7-9a24-0e4d-93dcfa0d855d.png)

（注：改行するようにもできたはずです。）

## Advanced編

なんか綺麗な模様の出てくるエリアギャラリー！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/c991e2d9-ad11-d029-147a-0223a7b07b74.png)

ボタンカウンター！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/c35a4d7d-bacb-0fba-3379-e74517d6eac8.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/5d1d1eaa-bad8-3414-0b42-b7f2602c703c.png)

丸をひたすらクリックしていくゲーム！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/08bf6bf0-fe8c-0331-314e-6fbd77a77924.png)

コントロールギャラリー！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/962a3074-0086-4d53-ac04-58dd2479d6eb.png)

CPU利用率を表示するやつ！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/9ab6989e-5117-aef0-663c-1c7f82849b8e.png)

フォントを色々変えられるやつ！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/2f4a7778-64ee-bc73-d490-a13b60299a11.png)

エリアをいろいろ変えるやつ！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/c179d661-6620-af74-eab8-cbec633169f3.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/2484e882-2687-4976-c92d-21a5c7926e92.png)


編集できるテーブル！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/07ec5085-a729-0eec-8af9-33a83775d7e5.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/ffb8e665-1d14-05e3-c52c-a9cb399f00cb.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/185e8e27-8646-b153-f9ab-b225125841d1.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/5825eb1f-144e-76e3-0f75-c990ec5af289.png)

アドレス帳アプリ！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/2fb16d30-815b-a704-dc1e-270970d095f8.png)

グリッド！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/df19096d-fc50-74de-e017-facf02358260.png)

（注：グリッドはOSによっては不具合が出るみたいなので、使うならちゃんと動作確認する必要があるようです）


ヒストグラム！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/bc93edf3-b641-64ae-fb72-e23c6de1b164.png)

（ヒストグラムっていう名前がついてるけど、ヒストグラムっぽい図を表示するやつであって、ヒストグラムではない）

ログイン画面！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/df38ad82-7a62-b248-d398-455c0e2db2c6.png)

カスタムキーワード！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/2d9be84a-6437-03f3-9878-36897d7d8202.png)

（カスタムキーワードが何かはわかっていない）

midi player！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/962edc11-e877-8977-28b6-2c01e1fb2b8e.png)

（この[deadmau5 2448](https://www.youtube.com/watch?v=OTPRHVpHbuI)という曲が超おすすめ）
https://youtu.be/heOYxME3p8Y

スネークゲーム！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/740746ab-f665-d7fd-0c88-fa64f7ae2697.png)

テトリスと○✕ゲーム！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/b1832855-3e31-fe2e-d02f-d19576517793.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/fbbd26bf-1f1b-1a98-0ed2-23616da06d37.png)

タイマー！！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/9604e349-08fd-af23-6845-cc668187e616.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/1b27ff4a-3abb-cc10-fec6-b053c433d25b.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/51c5fc5c-b2a2-2d49-9c69-8d8643302e4a.png)


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/fe85fe51-029e-d3d4-948f-1022c4064d24.png" width=80 height=80>

そんなわけでglimmer-dsl-libui、よかったらつかってみてね。
Windowsで小さなツールを作って配布したい人には、最小限の構成の[LibUI](https://github.com/kojix2/LibUI)もおすすめです。

スクリーンショットは全部Ubuntuですが、WindowsとかmacOSでも動くはずです。

Githubをながめていると、いろんな人が自分の知らないところで便利なツールを作ってくれいたりしす。自分の書いたちっちゃなコードも、地球のいろんな国で配布されて、改造してくれる人もいます。それはとても不思議なきもちです。ウィンドウを出したい、ボタンを出したいと思ってた子供の頃にはまったく想像できなかったことが現実になっていると感じますね。

この記事は以上です。

ではまた！！ Happy coding！！