11月8日イケテルjruby勉強会＠東京

Ruby Business Commons

配布資料

USBメモリでデータを配布していますデータをコピーし終わったら

近くの人にUSBメモリを回して下さい

USBメモリからコピーして欲しいもの

・イケテルJRuby勉強会資料.pdf・サンプルコード（code1.txt~code21.txt）・ruby-processingフォルダ・サクラエディタのインストーラ

環境設定まだなんです、という人は↓もコピー

・Java（JDK1.6）とJRuby（1.1.4）のインストーラ

12008年11月8日土曜日


始まる前の環境確認

環境設定が完了しているか確認を！

上手くいかなかった方は遠慮せずに手を挙げて呼んで下さいね



今日必要な環境

Java　・java -versionで1.5か1.6であることを確認 JRuby　・jruby -vで1.1.3か1.1.4であることを確認 1.1.5でも構わないエディタ　・サクラエディタや秀丸など　　改行コードを自動認識してくれるエディタ



Javaのインストール（Windows）

JRubyを動かすには先ずはJavaのインストールが必要です

下記のURLからJDKをダウンロードし

解凍して適当な場所（例えばCドライブ直下）

に置いてください

「JDK 6 Update 10のダウンロード」をクリックして下さいhttp://java.sun.com/javase/ja/6/download.html


http://java.sun.com/javase/ja/6/download.html



Javaのインストール（Mac）

Macユーザの方はこちらのページからdmgファイルをダウンロードします

インストーラの指示に従ってインストールを行って下さい

「136.4MB」をクリックして下さい

http://www.apple.com/jp/ftp-info/reference/javaformacosx105update2.html







JRubyのインストール

次はJRubyをインストールしましょう

下記のURLからJRubyをダウンロードし解凍して適当な場所

（例えばWinならCドライブ直下,Macなら/Applications以下）


Windowsは「jruby-bin-1.1.4.zip」を、Macは「jruby-bin-1.1.4.tar.gz」をクリックして下さい

http://dist.codehaus.org/jruby/





アテンション！　その１

Pathの中に日本語が入っていると

上手く行きません＞＜

JavaやJRubyを日本語フォルダの下に

置かないように気をつけて下さい


環境変数の設定(Windows)「スタート」 -> 「コントロールパネル」 -> 「システム」

の順にクリックし、システムのプロパティウインドウを開く

「環境変数」をクリック


環境変数の設定(Windows)先ずはJAVA_HOME、JRUBY_HOMEの

2つを「新規」（既に存在していたら「編集」）で設定します


環境変数の設定(Windows)

次に既存の「Path」の先頭に次の一行を追加します

%JAVA_HOME%\bin;%JRUBY_HOME%\bin;

既に書いてあったものは消さず「先頭に追記」をしてください



環境変数の設定（Mac）

JAVA_HOME, JRUBY_HOME, PATHこの3つの環境変数を設定しますMac（Unix系）ならコマンドラインで

export JAVA_HOME=JDKを置いた場所 export JRUBY_HOME=JRubyを置いた場所 export PATH=$JRUBY_HOME/bin:$PATH

間違えた？と思ったらprintenvコマンドで

現在の環境変数が確認出来ます



環境設定は出来ましたか？

全部出来たら一度確認をしてみましょう

もし上手くいかなくてもあとでもう一度

みんなで確認するので大丈夫ですよ



RBCとは

実際のビジネスに利用するRubyの

ノウハウをコモンズし、ビジネス利用に

おける生産性を高めあうことを目的とした

オープンなコミュニティ

2007年7月31日に設立



今日の目標難しい理論は、いつでも学べる。

まずはやり方を覚えて、「動いた！面白い！」

を一緒に実感しましょう。

今回は、ruby-processingを使って絵をぐりぐり動かして遊びます。

明るく、楽しく。

Rubyのコーディングの楽しさをみんなで共有したい。



忘れないでください

誰かが先生で、誰かが生徒というのは、決まっている訳じゃない。

全員が先生で、全員が生徒。

お互いが刺激しあい高めあえる。

それがＲＢＣです。



チームを作ろう

チームを作ります。

人が集まっただけでは、チームではありません。お互いが、お互いを知り、“信頼”しあってこそ、

チームになります。

まずは、チーム内で自己紹介をしてください。



お願いです

このチームは、今日一日。運命共同体です。

困っている仲間がいたら、助けてください。

うまく行ったら拍手をしてください。

それがＲＢＣのルールです。



では、ボチボチ

行きましょうか



円陣



環境設定212008年11月8日土曜日


最もつまづきやすい環境設定

逆に言えば環境設定さえ上手く行けば

イケテルJRuby勉強会は

もう半分以上成功したようなもの

先ずは環境設定からはじめよう！



今日必要な環境

Java　・java -versionで1.5か1.6であることを確認 JRuby　・jruby -vで1.1.3か1.1.4であることを確認 1.1.5でも構わないエディタ　・サクラエディタや秀丸など　　改行コードを自動認識してくれるエディタ



Java & JRuby

java version "1.6.0"jruby 1.1.4 が出た？



Javaのインストール（Windows）

JRubyを動かすには先ずはJavaのインストールが必要です

下記のURLからJDKをダウンロードし

解凍して適当な場所（例えばCドライブ直下）


「JDK 6 Update 10のダウンロード」をクリックして下さいhttp://java.sun.com/javase/ja/6/download.html





Javaのインストール（Mac）

Macユーザの方はこちらのページからdmgファイルをダウンロードします

インストーラの指示に従ってインストールを行って下さい

「136.4MB」をクリックして下さい








JRubyのインストール

次はJRubyをインストールしましょう

下記のURLからJRubyをダウンロードし解凍して適当な場所

（例えばWinならCドライブ直下,Macなら/Applications以下）


Windowsは「jruby-bin-1.1.4.zip」を、Macは「jruby-bin-1.1.4.tar.gz」をクリックして下さい





環境変数の設定(Windows)「スタート」 -> 「コントロールパネル」 -> 「システム」

の順にクリックし、システムのプロパティウインドウを開く

「環境変数」をクリック


