Ubuntu１６でvisualrubyをインストール - プログラムを楽しもう

Ubuntuの環境で、GUIアプリケーションを
Rubyで開発するために
visualrubyをインストールしてみた

visualrubyは、フォームをGUIで、作成し、プログラムを開発するものです
VisualBaice,VisualStudioをイメージしてもらうといいでしょう

HP
http://visualruby.net

■ゼロベースからの手順をまとめる
１，Git のインストール
２．rbenv のインストール
３．ruby-build のインストール
４．ruby のインストール
５．bundler のインストール
６．visualruby のインストール
７．visualruby の起動、サンプル実行
８．glade のインストール
９．visualrubyからのglade起動設定
１０．新規プログラム作成

１から５は
「Ubuntu１６でＲｕｂｙを使ってみる」

Ubuntu１６でＲｕｂｙを使ってみる

と、重複しますが、手順をわかりやすくするため
再度掲載しました

１．Git のインストール

sudo apt-get update
sudo apt-get install git

もし、
/var/lib/apt/lists/ をロックできません
/var/lib/apt/dpkg/ をロックできません
と、表示された場合は

sudo rm /var/lib/apt/lists/lock
sudo rm /var/lib/dpkg/lock

２．rbenv のインストール

git clone https://github.com/sstephenson/rbenv.git ~/.rbenv

echo 'export PATH="$HOME/.rbenv/bin:$PATH"'>> ~/.bashrc

echo 'eval "$(rbenv init -)"' >> ~/.bashrc

シェルを再起動

source ~/.bashrc

インストールの確認

type rbenv

で
「rbenv は関数です」と表示されればインストール完了

３．ruby-build のインストール

mkdir ~/.rbenv/plugins

cd ~/.rbenv/plugins
git clone git://github.com/sstephenson/ruby-build.git

４．ruby のインストール
インストール可能な、最新バージョンを確認

rbenv install -l

2.2.5をインストール

rbenv install 2.2.5

エラーになった

