シンプルな  プログラムを  理解りかい  し、  自分じぶんで  変更へんこう  した  パラメータに  よって  図形ずけいの  動うごきが  変化へんか  する  ことを  体たい験けんする  ことで、  重じゅう度ど  視覚しかく  障害しょうがいが  あっても  グラフィカルな  プログラミングを  自じ作さく  する  可能性かのうせいが  ある  ことを  感かんじて  欲ほしいと  考かんがえて  います。  DXrubyを  使つかい、  短みじかい  コードで  動うごく  ものを  体験たいけん  します。

  

  ruby  および  ライブラリの  DXrubyを  使つかって、  キーボード  入力にゅうりょくに  反応はんのう  して  図形ずけいが  動うごいたり  音おとが  再生さいせい  されたり  する  プログラムを  理解りかい  し、  自分じぶんで  パラメータを  変更へんこう  して  点てん図ず  ディスプレイの  DV-2で  動うごきを  確認かくにん  します。

  

  ・ コンピュータに  Rubyを  インストール  し、  DXrubyを  展開てんかい  して  おきます。

  ・ .rbの  ファイルの  規定きていの  プログラムを  マイエディットや  メモ帳ちょうに  して  おきます。

  ・ DV-2の  ドライバと  GViewを  インストール  して  おきます。  DV-2の  Ver.1を  Windows10で  利用りよう  する  場合ばあいは  署名しょめい  なし  ドライバの  インストールを  許可きょか  しなくては  ならないので、  セキュアブートを  OFFに  した  後あとに  コマンド  ラインで

bcdedit /set TESTSIGNING ON

と  打うち込こみ、  設定せっていの  更新こうしんと  セキュリティ、  回復かいふく  メニューから  PCの  起き動どうを  カスタマイズ  し  署名しょめい  なし  ドライバを  インストール  できるように  する  …など、  多少たしょう  面倒めんどうな  作業さぎょうが  必要ひつように  なります。

  ・ DV-2に  表示ひょうじ  する  プログラム  GViewの  動作どうさ  確認かくにんを  して  おきます。  COMポートは  一回いっかい  指定してい  すれば  次つぎから  正ただしい  ものを  最初さいしょに  選えらんで  くれます。  設定せっていと  しては  フォーカスの  当あたった  ウィンドウだけを  表示ひょうじ  する  モードに  し、  リフレッシュ  レートを  0.1秒びょうに  して  おきます。

  ・ ユーザー  ディレクトリの  下したに  サブディレクトリを  作つくり、  その  下したに  サンプル  プログラムを  すべて  コピー  して  おきます。  もしくは  USBメモリなどに  入いれて  おきます。

  

Windowsキーを  押おした  後あとに  「cmd」と  入力にゅうりょく  して  コマンド  ラインを  開ひらきます。

「cd サブディレクトリ名めい」  もしくは  「ドライブレター:」などで  サンプルの  ある  場所ばしょに  移動いどう  します。  サンプルは  数字すうじで  始はじまる  プログラム名めいなどに  して  おき、  直接ちょくせつ  入力にゅうりょく  したり  Tabキーの  ファイル名めい  補完ほかんなどを  使つかったり  して  コマンド  ラインから  開ひらくように  します。

 

例たとえば  「1.rb」と  いう  ファイル名めいを  つけて  いた  場合ばあい  「数字すうじの  1を  押おして  Tabキーを  押おしてから  Enterキーを  押おして  ください」と  伝つたえる  ことで、  メモ帳ちょうで  ソース  コードを  開ひらく  ことが  できます。  （あらかじめ  規定きていの  プログラムを  メモ帳ちょうに  して  おく  必要ひつようが  あります）

 

最初さいしょの  サンプルは  以下いかの  四角形しかくけいを  描かく  コードです。  開ひらいたら  順じゅんに  説明せつめい  します。

  

 

#まず  dxrubyと  いう  ライブラリを  使つかえるように  する。

require 'dxruby'

#Image  オブジェクトを  生成せいせい。

img1 = Image.new(640, 480, [0, 0, 0])

#白しろい  四角形しかくけいを  img1に  描かく。

img1.box_fill(100, 100, 250, 200, [255, 255, 255])

#ここから  無限むげん  ループ  スタート。