環境変数の設定(Windows)先ずはJAVA_HOME、JRUBY_HOMEの

2つを「新規」（既に存在していたら「編集」）で設定します


環境変数の設定(Windows)

次に既存の「Path」の先頭に次の一行を追加します

%JAVA_HOME%\bin;%JRUBY_HOME%\bin;

既に書いてあったものは消さず「先頭に追記」をしてください



環境変数の設定（Mac）

JAVA_HOME, JRUBY_HOME, PATHこの3つの環境変数を設定しますMac（Unix系）ならコマンドラインで

export JAVA_HOME=JDKを置いた場所 export JRUBY_HOME=JRubyを置いた場所 export PATH=$JRUBY_HOME/bin:$PATH

間違えた？と思ったらprintenvコマンドで

現在の環境変数が確認出来ます



環境設定は出来ましたか？

全部出来たらもう一度確認をしてみましょう

上手くいかなかったら遠慮なく手を上げて呼んで下さいね



配布データはコピーしましたか？

先ほどUSBメモリでデータを配布しました

自分のパソコンに以下のデータが揃っていることを確認して下さい

配布データ一覧

・イケテルJRuby勉強会資料.pdf・サンプルコード（code1.txt~code21.txt）

・ruby-processingフォルダ・サクラエディタのインストーラ



準備、出来ましたか？

拍手！拍手！

それじゃあさっそく

楽しくruby-processingを

はじめましょう！



Processingとは？

もともとはJavaで開発されたProcessing

イメージやアニメーション、サウンドの

プログラミングをしたい！

そんな人のためのオープンソースのプログラミング言語

そして開発環境を指します



ではRuby-processingとは？

JRubyを活かしてRubyからProcessingを

利用出来るようにしたのが

Ruby-processing

今日みんなで使って遊ぶのはこちらの「Ruby-processing」です



もっと詳しく知りたい！

Processingについて詳しく知りたい方はこちらを参照して下さい

http://github.com/jashkenas/ruby-processing/wikis

例えばインタラクティブミラーのように国内外のアーティストによる作品も多数発表されています

http://www.haque.co.uk/

オープンソースかつマルチプラットフォームであることから

教育現場での利用も・・・







最初に開発スペースを用意

先ほどUSBメモリで配布したruby-processingフォルダを

Cドライブ直下にコピーして下さい（Macの方は/Users/ユーザ名/の下にでも）

そしてコピーした

ruby-processingフォルダの中に「rbcフォルダ」を新しく作成します

このrbcフォルダが

今日の開発スペースになります



rbcフォルダを作る

ここですよー



アテンション！　その２

Pathの中に日本語が入っているとやっぱり上手く行きません＞＜

あとこの先はCドライブ直下に

ruby-processingフォルダを置いた前提で説明が進んで行きます

他の場所に置いた方は間違えないように

注意して下さいね



今回はUSBメモリで配りましたが

ウェブからダウンロードする場合はgithubのruby-processingのwikiページから

「Download It!」をクリックしますhttp://github.com/jashkenas/ruby-processing/wikis





rbcフォルダ出来ましたか？

今日の勉強会が終わるころには今は空っぽなrbcフォルダの中に自分で作ったRubyのプログラムがたーくさん入っている予定です楽しみですね



作った開発スペースまで移動

コマンドプロンプトを開いて

いま用意したruby-processingフォルダまで

移動してみましょう

cd C:¥ruby-processing

dirするとrbcフォルダがありましたか？



ここですよー

rbcフォルダがあった



ファイルを作成する

区切りは半角スペースです

この資料からコピーして実行すると余計な全角空白が混ざって

失敗することがあるので直打ち推奨です

C:\ruby-processing>jruby script/generate rbc/rotate_rectangles.rb 400 400



rbcフォルダの中を見て下さい

rotate_rectangles.rb

というファイルが出来ているはずです

どうですか？ありましたか？

ではエディタで開いて

中身を見てみてください



こんなファイルがありましたか？

このソースは「code1.txt」として配布されています



1. 「足場」はもう完成しました

自動生成された「足場」となるソースを実際に読んでみましょう

require 'ruby-processing'

class RotateRectangles < Processing::App

def setup

end

def draw

end

end

RotateRectangles.new :title => "Rotate Rectangles", :width => 400, :height => 400

これがProcessingのお約束！初期処理(setup)と描画(draw)を

行うメソッドだよ



アテンション！　その３

Windowsのメモ帳で開いている方！正常に改行されてませんよね？

generateで自動生成したファイルの改行コードはWin環境の改行コードCR+LFではなく、 LFです

今日は秀丸やサクラエディタなどの改行コードを自動認識してくれる

エディタを使って下さい



今のjrubyコマンドで何が起きたの？

コマンドプロンプトで実行した

C:\ruby-processing> jruby script/generate rbc/rotate_rectangles.rb 400 400

という一文で

400x400ピクセルのキャンバスと

そこにスケッチするプログラムの

ひな形ができました



generateってなに？

generateコマンドは「目的に応じたリソース（プログラム）を自動生成してくれるジェネレータ」を起動するためのコマンドです

つまり「script/generate rbc/rotate_rectangles.rb」は

ということを表していたんです

ジェネレータを起動して、rbcフォルダにrotate_rectangles.rbというプログラムを作って！



生成されたファイルを実行してみる

C:\ruby-processing>jruby rbc/rotate_rectangles.rb

先ほどと同じく区切りは半角スペースです

どうですか？

何か起きましたか？



こんなウィンドウ出ましたか？

OSによって多少見た目は異なりますが

こんなウィンドウが出ましたか？



400x400のキャンバス

... def setup #キャンバスの色を決めたりなどの #スケッチの準備

end

def draw #ここにスケッチするプログラムを書きますend...

スケッチ

ひな形

裏側でこんなことが起きていました



ではrotate_rectangles.rbを開いて

これからこのファイルに自分たちでコードを追加していきます

準備はいいですか？



2. 四角形をいくつか表示してみよう

