Ruby で macOS アプリが作れる Shoes を試してみた

• 概要
• 環境
• インストール
• サンプルアプリを作成してみる
• ボタンを設置する
• ボタンが押されたらテキストを表示する
• テキストボックスを置いてみる
• その他コンポーネントも充実
• 配布用のアプリとしてビルドするには
• 最後に
• 参考サイト

概要

Ruby で macOS アプリが開発できる shoes を試してみました
かなり簡単に GUI アプリが作成できます

環境

• macOS 10.15.6
• Ruby 2.7.1p83
  
  • shoes 3.3

インストール

公式だとインストーラを使う方法が推奨されています
macOS の場合はここからダウンロードできます

執筆時点では shoes-3.3.7-osx-10.10.tgz というファイルがダウンロードできました
ダウンロードした圧縮ファイルを解凍すると Shoes.app というファイルが解凍されるのでそれを Applications 配下に移動すればインストールは完了です

起動すると以下のような管理 GUI が立ち上がります

サンプルアプリを作成してみる

とりあえず動作するアプリを作成してみます

• vim app.rb

Shoes.app do
  background "#DFA"
  para "Welcome to Shoes"
end

あとは Shoes.app から「Run on App」で app.rb を選択すれば OK です

ボタンを設置する

トライ&エラーできる環境が整ったら開発していきます
まずはボタンを設置してみましょう
先程のサンプルに button を追加するだけです

Shoes.app do
  background "#DFA"
  para "Welcome to Shoes"
  button "Push me"
end

これで起動するとボタンが追加されているのが確認できます

ボタンが押されたらテキストを表示する

次にボタンのイベントハンドリングをしてみます
やり方は簡単で button によって作成されたオブジェクトに対して .click メソッドをコールするだけです

Shoes.app do
  background "#DFA"
  @t1 = para "Welcome to Shoes"
  b1 = button "Push me"
  b1.click {
    @t1.replace "Aha! Click!"
  }
end

また para で作成したテキストフィールドも @t1 でインスタンス変数化しておきそれを click のブロック内で .replace することで文字を変更しています

テキストボックスを置いてみる

テキストボックスは edit_line を使います

Shoes.app do
  background "#DFA"
  stack do
    @t1 = para "Welcome to Shoes"
    @el1 = edit_line
    b1 = button "Push me"
    b1.click {
      @t1.replace @el1.text
    }
  end
end

edlt_line に対して text メソッドを使うことで入力中のテキストを取得できます

その他コンポーネントも充実

他にも図形を描いたり図を挿入できたりリンクを使えたりといろいろと機能があります
興味があればチュートリアルの続きをやれば使い方の基本はだいたい学べるかなと思います

配布用のアプリとしてビルドするには

Shoes.app のトップに「Package an App with Shoes」があるので選択します
そして作成した Ruby ファイルを選択しビルドするプラットフォームを選択すれば OK です
「Select Architecture」をクリックするとプラットフォームの一覧が表示されます
「I want advanced install options」を選択すると配布時のアプリのアイコンなども設定できます

ビルドが完了すると tgz の圧縮ファイルが作成されるのでそれを解凍すると .app ファイルがあるのでこれをクリックするだけでアプリが起動するようになります

最後に

macOS アプリを Ruby で開発できる Shoes を使ってみました
かなり簡単に開発できるので Xcode や Swift の使い方を知らない人でも簡単に macOS アプリが開発できるかなと思います
ドキュメントもかなり見やすく充実しているのでわからないことがあったらドキュメントを検索すれば解決するかなと思います

参考サイト

• http://shoesrb.com/walkthrough/