Window.loop do

  #img1  領域りょういきを  描かく。

  Window.draw(0, 0, img1)

end

 

・ シャープ（＃）  以降いこうは  プログラムとは  関係かんけいの  ない  コメント  すなわち  注ちゅう釈しゃくに  なる。

・ requireは  「要求ようきゅう  する」と  いう  意味いみ。  dxrubyと  いう  ライブラリを  使つかえるように  宣言せんげん  して  いる。

・ ライブラリとは、  外部がいぶから  呼よび出だせる  プログラムを  ひとまとめに  した  もので  ある。

・ まず  「新あたらしい  Image  オブジェクト」を  Image.newと  いう  命令めいれいで  作つくる。  オブジェクトと  いうのは  プログラムの  中なかの  「意味いみの  ある  塊かたまり」の  こと。  とりあえず  Image  オブジェクトは  絵えを  描かく  キャンバスのような  ものだと  説明せつめい  して  おく。

・ 最初さいしょの  数字すうじは  横よこ幅はば、  次つぎの  数字すうじは  高たかさ、  角かくカッコで  囲かこわれた  数字すうじは  背景はいけい色しょくを  表あらわす。  色いろは  順じゅんに  赤あか、  緑みどり、  青あおの  色いろの  強つよさの  意味いみで  あり、  255が  最大値さいだいちで  ある。  すべて  0だと  黒くろを  意味いみ  する。

・ 生成せいせい  した  Image  オブジェクトに  img1と  いう  名前なまえを  付つけて  いる。  イコールは  名前なまえを  つけると  いう  意味いみで  ある。

・ 次つぎに  img1  オブジェクトに  box_fillと  いう  命令めいれいで  四角形しかくけいを  描かく。  命令めいれいの  ことを  「メソッド」と  呼よぶ。  左上ひだりうえの  座標ざひょうと  右下みぎしたの  座標ざひょう、  色いろを  指定してい  する。

・ オブジェクトに  対たいする  命令めいれいは  ドットで  つなげる。

・ Window.loop doから  endまでは  無限むげんに  繰くり返かえされる。  Window  オブジェクトに  対たいして  何なにも  指定してい  しなければ  幅はば  640ドット  高たかさ  480ドットの  ウィンドウが  生成せいせい  される。

・ 無限むげん  ループの  中なかで  drawと  いう  命令めいれいを  使つかって  img1を  描かいて  いる。  左ひだりから  0ドット、  上うえから  0ドットの  位置いちを  指定してい  した  ことに  なる。  その  位置いちが  img1の  左上ひだりうえの  点てんに  なる。  位置いちを  ずらす  ことも  できる。

 

これらの  解説かいせつを  終おえたら、  実行じっこう  して  みます。

 

 ruby  プログラム名めい

 

と  打うち込こませます。  適てき宜ぎ  ファイル名めい  補完ほかんを  使つかわせた  方ほうが  確実かくじつです。  「rubii」などと  打うって  しまう  場合ばあいが  あるので、  「アール、  ユー、  ビー、  ワイ、数字すうじ、  タブキー、  エンター」と  最初さいしょは  細こまかく  指示しじ  する  方ほうが  良よいでしょう。  プログラムを  動うごかすと、  下したのような  ウィンドウが  現あらわれます。  終了しゅうりょうは  Alt+F4です。

 

四角形しかくけいを  表示ひょうじ  した  ウィンドウ

  

 

ここで  Windowsキーを  押おし、  「GView」と  打うち込こんで  GViewを  起き動どう  します。  移動いどう  する  図形ずけいの  表示ひょうじの  ために  0.1秒びょうの  リフレッシュ  レート  設定せっていを  確認かくにん  して  ください。  GViewが  問題もんだい  なく  起き動どう  したら、  本体ほんたいの  拡大かくだい・  縮小しゅくしょうキーと  側面そくめんに  ある  上下じょうげ  左右さゆうの  カーソルキーの  使つかい方かたを  説明せつめい  します。  手前てまえの  ジョイスティック  部分ぶぶんは  古ふるい  機種きしゅは  バー状じょうに  なって  いて  誤ご操作そうさ  して  しまうかも  しれないので、  周辺しゅうへんを  押おすように  指導しどう  します。  また、  拡大かくだい  縮小しゅくしょうの  ボタンと  間違まちがえて  横よこの  ステータス  表示ひょうじの  ボタンを  押おして  しまう  場合ばあいが  あります。  慌あわてずに  もう  一度いちど  同おなじ  ボタンを  押おす  ことを  ここで  教おしえて  おきます。  ステータス  表示ひょうじで  誤ご操作そうさを  して  しまうと、  DV-2の  表示ひょうじ  閾値しきいちを  変かえて  しまったり  する  ことも  あるので  注意ちゅうい  します。  あらかじめ  硬かたい  紙かみなどで  覆おおって  おくのも  有効ゆうこうだと  思おもいます。

  

 

