Smalruby: smalruby-editor
Rubyアソシエーション2013年度助成金事業の最終報告

作成者：高尾宏治
作成日：2014/02/28
Smalruby: smalruby-editor / 高尾宏治

1

概要
Rubyアソシエーションの2013年度助成金事業（以下、本事業）において、 「Smalruby（すもうるびー）プロジェクト」（以降、Smalrubyと記述） の一部であるsmalruby-editoｒの開発を行った。
smalruby-editorは、命令ブロックを組み合わせてRubyのプログラムを作成するためのウェブベースのエディタである。
本事業ではsmalruby-editorに対して次の機能を実装した。
• ハードウェア（Arduino）の制御を含む68種類の命令ブロックを組み合わせてRubyのプログラムを作成できる• Rubyのソースコードを直接入力してRubyのプログラムを作成できる• 命令ブロック（40種類以上）と直接入力したRubyのソースコードを相互に変換できる• Windowsのコマンドプロンプトや、Macのターミナル.appを操作することなく、ウェブベースのエディタから直接Rubyのプログラムを実行できる• 作成したRubyのプログラムのセーブやロードができるURL• プロジェクトページ - https://github.com/smalruby/smalruby-editor/• デモサイト（※デモサイトではプログラムを作成・ダウンロードすることはできるが、直接実行することはできない。プログラムを実行する場合はRubyおよびsmalruby-editorのgemをインストールすること）• 車のサンプル - http://smalruby.herokuapp.com/demo/• ハードウェアの制御のサンプル - http://smalruby.herokuapp.com/demo/rgb_led_anode/• RubyGems - http://rubygems.org/gems/smalruby-editor• gem install smalruby-editor• ※MacやLinuxで使う場合は、gemをインストールする前に https://github.com/takaokouji/dxruby_sdl を参考にしてSDL 1.2やSGEなどのdxruby_sdlの依存ライブラリをインストールすること• gemのインストール後、コマンドプロンプトやターミナル.appで「smalruby-editor」コマンドを実行するとウェブブラウザでsmalruby-editorの画面が表示される

本事業に関連して、島根県松江市の中学生にsmalruby-editorを実際に利用してもらいフィードバックを得た。
• ケース1: Ruby.Jr - http://www1.city.matsue.shimane.jp/sangyoushinkou/ruby/rubycity/rubyjr/rubyjr.html• 2013年9月から2014年3月まで、月1回2時間• 中学1年生から3年生14名、高校3年生1名• ケース2:松江市立第一中学校技術家庭科「Rubyプログラミング授業」- http://www1.city.matsue.shimane.jp/shisei/kohokotyo/houdou_teikyou/2014/0410.html• 2014年2月24日 9:00～10:50• 中学3年生の1クラス、約40名