def setup color_mode HSB, 100 background 0 no_stroke end def draw 5.times do |i| i += 1 fill 30, i*20, 99 sz = 60 - i*10 rect 0, 0, sz, sz end end

rotate_rectangles.rbに黒い部分のコードを追記して下さい



アテンション！　その４この資料（PDF）からソースをコピーすると

半角スペースが全角スペースになってしまうことがあり

これがエラーの原因になりやすいです

参考となる「完成品」のソースコードはUSBメモリでお配りしてあります

「ここは手が書かずにコピーして実行したい」という場合はそちらのテキストファイルから

コピーしてください



こんなソースになりました

それでは実行してみましょう

特にここの「end」を忘れないように！




追記したファイルを実行してみる




こんなウィンドウが出たら成功

四角形を５つ表示しましたデフォルトの表示位置はウィンドウ左上です



四角形出ましたか？

上手くいっていない人が居たら

先に出来た人が助けてあげてください

四角形が出たら拍手！

上手く出ない人はrotate_rectangles.rbをもう一度確認してみましょう



さっき書き足したソースの解説を

しようと思ったけれども

この先、第２部まで通して

コーディングしていくうちに

徐々に分かってくるところが多いので

簡単に。



これがないと始まりません -> require 'ruby-processing'

C:\ruby-processing>jirb -r irb/completionirb(main):001:0> Dir.pwd=> "C:/ruby-processing"irb(main):002:0> require 'pp'=> trueirb(main):003:0> pp $LOAD_PATH["C:/jruby-1.1.4/lib/ruby/site_ruby/1.8", "C:/jruby-1.1.4/lib/ruby/site_ruby", "C:/jruby-1.1.4/lib/ruby/1.8", "C:/jruby-1.1.4/lib/ruby/1.8/java", "lib/ruby/1.8", "."]=> nil

$LOAD_PATHの"."（カレントディレクトリ) にある、ruby-processing.rbをLOAD

Pretty Print!

C:\ruby-processing\ruby-processing.rb をロードしてます。



x.times{|i|....}

C:\ruby-processing>jirb -r irb/completion

irb(main):001:0> 5.times {|i| p i }01234=> 5

irb(main):002:0>

整数オブジェクトに対する、ブロック付きのメソッド(times)呼び出し



3. 図形の表示位置を移動してみよう

def draw translate width/2, height/2 5.times do |i| i += 1 fill 30, i*20, 99 sz = 60 - i*10 rect 0, 0, sz, sz end end

さっきのコードでは四角形が左上にありました場所を真ん中に動かしてみましょう

黒い部分のコードを追記して下さい



この状態でプロンプトから実行




でたー！

５つの四角形の場所が左上から中央に変わりましたね



四角形の位置は変わった？

左上にあった四角形が

中央辺りに移動していたら拍手！

みんなの四角形の位置が動いたら

次はぐるっとまわしてみましょうか



4. キャンバスを45°回転させてみよう

今度は四角形が描かれているキャンバスをぐるっと回転させてみましょう


def draw translate width/2, height/2 rotate radians(45) 5.times do |i| i += 1 fill 30, i*20, 99 sz = 60 - i*10 rect 0, 0, sz, sz end end

まだradiansメソッドを作っていないので実行は待ってね



もしここで実行したら？