線せんや  円えんなど、  他ほかの  図形ずけいを  描かいて  みます。  img1.box_fillの  行ぎょうに  続つづいて  下記かき  コードを  box_fillの  行ぎょうの  下したに  入力にゅうりょく  させ、  表示ひょうじ  させます。  キーボードの  打うち込こみに  不安ふあんが  ある  場合ばあいは、  テキスト  ファイルを  用意ようい  して  おいて、  全ぜん選択せんたく、  コピー、  ペーストなどを  指示しじ  します。

説明せつめいの  ポイントは  数値すうちの  意味いみに  なります。

  

#円えんを  描かく。

img1.circle_fill(340, 200, 50, C_WHITE)

#線せんを  描かく。

img1.line(20, 300, 500, 30, C_YELLOW)

 

・ circleは  円えん、  fillは  塗ぬりつぶしの  意味いみ。

・ circle_fill(x座標ざひょう, y座標ざひょう, 半径はんけい, 色いろ)

・ line(端点たんてんのx座標ざひょう, 端点たんてんのy座標ざひょう, 異ことなる端点たんてんのx座標ざひょう, 異ことなる端点たんてんのy座標ざひょう, 色いろ)

・ C_WHITEは  白しろ、  C_YELLOWは  黄色きいろ。

 

これらの  意味いみを  理解りかい  させた  後あとで、  自分じぶんで  数値すうちを  変かえて  実行じっこう  させます。

 

課題かだいと  しては、  見みえる  生徒せいとさんに  対たいしては  色いろを  用もちいて  国旗こっきなどを  描かかせたり、  全ぜん盲もうの  生徒せいとさんに  対たいしては  雪ゆきだるまなど、  四角形しかくけいと  円えんで  描かける  触察しょくさつ  可能かのうな  図形ずけいを  作つくらせたり  すると  良よいと  思おもいます。

 

いくつか  図形ずけいを  追加ついか  した  ウィンドウ

  

 

ここまでは  Image  オブジェクトを  キャンバス  代かわりに  使つかって  みましたが、  実際じっさいには  画像がぞう  ファイルを  読よみ込こんで  表示ひょうじ  したり  する  「画像がぞうの  入いれ物もの」と  して  使つかいます。  次つぎの  サンプルを  確認かくにん  し、  動うごかして  みます。

require 'dxruby'

#test.pngと  いう  画像がぞう  ファイルを  読よみ込こんで  img1と  いう  名前なまえを  つける。

img1 = Image.load('test.png')

#ここから  無限むげん  ループ  スタート。

Window.loop do

  #img1を  指定してい  した  座標ざひょうを  左上ひだりうえと  して  描びょう画が  する。

  Window.draw(100, 100, img1)

end

 

新あたらしい  部分ぶぶんは  Image  オブジェクトの  load  メソッドだけです。  ここを  説明せつめい  した  後あとで、  表示ひょうじ  する  座標ざひょう値ちなどを  変かえさせて  みて  ください。  画像がぞう  ファイルには、  生徒せいとの  年代ねんだいが  皆みな  知しって  いる  キャラクターの  なかで  DV-2に  表示ひょうじ  しやすい  明あかるい  色いろの  ものなどを  選えらぶと  良よいでしょう。

  

 

キーボードの  矢印やじるしキーの  入力にゅうりょくに  ついては  Input.xと  Input.yで  取得しゅとく  できます。  ジョイスティックが  つながって  いる  場合ばあいは  ジョイスティックの  動うごきが  反映はんえい  されます。  次つぎの  サンプルを  開ひらいて  中なかを  確認かくにん  します。