:
Try running `apt-get install -y libssl-dev libreadline-dev zlib1g-dev

とのことなので、

sudo apt-get install -y libssl-dev libreadline-dev zlib1g-dev

の、のち、再度

rbenv install 2.2.5

を、行う

インストールされたRubyのバージョンを確認

ruby -v

５．bundler のインストール

rbenv shell 2.2.5
gem install bundler

６．visualruby のインストール

プロジェクト用エリア（フォルダ：vruby）を作成

cd
mkdir vruby
cd vruby

Gemfileを作成

bundle init

vruby/Gemfile
という、ファイルが作成される
エディタで、Gemfileを開
gem ‘visualruby’を追加
する

source "https://rubygems.org"
gem 'visualruby'

# gemを入れるディレクトリを作成

mkdir vendor
mkdir vendor/bundle

bundle で、Gemfileを実行

bundle install --path vendor/bundle

７．visualruby の起動、サンプル実行
visualrubyを起動する

cd
cd vruby
rbenv shell 2.2.5
bundle exec vr

../example/all_widgets
を選択し「ｏｐｅｎ」を、押下
メニューの「Run」を、押下し
アイアらしい
新しい画面が開く事を確認する
右上の✕、押下で終了
File＞Quitで終了

８．glade のインストール
フォームをデザインするツールを「glade」をインスツールする
ブラウザで、
Ubuntu、パッケージサイトを開く

http://packages.ubuntu.com/ja/precise/glade-gtk2

から、glade-gtk2をダウンロード
amd64ならば
http://packages.ubuntu.com/ja/precise/amd64/glade-gtk2/download
から、ダウンロード
端末から、ダウンロードフォルダーに移動してインストール

cd
cd ダウンロード 
sudo dpkg -i glade-gtk2_3.8.0-0ubuntu4_amd64.deb

libgladeui-1-11がないと言われるので

sudo apt install libgladeui-1-11

リストにないといわれる場合（下記エラーが表示）

　　　：
　　　：
E: パッケージ 'libgladeui-1-11' はインストール候補ではありません

/etc/apt/sources.list
に、
deb http://us.archive.ubuntu.com/ubuntu vivid main universe
を、追加する

sources.listの編集は、ｒｏｏｔ権限が必要
viの使用に慣れているなら
sudo cd /etc/apt/
sudo vi sources.list
で、先頭に
deb http://us.archive.ubuntu.com/ubuntu vivid main universe
を、追加

GUIで行うなら
sudo nautilus
で、ｒｏｏｔ権限でnautilusを起動し
/etc/apt/sources.list
を、選択し、ｇｅｄｉｔにて、開き
deb http://us.archive.ubuntu.com/ubuntu vivid main universe
を、追加し、上書き保存し、nautilusを終了

sudo apt-get update

もし、
/var/lib/apt/lists/ をロックできません
と、表示された場合は

sudo rm /var/lib/apt/lists/lock
sudo rm /var/lib/dpkg/lock

再度、インストール

sudo apt-get update
sudo apt install libgladeui-1-11
sudo dpkg -i glade-gtk2_3.8.0-0ubuntu4_amd64.deb

にて、インストールができればOK

アプリケーション検索で
glade
を検索
Glade３インターフェース・デザイナという内容で登録されていれば
起動確認する

９．visualrubyからのglade起動設定
visualrubyを起動する

cd
cd vruby
rbenv shell 2.2.5
bundle exec vr

サンプルの
../example/listview
を選択し「Open」を、押下

Tool＞GlobalSetting
を、選択
GladeCommandLine:
を、
「glade-gtk2」
を、選択し、「Try」で起動を確認
起動したgladeを、閉じ
設定画面を「Save」で終了する

左の、メニューTreeの
binの▶をクリックし展開し
ｇｌａｄｅの▶をクリックし展開し
SongListVeiwGui.ｇｌａｄｅをダブルクリックする
gladeが起動する
右サイドツリービューをクリックし、展開していく
Window1>hbox1>vBox1>hbox2>label1
まで、開きlabel1を選択する
プロパティのラベルを一部変更してみる

<big>ListView・・・・
→
<big>ｰｰｰListView・・・・

保存を押して（ファイル＞保存）、ｇｌａｄｅを終了する
VisualRuby側で
「Run」
で、起動した時、デザインの修正内容が
反映していることを確認する

１０．新規プログラム作成

File>NewProjet
で、新しいプロジェクトを作成する
プロジェクト名を「test001」として
「Create」を押す

「Run」により、起動を確認する
「Hello World」
のボタンを、押すと、表示が変わることを
動作を確認する

開いた画面を閉じ、プログラムを終了する

ｇｌａｄｅの▶をクリックし展開し
デザインを変更する

ボタンを追加する

デザインを保存し終了する

MyClass.rb
を、修正し保存する

def before_show()
　@button1 = "こんにちは"
　@button2 = "世界"
end	
def button1__clicked(*args)
　@builder["button1"].label = @builder["button1"].label == "Hello World" ? "Goodbye World" : "Hello World"
　@builder["button2"].label = @builder["button1"].label == "Hello World" ? "Goodbye World" : "Hello World"
end
def button2__clicked(*args)
　@builder["button1"].label = "その１"
　@builder["button2"].label = "その２"
end

保存し、
プログラムを起動し、動作を確認する

その他

エディットボックスの場合
名前はentry番号となり
初期値は

def before_show()
　@entry1 = "こんにちは 世界１"
　@entry2 = "こんにちは 世界２"
end

エディットボックス変更のイベントは

def entry1__changed(*args)
　@builder["entry2"].text = @builder["entry1"].text
end

こんな感じ
上記の場合、エディットボックスの１，２の
初期値をそれぞれ、 “こんにちは世界１”,”こんにちは世界２”
とし、
entry1を変更すると、entry2も同じ内容になる

■注意点
１，VisualRubyとGTD+のバージョンと、gladeのバージョンの相性に注意
　　　→　glade-gtk2_xx
２，Ubuntu１６でのアプリケーションのインスツール設定
　　　→　サードパーティがインスツールできない
３，gladeの使い勝手
　　　→　VisualC＃などのUiとは異なり、Itemドラッグ移動（微調整）はできない
　　　　　指定した箱の中に設置
　　　　　コンテナで、設置できる枠を作り、その枠の中に、コントロールを入れる

（慣れると、これも便利かも）

■参考
http://visualruby.net/index.html
https://github.com/Beagle123/visualruby