Error while running applet.rbc/rotate_rectangles.rb:13:in `draw':

こんなエラーが発生します

なぜならばradiansという

「存在していないメソッド」を使おうとしているからです

なのでradiansメソッドを作りましょう



radiansメソッドを作ります


class RotateRectangles < Processing::App include Math def radians(x) return x*(PI/180) end

先ずはMathモジュールをインクルードそしてラジアンを求めるメソッドを作ります


（ラジアンとは、円の半径と同じ長さの円弧を1単位とする角度の表現。　 0度～360度がラジアンでは0～2πに対応しています）

「PI」はぴーあいですぴーえるやぴーいちと

間違えないでね



radianが書けたら実行してみます


キャンバスの位置はどうなりましたか？

近くの人がエラーになっていたら

声をかけて助けてあげて下さいね



四角形がピラミッドになった！

５つの四角形がぐるんっと回ってきれいに45°回転しています



無事動いたところで解説を

いきなりinclude Mathと書きましたが

インクルードってなんでしょう？

あとradianメソッドは

いったい何を

してくれているんでしょう？


require と include

http://qwik.rubybizcommons.jp/518.html　より抜粋、

１）requireは、Ruby ライブラリ（Ruby スクリプト (*.rb) か拡張ライブラリ (*.so) ）をロードパス（$LOAD_PATH、$:）から　探して、同じライブラリがロードされていなかったときのみロードする。勉強会では、require 'ruby-processing'を実行し、「class Xxx < Proces～」とすることで、継承をおこなっていました。

２）includeは指定されたモジュールの性質(メソッドや定数、クラス変数)を追加します。Rubyは多重継承をサポートしていないため、使用するクラスがすでにあるクラスを継承している場合、モジュールをインクルードすることで多重継承に相当するMix-inを実現します。ちなみに、勉強会で使用したMathモジュールは組み込みモジュールであるため、includeすることでMathモジュールの定数（PI）を使用することができました。組み込みでないモジュールは予め「require」しておく必要があります。

モジュールはインスタンスを作れません。クラスはincludeすることができません。


http://qwik.rubybizcommons.jp/518.html




Q&A窓口あります

http://groups.google.com/group/rbc-incubator





5. もう少し派手にしてみよう

def draw translate width/2, height/2

rotate radians(45) 5.times do |i| i += 1 fill 30, i*20, 99 sz = 60 - i*10 rect 0, 0, sz, sz end end

黒い部分のコードを追記または編集して下さい def draw translate width/2, height/2 ary = (0..11).map{|a| a*30} ary.each do |r2| push_matrix rotate radians(r2) translate 50, 0 h = random 100 5.times do |i| i += 1 fill h, i*20, 99, 80 sz = 60 - i*10 rect 0, 0, sz, sz end pop_matrix end end



ちょっと多かったけど書けたら実行！


きらきら眩しい絵が表示されましたか？

コードの量が多いので

ちょっとしたタイプミスに注意！



ピラミッドから今度は・・・

四角形がきらきら回って輪っかを作っています



よく分かる輪っかの説明

ary = (0..11).map{|a| a*30}ってなに？

ary.each do |r2|って何をしてるの？

push_martixってなに？

今書いたばかりのコードを

ちょっぴり説明します



(0..11).map{|a| a * 30}

C:\>jirb -r irb/completion

irb(main):001:0> ary = (0..11).map{|a| a * 30}

=> [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]

irb(main):002:0> ary = (0..11).inject([]){ |a,n| a << n*30 } => [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]

こんな風にも書けるけど・・・



6. さらに派手にして風車にする

def draw translate width/2, height/2 ary = (0..11).map{|a| a*30}

ちょっと長いので２ページに分けて書きます

黒い部分のコードを追記または編集して下さい

def draw translate width/2, height/2 ary = (0..11).map{ |a| a *30 } ary.each do |r1| push_matrix rotate radians(r1) translate 100, 0 h = random 100



6. さらに派手に・・・の続き

ary.each do|r2| push_matrix rotate radians(r2) translate 50, 0 h= random 100 5.times do |i| i += 1 fill h, i*20, 99, 80 sz = 60 - i*10 rect 0, 0, sz, sz end pop_matrix

end end

黒い部分のコードを追記または編集して下さい

ary.each do |r2| push_matrix rotate radians(r2) translate 50, 0 5.times do |i| i += 1 fill h, i*20, 99, 80 sz = 60 - i*10 rect 0, 0, sz, sz end pop_matrix end pop_matrix end end



では実行してみましょう




とうとう風車になりました

ちょっと目がちかちかしますね892008年11月8日土曜日


よく分かる風車の説明

ちょっとネストが多かったですが

さっきの「輪っか」と

本質的には一緒です

チーム全員、無事に動きましたか？

お疲れさまでした



第一部はこんなことをやりました

‒ 1. rotate_rectangles.rbを自動生成する‒ 2. 四角形をいくつか表示する‒ 3. その四角形を真ん中に移動する‒ 4. キャンパスを45°回転させる‒ 5. ちょっと派手な輪っかにする‒ 6. さらに派手な風車にする

第二部はまた新しいコードを

自動生成するところから始めます

午前中を振り返る



第一部と同じく「コードを書く」

「コマンドプロンプトで実行」「結果を確かめる」「ちょこっと解説」

というループで進んでいきますよ

ではもう一度コマンドプロンプトを開いてcd C:¥ruby-processing

開発スペースまで移動



ここですよー

rbcフォルダありますねか？



ファイルを作成する

C:\ruby-processing>jruby script/generate rbc/movable_dot.rb 300 300

区切りは半角スペースです

第二部はこのファイルを使ってマウスをクリックしたらなんか起きる！

表示する図形をオブジェクトとして表現！みたいなことをやっていきます



rbcフォルダの中を見て下さい

movable_dot.rb

というファイルが出来ているはずです

どうですか？ありましたか？

ではエディタで開いて

中身を見てみてください



こんなファイルがありましたか？

ウィンドウサイズも指定したとおり300×300になっています




10. 「足場」のコードが出来ました


class MovableDot < Processing::App

def setup end def draw end end

MovableDot.new :title => "Movable Dot", :width => 300, :height => 300



実行すると・・・

第一部で最初にgenerateした時と同じで何もない空っぽのウィンドウが出ます

なので実行せずに先に進んじゃいますね



それではmovable_dot.rbを開いて

これからこのファイルに自分たちでコードを追加していきます

準備はいいですか？




class Positionendclass Rectangle < Positionendclass Dotendclass MovableDot < Processing::App

class MovableDot...よりも前に追加していきます

11. ３つのクラスを準備するmovable_dot.rbに３つのクラス

Position、Rectangle、Dotを作ります


1002008年11月8日土曜日



それでは実行してみ・・・ません！


1012008年11月8日土曜日


だって実行しても・・・

ウィンドウ上ではまだ何の変化もないんです

なので実行せずに先に進みます

1022008年11月8日土曜日


さてここからは

12. Positionクラスの中身を書く 13. Rectangleクラスの中身を書く

14. Dotクラスの中身を書く

15. 作った３つのクラスをMovableDotクラスから呼び出して使う

という順番で進みます

なのでちょっと長いですが

１５が終わるまでは「実行」は待って下さいね

1032008年11月8日土曜日


12. Positionクラスに色々追加する

movable_dot.rbのPositionクラスに先ずは「アクセッサ」を追加します


Positionクラスへの追記は次のページに続きます

require 'ruby-processing' class Position attr_accessor :x, :yend

class Rectangle < Positionend

1042008年11月8日土曜日

12. Positionクラス・・・の続き「アクセッサ」の次は

「initialize」を追加します


Positionクラスへの追記はさらに続きます

class Position attr_accessor :x, :y

def initialize(x = 0, y = 0, &block) move_to(x, y, &block) end

end

1052008年11月8日土曜日

12. Positionクラス・・・の続き「アクセッサ」「initialize」に続いて

最後は「move_toメソッド」を追加します


class Position attr_accessor :x, :y

def initialize(x = 0, y = 0, &block) move_to(x, y, &block) end

def move_to(x, y) @x = block_given? ? yield(x) : x @y = block_given? ? yield(y) : y endend

1062008年11月8日土曜日



画面は変わりませんが実行してみますか？


1072008年11月8日土曜日


変化ないことは知ってるけど実行！

C:\ruby-processing>jruby rbc/movable_dot.rb

特にエラーが出なければ

問題ありません

空っぽのウィンドウが表示されるはず

どうですか？

1082008年11月8日土曜日


変化ないですね・・・

取りあえずタイプミスがないことは確認出来ました！

それでは今書いたコードについて

ちょっと説明をします

1092008年11月8日土曜日


アクセッサってなに？

Positionクラスに最初に書いた

attr_accessor :x, :y

この「アクセッサ」って

いったいなんでしょう？

1102008年11月8日土曜日


アクセッサって？インスタンスフィールドに対する

ライター（セッター）／リーダー（ゲッター）を定義

irb(main):003:0> class Fooirb(main):004:1> attr_accessor :nameirb(main):005:1> end=> nil

irb(main):006:0> foo = Foo.new=> #<Foo:0x12ddfe4>

irb(main):007:0> foo.name = "Bar"=> "Bar"

irb(main):008:0> puts foo.nameBar=> nil

attr_accessorというメソッドに、引数:nameを渡している

1112008年11月8日土曜日


:name とか :x, :y って？

SymbolっていうStringと似ているオブジェクトです。お互いに変換可能。

irb(main):001:0> "foo".to_s=> "foo"irb(main):002:0> "foo".to_sym=> :fooirb(main):003:0> :foo.to_sym=> :fooirb(main):004:0> :foo.to_s=> "foo"

ちなみにこれらに継承関係はないですよirb(main):005:0> "foo".is_a?(Symbol)=> falseirb(main):006:0> :foo.is_a?(String)=> false

1122008年11月8日土曜日


Symbol その１

Symbolは文字列と違ってプログラム中で一度作られたら、同じ意味のものは２度と作られません。

irb(main):001:0> "foo".object_id=> 285710irb(main):002:0> "foo".object_id=> 278950# さっきと違う番号、つまり違うオブジェクトirb(main):003:0> :foo.object_id=> 145858irb(main):004:0> :foo.object_id=> 145858# さっきと同じ番号、つまり同じオブジェクト# メモリの節約です

1132008年11月8日土曜日


Symbol その２

使えるメソッドの違い

irb(main):026:0> "foo".methods.size=> 153irb(main):027:0> :foo.methods.size=> 46

文字列 "foo" は << とか、downcaseとか色々メソッドが使えるけど、シンボル:fooではほとんど使えません。

どんなメソッドがあるのかは、上の .size を外して実行してみれば分かりますよ。

1142008年11月8日土曜日


Symbol その３

irb(main):001:0> hash = {:x => 100, :y => 200}=> {:x=>100, :y=>200}irb(main):002:0> hash[:x]=> 100irb(main):002:0> hash[:y]=> 200irb(main):002:0> hash[:z]=> nil

という風にHash(連想配列。キーと値の組み合わせを持つデータ)のキーに使ったり・・・

1152008年11月8日土曜日


Symbol その４

irb(main):013:0> def foo(options = {})irb(main):014:1> options[:bar]irb(main):015:1> end=> nilirb(main):016:0> foo(:bar => 1)=> 1irb(main):017:0> foo(:hoge => 2)=> nil

という風に指定しなくてもいい引数(を表すHash)の名前(キー)として使います。

1162008年11月8日土曜日


Symbolその５def foo(t, x) case x when 1 then t.strftime("%Y/%m/%d") when 2 then t.strftime("%H:%M:%S") endendfoo(Time.now, 1)foo(Time.now, 2)

だと、1とか2の意味が分かりにくいので、シンボルで意味を表すようにします。

def foo(t, x) case x when :date then t.strftime("%Y/%m/%d") when :time then t.strftime("%H:%M:%S") endendfoo(Time.now, :time)foo(Time.now, :date)

1172008年11月8日土曜日


initializeってなに？

２つめに書いた

はいったい何をしているのか？

def initialize(x = 0, y = 0, &block) move_to(x, y, &block)end

1182008年11月8日土曜日

new --> initializeirb(main):001:0> class Fooirb(main):002:1> attr_accessor :x, :yirb(main):003:1> def initialize(x = 0, y = 0)irb(main):004:2> @x, @y = x, yirb(main):005:2> endirb(main):006:1> end

irb(main):007:0> foo = Foo.new=> #<Foo:0x1c8b884 @y=0, @x=0>irb(main):008:0> foo.x=> 0irb(main):009:0> foo.y=> 0

irb(main):010:0> bar = Foo.new(1, 2)=> #<Foo:0x1a9883d @y=2, @x=1>irb(main):011:0> bar.x=> 1irb(main):012:0> bar.y=> 2

1192008年11月8日土曜日


move_toメソッドは何をしている？

３つめのmove_toメソッド

「? ?」や「yield」は

何を表しているのでしょう？

def move_to(x, y) @x = block_given? ? yield(x) : x @y = block_given? ? yield(y) : y end

1202008年11月8日土曜日

３項演算子

irb(main):026:0> num = 1=> 1irb(main):027:0> num % 2 == 0 ? "even" : "odd"=> "odd"

irb(main):028:0> num = 2=> 2irb(main):029:0> num % 2 == 0 ? "even" : "odd"=> "even"

1212008年11月8日土曜日

yield　その１

irb(main):050:0> block_1 = Proc.new {|x, y| puts x + y}=> #<Proc:0x13a8eb1@(irb):51>

irb(main):051:0> block_2 = proc {|x, y| puts x + y}=> #<Proc:0x15200be@(irb):52>

irb(main):052:0> block_3 = lambda {|x, y| puts x + y}=> #<Proc:0x11b50a1@(irb):53>

1222008年11月8日土曜日

yield　その２

irb(main):053:0> block_1.call(1, 2)3=> nilirb(main):054:0> block_1[1, 2]3=> nilirb(main):055:0> block_2[1, 2]3=> nilirb(main):056:0> block_3[1, 2]3=> nil

タイプ数が少なくてすむから、こっちを採用

1232008年11月8日土曜日

yield　その３

irb(main):062:0> block_1[1, 2, 3]3=> nil

irb(main):063:0> block_2[1, 2, 3]ArgumentError: wrong number of arguments(3 for 2)・・・

irb(main):064:0> block_3[1, 2, 3]ArgumentError: wrong number of arguments(3 for 2)・・・

1242008年11月8日土曜日

yield　その４

irb(main):071:0> def multiple(a, b, &block)irb(main):072:1> block[a, b]irb(main):073:1> end=> nilirb(main):074:0> multiple(1, 2){|x, y| puts x + y}3=> nilirb(main):075:0> def multiple(a, b)irb(main):076:1> yield a, birb(main):077:1> end=> nilirb(main):078:0> multiple(1, 2){|x, y| puts x + y}3=> nil

1252008年11月8日土曜日

yield　その５

irb(main):079:0> def multiple(a, b, &block)irb(main):080:1> block[a, b, 3]irb(main):081:1> end=> nilirb(main):082:0> multiple(1, 2){|x, y| puts x + y}3=> nilirb(main):083:0> def multiple(a, b)irb(main):084:1> yield a, b, 3irb(main):085:1> end=> nilirb(main):086:0> multiple(1, 2){|x, y| puts x + y}3=> nil

1262008年11月8日土曜日


13. Rectangleクラスを実装する今度はPositionクラスを継承する

Rectangleクラスを作っていきますよ


class Rectangle < Position attr_accessor :width, :height def initialize(x, y, width, height) super(x, y) @width, @height = width, height end

def to_a [@x, @y, @width, @height] endend

このクラスはPositionで保持する位置情報に加えて幅と高さの情報も持っています

1272008年11月8日土曜日



まだまだ実行しても画面は変わりません


1282008年11月8日土曜日


クラスを２つも実装したのに・・・

ウィンドウ上ではまだまだ変化がありません

実行せずに先に進んでしまいましょう

1292008年11月8日土曜日


あ、さっき見たばかりのアクセッサ

Positionクラスで書いたアクセッサが Rectangleクラスにもいましたね

attr_accessor :width, :height

1302008年11月8日土曜日


14. Dotクラスを実装する３つめのDotクラスを作ります

黒い部分のコードを追記して下さいclass Dot include Math

DEFAULT_SIZE = 10 DEFAULT_MARGIN = 2

def initialize(position, w = DEFAULT_SIZE , h = DEFAULT_SIZE) @app = Processing::App.current @rect = Rectangle.new(position.x, position.y, w, h) end

def display c1 = @app.color(255, 255, 255, 255) @app.fill c1 @app.rect(*@rect.to_a) endend

後で実行するときにアスタリスクの有無で

出力結果がどう変わるか比較してみよう

1312008年11月8日土曜日



余裕のある人だけ実行してみましょうか？

このソースは「code14.txt」として配布されています1322008年11月8日土曜日


変化ないことは知ってるけど実行！


今回も特にエラーが

出なければ問題ありません

空っぽのウィンドウが表示されるはず

どうですか？

1332008年11月8日土曜日


うん、変化ないですね・・・

取りあえずタイプミスがないことは確認出来ました！

お隣の人の進み具合はどうですか？

ではコードについてちょっと説明します

1342008年11月8日土曜日

@app.rect(*@rect.to_a)★rectメソッドのパラメータ指定例　　@app.rect(ｘ座標, ｙ座標, 幅, 高さ)

irb(main):001:0> def to_airb(main):002:1> [100, 200, 300, 400]irb(main):003:1> end

irb(main):004:0> def foo(a, b=nil, c=nil, d=nil)irb(main):005:1> p airb(main):006:1> p birb(main):007:1> p cirb(main):008:1> p dirb(main):009:1> end

irb(main):010:0> foo(to_a) irb(main):011:0> foo(*to_a)

アスタリスクの有無で、出力結果を比較してみよう

1352008年11月8日土曜日


進み具合をちょっと確認

12. Positionクラスの中身を書く 13. Rectangleクラスの中身を書く

14. Dotクラスの中身を書く

まではチーム全員、完了しましたか？

それではいよいよ上記３つのクラスを使う MovableDotクラスを実装します

これが終わるとやっと

画面に変化が現れますよ！

1362008年11月8日土曜日


15. MovableDotクラスを書くちょっと長いので２ページに分けますね

黒い部分のコードを追記して下さいclass MovableDot < Processing::App

THE_NUM_OF_DOT = 20

def setup @dots = [] dot_size, dot_margin = Dot::DEFAULT_SIZE, Dot::DEFAULT_MARGIN

THE_NUM_OF_DOT.times do |i| initial_position = Position.new(width, height) do |wh_value| i * (dot_size + dot_margin) + wh_value/2 - THE_NUM_OF_DOT * ((dot_size + dot_margin)/2) end @dots << Dot.new(initial_position) end end

「i * (dot」から「margin)/2)」までは実際は一行です

1372008年11月8日土曜日


15. MovableDotクラス・・・の続き


これでmovable_dot.rbに

４つのクラスが実装出来ました

def draw background 0 @dots.each {|dot| dot.display} endend MovableDot.new :title => "Movable Dot", :width => 300, :height => 300

1382008年11月8日土曜日



それでは実行してみましょう！


1392008年11月8日土曜日


実行すると今度こそウィンドウに変化


どうですか？

やっと画面に変化がでましたか？

エラーが出たら焦らずに

４つのクラスを見直してみましょう

1402008年11月8日土曜日

わー、ぱちぱち！

たくさんの四角が出たら大成功！コードについてちょっと解説しますね

1412008年11月8日土曜日


複数の変数への代入を1行で

irb>> foo, bar = 1, 2=> [1, 2]irb>> p foo1irb>> p bar2 irb>> foo, bar = [5,6]=> [5, 6]irb>> p foo5irb>> p bar6

1422008年11月8日土曜日


16. Dotをカラフルに動かしてみよう

白だけだったDotに色をつけます

movable_dot.rbのDotクラスにあるdisplayメソッドを一行だけ変更します

黒い部分のコードを編集して下さい

def display c1 = @app.color(255, 255, 255, 255) @app.fill c1 @app.rect(*@rect.to_a) end

def display c1 = @app.color(*(0..3).map{rand(255)}) @app.fill c1 @app.rect(*@rect.to_a)end

1432008年11月8日土曜日



たった一行で何が変わるのでしょう？


1442008年11月8日土曜日


実行してカラフルなDotを見よう


ちかちか眩しい！

たった一行しか変えていないのに

こんなに変わるんですね

動いたら拍手！拍手！

1452008年11月8日土曜日

動いたー、ぱちぱち！

四角の色がちかちか変わりますでは今の変更についてちょこっと解説します

1462008年11月8日土曜日

*(0..3).map{rand(255)}

irb(main):005:0> p (0..3).map{rand(255)}[36, 185, 183, 242]=> nil

irb(main):006:0> p *(0..3).map{rand(255)}98322788=> nil

1472008年11月8日土曜日


17. Dotをネオンにしてみる

ちかちか光るDotを今度はネオンっぽくしてみましょう

MovableDotクラスにある

setupメソッドの先頭に一行だけ追加します

黒い部分のコードを編集して下さい class MovableDot < Processing::App

THE_NUM_OF_DOT = 20 def setup frame_rate 1 @dots = []

１秒につき何回「drawメソッド」を実行するか指定していますちなみにデフォルトは

６０回

1482008年11月8日土曜日



フレームレートが６０から１になるとどうなるんだろう？


1492008年11月8日土曜日


ネオンなDotを実行してみよう


フレームレートが変わると

こうなるんですね

ちかちかが少しゆっくりになって

ネオンらしくなりました

1502008年11月8日土曜日

ネオンが表示されました

四角の色がゆっくり変わります

1512008年11月8日土曜日


18. 続いてDotを大きくしてみよう

今度はDotのサイズを変えてみます

Dotクラスにあるdiplayメソッドにstrokeメソッドを追加します

黒い部分のコードを編集して下さい

def display c1 = @app.color(*(0..3).map{rand(255)}) @app.fill c1 @app.stroke c1 @app.rect(*@rect.to_a) end

1522008年11月8日土曜日



strokeメソッドが書けたら実行してみましょう


1532008年11月8日土曜日


Dotの大きさを変えて実行してみよう


Dotはどれくらいの

サイズになりましたか？

これで大きさの変え方は

もう完璧ですね

1542008年11月8日土曜日

大粒のネオンになった

ひとつひとつのDotが大きくなっています

1552008年11月8日土曜日

ちょっと休憩

最初は真っ白だったDotを

カラフルにして

ネオンみたいにして

大きさも変えてみました

みなさん上手く行きましたか？

さて次はどうしましょう？

1562008年11月8日土曜日


19. もっとたくさんのDotを作ろう

Dotの量をうんと増やしてみましょうMovableDotクラスにあるsetupメソッドに黒い部分のコードを追加して下さい

@dots = [] dot_size, dot_margin = Dot::DEFAULT_SIZE, Dot::DEFAULT_MARGIN

THE_NUM_OF_DOT.times do THE_NUM_OF_DOT.times do |i| initial_position = Position.new(width, height) do |wh_value| i * (dot_size + dot_margin) + wh_value/2 - THE_NUM_OF_DOT * ((dot_size + dot_margin)/2) end @dots << Dot.new(initial_position) end end end

THE_NUM_OF_DOTのループが二重になった

1572008年11月8日土曜日



ではループが二重になった状態で実行してみましょう


1582008年11月8日土曜日


では実行してみましょう


２０×２０で４００になってるはずだニャ！

1592008年11月8日土曜日

Dotが４００個になった！

では増やしたDotをぐりぐり動かしましょう

さっきの実行結果とちょっと似ていますがこの後Dotを動かすと数が増えたことがよーく分かります

1602008年11月8日土曜日


20. Dotを動かしてみよう

それではDotを動かすために、これから４つのクラスを書きます

1. 新しくLoopQueueクラスを作る2. Positionクラスを編集3. Dotクラスを編集

4. MovavleDotクラスを編集

という順番で進めていきますよ

movable_dot.rbの準備はいいですか？

1612008年11月8日土曜日


class LoopQueue def initialize(*items) @items = items @index = 0 end

def next @index += 1 @index = 0 if @index == @items.length current end

def current @items[@index] endend

LoopQueueはDotの表示パターンを保持するクラスです

先ずはLoopQueueクラスを作る

Dotを動かすための準備をします黒い部分のコードを追加して下さい

1622008年11月8日土曜日



みなさん書けましたか？続けてPositionクラスを編集します

1632008年11月8日土曜日

def move_to(x, y) @x = block_given? ? yield(x, :x, @x) : x @y = block_given? ? yield(y, :y, @y) : y end

def move_by(dx, dy) @x += block_given? ? yield(dx, :x, @x) : dx @y += block_given? ? yield(dy, :y, @y) : dy endend class Rectangle < Position

次にPositionクラスを編集

黒い部分のコードを編集、追加して下さい

yieldの引数も変更

1642008年11月8日土曜日

def initialize(position, w = DEFAULT_SIZE , h = DEFAULT_SIZE) @app = Processing::App.current @rect = Rectangle.new(position.x, position.y, w, h) @original_position = position.dup @@dot_count ||= 0 @dot_num = (@@dot_count += 1) @speed = 0.05 @next = Position.new end

Dotクラスも編集

３箇所に追記をします先ずはinitializeメソッドから

黒い部分のコードを追加して下さい

@nextにパターン変更後の位置情報を保持設定はまた後で！

1652008年11月8日土曜日


Numeric（Fixnum, Float）irb(main):001:0> 10 / 3=> 3 irb(main):002:0> 10 / 3.0=> 3.3333333333333335irb(main):003:0> 10.0 / 3=> 3.3333333333333335irb(main):004:0> (10/3).class=> Fixnumirb(main):005:0> (10/0.3).class=> Floatirb(main):006:0> (10.0/3).class=> Floatirb(main):007:0> (10/3).to_f=> 3.0

1662008年11月8日土曜日

def move case @app.patterns.current when :line @next.move_to(@original_position.x, @original_position.y) when :circle @next.move_to(@app.width, @app.height) do |wh_value, attr| val, sin_or_cos = (attr == :x) ? [10, 'sin'] : [20, 'cos'] (wh_value/2-val) * self.__send__(sin_or_cos, radians(@dot_num * 360/@@dot_count)) + wh_value/2 end else raise NameError, "Unsupported pattern: #{@app.patterns.current.inspect}" end @rect.move_by(@rect.x - @next.x, @rect.y - @next.y) do |value, attr| -(value * @speed) end end

Dotクラスも編集・・・の続きinitializeメソッドの下に

新しくmoveメソッドを作ります

1672008年11月8日土曜日

end end def radians(x) x * (PI/180) end def display c1 = @app.color(*(0..3).map{rand(255)})

Dotクラスも編集・・・の続きさらにmoveメソッドの下に

新しくradiansメソッドを作ります


1682008年11月8日土曜日



1692008年11月8日土曜日

(wh_value/2-val) * self.__send__(sin_or_cos, radians(@dot_num * 360/@@dot_count)) + wh_value/2

x座標=

円の半径＊sin(ラジアン値の角度) + ウィンドウの幅/2

y座標=円の半径＊cos(ラジアン値の角度) + ウィンドウの高さ/2

今書いたコードをちょこっと解説

Dotを円状に配置するためさきほどDotクラスのmoveメソッドに

こんなコードを書きました

1702008年11月8日土曜日


caseirb(main):002:0> def case_test(o)irb(main):003:1> case oirb(main):004:2> when String : "This is String."irb(main):005:2> when Fixnum : "This is Fixnum."irb(main):006:2> when Array : "This is Array."irb(main):007:2> endirb(main):008:1> end=> nilirb(main):009:0> case_test(1)=> "This is Fixnum."irb(main):010:0> case_test([1,2])=> "This is Array."irb(main):011:0> case_test("RBC")=> "This is String."irb(main):012:0>

Attention!!Ruby1.9ではコロン（：）

使用不可、thenを

1712008年11月8日土曜日


send その１

irb(main):001:0> t = Time.now=> Wed Nov 08 00:07:41 +0900 2008irb(main):002:0> t.year=> 2008irb(main):003:0> t.month=> 11irb(main):004:0> t.day=> 8irb(main):005:0> t.send(:year)=> 2008irb(main):006:0> t.send(:month)=> 11irb(main):007:0> t.send(:day)=> 8

sendを使って呼び出すメソッド名を動的に変更することも可能になります。

1722008年11月8日土曜日


send その２

irb(main):001:0> t = Time.now=> Wed Nov 08 00:07:41 +0900 2008irb(main):002:0> t.strftime('%Y/%m/%d %H:%M:%S')=> "2008/11/05 00:07:41"irb(main):003:0> t.send(:strfrime, '%Y/%m/%d %H:%M:%S')=> "2008/11/05 00:07:41"

引数が必要なメソッドでもメソッド名の後にそのメソッドへの引数を書けばOK

1732008年11月8日土曜日


send その３irb(main):001:0> class Fooirb(main):002:1> attr_accessor :bar irb(main):003:1> end=> nilirb(main):004:0> foo = Foo.new=> #<Foo:0x7e1596>irb(main):005:0> foo.bar = "AAA"=> "AAA"irb(main):006:0> foo.send(:bar=, "BBB")=> "BBB"irb(main):007:0> foo.bar=> "BBB"

代入だってsendで呼び出すことができちゃうよ

1742008年11月8日土曜日

class MovableDot < Processing::App

attr_accessor :patterns THE_NUM_OF_DOT = 20

def setup frame_rate 5 @patterns = LoopQueue.new(:line, :circle) @dots = []

最後にMovableDotクラスを編集

２箇所に追記、編集をします先ずはLoopQueueインスタンスの生成から


frame_rateの数も変更

1752008年11月8日土曜日

def draw background 0 @dots.each {|dot| dot.display; dot.move} end def mouse_pressed @patterns.next end

MovableDotクラス・・・の続き

次にイベントリスナーを用意しますこれによりマウスがクリックされると・・・


1762008年11月8日土曜日




1772008年11月8日土曜日


ここまで長かった・・・いざ実行！


上手くいかないと空っぽのウィンドウとエラーメッセージが出てしまいます

期待通りのウィンドウが出た人は

画面をクリックしてみましょう！

1782008年11月8日土曜日

クリックするたびに・・・

1792008年11月8日土曜日


21. Dotを動かすパターンを増やす

さらに違う動きを足してみましょう Dotクラスのmoveメソッドに


val, sin_or_cos = (attr == :x) ? [10, 'sin'] : [20, 'cos'] (wh_value/2-val) * self.__send__(sin_or_cos, radians(@dot_num * 360/@@dot_count)) + wh_value/2 end when :center @next.move_to(@app.width/2, @app.height/2) when :random @next.move_by(@app.width/8, @app.height/8) do |value, attr| @app.random(-value, value) end else raise NameError, "Unsupported pattern: #{@app.patterns.current.inspect}"

1802008年11月8日土曜日


21. Dotを動かすパターン・・・の続き

MovableDotクラスのsetupメソッドにも黒い部分のコードを追記して下さい

def setup frame_rate 5 @patterns = LoopQueue.new(:line, :circle, :center, :random) @dots = []

これで今日書くコードはすべておしまいです

さあ自分自身で書いたコードを実行して

絵をぐりぐりして遊びましょう！

1812008年11月8日土曜日





1822008年11月8日土曜日


動きの増えたDotを実行します


無事実行されましたか？

進みの速い人は

チームの人や近くの困っている人を

助けてあげて下さいね

1832008年11月8日土曜日


400個のDotが重なり合いながら整列

最初はこんな形ですが・・・

1842008年11月8日土曜日


クリックするたび

まるーくなっていったり・・・

1852008年11月8日土曜日

さらにクリックすると

真ん中に集まっていったり・・・

1862008年11月8日土曜日


もう一回、クリックすると

ばらばらに広がっていったり・・・自分で書いたコードが自在に動いています

1872008年11月8日土曜日


やったー！！！

1882008年11月8日土曜日


つづきは、懇親会で・・・

1892008年11月8日土曜日


RBCへの入会はこちら

Rubyビジネス・コモンズへの参加は

メーリング・リストへ

参加することで行われます

http://qwik.rubybizcommons.jp/members/2.html

今後の勉強会の告知もこのメーリング・リストで行われます

1902008年11月8日土曜日




1912008年11月8日土曜日

11月8日イケテルjruby勉強会＠東京

Technology

Transcript of 11月8日イケテルjruby勉強会＠東京