require 'dxruby'

#test.pngと  いう  画像がぞう  ファイルを  読よみ込こんで  img1と  いう  名前なまえを  つける。

img1 = Image.load('test.png')

#画像がぞうの  触しょく察さつが  難むずかしいようなら  DV-2用ように  以下いかの  行ぎょうを  使つかう。

#img1 = Image.new(50, 50, C_WHITE)

 

#xと  yの  値あたいを  ゼロで  初期化しょきか  する。

x=0; y=0;

#ここから  無限むげん  ループ  スタート。

Window.loop do

  #xと  yを  更新こうしん  して  その  座標ざひょうで  img1を  描かく。

  x=x+Input.x; y=y+Input.y;

  Window.draw(x, y, img1)

end

 

・ img1の  生成せいせいまでは  これまで  学まなんで  いる。

・ xと  yは  中なかの  数値すうちが  変かわる  入いれ物もので  「変数へんすう」と  呼よぶ。  最初さいしょに  ゼロを  代入だいにゅう  して  初期化しょきか  して  いる。

・ Window.loop do  ～  endの  無限むげん  ループの  中なかで  xと  yは  変化へんか  する。

・ もとの  値あたいに  Input.xや  Input.yで  得えられる  値あたいを  加くわえて  いる。  これらは  矢印やじるしキーが  押おされて  いると  +1や  -1に  なる。

 

説明せつめいを  終おえたら  「もっと  速はやく  動うごかすには」  「遅おそく  動うごかすには」と  いう  課題かだいを  解とかせます。  適てき宜ぎ  Input.xが  変化へんか分ぶんで  あることを  ヒントに  与あたえたり  します。

  

 

  座標ざひょう値ちを  一定いってい  割合わりあいで  変化へんか  させる  ことで  動うごく  ボールを  表現ひょうげん  して  みます。  以下いかの  サンプル  コードを  流ながれに  沿そって  確認かくにん  します。

require 'dxruby'

img1 = Image.new(30, 30, C_BLACK)

img1.circle_fill(15, 15, 15, C_WHITE)

x=0;

#ここまでは  既すでに  学まなんだ  内容ないよう。  次つぎの  dxは  x方向ほうこうの  変化へんか分ぶん。

dx=1

#円えんを  縦たて方向ほうこうの  真まん中なかに  表示ひょうじ  する  ために  以下いかの  式しきで  yを  決きめる。

y=(Window.height-img1.height)/2

#無限むげん  ループ  スタート

Window.loop do

  #xを  dxだけ  変化へんか  させる  ために  x=x+dx  と  する。  x+=dx  と  いう  書かき方かたも  ある。

  x+=dx

  #xが  ウィンドウの  横よこ幅はばを  はみ出だそうに  なったら  方向ほうこうを  変かえる。

  if(x>Window.width-30) then

    #方向ほうこうを  変かえる。  ここは  dx*=-1  と  書かいても  良よい。

    dx=dx*(-1)

  end

  Window.draw(x, y, img1)

end

 

  ・ dxと  いう  変数へんすうが  新あらたに  加くわわった。  これは  変化へんか分ぶんを  意味いみ  する  変数へんすう。  初期値しょきちは  +1。

  ・ yは  固定こてい。  ウィンドウの  高たかさの  半分はんぶんから  img1の  半分はんぶんの  高たかさを  引ひいた  座標ざひょう。  これにより  図ずは  真まん中なかに  来くる。

  ・ 無限むげん  ループの  中なかで  x=x+dx  と  する  ことで  右みぎに  移動いどう。

  ・ 右端みぎはしで  跳はね返かえる  ために  「条件じょうけん  分岐ぶんき」を  行おこなう。  条件じょうけん  分岐ぶんきとは、  「もし  ～なら  〇〇  する」と  いう  命令めいれいを  実現じつげん  する  もので  ある。

  ・ 条件じょうけん  分岐ぶんきは  「x座標ざひょうが  ウィンドウの右端みぎはしの座標ざひょう-img1の横よこ幅はば  より  大おおきく  なった  場合ばあい」に  変化へんか分ぶんを  左ひだり方向ほうこうに  する  こと。

  ・ 右みぎ方向ほうこうへの  変化へんか  （dx=1）から  左ひだり方向ほうこうへの  変化へんかは  -1を  掛かけ算ざん  すると  実現じつげん  できる。

 

  しかし  このままだと、  右みぎで  跳はね返かえった  後あと、  左側ひだりがわに  消きえて  いって  しまいます。  そこで、  「x座標ざひょうが  ゼロより  小ちいさく  なったら」と  いう  条件じょうけんを  加くわえさせます。

 