今後• 直接入力したRubyのソースコードから命令ブロックに変換する機能を改良して、変換できる命令ブロック数を増やす• プロジェクトのウェブサイトを充実させ、smalruby-editorなどのSmalrubyの成果物をインストールしやすくする• Scratch(http://scratch.mit.edu/)と同程度にまで命令ブロックの種類を増やし、Scratchのユーザをsmalruby-editorに移行しやすくする

Smalruby: smalruby-editor / 高尾宏治

2

はじめに
本文書では、本事業におけるSmalrubyの成果物について説明する。
Smalrubyは以下から構成される。このうち本事業での開発範囲はsmalruby-editoｒである。以降ではsmalruby-editorの利用例にそって本事業の成果物を説明する。
• 本事業を進める中で島根県松江市の中学生に開発中のsmalruby-editorを利用してもらい、フィードバックを受けることができたので、そのことについても説明する。

ローカルマシン(Raspberry Pi + smalruby-image)
サーバ(PaaS)

ウェブブラウザ作成

作成
smalruby-site

smalruby-editor
実行
作成した
Rubyスクリプト

インターネット

Ruby処理系
smalruby-lib

利用

USB接続smalruby-booksmalruby-installer

Arduinosmalruby-material

Smalruby: smalruby-editor / 高尾宏治

3smalruby-editorのインストール
利用者（主に小学校5年生から中学校2年生までを対象としているため以降は「子どもたち」と記述する）はsmalruby-editorをローカルマシンにインストールする。
smalruby-editorはgemとして提供している。
• 「gem install smalruby-editor」でsmalruby-libも含めてインストール可能 (http://rubygems.org/gems/smalruby-editor)• ただし、Macではsmalruby-libが依存するSDLに関連するライブラリをMacPortsやHomebrewなどを利用してインストールする必要がある。詳細は、smalruby-editorが依存する「dxruby_sdl」gemのプロジェクトページ(https://github.com/takaokouji/dxruby_sdl)を参照すること。

smalruby-editorの動作環境• Microsoft Windows 8.1以降のInternet Explorer 11、Google Chromeの最新版、Firefoxの最新版• Microsoft Windows 7のInternet Explorer 10• Mac OS X 10.8のGoogle Chrome

インストール( Ruby処理系、smalruby-lib、smalruby-editor)

ローカルマシン
子どもたち

ウェブブラウザ

smalrubyeditor
Ruby処理系
smalruby-lib

Smalruby: smalruby-editor / 高尾宏治

4smalruby-editorでのプログラムの作成
1. コマンドプロンプト(Windows)やターミナル.app(Mac OS X)で「smalruby-editor」コマンドを実行してsmalruby-editorを起動する
2. 動かしたいキャラクタを選ぶ
3. 命令ブロックのジャンルを選ぶ
4. 命令ブロックを選ぶ
5. 命令ブロックを組み合わせてプログラムを作る
6. プログラムを実行する• ローカルマシンでsmalruby-editorを実行した場合のみ画面右上に「実行」ボタンが表示され、作成したプログラムを直接実行できる• Heroku上で動作させているsmalruby-editorのデモサイトでは作成したプログラムをダウンロードすることしかできない。また、ダウンロードしたプログラムを実行するにはRuby処理系、smalruby-libのインストールが必要になる。

ローカルマシン
1.起動

ウェブブラウザ

smalruby-editor
6.実行

2.キャラクターを選ぶ

作成した
Rubyスクリプト

Ruby処理系

3.ジャンルを選ぶ

smalruby-lib
4.命令ブロック を選ぶ
5.命令ブロック を組み合わせる

Smalruby: smalruby-editor / 高尾宏治

4smalruby-editorでのプログラムの直接入力
命令ブロックを使ってプログラムを作成することに慣れた子どもたちのためにRubyのプログラムを直接入力するためのインタフェースを提供している• 以下の理由から子どもたちにとってプログラムを直接入力できる必要があると考えている• 命令ブロックでのプログラム作成は初心者に易しい反面、慣れてくると飽きてしまう子どもたちがいた• 命令ブロックとして用意されていないRubyの命令(putsなど)を使えるようにする

putsに対応する命令ブロックはないが、対応していないプログラムも「文」ブロックとして操作できる

Smalruby: smalruby-editor / 高尾宏治

6smalruby-editorのブロック一覧（６８種類）
動き（移動、回転）見た目音( )歩動かす[ ]と言う[▼]の音を鳴らす

時計回りに( )度回す

イベント

制御

調べる

演算

アクチュエータ、センサー

まずは( )秒待つ

条件:[▼]に触れた

変数:( ) + ( )ハードウェアを準備する

表示する[▼]キーが押された時( )回繰り返す

条件:[▼]キーが押された

変数:( ) - ( )LED[▼ピン]をオンにする

半時計回りに( )度回す

隠す

このスプライトがクリックされたときずっと

条件:マウスが押された

変数:( ) * ( )LED[▼ピン]をオフにする( )度に向ける

消滅する[▼キャラクター]にぶつかったときもし< >なら

変数:マウスのx座標

変数:( ) / ( )RGB LED[▼]コモン[▼]を[色]にする

マウスのポインターへ向ける

もし< >なら～でなければ変数:マウスのy座標

変数:( )から( )までの乱数

RGB LED[▼]コモン[▼]をオフにする

x座標を( )、y座標を( )にする

< >まで待つ

変数:[▼] of [▼]条件:[ ] < [ ]センサー[▼ピン]

x座標を( )ずつ変える< >まで繰り返す

変数:現在の[▼]条件:[ ] = [ ]センサー[▼ピン]が変化したときx座標を( )にする

繰り返しから脱出する

条件:[ ] > [ ]y座標を( )ずつ変える

次の繰り返しにジャンプする

条件:< > かつ < >y座標を( )にする

現在の繰り返しをやり直す

条件:< > または < >もし端に着いたら、跳ね返る

1フレーム待つ

条件:< > ではない

変数:x座標変数:[ ] と [ ]変数:y座標変数:letter ( ) of [ ]変数:向き変数:[ ]の長さ

端に着いた

変数:( )を( )で割った余り跳ね返る

変数:( )を丸める[▼キャラクター]へ向ける

変数:[▼] of ( )17ブロック
凡例：（ ） ・・・ 数値

4ブロック[ ] ・・・ 文字

1ブロック

4ブロック

[▼] ・・・ ドロップダウンリスト< > ・・・ 変数

11ブロック

7ブロック

17ブロック7ブロック

青字／黒字・・・ 命令ブロックとRubyのソースコードの相互変換対応／未対応

Smalruby: smalruby-editor / 高尾宏治

7smalruby-editorの活用事例
本事業に関連して、島根県松江市の中学生にsmalruby-editorを実際に利用してもらいフィードバックを得た。
ケース1: Ruby.Jr - http://www1.city.matsue.shimane.jp/sangyoushinkou/ruby/rubycity/rubyjr/rubyjr.html• 2013年9月から2014年3月まで、月1回 18:00～20:00、合計7回• 中学1年生から3年生14名、高校3年生1名が継続して受講• smalruby-editorのRubyのソースコードを直接入力してRubyのプログラムを作成する機能を利用• 毎回異なるゲームの作成を通じてRubyを学ぶ。最終回は成果物の発表会• プログラムをセーブするディレクトリを固定にしたり、プログラムをセーブするときにシンタックスエラーをチェックする機能を追加して、なるべくプログラムの作成に注力できるようにした• キーボードのタイピング速度が遅い子がいたり、タイピングミスによりエラーが発生するため、4人の子供に対して1人の割合で技術者が必要な状態であった。あらためてプログラムの学び始めた段階において命令ブロックの必要性を感じたケース2:松江市立第一中学校技術家庭科「Rubyプログラミング授業」http://www1.city.matsue.shimane.jp/shisei/kohokotyo/houdou_teikyou/2014/0410.html• 2014年2月24日 9:00～10:50• 中学3年生の1クラス、約40名• smalruby-editorの命令ブロックを組み合わせてRubyのプログラムを作成できる機能、直接Rubyのプログラムを実行できる機能を利用• smalruby-editorを活用したRubyのプログラミングを学ぶ実証授業• 学習指導要領に則った授業となるように、プログラムによる計測・制御、つまりLED、モーター、各種センサなどのハードウェアを制御できるようにsmalruby-editorとsmalruby-libの改良を行った。smalruby-editorをインストールしたコンピュータ、Arduino、ブレッドボードやLED、距離センサを接続して実証授業を行った。
• smalruby-editorの開発者から授業の担当教員にsmalruby-editorの基本的な使い方を説明した。
• その後、担当教員が当日の資料や課題などを作成した。このときsmalruby-editorの操作が簡単であるため、技術者のサポートはまったく必要なかった。
• 授業当日もsmalruby-editorなどの不具合のために技術者がサポートする以外は、担当教員1人で授業を進めることができた。
• この実証授業の良好な結果を受けて、島根県松江市ではsmalruby-editorの利用を前提とした市内の17校の中学校での授業実施に向けて、前向きに検討が進むものと思われる。

Smalruby: smalruby-editor / 高尾宏治

実際に実証授業で使ったハードウェア。
Arduino UNO、ブレッドボード、LED、RGB LED、距離センサ。生徒は、LEDを光らせること、距離センサと手との距離に応じて動作が変わることなどを学んだ。

8

今後のスケジュール
smalruby-editorの今後の開発スケジュール• 2014年3月～2015年3月• 直接入力したRubyのソースコードから命令ブロックに変換する機能を改良して、変換できる命令ブロック数を増やす• プロジェクトのウェブサイトを充実させ、smalruby-editorなどのSmalrubyの成果物をインストールしやすくする• Scratch(http://scratch.mit.edu/)と同程度にまで命令ブロックの種類を増やし、Scratchのユーザをsmalruby-editorに移行しやすくする

今後のSmalrubyプロジェクトのロードマップ
2015年度、島根県松江市を拠点としたRubyのプログラミング学習塾の運営を念頭に、smalruby-editorを中心とした学習教材の開発を進めていく。
また、島根県松江市内の小・中学校での実証授業も引き続き計画・実施していく。
• 2014年4月～9月• smalruby-editor + smalruby-lib から操作可能なハードウェア(smalruby-material)の開発• smalruby-editor + smalruby-libを含んだRaspberry PiのOSイメージ(smalruby-image)の提供• 島根県松江市内の小学校での実証実験• 島根県松江市内の中学校の技術家庭科の教員向けの研修会の実施• 2014年10月～2015年3月• Smalrubyを活用したRubyプログラミング入門書(smalruby-book)の作成• http://scratch.mit.edu/ のようなSmalrubyを利用したプログラムを公開・改修・再配布するサイト(smalruby-site)の構築• 島根県松江市内の中学校での実証実験• 2014年度は5校、2015年度は全校(17校)を目標とする

試作段階のsmalruby-editor/smalruby-libで制御できる中学校向けの2WD車の教材。Rubyのプログラムで各種センサの情報を使って、左右のモーターを制御できる。

Smalruby: smalruby-editor / 高尾宏治

9