if(x>Window.width-30 || x<0) then

 

  「この  縦棒たてぼう  2つは、  「もしくは」と  いう  意味いみで  ある。  ここで  dx=dx*(-1)  の  意味いみを  再確認さいかくにん  する。  左ひだり方向ほうこうへの  移動いどうから  右みぎ方向ほうこうへの  移動いどうに  変かわるのも、  実現じつげん  できて  いる。」と  いう  ことを  理解りかい  させます。

 

  ここまで  来きたら  生徒せいとの  進しん度どや  理解りかい度どを  確認かくにん  しつつ  「y方向ほうこうにも  同様どうように  変化へんか  する  プログラムに  せよ。」と  いう  課題かだいなどを  出だして  みるのも  良よいでしょう。

  

 

require 'dxruby'

img1 = Image.new(80, 80, C_BLACK)

img1.circle_fill(40, 40, 40, C_WHITE)

x=0; dx=3

y=(Window.height-img1.height)/2

dy=3

 

Window.loop do

  x+=dx; y+=dy

  if(x>Window.width-img1.width || x<0) then

    dx*=-1

  end

  if(y>Window.height-img1.height || y<0) then

    dy*=-1

  end

  Window.draw(x, y, img1)

end

  

 

  スペースキーを  押おしたら  音おとが  再生さいせい  される  サンプル  コードを  開ひらいて  中身なかみを  確認かくにん  します。

require 'dxruby'

#Sound  オブジェクトを  生成せいせい  して  snd1と  いう  名前なまえを  つける。

snd1 = Sound.new("C:¥¥Windows¥¥Media¥¥ding.wav")

#無限むげん  ループ  スタート。

Window.loop do

  #もし  SPACEキーが  押おされたら  snd1を  再生さいせい  する。

  if Input.key_push?(K_SPACE) then

      snd1.play

  end

end

 

 ・ Sound.newで  サウンド  オブジェクトを  生成せいせい、  snd1と  いう  名前なまえに  して  おく。

 ・ Input.key_push?  と  いう  命令めいれいで  特定とくていの  キーが  押おされたか  どうか  判断はんだんが  つく。

 ・ スペースキーが  押おされたならば  Sound  オブジェクトの  playメソッドを  呼よび  音おとを  鳴ならす

 

 プログラムが  理解りかい  できた  後あとで、  snd1=…  の  行ぎょうを  コピー  して  snd2=…とし、  if文ぶんも  コピー  して  異ことなる  キーを  押おすと  異ことなる  音おとが  鳴なる  プログラムを  作成さくせい  させます。  キーコードは  K_Aや  K_Bなどを  使つかわせます。

  

 

跳はね返かえる  ボールの  プログラムを  ベースに  して、

・ 壁かべで  跳はね返かえる  時ときに  音おとが  鳴なる

・ 上下じょうげ  矢印やじるしキーで  速度そくどが  変かわる

と  いう  機能きのうを  追加ついか  した  プログラムを  作つくらせます。

  

・ 進しん度どや  理解りかい度どの  差さが  出でやすいので、  進すすんで  いる  生徒せいとさんには  比較的ひかくてき  自由じゆうに  やらせて  構かまいません。  遅おそい  生徒せいとさんの  フォロー時じには、  あまり  講師こうし側がわが  キー  操作そうさを  手伝てつだい  すぎないように  しましょう。

  

・ サンプル  プログラムの  流ながれを  理解りかい  する。

・ プログラムの  中なかの  数値すうちの  意味いみを  理解りかい  し、  自分じぶんの  思おもった  通とおりの  動うごきを  させられるように  編集へんしゅう  する  ことが  できる。

  

  生徒せいと用ようには、  サンプル  プログラムを  あらかじめ  コンピュータに  入いれて  おきます。